{"maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"keywords":["material components","material design","checkbox"],"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"},"description":"The Material Components for the web checkbox component","readme":"","repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"license":"MIT","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"versions":{"0.1.0":{"name":"@material/checkbox","version":"0.1.0","license":"Apache-2.0","_id":"@material/checkbox@0.1.0","maintainers":[{"name":"anonymous","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":"0dc1dedc08a992b89d6ef891625af616ed095ad4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.1.0.tgz","integrity":"sha512-Vb4S/9zEW5Gb0xjjhmTI/21ke/5LPej0n5CqFIfURd1N3lkMJeMoXcDxY2YFE5Sa3Y569hm/VZ01+gLkMrJaCA==","signatures":[{"sig":"MEUCIGE6zwNwaL5lQcaA6ttRNSP6/rnToyYDh9wFfL8gvKI9AiEApufSsSf5VjP0v2dlmQnHL8M8POxu48K2xXdxiZhNecs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"0dc1dedc08a992b89d6ef891625af616ed095ad4","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/animation":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.1.0.tgz_1481824318312_0.9492932816501707","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"@material/checkbox","version":"0.1.1","license":"Apache-2.0","_id":"@material/checkbox@0.1.1","maintainers":[{"name":"anonymous","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":"4fbe54da6b743fa7095e4653712a39f14e5bee2c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.1.1.tgz","integrity":"sha512-M8XHmbDxmyeV5ioVbBCEt+bNFxLvXoiTdNGjzPd04H0w2+7uv4+mbDZV18ySRIT+IvVXMzjvnJ4s8AGlBXNdYw==","signatures":[{"sig":"MEUCIQDaXl1RaUQQavf7/kAZqk2CuP3DrlahWTSVfSuduzJrOQIgTLeU4VPBlLy21XlTOIw0imE2WUiegkz0An2QoK16Q78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"4fbe54da6b743fa7095e4653712a39f14e5bee2c","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/animation":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.1.1.tgz_1483977433883_0.8022605904843658","host":"packages-18-east.internal.npmjs.com"}},"0.1.2":{"name":"@material/checkbox","version":"0.1.2","license":"Apache-2.0","_id":"@material/checkbox@0.1.2","maintainers":[{"name":"anonymous","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":"cdda05eb4dac9f09515c8782fdcc98af0b2a11c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.1.2.tgz","integrity":"sha512-9krejtI9G/OUPNO/4iRDWEO911CDllxS35wksAIgvayiioRB4sn17MjmgojmRkYA66rsk5Tm6Xf2ZAeN/QwVRg==","signatures":[{"sig":"MEYCIQD7xaQk4D8T4liNZq8hCmTcbkN94ga1RSM8cxGvl729AQIhAJMPKYxJmBSHJ5s4EjWJwALfkuSfkE1A5hl+2hh0DP+b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"cdda05eb4dac9f09515c8782fdcc98af0b2a11c9","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/animation":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.1.2.tgz_1485190173773_0.039480309234932065","host":"packages-12-west.internal.npmjs.com"}},"0.2.0":{"name":"@material/checkbox","version":"0.2.0","license":"Apache-2.0","_id":"@material/checkbox@0.2.0","maintainers":[{"name":"anonymous","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":"4b21bc7f27201d786d5221430551d11d7c70dc92","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.2.0.tgz","integrity":"sha512-QJWTOUs76Pi8FMrmV7qpCmlpRIADAidu03plXhaUC9duMWY3w790jwhfkZMvzL0wgFl7VVfhlBp5/Eqvr+KagQ==","signatures":[{"sig":"MEYCIQDyY8meQyzTW3/3pNb2b6OKr+GQP7SLOHrRwd344Ho0TAIhAI1gQKPXfBcCh+S9+jrpz/U+TJimUy3wIgNEdAoCmnS5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"4b21bc7f27201d786d5221430551d11d7c70dc92","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/ripple":"^0.2.0","@material/animation":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.2.0.tgz_1486407880016_0.49463678407482803","host":"packages-12-west.internal.npmjs.com"}},"0.2.1":{"name":"@material/checkbox","version":"0.2.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.2.1","maintainers":[{"name":"anonymous","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":"5d9309abe3e61f95ef52bd225b3718dd2bfa87a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.2.1.tgz","integrity":"sha512-6oyrt/VPkapwb39LjLdwA1ZS00lCwT5te/yHQcFRY6ujFusQIVW8cTiJJ1qFKnnZEnyXTK1GoWHODwZEVEjbWg==","signatures":[{"sig":"MEUCICamZlzKCvBD9x/ZsYQhGYbSUZc1eYwCOMhGV8kvr8JPAiEA6RcjRorVT1wLrRj2K+xlhrYYVdAp3c0ZGqliDSm0W+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"5d9309abe3e61f95ef52bd225b3718dd2bfa87a2","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/ripple":"^0.3.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.2.1.tgz_1487698051860_0.342070902697742","host":"packages-12-west.internal.npmjs.com"}},"0.2.2":{"name":"@material/checkbox","version":"0.2.2","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.2.2","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"643b5d9453c1684a41812c13e8bc9070cb0dac75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.2.2.tgz","integrity":"sha512-DaP0L83w6doNedUpmFGzDsXBKwp6zxFRmYZRAeeWqXoERWocUEsdav3U/sjC2j+o4ws7xFSIWXlmey2HD4AAgw==","signatures":[{"sig":"MEUCIQC1bTKKA0/b49gZaegQKv7ijEVki4e16plLAkDmNOGtagIgTGFj+yUEo9NuYlc8ru5Jz4R4LsB9F9eS7W0KGKzRxyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"643b5d9453c1684a41812c13e8bc9070cb0dac75","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/ripple":"^0.4.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.2.2.tgz_1488819729976_0.44198808865621686","host":"packages-12-west.internal.npmjs.com"}},"0.2.3":{"name":"@material/checkbox","version":"0.2.3","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.2.3","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"e552ce675c1796b510dc4756ff6d573fcb21457f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.2.3.tgz","integrity":"sha512-PobnXWQb4EveuKV1/DoceAu1PZvJtELN10qN9Vr8w6qpMdq9TvfKaIYfIv1qaTvJ4V9dUCqwDKyb3DA+PGRvuQ==","signatures":[{"sig":"MEUCIBXXA25Fmu9aXUEvVBgYSZmR67J2KBHzeV0s5QghVucJAiEAqhfUs83gpl+3pRczJBp447n9jGMhn8oskdCOsKWtV+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"e552ce675c1796b510dc4756ff6d573fcb21457f","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/ripple":"^0.5.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.2.3.tgz_1491233277849_0.44526031520217657","host":"packages-12-west.internal.npmjs.com"}},"0.3.0":{"name":"@material/checkbox","version":"0.3.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.0","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"4c93f6e55d29ae8f5a9f2d84bf416ba646befaec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.0.tgz","integrity":"sha512-YHe9uGTJQJwM//VXqhwWUqscnM9sKagPVD+nXFowusC4ipqxnbLSUsxtrNaNxawLivOuAw7zEeyosfPks58fMg==","signatures":[{"sig":"MEUCIFn8+AK3DzYntqMRVGgp81u4I64hyKOIJ4GtfAjGOTBzAiEAg6+Ox2Fj81q5c5UHzy4O/FiY6lnxqqTQAACveA2QxlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"4c93f6e55d29ae8f5a9f2d84bf416ba646befaec","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/ripple":"^0.5.0","@material/animation":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.0.tgz_1492443784717_0.7925300661008805","host":"packages-12-west.internal.npmjs.com"}},"0.3.1":{"name":"@material/checkbox","version":"0.3.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.1","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"60b53d836d213575774a5f296d40cf5e01d7f6ba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.1.tgz","integrity":"sha512-+Og+bvpGq2dvt+unjYAh/Z8x4y4+xTMc/aBTFWmY7s3aSC2RyBBgzMNC9McQpVm7apoX6TzVTQvnYE6V/0qaAA==","signatures":[{"sig":"MEUCIQCoD7a9Bb6itBzjwANY8PFz2FqA6hBxgEdfgJqlbWPx+QIgZ3rivy0UV5oQqjyNKeiIJsYWsEdn0uLGMqoljGYTZdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"60b53d836d213575774a5f296d40cf5e01d7f6ba","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/ripple":"^0.5.1","@material/animation":"^0.1.5"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.1.tgz_1492527074667_0.6466059132944793","host":"packages-12-west.internal.npmjs.com"}},"0.3.2":{"name":"@material/checkbox","version":"0.3.2","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.2","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"17f7334f034144a664928ca43c11afbdb7dc563e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.2.tgz","integrity":"sha512-52tlwhiDacds1jcoD5xO4J3UZ0WnQ3TeJBYTvjP0WGrakJaw6A3oycf2UbhPnIYBH1/66IU6ef+E+UvCIeVfKA==","signatures":[{"sig":"MEQCIAWuLjnTIG0fXxhg9vwGerV0qfJSHAMvlPh+MyNljtMXAiBM449Stav1+bM5IfE5wmyVOY7rp/gEUV6pF5OJKCHjgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"17f7334f034144a664928ca43c11afbdb7dc563e","scripts":{},"_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/ripple":"^0.6.0","@material/animation":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.2.tgz_1493653383911_0.523208272177726","host":"packages-12-west.internal.npmjs.com"}},"0.3.3":{"name":"@material/checkbox","version":"0.3.3","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.3","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"137024c49366b01ef2c7db021bafb54837ec802c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.3.tgz","integrity":"sha512-/o99jvu6KLPNCYhO3/TXRZwq8ekI/+pbM1uwt9tDK1zXR29CA769TQ8eAA6ni9/sHyG66RA3natbunwtux7Qzw==","signatures":[{"sig":"MEYCIQCbYGd+eaozrxEtM3Wi8Rx5++Qcdk1w66q8uvAStcaa9QIhANeZU7oyHXfZcShD7w3XBiC+PgxXwbP583m57A544+T9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"137024c49366b01ef2c7db021bafb54837ec802c","scripts":{},"_npmUser":{"name":"anonymous","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/ripple":"^0.6.1","@material/animation":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.3.tgz_1494865558757_0.6815603352151811","host":"packages-12-west.internal.npmjs.com"}},"0.3.4":{"name":"@material/checkbox","version":"0.3.4","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.4","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"14778edf28387e3521a84d54d5c0586ed43df5c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.4.tgz","integrity":"sha512-UZD3ftw1OsPxMZW/GhDMTnCapDuoPO88uLowMZAkVbN1O5VTlhsy5PE8kfuYYvdnFy7RoOZyzPd/NjrcnCwkAw==","signatures":[{"sig":"MEUCIH3ff/kktJIDggS5UZpHYcDgZX5EWyPf7BtxtxwALzwMAiEA/V8Rtu7PtI0ZGWDhEHj1sB6e7AteuVbeZIhu005qSgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"14778edf28387e3521a84d54d5c0586ed43df5c8","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/ripple":"^0.6.1","@material/animation":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.4.tgz_1495031296838_0.023557156324386597","host":"packages-18-east.internal.npmjs.com"}},"0.3.5":{"name":"@material/checkbox","version":"0.3.5","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.5","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"6de81f6fe82a725b1530d5fc8939e786c6b07c44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.5.tgz","integrity":"sha512-uEU4+0O0T3AeIkYbHfaQOimhMCxAZgzz8RHV9AX4nyhSlf5JnjNT4d8VkhMht37hLE9Jm/Bch0XDnVFFt2fcaA==","signatures":[{"sig":"MEUCIQCYe6sDRO3H0pvdKz7CwngeozrJMsbckjJL26tusDxbXAIgA8wglk+bWBobA3dIhtI0kAaD8OrkeGcMs1BV+F9hPFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"6de81f6fe82a725b1530d5fc8939e786c6b07c44","scripts":{},"_npmUser":{"name":"anonymous","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/ripple":"^0.6.2","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.5.tgz_1496171074604_0.11120268539525568","host":"s3://npm-registry-packages"}},"0.3.6":{"name":"@material/checkbox","version":"0.3.6","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.6","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"4f38b8f4a1f444bc7b86b7f5abfb3ecb0a23e44c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.6.tgz","integrity":"sha512-lf+3qzzO20z0dvWZY5Sgxsdly4yxxq0w7jXkOsNa64ql6SC6CheFzjPihHgNs12p3TU+8bVntQJ6EJFrSXtiHA==","signatures":[{"sig":"MEQCIE/6hW3ZT5pcngyDmmAQ17c5Dq3eA7395mZZWjQWeqHcAiAH/QkyzdYAb0QP58/sgVSvGS7iNwehDV9CAzo0qeNQeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/rtl":"^0.1.5","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/ripple":"^0.6.2","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.6.tgz_1497282795451_0.5955356871709228","host":"s3://npm-registry-packages"}},"0.3.7":{"name":"@material/checkbox","version":"0.3.7","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.3.7","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"512cb48641f0c9d69af644550e4edefae7294aac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.3.7.tgz","integrity":"sha512-V53cearoD5FGctPAnMoJbZBc7g5SxPk5p3aUjQ6GbcDN8mtJeBDDHlBQshF68tl4W8I0BMBkrhZnPiFsAGL9vA==","signatures":[{"sig":"MEUCIGmADCQkNB2YYkPgZn0fqMnf65ZUsEY/xXyhVTMoMC74AiEA1BkjDzoxciWX4hWR9d8LACuy9bgaog/aLkQFoi/Nl7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"512cb48641f0c9d69af644550e4edefae7294aac","scripts":{},"_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/ripple":"^0.7.0","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.3.7.tgz_1498493449938_0.597627941519022","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@material/checkbox","version":"0.4.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"4e49e48e928e0d9b5e88abc288b300483a54fd74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.0.tgz","integrity":"sha512-rZEaKtSpZxaqLoWNBeiVaD9SaCXVrvZ9FXeb3pQSGx9dmQ3iHfTyHg9olCqfg80f0ct7E9bHPgChHoQ9HMwocg==","signatures":[{"sig":"MEUCIAGaKIXlZw/WhersizluKfrs7zbBieOyU3IIqX2A1VzCAiEAs3rsb8371izXHiNKJk/c4cWNIlY2k8BlfL7kfj0L+i4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"4e49e48e928e0d9b5e88abc288b300483a54fd74","scripts":{},"_npmUser":{"name":"anonymous","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/ripple":"^0.8.0","@material/animation":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.0.tgz_1499702327739_0.44769336469471455","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@material/checkbox","version":"0.4.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.1","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"7c1cc0bfb1035da01d18681b3ea9b09db9fa0b66","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.1.tgz","integrity":"sha512-YMsIDkeu1fEtxjZ820UDm6BK1QOfo/DgBnLQGRj7CpkuZ7pT+pk5QFy2gJQqrc/qMXv/VlavIZEleIEuXj4ZxQ==","signatures":[{"sig":"MEUCIQDMOZtLLzxCaOAZi5eFd+Fn8Kz9gM6qnIcKC8f2UOD0ewIgRszscRWySm2eJWu5TERVBMOx9iL1WUejvMuShNF2tHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"7c1cc0bfb1035da01d18681b3ea9b09db9fa0b66","scripts":{},"_npmUser":{"name":"anonymous","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/ripple":"^0.8.1","@material/animation":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.1.tgz_1500911353868_0.6840767958201468","host":"s3://npm-registry-packages"}},"0.4.2":{"name":"@material/checkbox","version":"0.4.2","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.2","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"50c343daf0ba2265562dd8832b4f708a54b4dac4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.2.tgz","integrity":"sha512-kmDT6z3t8v66J5ku3s7Ty5gyudvB8aALC1+f+/aC2YkpxOUnaf8GLjpetXtzyaeD1k6Yk8D4XtXHDAd3IXZqzw==","signatures":[{"sig":"MEYCIQDdeSG2Twak8n980Kmfclf1En3mefuXsH/iiHXug6ufXAIhAL2rLGKBQ0HiChV2F6Fqke2GWwi51gIm4Xl6YZPb/+t3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"50c343daf0ba2265562dd8832b4f708a54b4dac4","scripts":{},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/ripple":"^0.8.2","@material/animation":"^0.3.1"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.2.tgz_1502138906269_0.8087521234992892","host":"s3://npm-registry-packages"}},"0.4.3":{"name":"@material/checkbox","version":"0.4.3","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.3","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"ae26289298a06df029d355570272ee202cfee5c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.3.tgz","integrity":"sha512-zr3/oqJnlvQSxJGZyxMtq2ZjjSeBxSQXlEVw9pez1CZ/UGbPeRiDOHggEeh+E+h9XoHRZe8T0RadXYT3XY1zxA==","signatures":[{"sig":"MEYCIQDGCcQE0pUJIoQxqGcn4PJkGZXoSvu+1pJH6BTWmtx2GQIhAIdrED8PBl5FLB6z2FCOJR0n3pQDhLLm+g/iauNAToh4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/ripple":"^0.8.3","@material/animation":"^0.3.1","@material/selection-control":"^0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.3.tgz_1503336468127_0.15546026290394366","host":"s3://npm-registry-packages"}},"0.4.4":{"name":"@material/checkbox","version":"0.4.4","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.4","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"fae213bf6eb862a229b6ac786a4014d232d1513b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.4.tgz","integrity":"sha512-gMXBmofRIF7Iis46exMPyFNDNIZYfwiaGeaMQzQl5oh+98xjefINrRbwALxifrqv7SspNs3C34TyJfvCyQr9FQ==","signatures":[{"sig":"MEYCIQCDiPy8lAa80Xq0g7SXXXegfVRW37Lh7OyXkhQxd/zqswIhAK1X71EU1mHgFqM2/QsIYKlZFv7foycGTJr3i7/H3Tvd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/ripple":"^0.8.4","@material/animation":"^0.3.1","@material/selection-control":"^0.0.2"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.4.tgz_1503586002955_0.6658939688932151","host":"s3://npm-registry-packages"}},"0.4.5":{"name":"@material/checkbox","version":"0.4.5","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.5","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"dd6e792ce34c063ff1c0cda3881c47785210eeb6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.5.tgz","integrity":"sha512-1c9TM6F4LYx6w3gONKpAjxbPLdr2gQt+AkbxKou69yYNN1MrFEWocanJxMKQG/xvh+w8v/HnMWJYy59X5FY1sw==","signatures":[{"sig":"MEQCIEVQcPAliYk+i9TYV4HZ5u2FyFVp8J0T9YniO0c/kpwpAiBKUSgaZVE+jp7wFEyEZuAfZ20jDHZI7mDhoI4o0b7DFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/ripple":"^0.8.5","@material/animation":"^0.3.1","@material/selection-control":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.5.tgz_1503681652933_0.09812311315909028","host":"s3://npm-registry-packages"}},"0.4.6":{"name":"@material/checkbox","version":"0.4.6","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.6","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","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":"bb609d4b852c278cb06ba9924eecbdadda55f4a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.6.tgz","integrity":"sha512-bk0JMdLCR0EnFdI6fvh7C5cjxSUkLDGjx4aJfWg0gTKWaJB7kn0EIhvr15T+l7S/o6MxbaudbyluGOOD9anwRQ==","signatures":[{"sig":"MEQCIEFXViqdAU1zRpQ2qwqSAxr2wClUv2FJm5SVBsDu+O3dAiBt/QYIeQvNkfKXV0C8WeyT5jmfMb2Nnqrc5GQ2CMF7BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"bb609d4b852c278cb06ba9924eecbdadda55f4a3","scripts":{},"_npmUser":{"name":"anonymous","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/ripple":"^0.8.6","@material/animation":"^0.3.1","@material/selection-control":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.6.tgz_1504642564428_0.9010006149765104","host":"s3://npm-registry-packages"}},"0.4.7":{"name":"@material/checkbox","version":"0.4.7","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.7","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","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":"451a84d438ba6f98ecd0e5eb7b8b94b91bfc0c8e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.7.tgz","integrity":"sha512-ZPqXJvynQaA74fETJvSqT9cyzl6hbFwiMkDxd0F15OlCN7sJ1D3/CH13C8bQ0wc3yRIUKcrztWiDQ5lnJLrcwQ==","signatures":[{"sig":"MEUCIDXjb7pKfTzgHIoDDe0lOr1KtycV+nuMvL8ZAmDy9rXZAiEA/vI8zMhj5wQ5rgdLXDQ92LPjWiieK5D1fXNl8nZ07PI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/ripple":"^0.8.7","@material/animation":"^0.4.0","@material/selection-control":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.7.tgz_1505759737744_0.8753678840585053","host":"s3://npm-registry-packages"}},"0.4.8":{"name":"@material/checkbox","version":"0.4.8","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.4.8","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","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":"8ecb12a075bc362502174fadf33096f5877c5110","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.4.8.tgz","integrity":"sha512-y/peFh9T0jWkM8+zDZX1zaFQeJsm+x993D4N8eCT/Cbt3zZK2C8MSROqOrxkN2LsnBbk213e8tGpFMP84oBQtQ==","signatures":[{"sig":"MEQCIBtBbrAeGzW+TJePEKn3/1JQM3x7dBfeWrKLS5cl8WbGAiAYh2np9HSqabWydLUKLbJnIj3zjIHJcCs5rMgy9J7sxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"8ecb12a075bc362502174fadf33096f5877c5110","scripts":{},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/ripple":"^0.8.8","@material/animation":"^0.4.1","@material/selection-control":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.4.8.tgz_1506978701654_0.08035731571726501","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/checkbox","version":"0.23.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.23.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","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":"c7f8f7af6e1e71e473d25ad8f9e7566a91e1ec11","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.23.0.tgz","integrity":"sha512-rxsDwYu6i4Rkt9w1EBisqXN7wMPTMtaHHlLXb7Ab+0rZzx+kjO2FqH/4wmsvg7G5QIGcIqD3OFFtjci9IX4Tkw==","signatures":[{"sig":"MEUCIQDVtTc6xfhlV2hzmSEs4be5Zy4fjep6K1cwFbiKK356SgIgOmjwv1/a4Bb65a62PWRUFstb12OKTfIQEnUUKoSPMTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/ripple":"^0.23.0","@material/animation":"^0.4.1","@material/selection-control":"^0.23.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.23.0.tgz_1508187734959_0.7406218065880239","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/checkbox","version":"0.24.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.24.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","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":"a988668b62f24541174e9efc3917da1c770f9d33","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.24.0.tgz","integrity":"sha512-tY/zBO9VGbwZ/qehOX2c+t20skw5zdhX6S1JtBeSl1hH7q/hWykm7hk9jRpySzc86smJh/5mi9URckdyY5Yj2A==","signatures":[{"sig":"MEQCIDZpFQFST33WdGt93uSqfMZwNZrMU95OPGBEojyPKujrAiAOE/GBzFH9dF167xunvQgW+IvLCrnqc8zhPGldPg0SBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/ripple":"^0.24.0","@material/animation":"^0.4.1","@material/selection-control":"^0.24.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.24.0.tgz_1509390681087_0.8527439944446087","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/checkbox","version":"0.25.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.25.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","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":"43e8118c1c197c88f8bff9a9ed008c8ded3add6e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.25.0.tgz","integrity":"sha512-7hqtKhm0kZ85Bd8XRFafiNlMl/YKkR6dYz/ZmtSHQQtUqPjsCM7wn7Z0lPwcXvhF1TIMReTM5QC/9iUtrKaJuw==","signatures":[{"sig":"MEQCIAD+8Pvcgy1AMDVX4uaB6DFkPFkrQRNB4X+PitrvdK+nAiB+7aj7hJj5Yyg/WCqrN27FzsaM0g5GjcYVX5HhJjAH4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/ripple":"^0.25.0","@material/animation":"^0.25.0","@material/selection-control":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.25.0.tgz_1510603342978_0.1673480833414942","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/checkbox","version":"0.26.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.26.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","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":"ca32292d279890f8cd8a4fbb0f235e1c7b7df1e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.26.0.tgz","integrity":"sha512-uRBJbM/TF7BT7ipdPOsaCg9QhSKJqoxy5s9DVTPNZbp41T7T0BWE4gACIj2fg8xnd+tVQwedSiKFiDvwJS627Q==","signatures":[{"sig":"MEYCIQCRr6cpPO9MDaHM7wHPPFjGF0y7H7UTDKuthr+rrj3WaQIhAIiB+k4bV54nDT1uWWj6eY/wLkL66ZBecj6dJ8D83LPk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/ripple":"^0.26.0","@material/animation":"^0.25.0","@material/selection-control":"^0.26.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.26.0.tgz_1511821585350_0.24016468110494316","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/checkbox","version":"0.27.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.27.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","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":"5fb1e2646bffc793828a614d2e0010f5263c050d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.27.0.tgz","integrity":"sha512-/tZ19dSHEN/oRI33m1EV5cvXjsKChjBDXNkOCpEbanMVzTzYTOPnNWO96veB++wNk4sKc4qCEoDFoklo+ip21w==","signatures":[{"sig":"MEQCIFwWtSyxmjvrQZI4Ktqo9Zn3ejk8PkCFhmoBtydEcByNAiBVi8hC5YZPq/qs7dvbcvkPHP8Q8yshs3CLEAqu+g9QsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/ripple":"^0.27.0","@material/animation":"^0.25.0","@material/selection-control":"^0.27.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.27.0.tgz_1513020927838_0.9060099602211267","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/checkbox","version":"0.28.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.28.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","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":"57f8399bbf581ec9fbc8eba618ae93b6cc7a21f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.28.0.tgz","integrity":"sha512-bVTQMhcHt0tJYu/mGKEaDo6+sP9iYU4v1mR/emyz/sgagP14jGC+Cp/ANiCnbP2uFsRniiL046TyKek8wVdzOQ==","signatures":[{"sig":"MEUCIQD8amNboT3xidIP4Y59McZVMHNWJCKTvO/2jQaiAOqCkgIgAeNrpbNFdBqVDb40MSa9gj8nTcPkXree8Y2i3WD/mcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/ripple":"^0.28.0","@material/animation":"^0.25.0","@material/selection-control":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.28.0.tgz_1515437709274_0.96883379900828","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/checkbox","version":"0.29.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.29.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","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":"2ccd8cd30fc61cbd172a28001d666a503da58eb5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.29.0.tgz","integrity":"sha512-PStlwlyRBcY8knFraYU4kWeKyJIS0JccSFbmWC+4853hkSIgyUieHLSWMv5giFFKZtnAPYJjbyPF0mxPrmeTNA==","signatures":[{"sig":"MEUCIEM4KxmilEtPma2cRP+VuJK1Yqqy9SVUludSrek9GzSlAiEA0ex2Xse29bIZuqEhIeKKoFtK8uGocfbu8+Vq7YVsNk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.29.0","@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/ripple":"^0.29.0","@material/animation":"^0.25.0","@material/selection-control":"^0.29.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.29.0.tgz_1516645855910_0.8955079403240234","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/checkbox","version":"0.30.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.30.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","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":"623b7a66215ab0029640b3905754d8c07ea3755f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.30.0.tgz","integrity":"sha512-vlLoZRIsWokg0moD3VA2W9HJ2EO+/ndzknWRJVkhoF5LV3y2GLqOhshDlLNKdEGIOT9TvrYXee0lKe02c/U6+Q==","signatures":[{"sig":"MEYCIQDK7xKU81SC4RFj5pH7KbWBSYN9WnUjbYMJrx+4DWR1YAIhAKWHMTW3g16d3JPtVoXfn+m0IguRK2SDpf/BOo5C20z0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/ripple":"^0.30.0","@material/animation":"^0.25.0","@material/selection-control":"^0.30.0"},"_npmOperationalInternal":{"tmp":"tmp/checkbox-0.30.0.tgz_1517868150454_0.2665745283011347","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/checkbox","version":"0.31.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.31.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa779441d6bc02b962f7372e0aa0f7789e358f75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.31.0.tgz","fileCount":15,"integrity":"sha512-ZJPrdSu0fCyQL/6862KBaOr3h9sFT6K3YJihe3yoMV9jTu1IMFXLjI4UsKvsvRJH9+/Z9hVg8gbY6opw1rdshQ==","signatures":[{"sig":"MEUCIQC5Jt6HBLhEzsX6K2gUxCw3MhZNNeiTLZq6XmMNAX0STwIgYSfuZ1R70QfZs5vgxSdRvi5HKjofOMaVvRmkuxCXiAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231237},"main":"index.js","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.0.0","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/ripple":"^0.31.0","@material/animation":"^0.25.0","@material/selection-control":"^0.31.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.31.0_1519150978013_0.7841467334761332","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/checkbox","version":"0.32.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.32.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ececf3cf4c49605063211836148278e026591cf0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.32.0.tgz","fileCount":15,"integrity":"sha512-Rc6sidCCsc+wyktwd6KhNqAt14H6zSEarwLnvqCaYLv/Ml+lqg2SjQ3mg9rRKt1JREaN7G9BGKQKAnB//OMY4g==","signatures":[{"sig":"MEUCIGhP1OxgpsdIq3aTQJf2pOV0TtIOh55Cab8c19L02YsQAiEAtpXfnlyDHUpPnR9Rk21t6E0u8oimZBMj374zHcQhCGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227900},"main":"index.js","_npmUser":{"name":"anonymous","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/ripple":"^0.32.0","@material/animation":"^0.25.0","@material/selection-control":"^0.32.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.32.0_1520287721986_0.26147251414050277","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/checkbox","version":"0.33.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.33.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cdf9d261c0cd493a3daceb31a476cf62b9f23b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.33.0.tgz","fileCount":15,"integrity":"sha512-39feVXsifCvydKeHWZrJRKnY1AG1rxZ8Puc6KeqmAHRElJ5j/hqOHw8SZCfRMnCcxnukWOiISkDnrfzIo2TDMw==","signatures":[{"sig":"MEQCIBps8ZoLz5w04X1mYXcpFaNZ8uHTGKGKzaHxMI+6WhXBAiA2rnoFrFn+ycgzCvFDftCyuGEZrRTFleOg9K++Vqpzfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230206},"main":"index.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/ripple":"^0.33.0","@material/animation":"^0.25.0","@material/selection-control":"^0.33.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.33.0_1521477597460_0.2811938899251032","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/checkbox","version":"0.34.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.34.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dd04fed04a65e8999e9af51d531295948141eb4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.34.0.tgz","fileCount":15,"integrity":"sha512-FQZNivJ+BfF0tf4bctMqxaiAo3E2Sq8PQQZgnTBgWOU8aCg5aP16vkeVagCqInDy6T0DD2VCN04sQZjg4pzOOw==","signatures":[{"sig":"MEUCIQD9+s0P1Vpb25U6S5QVx3RaXoNd8PlVXKWxR4Rgf43x8AIgeXrQGG+iyrlLodnkphspw/8KhfowmqJCDolwyc3p02w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230340},"main":"index.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.0","@material/animation":"^0.34.0","@material/selection-control":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.34.0_1522705911664_0.1692207601215845","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/checkbox","version":"0.34.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.34.1","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bacc7f4cd65cf625cf382ad5f45776ffad3aec6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.34.1.tgz","fileCount":15,"integrity":"sha512-GXON0Ic7BzyDanDytwEf6A/702s6NGEYc0ik1Wbl2+ekA+D+xL5IczR+MXoFyvLp2GWmoFX/nKd4IDO5rF833g==","signatures":[{"sig":"MEYCIQDOM4X3b5tj2OHBxvEtFAthxHW2o6BdytlAsPuj9yNoQQIhALyNK24I1dJtNbUxkhQFp0QJY9kcedmBzImWO4H61FNA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230738},"main":"index.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/ripple":"^0.34.1","@material/animation":"^0.34.0","@material/selection-control":"^0.34.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.34.1_1522798783864_0.23566462683396772","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/checkbox","version":"0.35.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9bc5d09f75d2cbd2f2cb450561946430b2f8c77","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.35.0.tgz","fileCount":15,"integrity":"sha512-pR2F05qd+QH3sWk/HK435oLtbLl7VyQ1hXVtpC7RE++WuvCI0P1TN2OyDl8/KLAJU7i8nsVOGrtijeUsS8on5w==","signatures":[{"sig":"MEUCIQC8oHbBUpJsAJEfCrnLIz7nihjs6UErrD3kdoBH4h/EuwIgMmunt26ph67gKdYzbbdDHQRy45jJ2igLwhu9mp+SXFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDICRA9TVsSAnZWagAA7G8P/2R5ys8hrfKGcmx22xLN\nvvvVeSXPqH/jDABMkTwr4KObvBn50ke5E0eawi89sUei53o+3C3FJY5J7zBV\nQrGpwuXPi2kyZZbrdI69QU6TA33PRCujXzz6ybShBO8vqvH6NppaMHHJwGT8\n3g5FCWIrU+5S5ENhJe+P/W6wbC2akqYtq9MwVEr77zKi4T4Z0BFNs2O+Wngx\n5zdvPrxJXnWtGtlOFPVsA0HqioKZW8xBrQDX3A6cMnqSoy+3V9AiadMWMBAr\n54xRUJqLQ6LU7ghnR0kaopPEXxf/YnDqAfT0KA8iI6IPDLHCLJRS/Y1JooBb\nw4C6kloxomm8hkNZtkVpj7a3uXmG29GlEiOj85vkEkEnn8j7B5sxfgTLqOfR\nKwgpQme62ENNAeqTL05GHQyqhzEhR2vzRV3jmmqSRprISzrPr5tQcpHoFqbf\nvU6ZkQIzqw6PtlaVWp7jfPgBvEmWvRp8KW7ODg/Qn2Mxxzed2IisxiBwm8KJ\nkhxP/zvFRT8/it4FxNprxRPCq6zxxEgfT8RXg0KEIjwDfiCymgmBnhCrUOwF\nsyECl4IJ8AQlVjIJQHQzHgBfZfa9R7l5R3hCPlMOf2tt6ubq8+lOiSaHyaVU\nzb92DiOteHKCz+eIyFmXrtGHxvbwKXsr4TGeAaNYtoaIjMNy7rS4dRPNra/k\nVPn5\r\n=N2Jo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Checkboxes\n\n\n\nThe MDC Checkbox component is a spec-aligned checkbox component adhering to the\n[Material Design checkbox requirements](https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox).\nIt works without JavaScript with basic functionality for all states. If you use the JavaScript object for a checkbox, it will add more intricate animation effects when switching between states.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Usage\n\n### Standalone Checkbox\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n```\n\nThe checkbox component is driven by an underlying native checkbox element. This element is sized and\npositioned the same way as the checkbox component itself, allowing for proper behavior of assistive\ndevices.\n\nAdditionally, the checkbox can be used in conjunction with [mdc-form-field](../mdc-form-field) to\neasily position checkboxes and their labels.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n#### Disabled Checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n### Using the JS Component\n\nMDC Checkbox ships with a Component / Foundation combo which progressively enhances the checkbox\nstate transitions to achieve full parity with the Material Design motion for switching checkbox\nstates.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCCheckbox, MDCCheckboxFoundation} from '@material/checkbox';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcCheckbox = require('mdc-checkbox');\nconst MDCCheckbox = mdcCheckbox.MDCCheckbox;\nconst MDCCheckboxFoundation = mdcCheckbox.MDCCheckboxFoundation;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-checkbox'], mdcCheckbox => {\n const MDCCheckbox = mdcCheckbox.MDCCheckbox;\n const MDCCheckboxFoundation = mdcCheckbox.MDCCheckboxFoundation;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCCheckbox = mdc.checkbox.MDCCheckbox;\nconst MDCCheckboxFoundation = mdc.checkbox.MDCCheckboxFoundation;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the checkbox, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.checkbox.MDCCheckbox.attachTo(document.querySelector('.mdc-checkbox'));\n```\n\n#### Manual Instantiation\n\nCheckboxes can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\n```\n\n#### MDCCheckbox API\n\nThe MDCCheckbox API provides accessor properties similar to those found on a native checkbox element.\n\n##### MDCCheckbox.checked\n\nBoolean. Returns whether or not the checkbox is checked. Setting this property will update the\nunderlying checkbox element.\n\n##### MDCCheckbox.indeterminate\n\nBoolean. Returns whether or not the checkbox is indeterminate. Setting this property will update the\nunderlying checkbox element.\n\n##### MDCCheckbox.disabled\n\nBoolean. Returns whether or not the checkbox is disabled. Setting this property will update the\nunderlying checkbox element.\n\n##### MDCCheckbox.value\n\nString. Returns the checkbox's value. Setting this property will update the underlying checkbox\nelement.\n\n### Using the Foundation Class\n\nMDC Checkbox ships with an `MDCCheckboxFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for checkboxes must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `registerAnimationEndHandler(handler: EventListener) => void` | Registers an event handler to be called when an `animationend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly. |\n| `deregisterAnimationEndHandler(handler: EventListener) => void` | Deregisters an event handler from an `animationend` event listener. This will only be called with handlers that have previously been passed to `registerAnimationEndHandler` calls. |\n| `registerChangeHandler(handler: EventListener) => void` | Registers an event handler to be called when a `change` event is triggered on the native control (_not_ the root element). |\n| `deregisterChangeHandler(handler: EventListener) => void` | Deregisters an event handler that was previously passed to `registerChangeHandler`. |\n| `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|\n| `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |\n| `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |\n\n\n#### MDCCheckboxFoundation API\n\n##### MDCCheckboxFoundation.isChecked() => boolean\n\nReturns whether or not the underlying input is checked. Returns false when no input is available.\n\n##### MDCCheckboxFoundation.setChecked(checked: boolean)\n\nUpdates the `checked` property on the underlying input. Does nothing when the underlying input is\nnot present.\n\n##### MDCCheckboxFoundation.isIndeterminate() => boolean\n\nReturns whether or not the underlying input is indeterminate. Returns false when no input is\navailable.\n\n##### MDCCheckboxFoundation.setIndeterminate(indeterminate: boolean)\n\nUpdates the `indeterminate` property on the underlying input. Does nothing when the underlying input\nis not present.\n\n##### MDCCheckboxFoundation.isDisabled() => boolean\n\nReturns whether or not the underlying input is disabled. Returns false when no input is available.\n\n##### MDCCheckboxFoundation.setDisabled(disabled: boolean)\n\nUpdates the `disabled` property on the underlying input. Does nothing when the underlying input is\nnot present.\n\n##### MDCCheckboxFoundation.getValue() => string\n\nReturns the value of `adapter.getNativeControl().value`. Returns `null` if `getNativeControl()`\ndoes not return an object.\n\n##### MDCCheckboxFoundation.setValue(value: string) => void\n\nSets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does\nnot return an object.\n\n## Theming\n\nMDC Checkboxes use the theme's secondary color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)`\n\nGenerates CSS classes to set the container stroke color and/or fill color of a checkbox in its marked and unmarked states.\nIn the unmarked state, stroke and fill color may be customized independently; in the marked state, only the fill color\nmay be customized, and the stroke will automatically match the fill color.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n","_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/selection-control":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_0.35.0_1524523206637_0.9592819289349868","host":"s3://npm-registry-packages"}},"0.36.0-0":{"name":"@material/checkbox","version":"0.36.0-0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.36.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"711e7ae9cb2d9a140edfb7fed6614ee78e64c552","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.36.0-0.tgz","fileCount":15,"integrity":"sha512-m1GyR3kg7IZNv9tX3UBFeLCrkWkJxqmtLhBtl51f0In7Qr1vV7CLF3RKc/Pm5YmIFLu8TJ0T9CSLnI61GR79GA==","signatures":[{"sig":"MEYCIQC0XoZoiApH8X4TJEWqQ+P9d2ujIPI0yPV1m+j3sWd75gIhAKppiPOfDpvAxviTpuB6yBGWXWl+vKeA+7d0ug2Zyfrz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXCnCRA9TVsSAnZWagAAPkEP/0GF6cICfp5KWCWUM3/3\n7lHizO55TmLtvW3yb/GTNMHiU2JOy8tM9HcA2ESnfRic1izNA0mYXl6JGlG1\ndwpkYgpDzS/DsMTNQRgJnHUuICTUCJrQb+oNUSmc+0aWvayX2eQZYwrOt7LB\nnGBywO3kqKHbxZzUimKO+0OdTzG/nc+GSVFyMyvUYEGWm/XDiSJi+D+d7NfM\nusDvClGMour21PiDxxRqpZlXugIDnYWcNajvsMO6fGob8zEW7xA0fQRM+gtC\nIdsjAld+wMcl5+nsadQs23Poi5cfzBfZoFMSVd+fuParKaCzdivuoupQEChN\n0w4maxVHyVgxagot2PosGY6bp+XFYOJ0B70q3QP6YiOPByZrhYSZc0N/9mRS\n2WyTYN0lEz79iknLftXCNtBdcLcOF28hrFcgjljqvc3cRgVaXDzwi4NDbvpa\n0c4NWxgLNWLItliyzQEqbTqOh53lFiHkePkeJu9DwQ3nya6SlNKwyMfEOrsW\nC2LkQqTtQq49yRPwxEJqJBECGFSlEatDbADZFrcM5Tg1hGs5bax0QaV8eCpr\nz8OtZG/C6vuJxaRFfxRilCH2JtGNea2AaRyYuf0V2q+WhiORzR0+1yH8wDhB\npBrMzxNbi5SLOXMIr9GY/n4DWxkQymAZG9e3lPaTVAmaRx+aAAvhanWXhaju\na2ir\r\n=C/K8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0-0","@material/animation":"^0.34.0","@material/selection-control":"^0.36.0-0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.36.0-0_1527607462678_0.24865908610398169","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/checkbox","version":"0.36.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.36.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"934bdf4319644b4e8ac5478f5934aa33bf016565","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.36.0.tgz","fileCount":15,"integrity":"sha512-1S4HH27dCCd/t8th4KECnu/s99FhnlaOnRPLhglsckr3mEAcIcXP20TbYSvdVPguexXmqzBAkGeLqKOtZzZFkg==","signatures":[{"sig":"MEYCIQCdOf4A2NV0r44b73N67RoAQbvw5m0O3tSqIbCtmGYfIAIhALxFJXWDgAkNb3BZToSJj50LVMqXI9XRePKypb8lNyT8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFV0FCRA9TVsSAnZWagAAb4oQAKNOziBlGMXxGUrVnDA4\nKb6JeuMRHfCWpups0R2m/kK3JTcB1INnOpLqzc88vg6EUuOOCXRnDXvPE2Mq\nPLAmHesMHDpLkC8E7gLK1RqHkjU+7+ML3SdKUaVlSBmnmiV/Eg9ZQfHpPXPH\nAvFemxzSGEjOhgvluGsKWMIJ+MIhknMvX2DXHXszLszqTQXa7yCQoJRb+UbC\nwLuZmk2wDFuO397txeimR03jXLjIAq1Rg7r4TJ89XstiUDn8g4XoPLQfC7tI\nGcwBVdbZQ5vgjp8dMJTP9U9lGJBY271z0O6/daV4Iz02UqBik3s0W2nqnrfU\nwgG4isMrvDFD2R4D9+yJKV2eHXXGiGZ0SlEkov4kYmYqNhACPj9/HiSOrcnh\nPUichjTLV7auaVI2CWqyPlidA86O1yRFLT+2pDdi/vuSfkttXAbooVB7s4iD\nZrZOEt06PGexrLXgmMUVYgckgl/vB6jDZ7n8gJ5fimxxnl61xyf359ojJeQ+\nAd3K8i9zKittM3wfA1G8Yq2N2u/cHkcpIrEud48V4VIGnZFRj5Rx9mT3H7Qt\nJlev/GP8fqsLCO/wsd/tf+aoUGR+uVXvalsABmPoQ+vUds7VXDCO58jAfNzK\nA6AYwGO8ss8SIRIWOH5+ouabFV7nnybKPDrzQa1wJ1Y1ZwJ37ud76640kR/v\n5zBB\r\n=nqr5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/animation":"^0.34.0","@material/selection-control":"^0.36.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.36.0_1528126724059_0.7188262681048176","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/checkbox","version":"0.36.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.36.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"734de03a95b653e29b0c75af7f538eae282fde40","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.36.1.tgz","fileCount":15,"integrity":"sha512-C3yJkiRrMf0YXer6r+ke+hFlbwNeQeB2tPmUyJKVsetaGfSaaePckQKoeizBvP7H1ABU2yRzUpAqmwOC7gpwZg==","signatures":[{"sig":"MEUCIDGvOO1Iq8VCddyuplyNsPnYYwsiuCHbloGRij53hoWnAiEAge052sYiH0PYmyB4jjElGjB+Qn+3gML2k81XTr8QrUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9JaCRA9TVsSAnZWagAAvVQP/iu0dNh5NB6lhat/388G\ntSoiaCO8vfDs3QCAvp8EkjgipmdsMu4sqhjj6tRpewSOMTzkHyn2qf19XmB3\naZIiZBvId5eklpFYVybypRbth2Az3gn9tGSxy3U+6lGXPmPfIJQ6Pl2JEPZB\nXaOM8sBhdhm7uFq9zyx4X+1b55GRQEl6cQMRgisgUHtFRKd0OnJ/pyby8qjl\nlra3HbAcsHxawcZVgUPBLxoj2XSfLyD7em2yo25RZf0LnKR3VMgvf4jF1J2a\nAEWB5uGKo8yRQ0vzyVy3pAmrBDdISKENg5WOQjGUaVzf/IDtgfXOHvSzsz2g\nA5RxaFBNy3CymhASmcPxBGUaNu69MwdtAy0atupsrCMl9dvVmA2fsHN7ksAC\nAVscWo5TMUtuGlQggekRW+7cankn1/bEVHJfLKp30PELwNt6f/EWnW87DOt4\nTx5gMWEidGJW3HfMCxH9TojZD6oOedckZsbUnuCoDQu5/UN7M+ePZRqepvbA\n7sZD46ncGVpI1+WtrWAbEnU5eQbNI0Z/T2B5z9mXjLtVVYR6nqUWETHcZgmW\nw89Rx2+q2ppklAaF7ARnBzxaNsyWwoc71iLtMXnL86XkmAZ9hEzbBrea69EO\nx2QhyabMXBtDYLUjrk6yysQR3JvzpTNw4F+vOEHULy62EHmgbQohKqV6Yfoz\nG0CA\r\n=Xi6Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.36.0","@material/animation":"^0.34.0","@material/selection-control":"^0.36.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.36.1_1529336409198_0.7822518805553011","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/checkbox","version":"0.37.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7b92e20699b9205b0e83fa1109a092329b12cb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.37.0.tgz","fileCount":15,"integrity":"sha512-rQS1n63uVcKOTrrJ2S2NTq7MB3obGN/rD/tu5H62lXRoQcZq6MR16hU90ClX1DFpIqmJQAT9ONkx9by6FCmU9w==","signatures":[{"sig":"MEQCIHSA+8IavaXl2V3qcx8FnzNFtrkXhDNaf9EPPGS6Ipl7AiB4CgdmiQg4/X08K8sNmY6NiL2C5ol5QkSwWPEDZT5Dng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqPQCRA9TVsSAnZWagAAalAP/1DIkB1VCb/DaVXxiPAG\ngEqPcMqxARrDyc8bZOlKtdsklI82SptHlYOkB+58pjicjKP3/hcRVcQ4HoIb\nvcPz6RjOk4qOEhURWNix0oQx6tBKd1p7JCFyRcHjT8JSJf32AfBYmgIlWGXl\naxQmFtyvXolQTGhBJjHTnk9/v+lqqBjjvCzP6KsSrU253/nEyl2mOPPM5NBl\nGH03WG2EbrO42Xdv2bEm72LQp1Thy/ZLKTvxPu1ZaHYBhuqV3YTGB5tw/hRo\nJtakM5zm9k6e1v9ElHM3n1S6eascgvgkGMQcZbepi3HbGlPxG/2XRH+MVUWV\nwxCVeymYxxlO1eLv48vBp5XrRX8vD68sdZVvOWg/+IqyOmAbGbM/bZmqkapv\naB09IcMxTbt5u0wIhadU/raQq5pamcVDtuK+BD+qXlSeqPPKcm+rSVQXz9p7\nGE3s+K+aJEjsncmKnkIBE8P79YxZyqVGVmPOiLoS+8eNLkUAoBftNklvGJ6P\n+vzD34MBmz+2axcKikJKMrQQdfzI4BD2QwuGyF2NiAW1gtSygbk/5XYF1g7O\nu772QZHDSgwbt3i+nimHZUPuztt9hloHdRfwJnoazjW5jHYsuvUJuC/FZFh9\nJ5ruHd4fEw2aw59F2nLk2vyrEs1YzcLHvZpBsPRC4bX8AK/F05X/In7OF0gp\nnvnG\r\n=OR7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.0","@material/animation":"^0.34.0","@material/selection-control":"^0.37.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.37.0_1530569680901_0.22156454546666926","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/checkbox","version":"0.37.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.37.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8f5f100a8c40110fa6f6b6ea11896fd7a49b7d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.37.1.tgz","fileCount":15,"integrity":"sha512-blStJk0pZjL7jH9H2IjgrSUNgOpE8zrHWVCNsanyYFYr5sfHT2BGXRYnLa40+vB6RuUf44Wrn9uEzQ96k43ZEQ==","signatures":[{"sig":"MEQCICG0IX07lipgongeVYcj6B2IGfawVPkmhaTBGA/mzXoWAiBSRhbACPLGBl3nUnvXMz7yU8NaeJZ7k+wH7sCeIv3YLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQw4CRA9TVsSAnZWagAAdEYQAIGLKECGRF5ccgW4Ki74\nZvLStHYXQ98VubWrskWb+QYbH/g//Qu6r75jU/h0tsgW5wXMKnw/O/PyXZtg\ncFkIP0tY+PrCI40hbm3Ej7JAju2qbCr6i/P5e9mNsOvO5/ktAchYZfxVXj7z\n921Sb8spRATRZs9DYkvYZQ3RrJcWh9ES+xK/bYB0gUWUw60yMv3fmk9o3PNF\n1d+UIr2vpoTxfEPDBiO56ifs9UOie97h71bjTCrz/RZfuNqzKX+J/201EhLz\nJNrxnpbs2N2TSbrXVskNbY0xI6Jj84eYYuftjWNhedvrKf6Cu63MAZz3lQRZ\nSrniN06h3V7lT0wNU2Fg0QQjLZL5OniLVEKfaah8cX7oQPq1QgVtIgjEVzzK\n1c02qX/N2xyKuOVg/WXNj+koJ/huOPBQ3JXK4J8t6HK8xsR4PNxtjwl20Zbg\nF2v/7usWow4nRyzo7emulUxicojxFRpS2unZwJfb3PIYj9zt1nsyUIUEg6Wh\n5gTAt5rLY9bXONwqDbi4MMfescbWHXaLUQOChb1Y8C9Lll4oMjb33dfsPjiU\nauLIWO93hNnifyFUQLdFu4+pFXy9bbVUnIhpZosmLbb0p3xWyk7uPjMRmYwK\ntvBprpL9l4+6O1Vvg20mN+RTwajV/d56qfrAHicHUPGnCey7pOUwrHOG/98k\nU1Wk\r\n=TaZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.37.1","@material/animation":"^0.34.0","@material/selection-control":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.37.1_1531776036652_0.9981901287158508","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/checkbox","version":"0.38.0","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e581dc98ba3e9afa5c87eb7784c82d7963fed7d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.38.0.tgz","fileCount":15,"integrity":"sha512-dkn+llxt/fy8wIf+qJN4pdV4DC/pcKFEqoOdQm2+yVnHCEIcl+bsZNa5pW/Q7GkUicuKeK2+TyuReC96MuGkvA==","signatures":[{"sig":"MEQCIARI2S5dgbE8ZQFEaxTREJ61GcsqWUbxmcdMU8mhtjALAiBnT2E7N5ZYVVNxbiiTpyD85pD1YUSOGYvaTo0wYIs3LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XgCRA9TVsSAnZWagAAR1AP/AkAaObFCFUIVTSskLGp\ngZ1cSU73Yy6PP+tqq+LVtny99tEaGAU1dgrxgefPgSX2SRMlCTzNROC0Kibt\ng//RjuhE29zyn+nncbYFv4KeP3JzwA8N6HkQveaaLmSayeELjVlmNh3ZQl5i\nfsqzI8NbXY8Bl2dhbYDWqp3lGr2c3EOlt/Lsoi5SyTZXj/jCy77yVNF9V2aA\nq+zZg3ouYlsnLoVe2d6NT0nr7GTfj2JovJlFJ/hnHcgbHxHWo+u4vZqKm+0T\nbMpufiKLkF/SrxFpavY9j0b2riMgpNPVUTD2XFKCv6VpIoJVzR9kwm+9xoLv\n24TcxCweAKBtn50DyOf407gVTNEbFfRbjQi5Eu2kMw7CH/7kSX9dP6ao1DzV\nmKnbjD4lIQmI+OTe1UqXSMuEUWrMll8MIMprD2qfdxdSJss1DQFrSV6devkU\nvvC7GBxZBI8XPjHsu+vhwEr+JR2z9UImMPHE82zag94pBXITc4ob/3n8W337\nUp6KfcFtCjADuQLzeZo7siNC4T/2fR4jNRPtX+msWq9FPNuJ3SLQxmlyvMDU\ner4jztgNjXwbI7jefvcvTvPKJpz3xFNoX+ElKrGvYWOjTYBuBUSJTsWt+J9Q\nD8252UqDZN2vjrKCZA5X7xEZoNxOsKXgkSy3NosCZed9rp6EDnot4pfxw/o9\nFKWk\r\n=8O+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0","@material/animation":"^0.34.0","@material/selection-control":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.38.0_1532970463834_0.5294021325859108","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/checkbox","version":"0.38.1","keywords":["material components","material design","checkbox"],"license":"Apache-2.0","_id":"@material/checkbox@0.38.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f550d13054e13ac51d86e045f10efe6aaeabf97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.38.1.tgz","fileCount":15,"integrity":"sha512-YJYrE1JCFbGhSjkE3vv9o+u7JKzQx0B+feGsalZ7YDVfKfQyvgJOt5c0ILkKWshzI3QMTRUjzIQfYo8GlFACqg==","signatures":[{"sig":"MEUCIAxD09kASDc9fhUNy3Zca450rPfKCciedgCqvARDzqUxAiEArBzlc6Wxu3MC8CwJkhBRXqkGJtrKS3cQJH39o8dE2Pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyDCRA9TVsSAnZWagAApOIP/jluGNVNVrDUKzUPUh/o\n07nCj9BeQjI2PvB2TRrK0Lcr7bRcblfgo/FsP8ZJlS/ik6wuqvN9KiCXlg0S\n25QeOsRbAcis7319Co6Q52AaxOAAtbPzbcvkltnwQUYhJoXW6w795o/7IJ6N\nBoJ6PBVZtfGYoM9P52CGuxvq8/iubrSAuM3iDxVciBPETw3XMwhUVYosW5oc\nhboGycE0wxcJFaSfdE/kHXJmiBYfvZeuTpiqKHx8M3xKzjWSpwbyRQcFirjf\nbJmOZKDLbqbAVAxEUbFTeNkbhs6+4SsA7Smbd1gsGyOd89nobfNJ7N7y34I/\nPwcSjKZuOm1JpkZHJM3aaqq3xiPDWYVOHrW7OWuivzG7KRKpq9ZIUkOtXyvW\n8UetBE/croisNJelUIn0Hmk7+wOJs+bMy5oM/rPI7YGnx1hYvu8x/Oa43PBZ\nclxwDU++UGNX5eG0hqKvwgYEDeoXMfZeVFX8KEMW7MWTgJmWHUHntYmK6up5\n976e3vklNZ7zA+rdOiGr8q81+3h+YS0EVjLairACqxhSHfCICQ6ZMXhfpRRe\n0jb0M7S94JSblWLITzA82K8Z47PBXu5u8V7LnSUSVuYzOAk/+8GAn44Jo+kk\nZPDEAHdlCzuQrMG60T0CljFoYnmeTsahatAaK+y2IK7HNG3mgYmXjvLCV6dP\ns+gr\r\n=9hUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/selection-control":"^0.38.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.38.1_1534192770728_0.3593851477609966","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/checkbox","version":"0.39.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29eef386afa3b07c4e28d388c3410a8ff7423e0c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.39.0.tgz","fileCount":15,"integrity":"sha512-y+iwhwIZ+Ndx/6j/l3HZbjAkUxx8jR8p7V1u3axXe8sXSUNAxE+nkaTAmxJ4SqvuGPaRCImlmR5AhHc2J6eDrw==","signatures":[{"sig":"MEYCIQDvsEIPuJ7w3ArbjzExv0G5FL5aS/Ue3ht7Xf1NgGS1VQIhAKWNHEd1CRuecdNk4xggUiTOmYpicIToi/hiUl5Rl5e1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe0CRA9TVsSAnZWagAAgCUQAJFdKCx77fe5j19BiCxh\ngxbl+J+23rRLf8Vae/1c46JFF4a98rcJvSMWB9+lbzDJNxTHQhhTHu4eWSsC\ntXepboUZ2s/IJZqJRNZAgODfVyadoNBUGzOcrSTPLUo+63TKwsnghcxWFY8W\nlk5ExvAnob0vn/TYAaVZWUjrtWa0W+295dAtXCz2FE4wqAWl+grh0spoWK+i\nEsBtCJO9YbfxVZEsJdjXYoxbZT6lvFiCD+EwWMuUJ41SECLiALVaw1A9Z0FP\nM7FB+w0/c4dVTUxj9KLftE+mGFQAnC0exot1BsoUgq4GR/jflB+a/VIki8Mq\nh9JvQ3v1FX6zj3QYv5kx3qCEg/tPc0FpihgI6l9IqrNknGEbFbW52NcQ3UxM\nryFYkMlsoH1iWvLwA5QDJ3ClZH0N60iz86LSoq68wQLeOR2RiGCVybCvOXQZ\nDBeSVyMkqOlxbrTArTbNhMycS+ingI4o0/ZEvNBzendDMgg5Im0Rsf25teWe\n0wUWNyEJZ49cRzNr6WkvG5qZ/0ugIuBO+33uiece2tD7U3DZF9m4T4BDye8x\nDX7EMBL8d2kmZc/0GEeoNqQwP1OTLzv+F9DAy7a/UW2QyLk2xhOguBa1oXNl\n3bpME/+I1tX/gSXiPPjb2mmArf+MslgSOyagItC9uW156VDKM/lxubqobaHt\nRItV\r\n=wXa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0","@material/animation":"^0.39.0","@material/selection-control":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.39.0_1535391667661_0.300006174248189","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/checkbox","version":"0.39.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.39.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b26d54723bcff3d048e23ee0fc67d9b86a80d3af","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.39.1.tgz","fileCount":15,"integrity":"sha512-ZH6tuHSTL/xhQTFqfdxz6cDr1Md2swlQ0A7yuiQXGDSFLsSRrmKgIqvvwLWYi+7KRuO9Qy5vRogF257FQ7WFrw==","signatures":[{"sig":"MEYCIQDjc+ID0Cu13MJcuDMTlKxR4i6tijqp2iBRpTumcyqL+wIhAN/NzBVOaYcwe/nn19R99oQ2HnAz5klDYx07rQIaQ8t3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibT2CRA9TVsSAnZWagAAP4cP/jFNfHVIzcJ5mXNBoXgx\nqMJ+9ch6+eInPah4xgms5hDbChRxyDWUVuA2dv540N5XVs7hO4YY5PtpoiGF\nokc231IglOrfdh8fNXZpDN9/1/0zN8ZXEzRsTRebbTg5oSYr4w8Qm7S/ymIL\nOu+JZgl1mj8GNtai0M+fwiB09gkc0iaFslvxN93y2hEBBNLspTgEFwIG5vtp\nmatPSU1i/S/Z76WpGXCSFu8Fe1jr4vLBKC0mstrdBvNAWMfkJU1P4jYbx/Ae\ny5re24jmAjiL0Sb6Uue5CDR1uOqGQAtwfj7NOzpvhrhZMAqWRpIGF4+7xvzb\nOB9oPheGqgzObAcJyKldSjuFqUwYJWZ+PkqCLWFLHQEstkk5eBwG5lDrukJe\nDUUopq7P6PTp1ADJq6hjMoZdsmhEq5z+pmHolrg/ys6lqLk4GS3SGneucyHS\nV+DPUKu17FykWTO5Gh7ltEkNdpGRMRKQySUmwUbjP3jF55uhsn/rRfeO0iaj\nX4XjQg50s/5gRhFFlLgBZhniPZfnI/eT93MdrUjmUeobl8Pp3aEYBQmhnfda\n2SST9++66ikbrzUHklk5Sz3EC/EYUCTkPinHH2nouyi+dx46kmB8707hYNYZ\nt6OkMjmXX7wf0w5AjxPLf/+7gvTxmnIsJHEiCmJRJB3Ykoe/ixhO7+AiNtwH\nw5+1\r\n=bc49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.1","@material/animation":"^0.39.0","@material/selection-control":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.39.1_1535751414081_0.36468989394785756","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/checkbox","version":"0.39.2","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.39.2","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca30c6ab53f7004a23811b700066470c28ac882b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.39.2.tgz","fileCount":15,"integrity":"sha512-ioj7O0zT/QtBSoc3JrlOOFKxcc/V41ijNFQXNZMFdcAun9NAh9jp2AW4k8llQQFCKK2s3A4M5vHnd0RmFx82jA==","signatures":[{"sig":"MEUCIQDES8RQYY5AgcVobG3lQkHmioOm53qrnQgTMROWg/ViwQIgPbO6Aw1Un4Qit7MDhhlUUZ+13h0+ifF6C9gIrRBb6DM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OBCRA9TVsSAnZWagAA06UP/1Ah7KdnjZXpgR1ANlRI\n+7XWP+pBv4iDeUkHPyvTdp9A+piE29h69FT8pErRarLWqhvM1DtEbycpo2lj\nxj6zdQX6eKODxS6PjVuENnOytLXcTXjtNUBJ0bWir+zeASi7ieFbH2jQYxBU\n9axFjams7c8+QxRPhtNYfh8/1ZOmpIMce7aIcoLtW+lu2oEQhaPF4daqwT4x\nwkVkqXjm4UYQNI6XEa9xsjXL75NYMDgfh0vfV0521fW0AIra6kJLgQtybMmK\nydRC/y0P3u9UKJKwTnWIO/1O1QzuUK2comfpXxDD9FI/9pIGXBYO8nPSYLqO\nOb1S9Cj9kxfKo7uCI9tEDNZfrMyB1qZ+tsbDXHa3fnnoX7lOnbuZkNe7w63c\nSLoPahw4BPohjk1cKm/JhSC8vN+eo43jdHU2w2yrPPJRCHD/Mnv0tAdrKAJg\n0W+DE/AgMN5UtdsLXOc43FZNdaic4obBJRe8fi+0A7tcrZBI/h6ERg4H4a5p\nWUeWHpdzXCg99YVPxqkMirNUgrUquNhaRE7YbNsaSOr0Ml/RqCYA9zslBz1P\nyXSgFe9DzRfZbPxCR5D1Zl7tZEZ6iUL0s9JBL9Jo3dxvR/b/uoku1I5vEo9M\nWa3S9feJkPMrmnl+81I/tLebcfobjY6HcQJ7s7xe3HWJKQ6W75fCtbY7qqxS\nLoal\r\n=Z9bG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.2","@material/animation":"^0.39.0","@material/selection-control":"^0.39.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.39.2_1536684929369_0.4503703923764768","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/checkbox","version":"0.39.3","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.39.3","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be6bffbe0b6bfcd987bbe9567d17a17738af9fa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.39.3.tgz","fileCount":15,"integrity":"sha512-9mVGnsuWJqQtTJlTaV6QY916w7mNBA1m2vdRrGGcAE30svp0fb9SSOaPxZ8aC7GcRTBk+WafHbN9ZYjJQSURkA==","signatures":[{"sig":"MEYCIQDCPX0AtDVoTvxOdRCvcUVL+3cYrfBUy7Bc/rFWhkZYogIhAOo7ZQRzztF2kmTCeSapZ1dcy66T5/Bb8FmDgmfeNc1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/kfCRA9TVsSAnZWagAAQeQP/3MAqX9PwIYaEuaBeBYI\nbb5Gd8dFBakBKrTUMt6IJmSan72ySzqszl1uhV4MZciLKurLktGMPl/gigOi\neFxc2wRswLD5aYx3sL1k/7oqdxucD8bvO44kH8CTr5WTJ05heOTbExxmJ4ic\n26GpSn1sjA3gqAklsrQz+h2FH02q0MRcNFPyoEMcyLwq+LuKNU53q0U6I7y4\ndZzaAtBh1keg89wZMiq9eDD8pG0g8RVIQoaG1zC+AL48/I0ka8lKC0+XJ33N\ngumahyRI//HOTQ+5evr6pp23B1emYb0zL5EKt7a9u4IHfccGyulFMHDreekT\nnM+nsldUFWVWV+YkITR3+JD+Pgc9MM57D1/q3uQSvUyEc+ibJymsmuQTEcIX\n287P6vx5Ovs6mrnetBrOir+mhg4vYIJtHVBTTg8/jZtxowTwWS0rhF3+gvkf\nB8CJqNgucHZ8b8teWP1NCMPyL6k+VqMRS9IkX6aJ8EUSO4Ynlb4ZnGsrMEgb\nmUJplZvNOh53Vqz2pm3bTRweqBUSgKr7v2VWb8rKDCxEcDuiNpNiBG0TN5dQ\nK9tRXx1hbCqphfPrv3IMXjm0lZPjqKD3Pd55CD6eW9Coarmj59fqkHxn0bSF\nfHobiPEMJdLfNRCX6lNQOk7+QvAAuE+VyhfQRtGTQl5r3VyVET1kpYkYKD9/\nhnE2\r\n=7mwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.3","@material/animation":"^0.39.0","@material/selection-control":"^0.39.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.39.3_1536686365830_0.18629964375211472","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/checkbox","version":"0.40.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9f48a364adf92e1f1c409a9ed40c7cf3f9f3c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.40.0.tgz","fileCount":15,"integrity":"sha512-cmL1OkPcb9w+L+ydBho40kmbKm2CkrQIKZqaJjeSIFUP8hIIj1PleoTqpy6qV8DIvUqPylt0uAEZ6XOvAQQHjQ==","signatures":[{"sig":"MEQCICsQOZRjHGrt+UIfUV4MbA6Z5YriNa0px9dwCZy1yne3AiB9/ZhUiMmMlRltiuM19G6OA3HBDW3xvGy7e8kz5n90Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULFCRA9TVsSAnZWagAAAdYQAJvvwcGQLa96tQWsitQA\nVyXh09IkcPdJSbFCEcjwqUNbP3dVReIdkI4WxHQ702j2KKjPa+iMqd7ldnmK\nLoDZTtCqhDdINKXLFRvMT0Q1gZIkhHiVbjfJaSBy5UHWVtoB4pGOjZ73DDZD\nS68j6xk+S/LlYneuF0sYJG/pNOlW8uHk/WbX3ZcRB+uJCqJ49JpPbTZG42wW\n0HZ8STVLOQfU7vGFo/zj3Nk/R7Y/oLHCW5CGIMlanAHcgmaTOz6IsAoUBoMv\nxOroOIKNHvNozRFRKAjx+WMmT+iJIEauasCxE2L561IbSh15GoVN6CviC/mu\nN8FKCVYZsZMDiaRKL0h/DvFhIfcX6GEatfAL6JmmoEvKwGjBLQNFtjTjt/H8\nEdvouqcbLH6ngMtu66t5yZfG9C2l1NxxjIHM7oQmELrR5MA22gWvA4MGkW4B\n5HKshNa5JQ2iy8P3krjemLlLQjN8ipdtrbTO+HuxohRTMQCH/GYfKus2vj3X\nrAYD8VwK58dPE7ajaT7IaHGXGI1V7vXze3PxMNQywMU3zP31K+Ydo1IcRA5C\nWTZrIU8bXgZyr93ZOmBdXfyOfI6qnXJJZpSAeZyu0qVrRKwks6HY0lC9uq6x\n8zmkkFsUQ+w8gWVl+oYV8cif9k9JZIrREkX+gdTpThACGqMTaDRrtAhKibhd\nh6Jm\r\n=QdBe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/animation":"^0.39.0","@material/selection-control":"^0.40.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.40.0_1537819332426_0.07157979986577412","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/checkbox","version":"0.40.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.40.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7528b3e07436987b0501b9cc17a3a98a5d403277","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.40.1.tgz","fileCount":15,"integrity":"sha512-MFa4L+7nccs8kGZLPCgZLAtdyYn1qsKZArRN3qW2wXfsiXBV5BU+UF0kiHULks1nWAVR8C+pGPdm0sfrJb7ipA==","signatures":[{"sig":"MEYCIQD3rQ/P0vcIGCJpLiXiWuJ1Bla30wY5xVKAKGHcvtCD+gIhAICthsaT78X7GlN5zoSKJwkTcJe4UwHH3nMhCHIa26D7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8b9CRA9TVsSAnZWagAA6cMP/2I/xHL90T9ZZC8rR2Gx\nL9ZQdeWnFLXvnmBJONQ84X1XocTIn38Zm/+xI43KMQF7DtebKvDPn2GatIW1\nMIPMorwS2Eu+cjMNYimH8gZiSZiRzmPmbWh3sJtaJWU5LPULuk4ExQ6YeS7B\nKtRBdABsuv3bAFBysgV6N6KBH3+xrM7x99+EiVJkLCDWIy+Iqv0V88isTqA+\nwUiJKuAHD/QxlEk/ZaU+k3HhwhdTwb8Ao8kIJMmxxFnR8nHXjy4jpK+AbEdZ\nNPWh+mKJfy9yhFaSHk8+2gxTet+g7h8Rh+Ot8LCVo52RBeHySDIccz1PSmzw\nIECen3IpI1W0UsaGcx9itTNtqPB9tiTW/e4RK2TIfYLNV1coZEL7wm6gSYx1\n6/yD30pTdtWgNzCrBRn9faV7+z6U//ZWg/IdVO0oFM3LBCcBfkedaLkShM5N\nRqyNhiRUpU4z0b7CqLF789DUr7TYhDUTEG4lOQmaV68xbR0iD1y0LEYTetXZ\nDK+24ycAF8YHf/s+E/G9Oy8yCYWLL42DJHU+kPZ5DE20naR5YRSwC902ZkfT\nbW6yM+lw/s+75jooztBNJH8anZZyTqiGumzQQ5icrU/ks5z+32ln4HMDK4b/\nWf40I2DqdWxgrxHSno9e4+QIyYirGHOPppynXxAyz6YiVjTC8uw7xqPaH3p1\n2lm9\r\n=Mts1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/animation":"^0.40.1","@material/selection-control":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.40.1_1539032828332_0.6367585984874702","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/checkbox","version":"0.41.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.41.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d1dfa0468fd12b32b459741f7d5cd695d4e4c8d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.41.0.tgz","fileCount":15,"integrity":"sha512-Zz6e5WRpziO7Z+4rbEs8GHNNBf1UuttniLp6/RvwPSQRaD8G04sdg4HcP/aDCY1KGMwivkuDPc2Bsgs6j+rD7Q==","signatures":[{"sig":"MEUCID9lTLriAOUfuSx6UCFyA1NoWhz0yphyt+WpI4VHf55bAiEA33nxaw7ZuHFT/SxsgRenvydhJp3LBKu2GaiTuma6z3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wCCRA9TVsSAnZWagAAdhIP/00eDws5QGZhR2e0y4jh\nXw/rZJgO7K91vfgVjwG+Bd+qUZmEGfEqfbMG38U3cUgNUEKbZPfPZE3qFkj3\nqjvE80FVnTS73LGTohmwYtgDb8+zoq56dnY7+80iAe6+cxVU6IGwzUW/aSwG\nGBnpvmmdBlIZzmsCy/tQ9SSQ+wVJ+D+YKg0xPFBuaRjZ9jwLfQTucn77UWbe\ne27BAxQlhOpMMLbgKzkrx+uzgpvKVP18j7GQcpnlBWS2rFdpCDBM0Fn7C9tx\nxXMbPGfWZy06JQGhuRMUNOJZsRtqCu6caiRI+SAp/OjHKtkZI4xCkJjKYWVa\nO4e5o1KycynEKUlKbutmlQneIl/nc9bcoG8x+DLWmi363H7f0cVvYo/+TM7l\nxHnz9iCa48l4qZSN2WZB3eMtdoVIVoivwfYj6h6KObgG7XEFcMvguJmx9iGi\nG8jedxLnH2n+2orYIJ9brKEaM3taIYz6CVYENwt/asBFjXgOF2y+ZNDj4EYR\nLiL4i+ew6xxxKKVxYgkwxPfllfeMpVctRnfIt612HedBfNKcpkQ9oAnfOPB+\nwfV1ahKDMTCTU05mkoHVyrD6Cx3+IFOo80TKW4h7Qi8p+Q1mC2DANLZL59Fh\ntbQf4WxsaERKeXz0zCahAAMs9NRa3SX8OwF/Q4gjPIJoo9bvUHK1kMTxVrYs\nPku5\r\n=GEPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/animation":"^0.41.0","@material/selection-control":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.41.0_1540844546271_0.07340918331604751","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/checkbox","version":"0.42.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42861847dd22a4e180944488f413a451c8d2489d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.42.0.tgz","fileCount":15,"integrity":"sha512-1F9EDLBwKh3qQUxxzjAzOgQResXlA/nnbt6dA6l6oVdWdhjUi1Dr9mETeqnd8NBymHWtyQZbPla6IHXmEFvEzA==","signatures":[{"sig":"MEUCIEFRSUHOEapLLPPxUzMB1gKHR/UfTUCUt1LRIwvMPaSeAiEAx5JlB5w6WTmJAbd3vLCCId23u7UWQGsHIBULskgB1cM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXPCRA9TVsSAnZWagAA0Z0P/jZBLOPqLOQchCUG13Zv\n57ELVw4a/e+bOp3lmYkhurwUg1VlEA3M0QDZigiE6NcRja/0unM/VTc6Io9u\nk4Qu8FPiq0upuHyhaDITR4w/3JxZJHFG8orYwAzglU5wSbVCHYQeifi1nVVI\nH59MeZR8h6Qsidfx/6GhZjrFmScveuxpms9hNrdBmef7pMW6i3pNVjRydKdQ\nIg6slw1boZIfkulSl1/LLzQwDuJbgXUqt+9xFjfxg7+sR43/V/TLXk6L2+B8\ngsvLcN3mmogK9nelxhfxfI1/oIkwY8doxs+8bC9F05ww19vTj0zrQ8ZJ0Tzw\nvsgdh5TaA/ZXWiYBXAQJ9h1ysbDrS5iJTBIkQ7KnohZs5HUVo8/XzUngk2g7\nQbjIBBYiF2SA7Y7dVF+4HpglA+ndcscrtsEO5XHd6WzedrxDj6RzTB/RAjq1\nu44fH2mAxRDigXTxzXENK/iQcg8RrLjI+HvJxJp55BTfXXyni1HJt03grxo+\n1L2aLjJ/JYYtlLx3xksJHWAr1bBlyqSxFJDtDWQwv7x0gG47nJJNMDgnkIG5\nIld4GW98Xogh+kHMnOFpmsEOTYJ7G8ma6gh9FSfyK87RtLZ9JPfA4CSPI9D8\nV87RNdFS4Pr1e0/B5H1W3yNwDjjbfMiL7B0SrDvLfDZ+iLvzX7uKLZstqe8z\nrFfp\r\n=7fB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/animation":"^0.41.0","@material/selection-control":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.42.0_1543964110862_0.7916553807471634","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/checkbox","version":"0.43.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12d11c4516e7492cfb87d47988c93070f0935924","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.43.0.tgz","fileCount":19,"integrity":"sha512-LDAD+35I53oMNTIDr8fcVfm9BukwtKnos7FD4axstowminSDRujl26g0uTyi9iLhnkR8Vl70Xl60L6kh+GBX1A==","signatures":[{"sig":"MEYCIQCNKXXQFn7hUKzZbcTpaWYzukEu1esSF+1aScJbgBX/uQIhANPyvwYYLmvMF4mbft5DU4pPypN59WhU6jgZMNc2iYpq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":679875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61PCRA9TVsSAnZWagAAGOEP/ja148gWf3euR2oNAQcR\nMlueLHT8SkOyc353O6Gw/Yg7T2X9Cm7ccBPmXMKPyN7217vWf+u701qltf67\ntiJz448SNXJfKn1r7PZCssrQbBPhVTELZQOVMuXQtbuVrIml8jf42DMg53Th\njiJyrOg8X7IicccVWEkIoo/awk/wBLMe3tYns+eLddxjVLuQSWx8DMoveyY2\ncYlMYjM8X8cNTjJ/tTXCBSyLFxvteA6Iz9h+7Gr2ZP8tetl9d6iuVzZPHfPu\n+p8fknOChlOAs4oO+fUDDYzJgLyNEbKCCPgiqPMm9rxOYiU97z2Mo2gvKw99\n4+b0v1zzw/tQ+MAeYgghABdt+vxOrOikH5kU74e9MmrjKXyTMbIUkD9eZh+r\n/oMqsWWm+1+H0VUQIJqFquPboK4OMvmhpLU7Z76ebDAwr9cmYCTYRaEmu7Bq\nQuBxP53oC0JZouBl7/w6rSPFdFanhuELbvxDwNzAgawtRaXkyWdPrnef4qZl\nAogqA6oU+4LsJEKWKuvrDRaSMvgIvnVEBudHvoywhKo5ojkqE2mpP+WFLHgQ\n/EM3RTccty8sxRzTvD2uNpUzPudUqulUgWRPupTsnTeATd+3BqpQbIGGDkpf\nSNYCvzguMNDy4LitseE6LDEXHz1EO2V3ayHevWzOJgI0Bst7rxaqBuTXnBq/\nK/Ms\r\n=daU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/animation":"^0.41.0","@material/selection-control":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.43.0_1546890574658_0.05767242182674592","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/checkbox","version":"0.44.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d0eee1db006db9f0fb700bf1c20408292305cf7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.44.0.tgz","fileCount":19,"integrity":"sha512-IzucxG+NuPNyByGmHg/cuYJ5ooMKouuj994PZXZyqb7owfrjjtXm7wjav66cvCowbVbcoa1owQMGBi18C9f4TQ==","signatures":[{"sig":"MEYCIQDbuCqZJ+tribS4lLVBLVhAXEuCbXW7BwOfhMt/XSf03QIhAPM0jbusG+OYPgMGLrY9WnL0O1c7JA8v3Tkd0A3z0EDS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINeCRA9TVsSAnZWagAAj+MQAJT+FYdyZv3bHdRggjQ5\nC6khyecnlRZZyGSVrS/UukWB3FJeVNhhoD1DhFhD82nQxmRxOwXcZtiSgPwG\nE+5hz4FYgYpBXpKjo6bxpqh4uYYu4etC9+YozSDcFBQSxxMSS6FJw2KBy5Mr\naZQuZnO6SYRN5raySqYjrLTDutyB+4Hfm4BGo8F27PWL/7C3ReQr4korwfqn\ndSOwjH98/iZ9b1PWbOoCSWJASnHiTHU1xFdcL9YTirgbjfnCQ0C5lq3m6XL6\nuFdSNT0MUU1E56mL/N/diyM1ttji4so9UeIm4kb5gKImaS/OqyRp6c7jNpr+\nen1OSBSHXFcFz3QHAwX6B+64ykB+VdcKRcdQG0PAFVrx/QdTMG5Twrxt2EvG\n3gPimGbUVeXykaCFJNXssB6/WHETc4hQgsr6zlGg0ikegOfQu6TOK3ZMzjoW\nq1IFI3EiJotfqLWj06XbdB/l93vSpn4Ps1tL0TT/5ReqktJsiY3ijTlpDZ7q\nmEIVaE9Wr0GcJ4MXuf4lIeYssE/pgrj0G1USsCquuEFscMcN1TEPXOqN1nx2\nF3A6Ij+qNATaG2Xa3RZb0bfBxQBU+WTBWg5kQ/HIhK0ssyV/8mS0tzkbYTDQ\nlbWMHn3XBquLn3rcLlR0tTzKDliQBvK8c3sOeeSqkP9eif66PsIowUdgSrEV\nGmDi\r\n=jAUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/animation":"^0.41.0","@material/selection-control":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.44.0_1549304670305_0.4198247458043678","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/checkbox","version":"0.44.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@0.44.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e69271ccab7c57914a475da3a15d4d36702c1c4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-0.44.1.tgz","fileCount":19,"integrity":"sha512-RFUNc+9RKRozL+gXfJ8V57tXfC31Q9R9tRMTHpe62NXZriTrwNJDnSkFIERDXqtMGtkKUnIlPfPE5znF6XyPUw==","signatures":[{"sig":"MEYCIQCR0eFblbNoux94w7yF9XHRmuIBF6KAek9sK9HEAJ7jOgIhAIVvSEfZscfMLjPltcXL+aE1USPiw2Q5MFwzXNeCZz8D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":697900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsyCRA9TVsSAnZWagAAp8AP/i/D3bB+Bp+aHizK3ILy\nvUPjlvkbIIgQBbxmsSCf/E9dFXPCg9TJ1twFc03VyBEC5Mtf8Q7vsmEI3ydO\nvvyu32wWmkHhSqjSkrGFMNLIUpuM5Yhy309NjUtb6qyupX/9VYWZseraK4l8\nu2g0q2QvtJI4598qodizmi4NCShsJTOhArIxxeU2aFNX2/fSrqjKtuhy3rwp\nIkkKPAwz+8/KMBDrD934JXNCYj3u1XzOA0EeGCqPxexBDDw1oRH3eQCel1R8\nAr0+k2K2ZOSGrTfIoc+mIKNgbqRWQ+Ho9O3D/2xBLNh6aZQZrYA6KFDdGxnu\n2SerZbI2PZqMI0wP4C4341kbI50XQg4a2+D0b+rC3WNQHBEqY07xS78+mW5W\nbfXeVRIrdmzRMh21rNMyEEA+34oKLfE4T1nKWX+sa/TGEHwZfp8oFRIp4CRm\n+5MlVi+V5lSRCZWVOlTZz4u8p5YfzUGqpTPIGLB0DER49Z97us/Xehs7bQ6p\nWYnINZaY4vIGsDWIda686cIlvOkaQnQ7Nfgq3zYk5bnWoBHnBWVCct1LVrrK\nY+7xz6UNo0WXOrT6L7391Msn3ybOrEUSgHBO8DzQOaX7UKgwnVDFdi3Cojz1\nqSOyu0Zd2NpEh5rKSpxKR0O2dXNpywOxnG34mG05FA1iCfR+Pi4Ayu7jreFq\n0uvw\r\n=15+L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web checkbox component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/animation":"^0.41.0","@material/feature-targeting":"^0.44.1","@material/selection-control":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_0.44.1_1550617393948_0.9560683844213462","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/checkbox","version":"1.0.0-0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@1.0.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7018505782eb6ab49455cca9bb3d8249a8c297b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-1.0.0-0.tgz","fileCount":31,"integrity":"sha512-S5YijsfFQqdRR9lujFKlJnWuwZFqt9s9zs6o1nBcHjy1vI//aYv3n7qZWiK26LPm1ncL5CGwZPafb8vg6vyn6A==","signatures":[{"sig":"MEQCIDe/VHGe/+eX9pVcRPA93A3ignH/wakIkwI06TOtRtcfAiBVCEo8qH7stz/epT7+E4YkszT2VjDa7YuXYuTgXe8PYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRlCRA9TVsSAnZWagAAnt0P/AujKXdkFfkO7rhTC4qN\nsSTsuJPFVCVQR64blN49JZZatiCkT+r9sJlC+CKN1O9mKXvj7Cvyi03dLQ6Y\n0+hL2i9CzdpFa1jRQd+vAvYuqu1RNBDCvmvMUe3peDiGiEN7VEewqA0VdL6n\nnb3Xv4cwXbRzYllFlyJDX8ih2UhOS6p0lfwIHiR84QuIrXklmfWVZTq75dY4\nr+FCBlvh5+w27jJIwcDyIQrJXRjOlHnkI5faoETeEouZqTnt2Uxj33iMZXut\ndYcz1Bk/RJEfzxlFun0wG/aRvnswHiIZriyBoMXbbZizMWxZoljwZazeNbtv\nwZi3PhY3Cc96p7sexaIZhKtQAgunv6J5gwBHExwpcS+9taQtils5aYl+oVY7\nZvQL4bacpY7RCSlIhJv4VYRuov7lb/0gR7ZZ6vDMY5a4JHUqFD6CEc8Es2dD\nz4wrJ6OSpPtT4gdiyvaadtKnMT/Bq6I+b8mcq+DXSdvQlP9oGTukhpjVNAjX\nqn84ef2KU+duQC/RB5dHgTMXm44v4MQdfeUwsv6CWU+U/wekWJ/DooG3VCOv\nlHfdIVoCH7gUYsvNeeMRf7uRmLl4miPL6YAiek4x01Cj7jMwT6qSBYq6rbtW\nGYA5ArtFPCpiIZSkeXiOVgl/DTll81htxUDrEaZJmK1fqv0yy3vIv1DshdTK\nPpV1\r\n=Mc5u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the checkbox's checked state\n`indeterminate` | Boolean | Setter/getter for the checkbox's indeterminate state\n`disabled` | Boolean | Setter/getter for the checkbox's disabled state\n`value` | String | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|\n| `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |\n| `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |\n| `isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state. |\n| `isChecked() => boolean` | Returns true if the component is checked. |\n| `hasNativeControl() => boolean` | Returns true if the input is present in the component. |\n| `setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled. |\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-0","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_1.0.0-0_1551311972390_0.7646641098088727","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/checkbox","version":"1.0.0-1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@1.0.0-1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b2105c33f0dc687bcd4864985b3e7334cf66e8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-1.0.0-1.tgz","fileCount":31,"integrity":"sha512-I/yhgTWfrNRj2ZjyRtDOGnjrH8ZneP8WArVFLLph06TbWZZbtD1uJyVAk/+Vxv8/wiDlCs1e8/PfQmtv+6AHPA==","signatures":[{"sig":"MEUCIQDq8s32CGQxv9ML9Q68k4SKEUNcUxc2GLCE83YG4fKvugIgDfDhQAUMEFcRUnyXyP6S0m5ks6Vj8fkf3PicFO/BqB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXGCRA9TVsSAnZWagAAHP8P/A1LXvmGva0Qp0vywayP\niKRl1WYvnPRvW/z6lRw9YtkJL70pz69akV7IjIVgPJWfMg0EsF9K07FA4djj\n4hQsgIeH2c4lQ0jck0GNBgxR8v2ECb5YhqQNtcMzdM01Iraa/ztRtbNdNYF+\nIBPIlmARb61kCZJVoblmxHHn2hA8+R5h9JQJS47bFL6JLBRiytQy+Pfzm+D6\n0mW7GXGNxum0JRvOK+cQWbe81uXKPOe2lry5b2PVaUnVXfruE8Ccw+yOpH9E\ndVXz2b0AiOwst9B/o1T24NT1Vpyu/UmD0/77qRUnJstggA/KnjkOUKLuEn7Y\nJEBhWRd+drWwlwj9C8n/MsRPf3HRRdEYxPf7IFmu6Ne87z5b4bVaWICK2grb\n2yfnSWpzXBwbkdNQzkq+QIaEPTYz2uBCsLyzXMnb34YkaroBTi594K6R6qyr\n7JuKMMWPTAL0FixEkQ0k+W6P5IW/khnBX1XfdjpjZjmLASDk3rjY2ZP+K9Nd\nJAgY53RAC/YeHtSXmBKqX6wHsUWwFDkOs/Rp9PWHi81JcOxsnac/wvAmEfl9\n+Iez6LbAnn2/gRfACXQfw4/TzYp8OrX520kyYha2EsTD0Aq1oCpAjFRegddM\nKWBGKvo2lytHDhhXOIiNmDq8WRwTl/pNo4zxcu4/MQqmPJ5YR/vl2UGuu/q1\nJhsB\r\n=WJas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the checkbox's checked state\n`indeterminate` | Boolean | Setter/getter for the checkbox's indeterminate state\n`disabled` | Boolean | Setter/getter for the checkbox's disabled state\n`value` | String | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|\n| `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |\n| `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |\n| `isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state. |\n| `isChecked() => boolean` | Returns true if the component is checked. |\n| `hasNativeControl() => boolean` | Returns true if the input is present in the component. |\n| `setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled. |\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-1","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_1.0.0-1_1551742405501_0.8221444571587841","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/checkbox","version":"1.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@1.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a273aa4c4303285352f091872499235fe298571","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-1.0.0.tgz","fileCount":31,"integrity":"sha512-Z67OLPvMxURB2NEmPZI7BKfMjCMMikoe4ddrQUz3xItpVxnAZqsl0aTHppTUas1nQUqQqTdt4adVadJvzqzffw==","signatures":[{"sig":"MEUCIFmNqritjRU/5zfqltZxeQy1trTa/TRm5qHWKkyO8sCwAiEAxPndzlkiUMLYP6a1f+dya87wev52/7klgusA8Eh5T4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":818856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDa+CRA9TVsSAnZWagAAHNAP/3JAeaSKAXpf/TeeqkIt\nuVyBuWesrpzqBmzWMx4yEZoZflLAsc4TTmWsJGoB2yWCulnkQKDXJkLj8CN4\njXyhRtyZ5PZr/rEjR+WSZExTv1jo6ePlS5AXm1jRIk9j8uKoQxlK6T3bdVtr\n4PMmAWVv1svLTZd2PY+7k6PNlHWOSKg3gWOHU2M4IS3H2Mz37KAJQIHmnEbt\nOJ1ESdnHDYbFkXoznZDC868ccBhHrKqdj1TXFlY4OM/gfi90/ahoIH5o34p6\nlvO3WzyS0utOB1zb3kvY8aykapqmP3gFArXm7DRSb7bQvAU/PhssVjNotpUk\nICeXZGCLDqiVV6gTqGZMJIlt/m5yQBNsrI1pHJCUQ507PGHWT0Exmooxlzoz\nIzTj3gG6lTDbQZ5feYTKb0A6RNbRWBkkQevV7vALk+8pphHzpOd4l65ZqhmL\nbdqT9ykLlBI8qZlWlMHMl54dtmbFUylxMeQLiaCMxEVcyroJshObqjdg+5lj\nQ6JzyxFqHXmeHB0I5cb7sfatdTPv4cVy68E/gUezIWkkpH/c5Rt49kSo2uX+\ngMZFMvZPgnm3kJOSHK5530lqCmF1XQGu/JZ+xmDKEvdTjR2o4G54LjSBCKLd\n7a9teg3Pkf3EouJe0WecOIC7v8JoM2nlz3ZIDV1jksFua2jgDayeHGHgY4ia\n5e1P\r\n=0WT+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_1.0.0_1551906493720_0.7946017082392041","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/checkbox","version":"1.0.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@1.0.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c482324dabd873fa8b86438fd16609edf2c05b29","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-1.0.1.tgz","fileCount":31,"integrity":"sha512-/FMQEM5aT3S63Rp2gWgq0/WnMl9tNpSBs222r/3YT9Aqesbdp56mcDG9rk9rq2Ph74sWxlI5+9MVwL4CZ3nCyg==","signatures":[{"sig":"MEUCIEM3wDAmxvPtjs4ub6I+dfqVY0b3/NL0J15cEQe3oSHmAiEAk4ukLT3fGUx7tqPXl58Lz2rda9+b1Zn+YkohgpPp56A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwYCRA9TVsSAnZWagAALhUP/j1mSxk+KTD3jxJLMEAz\n/It+ewl0DSbGLgVtEy3fXHrga8M0QWJvYCfdZoBcXtIncho34haHmygU7moW\nCGmNSQf8uML4itY5zMexgY9B2QOmZAf2pKuZARX7wfEbTazz1ecgYzgrxaTY\nF9ZvE1zkpCB3lXrHyptXFhqxazjURlmGsTBropJWhPPAV9imHIJWzxBE0Sv4\n5C0tzuL3iGUV8PpwBrXUcyXnFuTkUYY+P8kgd3HEnwNpDGKEmKrLVzyezDIl\nTuMkIxIyadzV5s2hnErA+FPcbwkoIpoyCJwh3wK51Cp8Bm+FItnItVoxMw6N\nMBJyS2XyLKUAajlprsRhUwe9RrK+L357yRWr9SW0cbnu1cVF+f2jk0iej9EJ\ngNlmbc4z3PiQFyfrtGSLIVcnKVN34muvxeheTqU8uwWsyzgNF2s5d9CPfVYx\nJ+0azz5POFFFWfQpXjX1XWIsgUOOMHiYWEtcB6LAfnoqWSDNiHfXTRAhzB+1\nvi3MyfE4g/hJyAmEvITjOWzPCksozwcw/0YJREaJ9kxX99IprgP4sya+9cmg\neaKaksNDnF3BnrDZl1QzmwLX819RbdwOkqhbNsBuT+pkqO98dOOrBqKwWeQB\n45p1+KZkx81ao43olJqhXmvWcFUvIw0Z40R7J5FYw3u7i0zP5ci4aUTphrAv\njPLA\r\n=7rdv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_1.0.1_1552342039697_0.6297189307898343","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/checkbox","version":"1.1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@1.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f01c4f70e028ac26aa2bbe4ee6de7d7a1384f701","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-1.1.0.tgz","fileCount":31,"integrity":"sha512-jCrkG8VkN63uH+YRhu7RWIsrYGw2Gu89OEPe+sqGYWsr+BbOuzBBqxrM09rUkXykCyi8gAbxpWZPVGCmcDHtJQ==","signatures":[{"sig":"MEUCIFPZXqjJQqIBaLIOo9CjVUsC4QfBm2kcY38IrLU1QpZxAiEAwHB0+0P8jX6rytIxrqY7cwkOVejz+PztNJ1+g370rkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":670740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzECRA9TVsSAnZWagAAkz8QAJxaYQcDXZtfqUn4TydW\nq8PC6OQKBz7r4pjENNx/deL4Q1CZHx6lXGH29tkk08H5T//OHn4hRuKtj4c6\noWdZqTNmqdnSELibDVaeG7aeClHWUsnCl1dPWqo2bEQoe+oZ34ode94tvzzW\nOJHGzw1rjCcbbGUCmnXuQt+JuAvPC7MuKcx8rTGQJg+siGpdvzmooA63oC21\nK2mtGe4t2de3uUdT3HrLSa3cRJQIksON4C/RMWqK2ooPUO96Ai9hZABzaXu/\nBZqSzZC0QmYUBfLl/YP30h2OB8b08e9YWSi1TlKIbxdVzSobCwNJMsv6aypD\nND1aVEUhsvEDY7QqOB0rrDAc6S0ahLX+ZbwqkhMcQ5b7UmlvrOfiu3uqWJDV\n3ZDwcboO/SL7XnmWfIIRCTgDKBZVZifiLocxhPaItznPJRByE07MCVFf8Irv\njut9v/Xx0EE6SdGIY4YWeIx+/vwtvv3ip65CxGsUUuykxA9azsF+K6rnKG0w\nVA8i1UgTCf3v+IFGhQ1JiasLY4DPgO4aNVlSnrS9Oi/qvAdq+YcNixXjd9vn\nJJqagi3LBQcEUciCuuBYl2GZu6u+8w0+wwacVw6OKdBv2o/nNIZvv2PUQBsE\nIPghUf2TizzRs6ZPstajiHlj5ZkUafYysWNvT2nZRvnlL0ZsHruHxtmoUz0C\n47Es\r\n=bX3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_1.1.0_1553628355360_0.24417013347812633","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/checkbox","version":"2.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@2.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cff6f907a0c1883dd1adb3249f471e2651dcee1d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-2.0.0.tgz","fileCount":31,"integrity":"sha512-s6p5bT0CM6gr5n87qcvlzaQbQl7zxAtVq5FUewdMO1uzb0/AbQ2OHQm6qAs0HUDQvafgi9udgSWgyQPpxbGLJw==","signatures":[{"sig":"MEUCIQCX+yP8S0SSNo1OkbrtJHcVo4Ft+DUKsKlmIP78FJ4dggIgVUUylMKd2btmdddPEc3iHthtAQjrvFjYYVBNarmvlWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":741555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb1CRA9TVsSAnZWagAAu90P/Rrj93cvgqsA06632T+5\nvSojiQU6VNg1oCbirnB5Wz+ziHf4qBjEWpgoR6nwfXJghiee8q7tOqXs9Mip\nlo3tS7JvM0qrGYc8cuF40my4IPcUBn6WKeghZzUbA8HT8iq3DDSikSm5wxEW\n8zisCwlmztg67yw25BZsHSfqoxAW7cTbIfhbXoO1WFL7DzRd/Y/CDSgO78F4\nLh9c+YUh3vFXnwZlis3BJ37UaX+0ASs6A+7q6Si5APCvreTPcQwetz31emU7\nDxdrmIZgHqiUnPwMNuId//aLNtXzdoM0WL04s+R3IssqppZvQAL+0/bw6utO\nzR1FVn4N6f5sUAOKQTN64+fvKx47SBqE17Y4t7DFLT1qEyRY4v59gnnamJYa\nsYduk6aFuxbvQrWvfvmW8f+R9vSXm6Bz+hdxQkBwTAofvGxwXOXtEt6CR41v\nq6RcfA7jPfjQUyRBEuk9VK6/v1NHDCzGg8sddmXBChxvDiqOn7jHOQPX1lD8\n27uK4KLqQ7cboyEfWOtF9fMY6HmIZMUnFKxIFOEw4/X9MyttdHYbedox4NfN\nObnGFYbKJfHgxrfvmQLXLkml6zbfyGTfGMUtUKYoukxyBbYSyqGaNmVS4Hww\nkRn8E2LVmPJJokjUKshTRAcC1MzjkuK0EgL3Y5GBjJlbEkWJzRZfyXaxc9Nc\nordx\r\n=X4T3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_2.0.0_1556559604768_0.0602901814442256","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@material/checkbox","version":"2.1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@2.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95402987f1fcdff0b60639810561e4f57f514306","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-2.1.0.tgz","fileCount":31,"integrity":"sha512-vDwzrEPxaeVvXtFGabJTweMQ8QteFuLvaGaLMasqdmz/S9DgR6QQGqgfXnfAcTx/AgzIAlvV2SzQpH4lUNdtiw==","signatures":[{"sig":"MEUCIQDaF6acRMrTJV21cebXgEOUQInyZDX4+WHMih8eKH0DMQIgHeggR73XLzTIAIfC82iIpaIxMBFP7OwHxgFZfNiIUig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0FPWCRA9TVsSAnZWagAAiboQAJ1HrK3xodoOHuJxx7ld\npK67T7pDbM5lyw+ywk2OYDC/ymBEk4DczZyB5S+cFpraMV7BHudGIGDjaeyt\nL+uMzsMjN7/JF+73apj+j92FcsyG3q/mymTlELjoYZCZXeNUU6IMKa5CE2dw\nBCVdjvNJctz+e898oogRe+r0PU4ircCGi1BOMZWG+j3Ao0a7FHwwc0bEmqu/\ni5tiIL44YbwMqW0VrdeoyCvU32XpdAf6H5W+RC+QGnUOJ6lnR5OoLz8zHaGL\nLYJoyGj5EUi6yOYjx2FOPX9AE1eLZBWnuHQzsK9/TQT4Kh6m8YgS6ZUvD+y7\nqYKGHY/gSiQYSrNO6PhNkj84qSamHBCygkMFghelELDOWHqmIH6zzVcT8IKW\nB8L4O0aamBiIwz2dtdmNbOArMOBnuv2jwt52VT9xBHbYcb5lkFL1GxGnuPQX\n+6ETPH1Mcn//gRHOW7rHMkZGOczpA+meqkaU/28reYMS4rAispmQbEwsbeQi\nB/PCmuQnS3lpRGJ3lzj0F+U5Q4eln8A6lGe5HQFd0qQO9hTi8edRcl9rgKPO\nEFiLQwfFQNYkEdCcbrs+6MeLJvNIFbpBMcOgLVe4I9REegfwB8J2x52oToKg\nSMFfI1/CN/s5eK/afEhXUvGgirmlphwevC+jd72meCE2Tp2HWnWJUyqAmpiZ\noP8U\r\n=03gS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_2.1.0_1557156821483_0.12397642464283343","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/checkbox","version":"2.1.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@2.1.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f457d33be6a3309a768ed55e03e3a7e90cc3e63d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-2.1.1.tgz","fileCount":31,"integrity":"sha512-JjgxMJjLLCI5ph6ZaBonFUoJViN4khJw+TaeHAq9ZWAMFZ7cg9knfeq7w72HrU/9+Lp5xYOBaVeZQ/4K8eBX5Q==","signatures":[{"sig":"MEQCIGGrG1PFw0UqkP9D4RvCVJd3k7xfxxMtd+h1eFO2+2qGAiBgWf7GO+UxxA/Fa5vJOivkO7Qa7UnazYutAxqR2GE3Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bP5CRA9TVsSAnZWagAACYMQAI9tp1dVzf//kS6nKVjn\ntQmk+tNNUMsjYZmEdSMIt41giTkgPf+fCWT6Wf2hwDHyYg8cN1V/OPFtLNgz\nvOdz6Sidw+F4wY8/dIXdPpcAfHzk7ofDU6LzbhrabqheA7mEmcqsPXjP3Oab\nXzjihQkb9byvZb8FnIOwZZsG2VVtFhPHjgR8IeDfJ8grO4pMaPVPKzQmZP6o\no6p9SrCn95hN2MbJQvZFcSsQ7E7talzRWEF6F93x6j+3gJNLIjcz4u5ChriL\nKdd3aQsp0ERVS+ZJp3HPG7SSduxr22/6zF4M0+9454dvBU8fJ7f5onkgDvb9\nW4DfnPzU1Y4di7oTKkLd7m0o8OaP8jENCNhO6BlGjjACm4p9x6GEZ4R1YSZK\nDJnNqt5Tyo4K7uxKBwOwvV11rRlDP3wHz2XyyRLcpXxo2vkiNNZjTI4pMIvL\nJqSR7rYXd12ZRPXH6ZaymRVxgsrUd7F90boEXEspv6Lqpu3wIzNA7WXIkhc6\nNNUPGxafuZs6se9eEClyGzVjsTtQZhVn7oGIAnO0nqMDb1+r4F1GgXW74WTU\n0NeBRBgZGLVsERWr2/smZVWfxflJnJjeGSvQ/I4lMPVvpdPsMkoG0tR1nrwt\nXMTS5BK4xUZjw8NSolVkm7lGqE/iiJ4MnJoRY/XYa04m7O1cjH2REis8dk2J\nUpe0\r\n=eBqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_2.1.1_1557509112246_0.8874708490619003","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/checkbox","version":"2.3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@2.3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fd2d8ad4d602b8486f841fc561e01107f06b4a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-2.3.0.tgz","fileCount":31,"integrity":"sha512-ejDn0CyXITF8mKcBZHCLa0fc0a/agej9o4viMLOXXkUIfOY3NJuY11MyZ07MxAgin11NK9HpUX7cIxu3upV+6w==","signatures":[{"sig":"MEUCIB3cx3gNL4Jm4eksWG7/GwsVWZk1z8fyvEqzisZbFKnuAiEA0Baj2fscq5AXSNg9uSOhmgpFuSSDcSi0KbdBTwmdnSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":746896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abjCRA9TVsSAnZWagAAq0EP/1+OopWTz7Tj8nRus5Sb\nsc/3UAZPzFJCI/GTsgVVIUhQA8KGO+yLyd+UjzZAS+rOPvHeRr9k3sdZjtaW\nkCRuyWU3nDopu8sCrrqpeGpcwDRCukbS2brMNenQBrerRsAtOYoM9ucnbZ0f\nvevGnEE4c+6/MePs7BK+HDnQ1UvLuN3qduAwsEIExJsdPX/9aFw3gQYsf8IN\n7jNoroY1Yz11aqAkUPo10WwPBOK5OQGt37bUNVXzcYLSS0QIeH6GlfUSe8mZ\nVER9bdwAegUv3553Umf1ZNwREMDCCTj5ZGZyXc2XOyv4V/BCgWI8v1yNaEPj\nJ5fKj6UHL7HXit+byJrktWlWpV9FGnID3eqEPwV1pA8B9VxjdVoeOHtXFYPC\nqNdf7JKNwBTEOGlBU+kC1tqZVOj9QPfbtTiYvssVM/Jaj7eYX3A7YPDWlfnx\ntO834YXIt9Kn424IL45jWVtv2nIO63in8N9atRGJWHwBcjrWFr2tifWk4oOt\nKEi53G92VuLOcC9FAl5vDxcgH/S2v2vCJxI6vd+/dPsAlujyZUnh9S5TBLMS\nw1MF4WUOljH9qRXGhYbTv7AnkGFHz+gXHDaKQHFF9mFu1OqcDOR0CMdF5I0k\nNtH8x7hkH28DOkpCdAlCKURdv62AlPvbcgsifRBv25XKRx5kv5FlUxzoWkxj\nlpVR\r\n=HxS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_2.3.0_1559078626923_0.8883043103859452","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/checkbox","version":"3.0.0-alpha.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@3.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6fe969a628de4be9698289c0a446cea490e7fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-3.0.0-alpha.0.tgz","fileCount":32,"integrity":"sha512-Dhe/7/UZAMX9rtG5+2IbcM7Tn5Ab+iBvuKygs5933IX/Uh5OsOJebsI+tHuEYRdZ/KmJ2CSTXSlbswvvDhxXag==","signatures":[{"sig":"MEUCIQDxB3QJGNRNXj3+CtDQup1fwjbWtBADcNTGKD6olNIZHAIgYCXkVSNAkFba3gr0YDzp9Wr4uSYd0cGKARPytwm/UDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpeCRA9TVsSAnZWagAAaVgP/jUEIZxnI6JC+eJQlpfS\nypCaTjKzskdFCC7Rr9XrLjgc9dcbCQ/ojofzF9P182EDlqXtmkzBqXJV0eFF\nSzkWiykB905Tq4/o3DSIK3EFwtprW8BM3zPEM3Ua26AhkOpLJ1Ufqy/QBNxe\nk4h2tPlBhCgQJ2MlWvzvNFCpxmIO7O/vMpe/VoBweTyNh7CcfxG2XY1RkXQJ\nTSqREOOi1c87HrC2z3hGD0NodrE0MYHDG1IArm6pi8qhHINZvExRJPZwjgxt\n9TD2IuBpp5NG/4p8DPf/4W0nUuuuh2aeN24eweUKSYrKFR/hrywqSofMTPv2\nsO1eiu8/gPtjz+8crCpjiN2lHMZFrVKmMclZyPysPX3CW8DU5xajkbqckWLK\nv38CAnCbfyoT5q3GSE0wH2SPaLdB/CWTQzP5FfFLRSMKePpB2t651d9iB8bI\n6QbU2m6SOctfz8YSQfrPEP3pQxIXgaJ2Suf/mcPW3z3mSTkoCr2yblisMkWM\ntRKQNIesj68bHnqFX4IcwAthAGZwh5dWzkqx9ZQHmJN7HIXPljndU3Igeray\nUKXW/h/bouH55K5YdMAlftmmcTLP8g2UfxITw9IawntcMtHgX11Aoqva99rd\nzaMMXwDQ0b5ljq1uWhIoYtgennctJSHxK5Y4kUwXv/bdKEkyUfoMusTgwZO7\nlhtd\r\n=8uLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.0","@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/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_3.0.0-alpha.0_1560312414275_0.9248172087428381","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/checkbox","version":"3.0.0-alpha.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@3.0.0-alpha.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1464eede37e117082a9a0c650cba5a09da44f22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-3.0.0-alpha.1.tgz","fileCount":32,"integrity":"sha512-9Nqdo7Mtl5Xwmj8xGBCDqrnL/ZhvRO0Be1lNvaPftylG4oD/HeaEngZE89BjG8b/5PgUt/LaSlw0MnuhfDLyKQ==","signatures":[{"sig":"MEUCIDEq1D/7t51RYJi9xtEEi+ECswl/n9pL26qq03H7acPcAiEAsdaig5mMLNdA567B983FcCVz0ulxF6mKAmjmbqKg+D0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw2CRA9TVsSAnZWagAAXDEP+QENXxUNnE/c8/ELcL8D\nzjIeJf94LueNLdBDmU6+V9RgtbTQ1J3GA4VQ/TNQS04bDu0XsR/JXur60EPU\nmxM2g5Iccth0Lb8u3hHFHfd1CnD+ObJTL8SdWfhQuTlUeWmBU8lmDE3mQQ2+\nMFHf/l6OZLR1XrgiVi4qj+WYxHyA5bIK53TYaCwUSzdTbZ9jn54ckiMw68u8\n0jWj6j+w6GfDwOarphQt3IsprI7lpHBqYkIuqeLbcz6zFLr8SNmwmYUA0FJn\n1d86xLf8kLe69h/dq+2AFA9lJ/yHoSM3rX7hzaniviZq1LWLKwhCQwFVXt/n\nEH0sIjrjitlX3pLiIDRjQCZ48vRhkkrLy8YVYesSMtr+SvDQktCdyyq71HxN\nXhjkwtGodK37XnJS6WdDbBgs3B2HPCbaMJpzMwgoESJwNAQD2Easuff2qLxY\nfqi/A9WpbC1w8q2m7Q/rzFLslzPK1kLFJtsgzlySglyf60p2hbu6jg8/iRiV\nHkrt8zr2yaqI4A174S/oKrOoAP2SZN03179FpyWKEsVD7FXnkVfx6CENfT8E\n4wvwJFOIUQ7Akgb56gd7r0zRYeqsaT3d1/5RsH4w9sJKcvGRHxAoxoBWkrAg\n4U09+LyIU7eBJFCbAZrFPzP4D882nJUD0k1biXNb8qqrMhDfa78acoF7Se6k\nzhue\r\n=/Tng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator\n`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@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/animation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_3.0.0-alpha.1_1560366134418_0.5990172577953303","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/checkbox","version":"3.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@3.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a68439253cdf925b7e5cb8aa95741dba5c91929","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-3.0.0.tgz","fileCount":33,"integrity":"sha512-Fh1GGAYr163OjPluOdrHbx6bOJaMQjvX6iU2GNQQXuLYbjkHne3Rw3cVopEOtZyS2VPbCEF2/Ar2obauw1JEHg==","signatures":[{"sig":"MEQCIHuHvJ/Tdu9MKgreSeYJt96SV4bXSD/xoWwgpC4bOHAEAiAq5s2p6AY1/25ioXKZ1mmoU+nGsGyJSzFNJLN2Qgdr/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/vCRA9TVsSAnZWagAAEAEP/1aRq6nfv2fs9PlmT4+o\nJyASbvhs0B8UXK6nhCLKRMNMCd6SW+aQvn5eoG+JrKlIpK++IcLJsHpdaxiQ\n7MEC+9yhhBGYKGWjqPQNYV0yIm/lyhEPu/OD4IImU3RUnbDNxc7G/jH1fWVe\nLplAoGsjkAYYXGzwT15FzU+Rg+yt3qkkdSn/A8Q5g+mWC6kKy16O/UoT4XYi\nD/owmGUYMhRYSQ03hxmKiFmHG0ObDODm5Ig2Ta67B41sh7tf3vx1ha/z99t2\nP/aSwatPwiQBbwmug3QDOEOP9xCSUNnuW6sUzpiw8q/8xlKBL4koGEBa6ZkS\n5w9SQWejz5+DwPqhLwplFoycm9COmWZgfTVf9gk8zLYD7lpMjno/6MLNbbL9\neWDm7UjumOfmCZqqYfgQ8arnQEzgKrKZ1wNFXgqf2Z/rxaezCkfoL77k+xJm\nATNZ3OJaiuEl/UvmAcJvxQHknIM7yc/URFOro9ujzB/KbIBFDu19eUuQhMsy\nbh2GAV9btAtRGiE8dp0Z/r4ZW33H+v/y5aHq2kfvrcRIAJPS0o1114Hd0EBQ\nd6+t4LEcGY0vFMdmeaTaXZwXXTAGon8UsM1gmYrUgNoYmAPbh7/zyLyjduwG\nRn9URhK+DYd9I4Mdf+53fvNBrGJciocG//6KxNfSQomu1x0vjE7gf88TJuvh\nipyi\r\n=L6wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_3.0.0_1561501677997_0.04351761111029928","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/checkbox","version":"3.1.0-alpha.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@3.1.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ec68213075e51fefa70fa58a25fe19956d86e8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-3.1.0-alpha.0.tgz","fileCount":32,"integrity":"sha512-YWKOO3A8RSgPujwhhz0FOrtDy+siN9oDzYhuwNTvJyYgpTQ2CLvTamZYgW7X3znVUeFdXr1/xmRusxfrUPlNcw==","signatures":[{"sig":"MEUCIQCrzpLrFNb8AC2yGizCOUQ51n8coabxp/d1QuYBvWeyjQIgPkraPrvwNqnEQihzlT8OZrGXFCabvRwyS1/U37sc+Q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdErCRA9TVsSAnZWagAAG5AQAJixVFrdwlJMiixclGsq\ni0ixOoAmDtpmp2RCwrvZzLl5SIQktMbd+roRWbQqlSm6nKurTYSCfFPPPLh0\n4OPhTp1aIKE2okbELbP5aAwe7PHcGtfuc2ftDKY1SLtxVT9X8jyotXGkX/Ej\n+YPyxCFaRaB2dY64UhaXiKTV/GA40fuWP/fTVI6BXY00F9m9J2tb1pBwkk2i\nTONsFZKY9mm4g9wsgyNpIXAKRwWItWOcVRx51BNJoLJ5vHcj2B/zaE20+dTh\nTVOLVUF0+HDXcl2l56li2eFjltqhI2/uDn0x4wcrNGo2iJQ/NLdjB+e0KXnC\nDV5zo0hd7ZgH1B6OQSkF8ULf2o4AymXzCCELy8MBE9LAB6hbsebJq76OTsST\nlHamGJb58/reZigCY+MR3HoJGFkjbcWDbA/IA0A3Jti3uiEQ+Q3zCYapHPdm\nPLau0iYCouaWPdvnP+dIWozE9FHnA6u5Eyv2hGXSxJ/HM5q6m9Oc27VTtZ+d\n0wDsEACdkp3f+px7ad8lnmJ7Zbz5jevO/h8CEneKn9FQIlNe3jNa7yGyV+PF\notJvVEWR88UdnIU7pFIvwTWB0xJ3rjCqw0ua64udWDTL81l/ek78FxNvtPmK\nkGEN/LX9JVlZEgxPERJDjFkBENwUlcqYXEpHzQFWtM0ZWAfNqATS9WCaHrxp\nlghf\r\n=o2+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"anonymous","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":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@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/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_3.1.0-alpha.0_1563283754474_0.551924692441258","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/checkbox","version":"3.1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@3.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb8eadda0d260e75e8a7479418490eec846a8520","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-3.1.0.tgz","fileCount":32,"integrity":"sha512-Rcv6Srj2p3MTsODPLJLgRzGW142ovQTKblkCy9AxABZriQUPRCV/fkJwB0LlqecHgubhnjhtj2Zui0o9jhfu/w==","signatures":[{"sig":"MEQCIE4aLmIoyB+Y4JZdHRizKcPduBK7LJSNbC0tebWt727XAiA473lwOcLpS7lylYYm8UwCFt+RqEDziIJMvCfsuDMLqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJ/CRA9TVsSAnZWagAAzrgQAIiUYoZ41ketQV2jFv5k\nIzKzIMsnpKSWXSYs1NEFzt0waNlwT0C6yo8N/7W3bZEkMNvjUntMXy/kxeCC\n4LHV7fazOnf8zNYMMSUoLYFr+jOC9QMniLP5wPIcFauTE+lh7K3TK+D0RMX2\nyVj4/5GvkNW493EU7iExkZLQV/lNLQ3pZ0pCm4DZANltzTL60pVHujPcHCAn\nJLwrTsL02DsCryhO9kFwdVI3aQrPThFhpKFeKNSm1SHBh3/r2HjEGGFEQc4F\n37dl/OsHjYB1WFOEv+MIOWl1Xt8lPtBw6Kai2zvXtcW8XWe/MXO5pZAX+snW\n2KADWR5FwAZX8YehDDFxOj7l4DqPHHkmauMG36Lc87budX1HoDt1hNVHpETj\nfoc9o1Q0cUelho1hRYHks7kf8qKz1Rkht+v2z50e5/wj0gBQIi/JwrePkLMj\nQERWJlKMAfB/m2MkooJQnF3STIN3+twP6KMnojyxMbycjP6amOCfXPVVyT08\nAQUvmPfbo0VNgOeCqcCUSmv8hxd3vDHO3Y5A+YriQJEuUNDDRtn77tlImAI1\ndjQ8MoBiD7a32y1ZfWsTXdHz1M9xtlajsPi98H0+xnVxour10Lvc4DGxbPHB\n86YLCQiauTq4W3t/q1VjTxTjoV0Bwf+iYW9lL6jA4Ni+oineCHT0x78ZMuDR\nIQd+\r\n=wbPd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_3.1.0_1563832959129_0.5809289399348887","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/checkbox","version":"4.0.0-alpha.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaa03f4712b65e537b20c720d733250bb6cc23a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-alpha.0.tgz","fileCount":32,"integrity":"sha512-4L8cc1r6XHLS9JEajnxf1iVB/z2YgUumf+nCX9DNu3zzYtV+i4FKgY0NVG3a7jetgW9daBB4oFco3/kOPr/YKQ==","signatures":[{"sig":"MEYCIQDKHi0i95AL7PkgZVA0ju7NkPZLsZx804dcAy7AcKdUKQIhANBmW7szcNIYXyuZnEokcHedzwfrTqDLh9N75cbZ5knR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4MCRA9TVsSAnZWagAAGp0P/0Trc/+WLsdDwJGxCccO\n9otmWvtZePlHloCf9MW1yULkOu7U9o7opRAr9sUEt5rInl/tizi+MeJKaSVX\nXqEiE8EVOoBs7UHwOXBb4OA957w4DB2dxoQKJj9rsQknTS9E8C61ohvXyz0w\nuxVNBVIlSxVJAyjYoMhw/mLxtFYgcr2Ejo2nYHbfJrOR8PCqgpDS4rZKH75w\nbo3AO2YSmYusO42eV3pJnwUTbMLsEegBtLhIUBvdA/myUsTNJFGBCj3d0joh\nb31ZmEwqLcUWJGBgwRB/XWel4mzK6/DgCH2H+zO31rEpBmjtnSgi/UWV+QFH\nzQYzeCI+pSWkZqE0S8HFzOhB9Ek2qfOmY9Ensw3kgPDDbB+twFdUT2hIlayj\nsOLhH49zswoVXIz5NTU8sX0SWPLi6bVLa5Rb3l3sIfsH+9TDDT+FjRVfGcNV\nH5NQwfTEOGiM75lwDYOXKY/mmriSl6bJGyXGJtiRD03mrLX1i8JA/2SykGbn\nj4OZQKV8RuaknqKtgJ9isPQhw2A2BSeYIfOAn2XWv7CRMt7zNnjDSvj6N1AE\nitB7CokCAsc7r6XpxER3PKrt4NHio9pPrPWD6AkSrCmxnVLFsO+e65+d1pRf\nrZ8c9hh/gfzAP/xAwVOTOE1s4EXQtF4NJ89SmZ4pM1Zm1EEUU8vzf+tNcf5a\n+OFI\r\n=d3EJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n\n```\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@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/animation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-alpha.0_1565212171473_0.0713985396979977","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/checkbox","version":"4.0.0-canary.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2779701742e09cc01a69fa9c22a7c0eceee883f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.0.tgz","fileCount":32,"integrity":"sha512-Sc9ShjCmIfQj0nA8NRK1ST0gttn6srEDx0qJPV8IXsJroqfzjP+AWYNk0pIYw4c+LJXWb5z6ttcyDtdgRaSREw==","signatures":[{"sig":"MEYCIQDqzcdggJuDV0Kuv1a/QULkNlgJWIpfbDp/0JzrMQqGQQIhAIZN9tdka5Pty/3VLGs/hQ903IBleHiAvfDsXhN8pwUp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":516704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJElCRA9TVsSAnZWagAAUksQAJ0y4Bw2x4WC/84pRc2A\nmvAVtKaFS2sAB8jq+bOo1tZh8Rid0nUQ79KRsKBkYrNFnkdy8mu4TqvXBd6E\n/POWIu/1SwOF3SiFjdo4VYhuNlxm85mUQ0fKgHJv/jSS3c26kXQVd8Yj7mLN\nBAqT8AHZ2OMDBqyzf9ivkZ3fvlqZdZDU/g1RxaNaHXm67fshYSU93LMoFdtA\n9gkQEVj6cMoRRTRXhnxgZyBWx1M/T0k8OQVPz3GtW5sY8SWC7SA+w8qF1ykM\n/QqscR+wxFNo1dcUfO6GUw/2gn8Qn4Ad/JnIhEtz0Ow/spnfjDCMSoJydePe\n3pztOHoJGrli7h6T4XE9D3nCW+73ndsQ9Or/shAOLB4QE9p8o2hf+Tly6+zM\na+EKW9TiuB+RvaqomDpJFTJlKttz1mG2nu8vgytIi1G82CEeEwz9nOPhYb/r\n3BeJIojOZQkdavl7i+yxMsxkcRgNYKAjRL/opj7O6++hPt/MFMLISx83YcHc\nsMDkeJPyIJlIYJemPuq04a3wEuyhy58Jn62Y9HpQTghBf/kFaEy2s9L3PyPF\nSfMQU4f/DLU0CC1dZNswGpzhg9PW7qAPkYUd5y2UdbOnShE947H9C9YFMyVA\nH8wfqePDcac62/B6U7CETz87I1PA38xBGuUnkc5FCyGrQSVDdtRro3O0bB7E\nF8NF\r\n=siY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@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/density":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.0_1567658277196_0.3780246735663977","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/checkbox","version":"4.0.0-canary.1","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62a28f6dc4213c9d2e6625b1403c3dd87bb1bf39","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.1.tgz","fileCount":32,"integrity":"sha512-R7MeBOenoMeNvkCB7VAmOoQzH5WNNEwCvdIKAK1VgZK2DeLkhk42O1qsH5PcrcAJXiIpFwjK42MVnP/4YJksiQ==","signatures":[{"sig":"MEUCIExRakmxGq0QEjgQxYCEdNVPqWzBmwjHq3KLdT9PKiByAiEAlKkFqft4Qx53iwGvJWWqDjFLtEGMSuQQk4YkgfBFG6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQjCRA9TVsSAnZWagAAkMoQAJOVrM1gQdHaqaJ3Av8A\nY6c3oCHHpE6t61W7pfk5yYv1yVl5sxushlphcHWFlOmUFpX2pGdNVx8jIalr\nn0bWmJL/gm+UL71D67px+gOrjXxlXiRW1uZLPWj1fvfl+Co+ftwMMRohuYQK\n5E9EhNcooPVoGicXR/dzS53FxljONc+DHpE3usKXsoPrUysqO3S/HGs2Hl20\nIlR0oWP1Zdposex/aIGZA7KriPNV0c7TypYucLrj5mp0cHEexW8fPszGB1uc\nHGqRfnbdDMhWNx3PElKNZKoARPrZV8mM4A5Bm3BLZXQsWvmr4SRSkjgWl63B\nY69vCmttbxS6KGVMk23ilg1XYJb2HPGZ8uqQWH9aEVP7MdTbkFwiljlMXkdu\n1Xsft3ZINvhKiNvnc0GzHm/kO2Bk8qSXfp93VRcuqMtDMQDGohqFv6SXxrwO\ncFlGXNWW4Fq7mxS6n5esXrlFReSy/uDwmCtGOBHCK2NDXsKhvD2wduO9dzF2\nfItFE0FxPbyQVUCeJZHJTeptYvATYGazkvtsh5L8UizA1gaqZEN0tZxqMtJB\nmSD4BaDDQnG4KOIPu5KDNCiLbBGafuB3b+vnj8Eayc7Z/NZbUjpLJiEnDrSe\nTkX6bpJ4jQbw20G2EBvysWSnCjSxhdf0kP9/bQmrdPNZ5h0wyBpKbTAHHv2n\nyR/k\r\n=RoA1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@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/density":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.1_1568060451174_0.5081113306461347","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/checkbox","version":"3.2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@3.2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"168d4e16e160bec17948d06416935250fa10fac5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-3.2.0.tgz","fileCount":32,"integrity":"sha512-4XgQ4sM40j60n4RN43BxXtkFVvyFQgo/vc0W5hf9Qz2uwEah46Shg1nHMYZNvcNW+FXRm96gH8zz3qFgEf1ytA==","signatures":[{"sig":"MEQCIFu7ExIQ//UTPp2KYS3Znplrxn73yNwb/+rrcD91F0eMAiBaRkg0e2OQTqNwSd+TgxCKz3Hn3e7jl73Oe00sT5I4XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5hCRA9TVsSAnZWagAANGkP/13CiQfLaDlJW0AysIub\nPlH+WYk9tDQWJIP6M0e5aa0vwt2nIHnZF8ZJAYc4QndmwfoHDu4gtm1ZR9x6\nchSgw2rK10MuYozz1hdPjSg6UzHPzrGZkygMI2hX2o2nS9Qi54P9V1xcHgbE\nAhDX28YkTp6b107cqApAFmsSg/n+d/PsEYs1tOVFtw5m1M80pV8c4So0Pcuu\njtaSFJFqygX+zS3Gn0M3AV3sIhOFwehUykpgxg3A67+yCMsm690kOTQLsl7Q\nnBjEmwjYGteJ1OcOQ1UkJfzq3eVkhSzDPUJfmrmBtTbgE8rNwmxYpY9YwqT9\nrRCaMCt1AIO60KyUp1dwBUzgL4nioum5z8HhCbPn7WF3nMm57rcbynMNhXGD\nIyyZ0dYD9hOu8lEZHe8KRZImD5Vj++/IFiVnnFK8preGwL7Mo58JfDcdsRyC\np+1WPOlpJ79kBQFJd9+u6EgDvhfouXhiu4QoncDoxWw3O2cwdGjjGV4W3i+w\nugQAlpMd69rWzwJW2TZ3Tnn2WOKtUoUSHnNQ4E0zeMJuEWbYZ06hRtauAUe7\npU2sAw/KLSXS8h/ZIdUV26/EczCUkalkJZMk2OfSH/rBhEqluBiohQfzXpYc\nizEmwBED2r/hPLzi/5sRUZUmABAS1Ayek2SZkKSPc/+kUzbdY3FW5FFT/H5E\nh8pf\r\n=mDcV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_3.2.0_1568325216959_0.8273200273475594","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/checkbox","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.79d881baf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"140f4187f0152086d7d91b52fc0a54be2f0421f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.79d881baf.0.tgz","fileCount":32,"integrity":"sha512-XiS7DIYsJ+ItAwVEKZo22x5dvVFVMteIRF+peC6AGjVs7LyF+7e/DzpegK321uTFek+xfqBxGb4pgIjfcmDkcQ==","signatures":[{"sig":"MEUCIB9Oc49rjNGGXsD0uQn9bcGWn2+4fiKz5Gpsztnkj376AiEApneyjWPkciOvnDyxEgsXlYpWINDAUXnAT6VAqIKlu2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":528392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0zCRA9TVsSAnZWagAA0lUP/30SxjoFxY7ZfYwszGrG\ngetGH2b/dM/XBWN1cIqBlAHaEFpOqzUFo34+ud+tGcMauZlUmRMt4Eoh8o/1\nXhNATbwjrWq3gJKgMsO0ZoI2LNcCjYGH30ZeanMTIiAj8GUqrVao3Nnj9jhk\n7gMuov1BLBxTHjoRdcRoeG7GzEeqELFcaVGM7ak4pGkSBj81PyF4xYCmxWii\nkSTIwOPjgOHcNZnFhyy2cxk1p2fvNuiXRU5qsQ3DPM5JTOdI2WDpAVrz+kr7\nezr6mAMUfsSBfq8aAfBy8TaIQHaqRqnUMRGRazFcwC8ZcL0UVhnbzHqtRqEN\nylKn8rA8ZGCFRb8uXZVmm57KBm/VnzLnGPVKRnVWj22CTlw5pYRUEcacWB+V\nsrvlxS/IeY3qBwpo90op4UonGA3LR0QvDSIPlIm7MCQI8x8F1lBxj66+IUx6\nC5xb/MhgpPjjU44+RJdK7MjkHeSDHzFlQxIGfndC/9c57sxEwN6LFiTiSgDi\nWhgO48mzhdX3FafUAh8Da9KXyLC39KAGmvo+POFT7xq64VNQf9r7eetp/7aD\nKdaO9pg1+W77wX5B8OOkjmlw95rrSCrqYZbRNBtKzeW6baltsIpZyUgMUMPc\nX1cNK7xAqDtX3ryocuMLXDp/KVkAKO3MgJPeSABwwi9Zs2QZL6jyn861VPMG\nEwR2\r\n=z6Ai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@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/density":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.79d881baf.0_1568341299051_0.9472678839533626","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/checkbox","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f227fbd66dfc2088d927e23c222569b6c6685b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.e851d4f40.0.tgz","fileCount":32,"integrity":"sha512-VGzOOIOEPjAJyNXXGc62CDJbbduaAvKLs7s2FTZrSHXcGxl6wM8Nd7Hq7TVgresZFq9xA0hbncsbxAV86WbKYw==","signatures":[{"sig":"MEUCIFhcqGKr+LrcBqeL1NJMgyFY8hhf2OGCfXZVZR7vWgW1AiEAyExfugd20wejftWhISu0h8kJ3TDMYp/lYdZbXJaYyOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYACRA9TVsSAnZWagAAMUAP/3rvZkkaRt0DbtYTp2gJ\nEyOPFib+I3C177oniuPq1jMboNCk1+JYZQ3WwTZSOvovVod2S5V5fdp++3UK\nVPY8p7ON/jdPL9xc/e0jtElLo1HUFFsFVu9N97Zj6Yr0t0RTZ3uyBKszY6c2\ntcewortFHVNsvZuXx2GtWtzgxNeX2T7DvTUw68ZgOVjPSOwMsxwKVR5iSUxl\nMQm/IskGWuqXbRWpZeQf/X9+H6Fpe3ank6PWpsUQf12EG5PUB0WTAvNmFpRm\nr2qODqmhbQUcX5VDRT3b1T+Q5konq9wL09bX6mI/b6BltJzDa9vrTNr3Gq1h\n0O68lukQShMsuTE0cSd91NgH8p+XtE6JTm4sWvdPgOR3hmOo2l+20doYkDTE\nKQfHdb3kofNh5S53mau7M5RHoPkbjxguawyjUYzjNYqMS0jyFEPCzeTsDb0X\n1R2+in7AS21GBtFfZRGhO6VFM372mN1j2DjrYj4LaYM6dPLDanyFKxeo+d6O\naj3c3TIjjwFZCw+NRR0P6rb5LS7q6KuhPygHWr6m9H2Bjlfn+CCLWpdoi8Ez\ndbQlw3QQLdILphDeBxcaIX8lT4NXpAI6euuhjGQkMDgeo6kncygSHz+TIB5Z\nmG+e91/dJsjhRa3gGEzS7qDW+nFgsRp699yZL/ZUzi5vqPxlzDP2BB9fd94U\nYzOz\r\n=fyS6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@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/density":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.e851d4f40.0_1568347647495_0.5420245050861354","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/checkbox","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.905884690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b46896b66f555f7b7b548555fd46818ada445d4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.905884690.0.tgz","fileCount":32,"integrity":"sha512-uXjE2yQfaZn6G0IdAaDfRtFoNV6n0LPGmgtrVigl9kZYD00dSNWOHNrRnJRSN+shxFYQFo643X9jeXGDa/3Mjg==","signatures":[{"sig":"MEQCIFoaDdaQa3fbxpZvHLoC8liKz3dyAkzYHCKIBKEC05SwAiA81XqWqKWDe/Ep7ZpP16y+Gxn4JKwuphV0fHjmo45BZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8/CRA9TVsSAnZWagAAWi0QAJGnNBndGlcK4I4+PvR3\nqQlbgT/HcwgzG5w/ASYnTFXiOyFTrujxeBYCwuYsbst+eIKqn8WhZ8JIr7vM\nTpoFncGe09L/1S36oUsHcl4heiy4Vig0Ss1FoZ8pogDGxK9Y681zMyGlDmNQ\nfA0q5iQ1ZTtBgQfYFzM/WD8msczVwapDsuAqx7I0bIes94zXummgR34QDIQp\nFCInEEq3IZsXhwtfj+pAMx3oR5uC7IEXC5k1OUYvklwEQNm0gHsZLsw8P0xD\naGnyRLQZx8lnYCz/JivwkuQwj0UjotrUo/gdJaSg8Z2H+6HevW1utZM2qIvk\nz+wAiQNSH5XZ5Fous776/gsX8PfrCv2Jr/yzCnl0wCCYww2sQdyismIRJVZB\nEtF/FcjXYO4g2Y0vbK5xGvq0lHs2u8VOF4UcdGQA+9QrSEJLqbM5IdT5rH0D\nI44Okt/ED2BDYGOPcbJ4yM/afbitcS5NIblbc77ZGpKd4FgZOVZK/8PBu/Kd\nujXvfIlG3HxW04LBL1DNk4zZoYYsqwijhA7WBbezyfCUzY4CKU42LESCRy3e\nddxjfgxvKe683IH06Nhe/6mhxNYvGpf505OYWoEhbzHSdtKrJSWyNVfPEHBv\nC2JFlEwq1BhfosCFMnnhmhaeIaHLXJC3NjqjFeOj2whvuvODfDqQBmCDAlaC\nYmNi\r\n=A+W6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@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/density":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/touch-target":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.905884690.0_1568677694412_0.3342530534033539","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/checkbox","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.199534d61.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4395d20fa9b880d1740d4b388d6cb182d5accc6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.199534d61.0.tgz","fileCount":32,"integrity":"sha512-U/34XvHI0lhCCOpFEZMnfUZWeyQWURT3REhIcPYKFmOASMplxcQPu1eVXzYVkxATw8B0ZCsmSPV9noTVbne7tA==","signatures":[{"sig":"MEUCIHYYHwZXoUVQXE8s97+ZltzsHah1NNoGEpXDXEwGVqw+AiEAtgvFHnrdfrNVLzEFIAHtlyEhQ6RElFtNe9CKr4TpVaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu1CRA9TVsSAnZWagAA89wP/jSg8m9WeR6bWFxH1lqa\nnK0rLST7/RQ4kG6D5nDQKqpJb/9y74R9xixy+LvWiS7aczp4WP6kSfiVukYQ\nbVtOhkBxRYwbS3+jtWr2J2od5ElOsbZGR/AMQnzrxURFZts2XdYcMNzqAgFZ\nH91UjccjRCuQ7VZqF9A1K+GVuB9wgkyb+fUyslZUcc7x2knEuAYJho/9Dov5\nySe4otaBm+d2LGwaWIE9zsF7uk8WXWkcarZCqgC50+L8OBbQSuxBGPj++86X\nhPGpwEWQ/mLr/FX2GRVyiGpWqEivGjlSPkEhjfjuIFiVgBbGJ5VXJqu1STFT\n5jEVdPWP0KLvToJ3fgjgz9+putFffiba1JFECncEDuBAPKTGRL41ApX+mtkW\nF1lkkDq2D1xq3Gheu2SBy6GsdLCytlM5ogk2ozvJpDKDjAWsxxAip/Pj4zZ5\nBquQHGL8CEHnhhCeBqkgdhHx0VXXf8liiLL37Y6sNCONbomZ645zng7C5H9S\niqbl0BsXgt1pTDBiMr3E4/rkMfVl6WcMyffpLw0EvpWD4kYYzyRJjAdv10o8\nJImnHCqQ0A/vhlKBkFyi5PGRDBjQN9BmWM/2UAcDiBiqx8aPtwGpcD77MyNK\nYvoIJAbgUtWtKu4tiLHoIYxo/6LDtNl1wk39mtOsCUqChRBZsRA/RzR2E9qq\nGRmJ\r\n=ETSZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, e.g. `$density-scale: -3`.\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@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/density":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/touch-target":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.199534d61.0_1569610677227_0.3284580491356519","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/checkbox","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4260ef771b54f1cee0bccbfd9bf3e9feae234975","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":32,"integrity":"sha512-5cb3+pcotsJwkAqn+ZbvDTr4sj95wp2CBHFFtVhRdpq2dvsMXcajFs/L0eHljRPB6yV7Nqa71x9bDO4BVtiXmw==","signatures":[{"sig":"MEYCIQChcnUqGRbBIcvemf9ijBOOHvYa+z3Nj2ZzS2IyV8CDbQIhAM6+V1yKH5swupubDcNoTBbhYTRTg6E8FPf5EHtLick7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":531111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaQCRA9TVsSAnZWagAAZTkP+wXaEJMGkj02LUrSUbRe\nfy0gvgw/Ld66E/nfg2OSdQmyT+NILYXQdsFuLuN450a/PYTdoj9HY+/qKR85\nVsC1bmetjert9zYA6ZiXAz5+wWyDv34JnDxnMLfCd9jkoFh5IoRl7a/Igdwi\ngxNbMkqYTFQnT8QjECSecXn0kElEahXZlgeWk0uXk/qjWxIRS5TZ5cwrotMk\nj2Lxph6TlKy1hpJB05mh9Ul8TD7fndCrhONena8RoI5WuJioBIrkrhnG0R30\ncPKsUq4vOnKXjDKvRawttgj9L5f21cHVXCK5nzY6yhGPp7tbtjYknncMknUP\nODu67GDF6XXXCaNFpL6YsmLSmoWkjQggbU8bR8vLYlGss+By7ngRVH6iy4o8\n8Da5Vmpn62OaHOmrnxL756x43v2gGdApb+/6iU5w6cQZw3w9C607PI5KI0mF\nJDfXeQ4gO2mWXg9kRUBzLm/iV82sBeoEp72sK3oWPMeO4UFK8wyUsdnYvzcD\n5n1Mwev2DrCxErjO1PrapUIJ1B+oOLUtAn3yOs6ScCSIbdSUJcmqUa02d3ER\nZwDNrWU1joEsMDtaCT07GMKm6rlHT/rcV+n+StoADCEME6zPvaifldsTwiIM\n8cJ9zzN12TQiueDTCWct+O1hy2elUrNyufmDFlsaIW7o/jIMchMEm9EbluLb\ng6wm\r\n=0FV6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\nNote that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^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/density":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/touch-target":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.22d7ad2fb.0_1571165839832_0.945371767354682","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/checkbox","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.735147131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fc76783a4b6d2f21282051b436326706b748480","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.735147131.0.tgz","fileCount":32,"integrity":"sha512-o8EvtMd13krsxDaN9yUXKVj+PszKAvr/f0hd850eDMoz+1WETSUBJXIN+KHIQuPSptkGfoXuh+GwXOYPGIQhkg==","signatures":[{"sig":"MEUCIFPTgF7yOV2IozhhF5I8613gLkags1NR4hHjlUu24zkiAiEAts9ULPLjMbHEkiIwj+Fx44Tv4kKXin5l29j3ymbUtGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":539011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEfCRA9TVsSAnZWagAAPcEP/jL/GNLLlMGD/bATNSge\npBt7PayVpgO1e7IG7jPN2Za2DaDUIAAD/BGOdVswfpANYmBuonP1OLSoE8Zw\nSOXhRlWCiBx7KnFk1Z+DErbHiXSrG6w0oIDbQlg4jp/gQNUWlWBy7vbm6pvm\nJ5gKaug0SulGyb1AajALAToCB+SkarMavMiWZ+Ao62WoCA0DFXUqdsz0BoNH\nb0nPbVDF+EStnOLGPzeilRwOWpWcFK5IV10QOvR4628sva/GHZCGuNfMNJGa\ncwye8cdhysSWWigNHeqTgQ85qPUR978cGiyVQukON1jd+1UCgcJoCuek7E4L\nlS8b/1kQYNHBIdMWR0ryZm62uKAvqzPv7CPg8N5qL2iS57wTxw7Wb6HyhDZo\n5ahPeImu0BUmvAiBUnKDgZ75yk+dIpX6HijTdyJ+rMjOCPu8AA66H6RBam3F\nlv3sir3Rug89yZyhNpY2hZvfklOoBW6wUC7BPENdKgwZUg5q+bPanUqbQQVU\nlWZJLLE3XX93EK3OyLzrqTh5ceewcqBZouUF/qJB3y9nNgmuGdUo+Sf818Oo\nv2cPGxFAXc/ahvUBBKlOOmWuvUE9FKLTAxHCTkx6a2V0RZVr078+NbMOCGU0\nhuKHX+NFOPGY/JHjJX8LMVEJaYyw3UGzCevYEJRm1Bld5nj0qRLnMnpu9Bw5\nlE65\r\n=3DeZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/touch-target":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.735147131.0_1571189022657_0.0996412042545578","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/checkbox","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e66960a8131732f6d38ef457d5f37990c24e096c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.062ade5c0.0.tgz","fileCount":32,"integrity":"sha512-bVDQXSFKLemj0FzZIEB2sY6/0jvZiLkHK8+f2u8JAosAmc/aN+R4fHTLCxUDDVJknMrNn1ykJeQcdGO7fLRG3w==","signatures":[{"sig":"MEUCIBrRUgTE16xw6cWlyIKpxT5EXN7L8bZuHiL1AGrgUjVsAiEA5cstZS2j9cU9FPOCfpJ2LvA/OjUIhfNA0UGDej3HjlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp712CRA9TVsSAnZWagAAsUwP/jmJBfovfn1MpKsW/BUn\nP6ddNW4g4k7/o8+LaMU7jFlxd5h/eyNqQ/H9synJSDZMtssSM7VOdWLmTHER\n9AQi1neJH63isQqtO/jLTIwmrjSWu61PJRoE5LB7+ySZszEi/WaVAceJMlWN\nbu9zJKCyvOhNfKBQnHV5mHFbGaPn5rzDFnWC5CU5+xrEAwFPxccoA9r638uZ\nIQ7jmyf9a5N9j1gM5lN75ocmgvNhItttIGP40BeB/SbsZKAbCGdsMtSe1Kj6\nINjbsqGrfc6OUAyw+cps6lvWzme61YUPewvfIIxcNPAtinu+SYEdimvzSPIu\nGKu80PFDqx0PiChU5ViJeqFcx7VhxWjNKLAHCqDnhyZ4vg5vOmcL2ZAH82nr\nwS+g7vDJw26/eCalWwtLvGzyVTOkuMp8GdbcJIA0miVmzA/JgWeU6mjT/yuM\nw27jZhOukZgYGDbkqEPNIKB1ZJf1//jV2JNgFIXcABqwwSf7rrH4XNn4CXtZ\nVGH4+bz3Hj8wER7zvD2QF67Qy/nGhVMHBaMOZYivKRSmWOjOPw8ty7UVckhx\n8SE4k0ytVgUC40nesQ3KrUq5kH29BF0+uYgR3EzU/wxGTS8K8EtgjwtHDF3e\nPVmFIdui9eC52LS3fdodBCX4QJhVFYr5KqSQmbRkXVSABLDBs3YuVI5JIopY\nXmqj\r\n=agL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/touch-target":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.062ade5c0.0_1571274102269_0.5433538507367088","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/checkbox","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f12cb276f22f7f91c467ef149994befc816e5fdf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.774ad4f8.0.tgz","fileCount":32,"integrity":"sha512-qIbi9XR/0ZiLwZyFKL23IiCz2uzXdYD8EFTuLudsqM1+UyUQ+x/Xwlf+Vz9dN2jxnPqBmaWTLA97A36xlLrBQw==","signatures":[{"sig":"MEUCIB9uLnHTWiktiniSeSmfg+nb53iv2TDJJ8DhawjsJs8+AiEAzAOTKtNXlNWWDZZA1EZdBc7GozcZAigiap0lhuUH3lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hdCRA9TVsSAnZWagAAX5UQAJoPH7SSrjJeTkhdotGY\nP2AhVrohhFTH+A2/23ZxAFAATsbXsNxzbrkH40M5/Mueu5uh2PWLqyC7z7Lh\nk9z6+VBGpu7YhUn+zrhIPUPrelWoioJCGyTLB4hpWSq7ml/DnR69XDxFeJPU\nphpRL/d5abTZeu/NBjZMMs2gWF41AnzMq95ez4rgIZ+egE7965CnnrUAijPj\np1qWMCumcyk+MnMWYHvSHctPebX6PQIwzQL3yNOcRq5XC38AS78i9pmqu0wV\nr2nZ+noEdzrM9t4Lp20jl8SNblN0rPimvjos9mc/TZ3Vefyy5aXrqBaRQ3Q7\nwrzqEOjboaRMb3HqHHWRyA/S9NHfxJl3aanwGzYsQzejdgm31J6Lj+ukxYZk\nvvLfDb3/ZOLN1n6vRFdYC7hDHAGZJ8WW5nS6zdWu99YM5tWK4BJOIRP/3dch\nWbG3CnDf6ez/HIZDTsEOe6nmiVil4JFeXldX99sAgljZtn2cQ7J/e5+zUJch\nV1h32MZsmyIQw/JNzRv5aB/d3Gp01NiSi2xCItet98oZu05c+/VVQVp1DoEY\nMKXgIZOI93coTtnX9slZQFRbpHGhbUrJ1j9rhjpp0Fodom48Nxsa0JvX9jfK\neQ9uMR7XDp8u8Kocw0o9UDOAYTtQ9oOAzl923gbh68DAyXq+ndG3GMPfRa4Y\nBkgr\r\n=pytr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/touch-target":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.774ad4f8.0_1571285084388_0.17845491200659747","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/checkbox","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.5916d18c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10cf89f0aa19254f2e8fb18b3c3733039fa85957","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.5916d18c.0.tgz","fileCount":32,"integrity":"sha512-czccbO/fzme/j4M05nk7oxFrEeMGZNenW2ax176GnbsOGVJI6I5gz8VY8IJF0sS6+QDgtGuatrj91XmdhzuE1Q==","signatures":[{"sig":"MEUCIQCNFCeGGPICDfjHu22i8qQ6/4hdURgTItkjRhr0NHVfJgIgWB8fuBeHC/4XpGMtZWMUCbwIjzfxpC/BxhH86GiOnEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498105,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvTCRA9TVsSAnZWagAAE1sQAJgu69omqkgRCl+8jp5X\nY0wLrsLKjxQBGPNJ4MkKL1zfNO0dQlRvjBa61vIyENwwlyPg/zVAQscJ7GpF\nC+O3EHJLR5bl4c+kAgZQZfd4tSjtMr6RjlzZmT9hnJcZHRnLWcYWjFx8aY5B\nuPp4zjtkbe03N62VLfJVL4MQnjS/4HELrFCUZNePClbakBQ0HRKvdSS8PD49\ng9zhbVXdzfCFgX8O0SkA1nQ25ZyLrJAsnxBUqB6/yt4VGIwTDTmEf2bFv/CC\nCE98IPO6T4iLlv3hY2pa6ATR1iNbhthvdFIZz/Egx+7OeI3+3rXSlZdBT1wt\n1rkE7n03QEjsSfDjMYEaIlKuIVVj/5q+bHm1Pr2lrGp00eldms6XGKovE5kI\nDKfT4++VDLuCnCi3CPfwlKvCQ2Qz8DloE8nF6vGrCBB2Q12ToBp2bGU32BbY\n5UG2KdSYAecEaRmlkBAKJ7Ta5N26J6srvMCWHkKtL6+JTIS2DyU9YGnLxwak\nqPEEoqBXhqqHZhX7EQlK8ZieINJ12vz+cIYBIyVjgnxgexYpTiOdeiCeb9B6\n79jDKpWf+WEO5avKTLZKxC0EFYqX+c0ocbbUW3uPcP+syZD6ulXH0/IfF4pw\nokhKFO2d86QPOTQzD63OdhN41uxu1WvG6cHThUECWZQFO4Ri06SU714/X+l0\nzVX0\r\n=JD3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/touch-target":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.5916d18c.0_1571429330898_0.701475492068822","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/checkbox","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.d4141c95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b68ed8a7acfafce2c8b97ba1b7a2da7d8f8f81d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.d4141c95.0.tgz","fileCount":32,"integrity":"sha512-cDQkA2rzZ0bIO3DmgL1CyDQEsOqPNM6Ldh5XeaCl85JOXRumGXi9Ox79r2lTec8YqtC/5AS2Cnss090Em0GvYg==","signatures":[{"sig":"MEUCIDmBf9Q69pEAg8krD2XDBO0BptxE6dcT28fV1dIQQMpUAiEA3ePJtL0DITw0IljnYhpQ3CdUTRzZfzcisWC5dYZcfVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCUCRA9TVsSAnZWagAAEqoP/36Cnlz68RxyiOHhhyle\no2T6BPvM8R5OMPArESmUt0cqfva7FlSraJnOXmEoEjobqryVe61dEML6gNJM\nMaLRs7SH447o0EAHer5f+o74s18J9ckc3ppKNEmRuvTwNOL4ohZHWjhuoaqS\n/i+zT0Z4MAssA3hLyIKcdYNlPE8THn69JgqvW2nF3OCXE0xIrwU6FlVKIGMV\nfhLdt2FmbAtYc4nSSywV1oYgQ9w0HgJn3OLNcVB7M2oproDmW15WmbzfKa/U\nGvkt9s8ILz2PZjnximbCb92kd4flS5BBJVtQ43RQBs9aUSAGYefEKR/UQwbF\nRWLVGu+5Tdv4NlbeyS0OBpU1LNNEGtvEC3ctYJQa5MGaKgNXU2MAUf/KgJm4\nbzW/EnHsZf9zBFFM9LY9Q3kJ4jsydk9Ca0wQH6/6GN2POjI9NL6ZTJwzB/oT\n9c0AosrzC6+Ct+c7qq+L29AeXGP39yHV8DifYnXd+GMpQPuqucaEE93mVB/8\nYxhQjTvBotiEdHRQqFTFwG2F2kxW9l9FoHJ3BUcmJ/TDRfRu1APhN7R3uZs6\nXUnIl8y9pUEA0nZNig2EdtlY5nGCGg8BF05VwD8mYdJJvXkl+K0jFaq7YClg\n05ntPGvVNWq1gRXxP2ii1SKCcnVFwKVcbXlcR2YsT/BRg5mG8o4jsfbgRKEh\n/h9A\r\n=DECs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/touch-target":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.d4141c95.0_1571881107740_0.19541887181062223","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/checkbox","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf4a286f24051dd14f3a2efd4c90833806969d5f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.2b878b3e.0.tgz","fileCount":32,"integrity":"sha512-RRehLvhQme74ZMMvwWdaHKLIebsIoNoOXxZEEi4L+c31/ARna5SQQdu8sBCJPIS2JQ9een6Tou0uxCrc70GkIg==","signatures":[{"sig":"MEYCIQCkg2RAu3W5QRdHaXg3+hDSkbb28OX3JIyHhtGMvpxJRgIhAJVTKTHRFFFX1m6CMIMBvKCWU7J9/hFWMv6OhN/d+em+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmxCRA9TVsSAnZWagAAwYgP/35n/tZ8GcmdMl1TTOxA\nIe/AQF+jiQhvqKY/r9FICb1Ghx3Qww7ilLAbRDl729dtLXdeHJSjieLypQyC\nQo6uIKPuXgcd9UFUrXide9tdSkwOW/0zRNPuvQvO1dwJihfCEEWNN7hg8AwW\nHE6l5RiMI+7K9kC7R7ZYiZKRSkH3oVSwZ7+LL1crwziJPm+thXrCx3tDYvwB\nrhFV8ajwwAPU0eWSwM6NXme51tzKk0eKeNZC3kW43LBsMI4BTX44ClxnznMC\n0j81q+HxiTdA5NaNoo4RCRfLFji7yI95FRpMput0XBVVZK9H5KLp2eDiL0NX\nUureWgnxibDO2ZlvpNeGucJ2PTBLGC2jJEFQkIokFOxYExgVnFAggd7i0Nab\nogIuv/XN9dBn6pBVEYwnS/WsbqsZnknp1bByd9vLUJ289+DdQ4nB5SogOT9y\nr4B2JGU34JSKqxSzGI1LtzfSTI7w6S+kNLzXGTmbw5tRzRfycV9ZTkCRuU97\ntOQqeottVRBQrnJKq1XYi6snyIuZ0mlufQoqG8Po5+8m6nkXnEB1Uqyk2lBb\nCWUZiB/emQwch/G0qqLoGBcxNWi95FNLTiPlvt2MjDwIKsKVRdtwrLl3c/Rh\nyMfARLvc6UFFjnsP50EiDH09HXEZ7lxtkHz0rLOrrvM+s93OWI+NqFBo6LdR\nR9YC\r\n=b0qE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/touch-target":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.2b878b3e.0_1571969457054_0.9589921068017226","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/checkbox","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65e9d48dd7bbea0127059064157d5aadf719a32a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.b06c0efe.0.tgz","fileCount":32,"integrity":"sha512-NbSj6kdNUXLRtvWl8Ju+AdTyBYefps9NUrFe2GN8kg6dFGkz9pQhLFfmPN1yqbW0hyhGM2lWePP+EWawOPivgQ==","signatures":[{"sig":"MEQCIDIdMkWmKrz0vsIbI+0ohoZztfyCLm763wc2z9lpbgz1AiBcTyiJmxvrCtRzDPNWh9V9x/Tzt4uYs7LNRslITU7xpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LZCRA9TVsSAnZWagAA9F4QAKHo553SFG+n//CmROr6\nf10KmneVYBigCgfqlrqTAnWZiwg1XGmQYEEsSxoqc0vZvl+svNRAlRpNUjX2\nUjHg83Jkt5YUkzvuBET0hiFlXFEmzUGuI/sHz7L9hH+MM1yrFi3B0um/zarz\nAjbyErMXvxcm/PPwmbvZdeeg4DvM3by1jmSnBqFL4TlbqU+L+1ekZDgzPYmd\ncfBmwRAEfHPQ2zsreWwu0lAGTaQaLEGXkwqm0f1Mvl93LkxpXDccLAKAFCa+\n5oW/U7lHxAtnT6MAM0oEBk28YnYFsqfoths5ojahkEiqjM47YbAGDZbc9wS6\nTQ/u4aLlDu1pisRBwdHSSVw8hiKdZmyyaSFhxYX73mI+tFWGmZJzbIH8uvzt\nm0S5YnZ9JIRXkIQl+Q4DIjU1ML0+/ZyJRiR8lsGw1+GED7eF7FcHhjjTCrlt\nl2AROnK0SIe/vwruvdf//NgO7gh4a+woW3/Ko7RJDuhAwJQRdcdqJl0ubo7P\nXje20y0HMeboVZWS7wh35qo1I3W0XEPmw+r7njWrpbKvekwwOyiFrlLOfTqZ\nRt5hQ7x5ZnAI7AeBZY8rKHiteaB7ccxCCzdfitSG+/xY8jNsHsTCtXiz8/3Z\nyA3HK6p4c+W2IBiXW1yc7IZ/Ya1oUiqehaN+eDQoVe3/F3XO1Iacq8YHMef4\nJMHN\r\n=OGzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`\n\nStroke and fill color may be customized independently in both the marked and unmarked state.\n\nAll parameters are optional, and if left unspecified will use their default values.\n\nIf you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/touch-target":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.b06c0efe.0_1572053720425_0.5986279850241294","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/checkbox","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.01628efa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c67a5ec73c3250b01eb8eee5683fe9baea99498a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.01628efa.0.tgz","fileCount":32,"integrity":"sha512-+bbFH+mgpNCGZeXJpJms5ryRomOUj5E1g/itnp/LyQbnGFjUaxcxy6mqTx92F7dYQdR/lloouTCgVLjpHCgn8A==","signatures":[{"sig":"MEUCIQD3z+9vwItCI3H1EiOwET97GhZ92FC/kbWDWjpT16EWKwIgRpGOVSWQ/iLaUS8RThKi1yoMSKlXEbU6oQbDgFHew0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HECRA9TVsSAnZWagAAbswP/1yjnVEfb+MgPiZsWFj7\nTcCMJ3Bmp8Ql90V6EQPeMrG7DLVWMK9Z+pugyUK4zqFWf2auYrQBEIGX58Vh\nIlmZie4vfxek8RIkganhyDnx+GzzfdvaPV0ux1p7EDRooMiaW052ZCs5k9EP\nJyFA8j/fRZvyUMwWjHujJQRS6flhrgvMEd5xjldDvjTsnDnIbrsDalI6dXNE\n2sd5gTLS4JKA49Y0yFEzcLDhKHXgSZxO7r8T4iPTwitJN23eU3V4m73L+mGJ\nLW+FxSt6Gr5PR86UQrNfZmDu3kYN6eB3iwayHd6cecXLPu0P7CXF7KcEVepV\nGy1zVk9CKdXd0JwqB2HOJcL7kp7VgxgSco+weFFHY0+99fDb1SAg71Amwu0m\nmgpDKBFnSAd78ChOJSM1KOqQUcZMuUPxUXqjKJ4NskLZ6OaPUgTRPUaRlZ0n\nLXv4tFZ1e+9dShyLGl6qUFrAcLs/r07NOzelHYQYYwLrtzxIJiWfGZCKyQiB\nymIRvjPLMrOJTsAyfioApyobgQ+ycrCwQ0rihfgam+f3kHHyjxAHnRT33EUy\nZ0Qq0wE66s1qu9cJPnIzjDccfuU1ky9+49zYeLvtkg61elS0M45CY3iHwuAG\npGm++DhyuNalPx7jkLY2coSsF6WNCP9DjizX8oVMuUPaDxV6yMaz4+BNpRgY\nlGvl\r\n=UDyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/touch-target":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.01628efa.0_1572307395612_0.5908302706825248","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/checkbox","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bf546abe003c09339409faa61b0a6525bc07967","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.b5c6d66b.0.tgz","fileCount":32,"integrity":"sha512-gTtEy3Wu+7Zm7Cw2d8Wo+yG2Zv9gJN1ykl/8f1fNapVhQHDoY6iSEITd3ZaTxsMU9NNXpH7uSZ1v33OkLVy6rA==","signatures":[{"sig":"MEUCIQCy/4/9huOSk0qzKUAdzuZbMd6j1oR/nMk+iNPY9Af2uwIgU0/OrBQMyCq/OQYT7CzgWtyjZOOUGTGp03ISTrSaDiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1wCRA9TVsSAnZWagAAUK0QAIVftV4uMAQDifC6ThZ0\n3VnLd9I+TN4lsSH0/X70at9kH32r6HtjcYbtlhtxFLTRsvT5hqhz51dtpAHd\nyu66x1k7qOn54IKtNTw2q5COZP/cs3e8z7WD0y3QoBsuM1cXBJwzGvRpAEk1\nvyQ+2JGaGaomNyHCHK3W5WZdDNhxNUkF1Kl7FQnQgsHxXUemfXctFUnwtAsj\nR3LTW7JLODjneJsHrT1Lo78fODLqMIFSa8xFIngqvGG7ART0RaT45FUWU+lq\nI02xuGJA/t9TtsiM7+K/Kg17US6QFZwxY0a4ypIj6hNWzlRL0M/Hpjbw0uXn\n6WiQzD4o8gkE/W3Tz1zREjoNilsrXy1dSem2cnShXBanGWZkSpP5vhqZwHEh\nRJlTKRtHmcumN121j07/+nsHbW1+Tsjv3RQjqAhv4XQLTKG2PcGMiJSYUkj/\na3PuzqfonyxBFvg5v7L9eXGIguVvSbeYPsuSi83ELVG+PjKhGvIPMqydq9Wi\nQRszuMp8NKiBgB3wUhnUeLaZsTkcm5Llh/sqyFyVk4pNhVwFpCzyW93m9Uip\n7c9+Dmxi2RPm5YNqkuWZw2GrT7+yvJ8178P1W98eG2RiawZz9X0Kqh91A8QN\nNJgoj/m6vrb3iEtl9M0/nO1dFRBqOxfdK89XlijDQFMe3tkch2oNqv/4hzfC\n+qdI\r\n=KxIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/touch-target":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.b5c6d66b.0_1572371824344_0.4978109620933493","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/checkbox","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72698980c16432b32cac9bdeb8eca2503489590f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.cdf858ea.0.tgz","fileCount":32,"integrity":"sha512-G/VHjvCnqZrZZCrqcmd9xto06AJkr+2jH5SsOfP5cdcdCkcMqahCmHXgDOaGPuunxEnbjn9J56wMPogiN7ulLw==","signatures":[{"sig":"MEYCIQDi1Ma6M5j027QmdEFKGMei2QAARGlkHMOJcblGKyf+lAIhAMBDJ/e7E4TylZn+WurR+j2Wvdnf5qs/Ac09b9g2aG/i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJqCRA9TVsSAnZWagAAqw8P/RtuLEob+UpS6ZrPLGD7\nWnQl/v7UVG43W3eK0ZRtcZmYQ/+Ru+Y1p6uRQPhKzW+y5FhxPJGP6IoUPvTf\nCcFDTwllUnCXMi1rCT3RDFrXr58ecB3nxKp0Vg2RTMyVqKDUzB28SrX5KKHq\nqsj2b+AcQCcOytwCHyHsRBiq4ooLMprmb8wyaFostA1BgEXsEI6QEFSmpUGR\nxPtMbtpse7gIdhsYxR7ivKzpkJD3hJPNa5WdPOOde5K71Uw6dJ1KkISiDWkn\nLL/MyZD/AE6h2YHrTWBxK5XqkL787f3QtWOLdGwe4452/Vu4a/OX5cf9CjUr\nOJzhDEzAs9bhJ0rNwnGP3WdtMvomrOe3o5ALi4RtACSsHtEQOPVw48+gS3BR\nWJBM7MFv8jLyb9rdd06SaQH6NPFyAAztRrp/r7RPTBt9Li0TzZfzbgMoh99c\nLXpeSEaS6SnymkpyxQzKO/rkOg8EG0FZAIHls7QrsrEUwEJQC5TDjc0JnR+o\nZVaWFKKqjbKKVJ4etQSkcWlYjgHRdAmwg3wNOlZWSy3r0ijOYIoUp17dFkYO\n9CBdme1lJ06xf/ssRD8LcF++nTmU2N7Olw2ggETKQiBgq21rH3Zof/M2wyKm\njcwvDcLhi6IV/W4bObxELKLGwz0oSGGwwzJ+K0sFryouvixW8PWWzrdp03cD\nElqC\r\n=t6Vj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/touch-target":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.cdf858ea.0_1572631145905_0.00303320718456912","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/checkbox","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.719b57e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ac3028142a6190bd315bb923c5bc2f11e100d15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.719b57e1.0.tgz","fileCount":32,"integrity":"sha512-Q4TpREBOti8CdxIAmxRs9/uldgmo7YRw6HpNVdFXQ97moxwronQSYWK43+Mq5Rhtc6ME+ecBsd+I5GuwDUQXcg==","signatures":[{"sig":"MEYCIQCA+gnoTHrXr7YaK6PFsZHaqDbRn1FE99WNQr50F5rgfQIhAMJ/vPD15ZPcKR25yPuwnhIksM6F2lbIy0VkJckBpA9V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8rCRA9TVsSAnZWagAANswP/2QV6Bc+RJGwiweQMdiO\nNEHoBjYfX7Yu6IXvI7gnG0dYBfq7pOGBAVmEw56waWL+L7vnzeGfkPfycv8D\nZjS08jFvdI8wODB9BEZeh5l8xM5bcewFcOpAuRk+77Wc5jhJeT7W87wQYGqy\nBeh5QzohjXMpFnFMqC7jbmpqQhjeO9GVsifw5nrxtHvUdJRXHkRow/Hxy/Z0\na4d1/tbMDpbctyQ3THYDfzwNlHhmSeD/lEEhkCrsULeoM0WY2ErvgIa5efJo\nf/ja3Y4vekEvdKEIpDT6fSNbug7WSlEZITLcZiHsJzCOey9EzOJHRHmi+ibZ\nhsl5p1xmrzQPob6a8WIb29AEOr5a1y7t2hhYHPYSiGcO4f8kKNysFHzLmAot\nsWN16/cDU0Gt5WA29SzIKcUeSzPo6azpiPeztILu4RECxI99RhCf/uqaBhWN\nMtj08Nq1LqmfJVB2zwXUG9QvWnMjqrBiH6L0a39hGAkzzU/B7XYgR6wij6H1\nym9NjxWIgON0ZZVZrQtXR5JHqVd8daBfjx3Hm4lclkKLW6gTar1QDkwJ0sEt\n2w9BaW82lN9ynVq4D56QvbDjFOTvqh+Gb4jN3BEy2hQNpAGnkvmd4pQjm+/A\nNzjw/jxEj/9S0GYksLhhyEefaa7Zxb1cOWS5jVJyhqhcP+GTMXFcj/c8p44G\n9zO5\r\n=FP1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/touch-target":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.719b57e1.0_1572638507184_0.7160650783341533","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/checkbox","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b6d323e15a19c6f939d1c796ad5327f0d7d9b4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.97cbbdc2.0.tgz","fileCount":32,"integrity":"sha512-pLKEbgJd0eC1zhfo8GSG3dU5pM0sZcc4v4KRtRKKWqPISTtOgbaG05iZH8XuKEeGBAnsrIy0H3fmfzeBnXOZLw==","signatures":[{"sig":"MEUCIQCVOsyviJVZUoOmw2o65/EakD+g/4+Kr5zzm/kNUr0/XAIgQddF3GI2gtcms8jMmql08FL7aycT9CQ5c2QajovGCZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWmCRA9TVsSAnZWagAAprwQAJBA7qFnx2RgCTq37Zi+\nHy6IUF2L8hzPaOBL3LutDmFeQjCbQCZNWS2/Ii31baXLj5WKhTR2alEHzMbO\nGSGqE6rKBdlFxQOksF/iw/e6Sv6AU9Wd5F0TU2r3Mqu3B15cHIFRocLtHTsP\nzfBQzITxr4SIwgOQt76CaurQWbzFZThY7yBVebh0uPfdhbhx8IYE3CAFXeDU\nTJ5f3hnIZQuUiinfHmChGa9dBlHfy3FrzsVHVH/CSZufcKLaP/KYm4P+FICY\nQGoAl7vZOOskQ6s4HCw8GnvKqXendMjJwzKsIiwl8U/unfgubHcQvAm8iUHr\nKmKRSw3pUv+rMSMVzD1c21SqtIpXaHGO9MJjXmB8x4rJ0QllsUWTlrooC4Ee\nYVwfQvgpirRLXSEy4pS0WSvd5EGOquC+lN5AUjd0DTghRTobOtO/WBRZWY7G\nBLuGjs3tI060quAV9PC7LfesP26CJ1jWZNki8eZFDztkXC7Yi5evsrvKUNSU\njc169U7Fungi2siJHDlyQ2Y2gWspxwY8l9xwQ299X9DPVK3eZAzmx81hYQ7h\nZTMIhGQwlMotPFG4zUQH/N4OfFgSYoNVDj11yCUCPIh7S60Ppu6SE3Bv4Jl4\nOwDgA6JaCgGwOOISy505PtIIS6AbiZ35Ce4KQW4Vgr8GTdJ2z4whf5XLpWZb\nnk4b\r\n=5gSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/touch-target":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.97cbbdc2.0_1572640165893_0.8968911831763866","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/checkbox","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0766035aa18f00eba30e10a83c2ed44b70af0fe0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.8e36b3b7.0.tgz","fileCount":32,"integrity":"sha512-XkDuksIKSk0F7ByTy6eg3TCFJAUILrsyJ4H57LRZ8q1HI7KZDns+mZetTaxf+copE1PrYNZ4MH8o9PaIL7vqxQ==","signatures":[{"sig":"MEUCIQCG1mlQxuw6meyUOI1DqVTHAXZdB/2HEWoneGV6M8DO3wIgBwNotJDYOYJbmd1468kmPJrIZChoc5gdzkj4BhEjIQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0xCRA9TVsSAnZWagAAxC0P/Ak6ibJZlLA28dwYzz++\npX95PwURWwuZb6h0Jbsq/Gx5MORVynLxnZv73FoE37KfbVW9m5X/OzasqO5W\nQzUeNOvmFPX43uA9QcG9WKSxcsgnCc4D463/rknYpC+sTL0A/vW1aUr4dmiG\nGm6MP0wRCiGmHLH00NfdOckv3sKdHysw+t2pejpQS2VSlVZolxFKeX6U9kKW\nu10II+hyyAg6HAQ/5S0I9WsSL68OCC4w8Auxq9BUVhg/ub0owpXcF2XTk+XF\nbPeKadlhPW4nSlN8k503f/j5mQCPqxuOcAzx+s0x3pTw/eFelAq10e2TlUAy\nYvT212V0Srei4hwAR/hAhwMqyJoHpsxwwRENCeEY6RruJd1zlUZMwsiAkkT5\nVz7VcGsmRBpXyMUdIH6tA7O3ze2fcuWxmjQ0o/pWvMDmClASVYlTUuHF+B/N\n6vEuzTqsYcHX88sRyearNiz2x2jXjXmsxXDHlVQCqJDtzi3/VdZoc8vCeVhB\nU5stlUP0F6WC/J8nDGZ2Hx6WH7DIwdczPaXafo6xKDDA2cosROeR9Tg2WfQH\nfpaK6tEYjbFdO6o+Jfn1Qp77VIwDH6ATjHi6qGUGbRm+/NuWrDxTPpoyI7S3\njTm7o3pExE245LhiDoGWmciadtD49ps0CGIGfenuiKKbweMd9yvdg1KzG89m\nWgf9\r\n=mgdH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/touch-target":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.8e36b3b7.0_1572642096731_0.1632070944393047","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/checkbox","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28d37bdc6eeba5d458b101cee513a23b7c74b957","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0-canary.62d3a09b.0.tgz","fileCount":32,"integrity":"sha512-vwn9KBPAMSVhtzkk3oCcbGBKgh74KXOid/qNi5LQqPYUNCAwBJJbBp5lPJ0Zd4GrVY1Zo9u7FaIxKtS24A8+Xg==","signatures":[{"sig":"MEUCIQCiw6uTCqJ2FLWEe+lK0whceXiBF7C8P4OJfpNTszq9TwIgRJW3gQSKF0Av7AxdpJVeJK9deMjWXGdAI4ANvINotvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9jCRA9TVsSAnZWagAAXqoP/1YhdWid+okxgq/hdUUE\ntiXfhEVRCP+PmEMGvbHC01LcsF5YtsbSPPIZMcx7FFOah9aU3KMxFXaAPvsL\nYpLoGNsGcvIy8n/iFaVr7BxNyCCMwptVMsL9RuguSpOpo1Zk9q4jY48TWSh1\nrAlb30jvGr4n7Q82t36MMYWK0vqurulmZy7vUlVE//wRQ7WF4HnQWc49TrVH\nLk7dZBkB6/rnt8STCW12tSskqiYbGNOvxP3kHiYTWVVQbB9+j6Tr7kmua2qw\nujXbdDFKJ+qIw/8tT3HpszHBGjABwCiTL7SiV9Q1KoOe7MJxHIfaDGtEeZs0\ndkFbH75DtqZhrheOmUY341JesixSWlc2dehPTKwLCuh09makcY+iYJzanSuI\n4r2dRgyWjbz/RBVEc3IAF0lasL051BmTgM02BnW++DfeUiVTLL+g6q38zAJQ\nFZgP/JmuywBBqVv6+hVBX56GsQYJW4cRCkUdp10qOqVkIt3IXBbWiKzHx/SX\nYjZ5p3/FVlNbX2vHaaqJpjl13QI7EnJCx8ZTfABcV122/g8PoC1V0q8TNEYE\nm/idRH0ZioGcz6Osg2v8hhNKh3WwmZleTFf4xBg+BCiBCUB6++gnncg4DTX4\nPJ5U/tMD3KCRjqQc4IhfzyTey0FUjfGsDne0s29ZP1i1T15flC0/nKjSrlz+\nkeh5\r\n=UUVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/touch-target":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0-canary.62d3a09b.0_1572642657937_0.022964855924776595","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/checkbox","version":"4.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@4.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fd5826f008685ea8d9899fea0606ecf65be9a26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-4.0.0.tgz","fileCount":32,"integrity":"sha512-2ONHncYAmyIQewvedKDJGeiMvLjmX7wBH5Lx0OBYSwa9nuwjXGWEQR8tNOHIZzevV+nPyGexl6HyvgZ2QNUVZg==","signatures":[{"sig":"MEYCIQCNfvjwo9w34ZQQXc7mGwEnKfGMVNqIqgIxEdqdHVBR6AIhAJbOlUUWTCy47uIYWLIb96l0YcG942hB2LQ7SIsnes8B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbnCRA9TVsSAnZWagAAtpAP/0GYyfn3z8mCwiilCaTo\n166eqlie8RjO/ZCJVYPYwoI260FD9Pyj2bXG1gXDrqxnCwkWdiIHxB/JMMYi\n8CVB6QBDx58I4IHyk2qsGu8pKtzG+OKS0XZ+XAC0fb3R0AgirkEmCKBjcCH+\nQByg+noS3tBDdgw9zyKN+tnXfIgW8TgyGVroUC3/v+IYWCQTDpWMJjFmxb8H\nHtJ2i7aFxDk9DJ7FsUQGXzvEfuleuugVEBf/XGXn2hdDtssBbgpSDKe+iknq\nsJtM0IZLaNpKYz1QU/a1/JnTDsRc+iDm+2TNaraO07mpCMTmO79oGUVReJ7f\n0X2L7bLhDW1hn58n3jWoSgJIwwIt5wYHl9oNtn3P8pNij3CypNFkxJA5ZVYu\n6WAyVGbCqsipNCu0Qmp7+V9UnYaBzfDeKk9omqjHwXEz1TNJygJOa0twcyAj\nc3H+5HtkV2599jQeeL30wbkZT5tl8rpzl6tBbu1h1vucxnIqINqNw3BddoS9\nYJtcSlsCeyhn61yZWdU49uw+o/d2/OkszFEOtMNSrafmU/BVNcMaP6til37w\nEi60swkrhlzYgijD+Jw78QgLEeRGYTUnPDISCMvzuTCcBkT49cv1waHfrl2O\nqvU7yyDbXq+edrzeLxnUB2RotPhJYqc0Ah0lwroJVD3WXNdHmBJI46FbDos5\nrQS6\r\n=a6Sc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/density":"^4.0.0","@material/animation":"^4.0.0","@material/touch-target":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_4.0.0_1572718310630_0.2940140466599688","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/checkbox","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82b5cb68662604097dd746c190f07852e04eba9e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b5eb51e94.0.tgz","fileCount":32,"integrity":"sha512-Tyu8+sWzgrRtklQoLhVZ/NjDil1veNypDm+qESYae/N2X0aGUcAMpc0BndIxBy3RXLl1bX3U4wckst37yOm5Ow==","signatures":[{"sig":"MEQCIDIXd37SGY1gpNWtunKWVvp2dyGjpA5HpB/778PiXlStAiBEE0DM9AxHnW02RLfNVrITfY96KU3d/HH7j0afjly2uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOSCRA9TVsSAnZWagAAZjUP/1o5RTB1g+95jJ8LH9Qe\nRGneuc675c18AtLu89wkvVkSIOTrzRnzMdqblOgz1rJOBipYBlVsmbemt4h4\nK3oig4WG1A8jwR/+n5nrAXghLYeV9AxOmLbuhSK6Y11Kmj1WFzi+84xgJ9ld\nazT3GsqQZ+dz1IL1AoMi0GFjJl7ZHlbtTd5wiqGKVnbpyrCqOL2UYNEY5obz\np3opyEcx3wjFjkR2uHbUjWmRTiK5LA4/POfOuMNZZv21Lo7pxaX+piy9+Mgl\nAwuZTNdZXDB7HDV7TpiZ2T3gWrXy2Qlde7M1D0ZTU01sCPxnZwI1PvZjTzdR\nnK9/jQPPWzpNjEa7FaHdX31PfGbiyXCAyGlYXhbDStUJPmIgXTDFRTgovRRS\n7y/ZDdQI/oYBeypKY6frh4+WbpALn1+nGfoMwkpjD7Bk78l0QUMK0uowifLi\ntz03wipRMKG6xoB/HJqK1p0z9k3bGK9ECU0II87mfAG1uRrVBsxQuUwa2Pv9\n78SoYGmwr3vAiGpzSeGvxrFWTtMsbpcGlVcjkzXfGgLlxuBHxNj9jY+pWdHc\nE2EMYbfoc2kj8pQWJFBObAQO7FkszEPf8D3AZ22Ds0TTylXw47XdeRFMwGb5\ngwt8veslMeG4gpLzM8N8x7OpLHPQhr5/8UMVPK9cdsB46BagERypsksG/L3Y\njqMF\r\n=F7Qn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/touch-target":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b5eb51e94.0_1573151634240_0.07416956923911666","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/checkbox","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.58500806e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de8ba176b276704284210ce135d4dc65e52afbf3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.58500806e.0.tgz","fileCount":32,"integrity":"sha512-2gp7ohO6A3CPadGfKlkMGh+62bb4oISpoGq/Rz3vL0oKnYDBm1L6nJFDO3IVqc9bFmtwF71l3oeupp0sCnthWQ==","signatures":[{"sig":"MEUCIFNWmCDQ/UM2RogmakrCi1rH7ccb7uGhQslXOAcAgW9TAiEA3s9lAvNNjfzYi3Ge+XEAfdvFDysiXJjANeBSErPBQUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYteCRA9TVsSAnZWagAANg0P/Rk+ixIYsKd/A6F/uFs/\n7+uFxQppSntiMsOMCthWjxB1QzDja+wAAgTdu4dXD30vq7KvTLKaMGgVXR+o\nor5cy3inYFHV3xLOJD08mbdYwfX8kQN2Aj1PyiyKL8oo4QZa4/zGfX+CH60C\n+HLrGcV1KbpRmI9ShRywGnBygMcLqGAxxLCgXvwk/ZmNEO5WYKgusWiyxiYk\nZ3ysKGiTa8iRAq5PaaRn1bDrFZLoM4Eyp6bwZRL3dLwqyQ2p3xzR0onz4Ej+\n3a8y9nNF7sBpPpUkM5zzYZYV9ec7XTExe9/1aQB9MmZbkJXQUZbm9SJVxZH+\n/TH5qkFZNaPiyQlUl49tykuhEEDcTnFlxvLCciw9U002twq8FqydCVWiZeh4\nFCHjLtiIx7pQTWSt02kg5hbEJ+qah1xIG7hvYflya8+M9HjLJfXxS4Utw7rs\nvu6l2p0xBne46U7lezyoJ3LMkYhvvVkdxKDcuexI7SMxJi2N4bbzzui5rjKN\n60ZpL2JkU350u1KO0kvDZC1SUX1vVkw4IQGwj+nDOTj6fUhtrIRb8BCI8OSN\nvFSMm+eBT6hx3xXNGOn/ppIN9nXYXpZYggoIVz88UI3PZL7jcgmzv/HmLEJG\nr3aT/0NLn1lSC7lMsUkiMe3pzGcbAOZnnyagvmjXnRLkeIT1O1zv04AuMurq\n7PAP\r\n=Psc7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/touch-target":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.58500806e.0_1573227357743_0.912613444570032","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/checkbox","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.66299b646.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70f7254244ba0dd5ace38e76486c33b226cdfe8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.66299b646.0.tgz","fileCount":32,"integrity":"sha512-l5/c9PnYqnacei1TjFDQO0WyKBtOXwZLtrFE5xFWpQfTjs3NwaNMVjgkk+DwRRal14klase+mYxiYduPvTCL+Q==","signatures":[{"sig":"MEUCIHdw1zGsjJCaRoDiinl8tYs2+zrcFG3V4qdCw6m3SoYjAiEA54YLk4bG7KDOMbcEc/sU+7m61DMpUzUrUFmDwC1ORBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdE0CRA9TVsSAnZWagAALocP/1cUK0v91DsAMJ92Ne9C\nNutBl8NBMOnIFg3rDTzMfiWJgMT9qs0kvhnvWsMxopF+xgzriUwzzbOMHDbk\negPXZgpfwCfvWI2U2MhwvgA8n+f9/VEcGp+T0UGT3/u74AkkszM+C01ojZ3f\nCRkxUcFNGOOF82k2we9fST36ik+pJbnMGv8uy+g2xYbvPpQQjdON26DK1kW3\nps+ms6IQHyFMOKuep5PPzDdj7E5+xEUFntf0JagsxHvURN/nVRP5GSfetxcb\nrkr7y7SYk5EFpgoC/AYNOWzagokCT2RUaQSKXAKQ9dLd+sJGqVaAILrtcn2R\n9ZG+SwpyPfhGfc5gsjgu6FJF3Qzyb3XDwmQ5o+DiRmHFq7YLSu7NsBKdJceh\nH5kjplTfHrnRCAEDLlQaElSUPzR0Uxw72KICRt+XcMXd2LO5IJ/q6TnpphdP\nBItWHl/YxvSMRL5LC2s2HMT1S+FXKc+nBfntIJLojCJsHBRDhV70PTnXAQyd\ns3mCjj//dIZ3Ikv+yWObWkhDmRcJ5PB6cCyuBBrDYePH4wCKeitXiVMs5spM\nUr4OwbRIbZnTWvLcb2vq/IykA3q7t5i1QRspjNMdJOJ4QYDsqSXqtOwYRz8y\nzIkXjCBXnpNUi4eC685y3Ek4Ht/2iCvXm8q8M0zxSlDOi/nfMm8BsvtG1An1\nAz6l\r\n=pCEv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/touch-target":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.66299b646.0_1573245235501_0.6516420668801512","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/checkbox","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.821871e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81d02bf88cdd9a9fd8ed286e64623bd1303fd19b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.821871e04.0.tgz","fileCount":32,"integrity":"sha512-ZOO7mTchMFTo3DI+nf8txnwQ9SrCjmpi3aC8vqAAwUZ9XrJKKWigvX0FYUO4jIv1cgzz/5r2ZvFRhiCqSBK3uA==","signatures":[{"sig":"MEYCIQC6CxP8+WlnU4/WOQb4VvS73Xl2RVhZbNnx9rCT9NGBXAIhAJVcV+96KG45hZsCLUU7+Qg4ezGt9bKfZoYcnqJPmItq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd36CRA9TVsSAnZWagAAPbUP/2UajKNrcwQyJ1QMDcFF\nrz8R5tVAX0lcXi58v5/lZkOxN9vtWHu8zVa2LeY/M6okCloVBQCM57uyjsKJ\n4yBdmWGzU8VB7PUfTjUgAigO5iFgRyGCU5C5epV0Z10Gvm4Fvw5fVv5oJG+A\nc36afHACs3KkH2+4RU3JciJiuoqpHmp4zm9nZeZG9zfIhi31pbw1dLnvgqml\nSsH9KLvsvVyqI0OH59qxmbAEzFn9j940U+VDXs8iE1xBfTPbbLzB6PcUkkJ0\nOvupvf4i7HGZB21Wd+WBgGs6TB0mgXkCtiEUZfw17MK59eihO4vednfF/xsK\no80PL4XafaKMcyDAtJqV9EIzRg1Fv5c76/EG1H/QXec7ioiJpHPmtksezLKN\nIYZfoW3WM5mB9/QjPPqSNTDpThm0Cg0uVuA8vI4Qua1JCsMJ/qFgYZgduDE7\n1FjS0G6kjSVB+KWxxFIRm/Cp6agKX3SodQEG1NlRyUEoUtbr1p//wLOr22bk\n5nhk6rddv45wgskpKpyDnozWFbNZ4vu4QuIHyJrOyD0O6xqyPWoczGF5bfLp\nK3ne7wst9MucoGe8OhfDbNIfyfqCFPGvFSGkTy7kkRqszyK6ZlB46IHL6njw\nlNM4jLu3if9V6SGuqFXHROsBt+dklu8Gp99DDlZVHU17RyM2dRdHvWtuteTa\nRqE2\r\n=+Z3S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/touch-target":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.821871e04.0_1573248506148_0.17952128586006233","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/checkbox","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.491fddc31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca42bad86be187e4a0eeed2d10f45dc321a09ec6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.491fddc31.0.tgz","fileCount":32,"integrity":"sha512-j7cOOlaKwTMd1ZFdgGj5qE4IrKctcxDJzXWs0U3x+gpZ/AdEjsOuU95ju7o261MS8Y9dZ/lCd1sgPhRw1su09w==","signatures":[{"sig":"MEUCIQCjqucNefah5mc0mcWwyX79hyGo+9P5eqpXtsztjHhlGQIgXv+jeCwwdtR/yEfaaib4vrQIxqRloAtinQKNcyIxYMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecgCRA9TVsSAnZWagAAahMP/17Ee3t/B4+lJVDLWSt7\nwbrbVt2tgwzvx6qf/yPgwFiosz2R+aMLT/rr4z13Mpsi2zCKOMSPNBk7LY3Q\nRlNBBWa3G9twm4hZf5WIeVXno/qZBvi8KPQerrEaD1tf/vzU0JiU3YSCPKtU\nXcskYgUosg2ge1+PCr6S+XnNcNl/Tzr6iHL8vxDi2D+kLPsXmB3F5m414Uvr\nEPOgx2ttwtM/IPqT0G9us7bE7lFooUEOMv125aIaQt2aoeRl/J2oK2nSqVUv\naC5kY8hFui4QVVR7x2ufqd1hxyoy1hO7yiJV6la7jzKF1Qtn3HoF4p8lz0Wf\ntJRJmTJL1lQi86MykjkfKjL0/6Q0ML0wekRaiUhcRiXDk58v2hDpVklbek6K\ndijO9310GknXHWH9eBGxfCr2B374Qfp80pqOp25S/rUPigCQ4He1McEjIhb5\nVwNFj8lM++Rr6DZQAthQ3yaB0JkEp+2D8GyYlPEOgQ90RqQ1bzgZB5FlK2Ny\n0V8hqcws55FkRbdDS1U9j/6WwNsgV6BjyGt5scOfuvdbEuaHLhtJXcv7sFq8\n118ytnJ6Z33BiDJ2MibIxUQGoTsGsvNkGFHWNX3Wui9OZTkLsXpu7zq2pcHN\nzUjd6uLc9BsILx1zvAYHMAddD8jwKQDxTyBpwN85zoxC/WjRXy4wIXg0poi4\nsuq4\r\n=Ztd9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/touch-target":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.491fddc31.0_1573250847928_0.899354219573361","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/checkbox","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af933f4bffdf8c921d47fe38149efe7088b0c54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b0cecf145.0.tgz","fileCount":32,"integrity":"sha512-ygUCFwdunoe0OE1VvJHL7IwgouUBEKCfhiOlcEVPC0Fr7lH1czMGfv7r7lc4ZFBP7/aGOgCSfBpsKs+9HOBKsw==","signatures":[{"sig":"MEUCIQD2wAz8JuVGPHGmdgOHCpHFQlzWxK6g3AjaeHDqB2nydAIgNudH3zgRj346qUx8jQLk535FN3PsYaViCqDWIzdiQDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwidCRA9TVsSAnZWagAACy8P/Ru3tR97GFVDr4uz/KKS\nc/Gldmb+1ekwquZ9/WRxnPSYivMAe2/PDhqrADdMvflcOQrT8Tg/Vzz4IMHq\npDXtzMp5vaau2n9lsKV81JpcS2EFS+S5Np4+W7zYqpEffC5FjidHrr7oW4AI\n7YJlOVIvrmvj8wIi6u9QKH/9EuNW/bpttTTFSLUGxdfAlL1gpptwpUhpkX0b\nq6E3spNRxR66A5LL1/gZ5GcYQEVe4Rz4pc62kMv+e9XjwmZJelkB2sy7M7Ft\ngA3d+ovaFfExHOgJGqEuo2C923FwpprkTzTkfs4x4Br9gJWjI4U7/7V0QF2O\nCT8sBX1Fu5VLn1gi/SNjAlDj0kGYTS7tSMI2mTdEcZqloPWiqifx7Zjp1OTv\nSS7hK6Hn9ExhWYWHRxI3af9QdxqYop30ncsiF0tfI7l1KF/l/4QP9bD3SNoG\nb3s2aOg1kDjJxbWjOMq5gePDkJs90volX0a8xmwO0+pf9csxJP4xNNqHBJ+p\n5SGx7g2l5Q1Q7hEtnAY9e7NMP3AAEEtWXTjA1cCCXz/HZLfdbYx1FfF6CVX0\nadQJkg+ZHv16R4DY+xn+gphkUV6JUaAKpbk378uMcb9OaArn2h6zKwFrHcal\n8Q3lZU15sx1cOmQDw7OptQCgsg/6vClL2G0HMU3GMAZOy1pSUOrSWEHiHNJS\nvwe6\r\n=g/eH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/touch-target":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b0cecf145.0_1573324957395_0.9609688928370694","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/checkbox","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84bbd97260f0fd51052b322eda80f0e998d64af0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":32,"integrity":"sha512-/1LrPFmFOkv4Y9kkjDho+iRJHinGVvfyifMWP/V5I+34MyFWGhXhZtDiIuGP5JZITZ1r4/sIOnJg3U5ZWfRsng==","signatures":[{"sig":"MEYCIQDDkcyVsVmLu3tUbDMiQXL3ApAWemAYKWwdFz6silac5gIhAIkHUVg3VaduQVf+XBi4vRl+ePAg7yq+WEzQKYrKWSlh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBWCRA9TVsSAnZWagAA9qYP/A5Om3+sPnCTEnRhAcA3\nakQ+NUUUrCBeidkHjIt3zQwqMZAqgtIAYSUeSrVCaa+P3OXaRoG+HqiwO104\n3AztFd72XSYtYJ0GgVw/PlG7U1QgR1r8Lsgv7VNafOnqBaVFgLXL7i0sQ95g\nXKWjoSXncwW59RvErBGmCo4Ht4j9rYmKNgFkAV4CqGcuEUhZvlgxDyNknC3V\nfh1cuMPy72wPEyOrOzWWL1zciPXkMwi9AhVEkl4rR36nUixZPIHlus/+yvWK\nN6QEL8LRJc9kaNYQcgw7MA3jz73JloAgofwY4YHubrADkY194TGZ9WFRnHPc\nzwHwECUM5DozdkjxXnyk78w6vTLbEfKlBtAao5Lt6KAyz1hwrjAm3/XZ/5I5\nJCuz374W2G11mqS2yTA+AIKhZfw4Mm1kKxJDbgPiNczTW49PyM3Vkvmh629+\nZzCxJTEgNXHeALtZxz3GhADyXNYhBqJHNTXEVG60ZHP4tMLNnabD2qk80c3b\nE9wP+keBU9yuUfPUZ5u/RCwckJ4UkMww/JBiiTXb8W4i4GyLFgumP6I+nqlr\nbV7xGv42CEjI+yVKYy+S7PMFNtFt9xeWtttZ9BY3cAFe0S7klLvZz9EerxF7\n98pIU0xxNoovbkGOtRXBP6xSP3gEQVQkqPj9tr2S+QJRudRw3UOVO1iHNUAI\nn8oO\r\n=pcqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/touch-target":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.afe0dd1bc.0_1573486678397_0.016201850322537847","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/checkbox","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cc1e217f1956c3888def2838d6bb94d40b054e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":32,"integrity":"sha512-O/7GCy7ujv3LMtbF526X0CW6HlphnsReuz4ZGWVMPS2Di/76fNIpXN6sqEMqGzo957MRxhknc7d/0MFlyar9WQ==","signatures":[{"sig":"MEUCIA9YIGxy1jg5ECAtna1ppFULBfFCVDlOeLIh4p9M3cm5AiEArro7RLfvue1Cm6q7aIXJqSz/ClxabeXC9RqDRYAGqU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXm/CRA9TVsSAnZWagAAMzEP/ifW+EAZKQICOnVBirXO\ngEkNhEaGY+E+03l2whjfhUFvz9vrZLDoSLeAsrkstgL+ctTb1ZJlA9X53u1E\n3x+MuRMG23E2Yy5CVEt9/vzEClQWgHPddPnPL/wJcJJsoQsKpemoJEeT5hXC\nnV8UyZAeTJiSLdaGtnRSvocAl3y7aiR+zg+AgYSVbxcJMoeR3lCqq509WluO\nnNkm8s2zWv6Rzi++dobnoPtrIv1fvV/5cImP01pvHYeexM8bpNd6nQZfUKDr\nNgDmLQvMkJ5EAHVTwngDaISeND/UW16SzMcfYQ/feVxcTCqmrvzMDON/Mhxk\nX3/O+uZiuYgWo9aPMBFzlAngYB9WPyxOUUZpOBiSY98xc2xXFfX8T0LtU3EI\n6T8oeKBn5AvnlzTMV7fvndNhAvbioA/JjT+vQ/9vA4jyuzQEIN5qspYtgXyi\nRhJOP5vAZImp2JVy6tssQA2zPY5CPYGwin+P3bdusgRLij/qTmndFlzx8ZWR\nstCOWAhUc0Tj6Vt938M0Yv28G7ATqoqXCDRrANvAeqt6HSGZ14o8baJTVa9E\nwF4jluhQq2GPOy7txzu8KqD9+8LLLchNVr6NhQoOULACPfUacMbDkckNLIgn\nomS3BqcELavQm8C+J+06X/wsM23A+D+qRjQwBwtALK8SelmBXQZ8H61Hh9Vz\nfNB/\r\n=4N04\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/touch-target":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b4cfdc40b.0_1573747135100_0.07781011454580677","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/checkbox","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.525989b5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc1cba3ab4d62106936a23ba601d066ee8140c6d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.525989b5d.0.tgz","fileCount":32,"integrity":"sha512-7pmMifoS/UZBps430GTqNdN0ieu3aeXqVsT3k/gDKmBfYjAahLDiTJtid6C6aoUqUp0QXU8a2oqXD/U8+gR3og==","signatures":[{"sig":"MEYCIQDJYwdqXblbFSysTojocKZhWL22CUBKoD7twppcdXgp+gIhANYQ1z8kCSs0xwZkkandyTeRwlgPR0Xp4oMkFCT/GwJW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeO3CRA9TVsSAnZWagAAs+wP/iTZd2L+Py4wSdZeYCEl\nFFbHEn8sBsoQZ3sfYXX0bno2jibgtvK0wat3FFJFmYUNDoWcoBMkEDdipdsN\nKDVXH6ahKou5BYR0K3MxWv4G03j1S7awJVHsfKtRuO1P6SH8tluRCEPvebye\ngpJ00aTQgnpEgMmJF0WA72a1tMXB9mCVGq1fV6agPizHnV+aDOTZhkrSvcsb\nuIJoUUwTbCY47adj77tGnDEtEvdIbbzJl2agfesxj4r4JjUstqJrWyswd5lt\naM4uoCWvOiKxS+FsDMjf8Cwr4hl44ebuY41Yk+Aw8O8guvRI1m/OuN8Hhr1F\n8QgqHahxhen/aaWHBsl3ZnHXgsokGJa0RWpKhN7Vll0GX41ZVxnjdS9JE0Uv\nYYjCmeY+GGHYIT+AlC5WNKpn3D6h6ULaVX86b9V8mhVDsEeQXMSjJWT1Ut4R\nF/nY9lrLJr6SD/cwa19WQuYDi/+f0XS3QMLfhJ4zeIwDFWKip66Jx7HuOKQ9\nTF5dybGnSIaNmUGSw2MwbNXbcKod/4BSxvVHTFyXux9UxJz7o27iwxYZ6HhK\nfnQsK91+/XvUJ4Im9pzQwI4OnOfBHfI0jKmISJMD/QNEB71LLjy+kaezhEi2\nzMG0XLEg3VfiO2N4lm0MY3YlReBpY/EAwbr0e8yIvBJr//HJpfHNOKnE9rW8\niswk\r\n=nPnO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/touch-target":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.525989b5d.0_1573774262987_0.9347451997688971","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/checkbox","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7084b403a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"847b76126e7b4a0394a04a31d8ba79557436a688","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7084b403a.0.tgz","fileCount":32,"integrity":"sha512-qcss5YwxRGNFhZDtmLMxBlfXmiyBvv7JRcmt04/Pyffz1b52mLOBKBn8JkE2tvwgpa28C1rH+/cpBB4qIR+dIw==","signatures":[{"sig":"MEUCIQChBFlczdQztls2gZDeWemaBInM3ORK9DZ9Cre5sECzxwIgWcEfAdcGdrsXN6lT0Sa5V3WyODawKakQ6Arpx7n//HA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfoBCRA9TVsSAnZWagAAXtwP/3OhlfYJUa17jTfFSA2f\nV+fJOA9aMXdGAJM2VGbu98B8Bw2PtGocx4Rcz6Os6Oo1k9ZxkAks4tcMdenR\nThALv7q2zGwsXUhtibmnkJNhmH3/IjgW3fb8GvwW/Ew0QJ2zTqD5gvFgiCrO\nv1fTEdShzGjkZ4SQ7gVJZ5/zdZFuwjTEjSGi8iKJewwsP59ZfkuqqOmky6Bs\ncR22TeO1rVvE3WJAESa/s1foNJg8KVFBS1GpbpKBdhtUwKikTvRLNnNdXh4o\nDwWq0Rjob2VH46d4PxwW4aYIiYl4HPvSMshALh4eitzraH6SZyu+e2L3Z1DQ\nhVmVgMg7dpAOPJUGzqUN93Oh/zNJUDa4oXKt8Y1B8+S4YiEpmAcJQVltvaNu\nE+7vtEDT4UQMWWnM1LmdUDnf7LYwQWjNd7Y5Yy0yIspKGCIBZ+xGgIIP9671\nrQEYNcQHw2kXGQCsT/Z07KM41j5W/xjcfxct6ERVjW8WeT5dA0mKK2gLYOrw\nqGseVs70aMmpof9+F48rwABu5z/AejPla5f20wrvs+6aMRMB56mXJn4joLW1\nSw6zE0d1kaNllc1dc+a9+uqr2aHrQzEDJqubxcVEe9dUhzSvPoRHVH5fKylD\nYhNfZBGCVP9Eo7SPZg0V9cJM52VQSzja7M8b7WaEmrA4agnQbHdX1CECCN0I\neILz\r\n=4qYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/touch-target":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7084b403a.0_1573779969306_0.74325193790055","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/checkbox","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2518f184e4c6e262d1d225f7d58b4471cd672b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.3cbee6dac.0.tgz","fileCount":32,"integrity":"sha512-BdNmQ83MXwIMTfnDmzFiLnlyvsiDoY1Uu52axGIPP+bxDE/NovJAPlEyHa95N1N5r0pMwRk1NQssAE27yXSizg==","signatures":[{"sig":"MEYCIQCPcXedJ/v9TtWPzCVs+DnOsRpCRK9k+Sr5DNYxuDCz6AIhANmF/AyAzhxjM+OrC3AIGIs+sFSLRTn1SR4w2vjQGpJU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyehCRA9TVsSAnZWagAA9xkP/1uYlujXX8DrjgY8f065\nVqnq7lTxfUgDsg7C9sKSiheRjMcJl3+71SMA3GBL8Tvulba9epmnchbDLV5Z\n3Kl7lV8l0Sx8NH/sIn4La3Ky4M9LFQQBcdK0hGFtRdqJqNAAfhzQlDODO/OJ\nuYGaOzxOfJJR+4R+/GFavpudeCeN3SPQAf1tJmIieoZxj4q47EgmclkVYDHD\nv+dYdIOxeRHpO3YvaBRZgm9TqtOLEP8Qk1c/fde9/FVqH3HvDHiCcngUyw3D\nGz3fR9bBaAb5DP4edSW3Fvn1EeCtrCQyLxqcCvWjZs2Cy46LdKMfeL5+p9aM\nzkADVOnOHVsErgxQhjeQ8/qcMVUZBrzzjTASrLE/ak5v0+SqZtIemGLXsRYG\nk2ibCJbG3qEVHgF50+TQzC3XqZ92LehMdR5ri/mZ/iAwsvR9Gbq5fHx472nt\nmykDkPqcacTyz+sxRgi307oPpnGyoH5vDf7Pz0y/GROk/70/fU1yIGs5q5Ew\nDInaLQ8WkWY9bD9Tra79bx5ifacxk9tIr+nbHH/SxC37gfEvZ1SSbBbZiNVy\n66EsNsnQC0ygQ/UcjFT8RnDSyoEZqiVTTJSRFnkOraX2sbowpIfl8tGt7EAv\ndV/CoBsmGjAUc9VBRm4Gqt50cfgMrA6aHLK3LkDfgr5nvZQTDe11EFnQJP7S\n78Rw\r\n=lYYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/touch-target":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.3cbee6dac.0_1573857184908_0.3743007766960953","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/checkbox","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ef3c7c6af17f79ab37d62d1429d62f415b18b49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.591a6ad44.0.tgz","fileCount":32,"integrity":"sha512-R4r/C/eFQV+ELs6WKIYIsx7HJ4d86fa7sEXv5IkXqCZ5MHeiNVxmZZFNIwgtUjJ9n2GsD8z87JjWmQAMcMqq6w==","signatures":[{"sig":"MEUCIE5BdHzrnVmmhgjBNSIAxAL7b73UEWeiqKbDs5jyzWU8AiEAjhChiwNaYNGqHrZ4+0Jw1rNpzn+nTCfDGtSCKBgwkSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3gCRA9TVsSAnZWagAAmWgP/18esa3HkGJPhY9hcjnc\nBmSfN/qB0+Ez49h+P1Quoz3MfOr9nn/CCfnBq3VN+DFOvayv1ClkxdwJI26L\n9Jj8BEiasu/saSnawuMrhfZWY0EnDLaWtCLS4A9wtAlwsVj37s7uZhbTy6UX\nknx9MvgQbwm/RX42Zg9KNFxHVZC5sXE6BUfvGL4F6fFqbAbQhfmB6Gx6cEqc\nHThiSUtw/JG+2QFXothF4ChP7R/CwjvCXDPhzdbtdp/gneXI407qn6/oSzSG\nAbQLQe/h/xphBotlCkTd79vhezV40mgyfLZali8i0imqxWbNNbqBp2yjVYwb\nrSEAqOmhpaSwuGfdLd0Pn6/x3nQQ4uER7FpDjuVn0AyN0mMIVP4uFSTcv2OM\n2KFbEIb2RLMgKWcnQjpejqH0KgjwsPkYudq47Try9HVzOEeMeitk1GP6jAVX\niHk2MxTU3gB0quUlOm1qaSf/BOlPpW2PUvj4MqtPxQbUpLiRNqoOlcy5px/f\nMkIx32bpeT8OlY5Fpl3RPxkMUFcmk6wV40AOkXXduHSBleG6+onsZXeEZUpB\nU08toCKmA5aAaU1tdehB/JCP82pAW3YU2dDvhO7+iOh4ZsrZVN7VFuvdMhHx\nOmcwmwISJhBV6Ox2Tco3VP6+53CytBh2630XZZ2SuHSo2MbYbc26Ne4idYVk\nub96\r\n=x+0M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/touch-target":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.591a6ad44.0_1574120928536_0.2904239257732777","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/checkbox","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5729943ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dc012ea77dcde7895268d32e6755adb84d32948","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5729943ba.0.tgz","fileCount":32,"integrity":"sha512-43f9shmxbZPXP0ABSXV0cUmuQ0DaesyTf0DnyyfxF6VLWQ5tCwwqf4Q+xAYKoSM3C/274wWz6R0DznV4biSNCw==","signatures":[{"sig":"MEYCIQDJ2Zf4D7hz/zo2zq+cWNauOMVXpHEdyjjFoyEDBfnNFAIhAOxe+6PKQTnwt3pXiL5FOOhNZwA/82FtWH3vAb6wFL9a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzsCRA9TVsSAnZWagAAHmsP/25/NlfLouSVlQ8M6q0V\nMEjUPcp9EJqQIK7g+xizVgumKSdgJ4GDzZQL7BsrTAg7Mgnt9XtMwH94E0ku\nE8Gchfb+8iE1UVYwUyK0omBKSnCgNqurITbxHAv6hPtrQwxM+T5p+VmZ5Em4\ntw35sh0KQ6HxNDDZJ3Lyj+mA+a09qsrSPHpYYGrEUKqe147VTHyreG+uSAfV\nv71wDWKiPLNV4qlzQERRiagfE8auQ58mPcnYnnjfXd1esSzosIrPRJGNP/Gy\nl44REuui51qRtLVKOiqtkJUY8YbGjYDD88TUR1Lbw85zva0XbtibXLu1QB2v\nkER9UG2nmlqtIhN7bqz09tB+mi74tT93PX/jyv0RECvAjaCq1T4VgTULHgLH\nv849WIN+YjEnXLnXMGI8nnfh1qBsN/JJ7HaB0m8ea7eOpWQH43k1HHC5uwy2\nKBz3/DUDKLMcSx9+QNwnFdFWkoYPk2bMZeKYGSCIpYjVeS/BmNGwfrb+lcOp\nVebLCgMZooAU9TYnjDHMPhzldWtsDOmS3wymKF/V7pEcaZOrcaYZ0bdkhjAe\n6NLwoINqwwDjNZPPmpBqI4ejA+F/mySFxOsubJ4Zdwnp4ZqRXvJuAeLUsM2T\niyZ2toF9mHl/XdJho6jeTC33qNQPEyVi1ZwNvOfD+FuQMuM/Ru/i2Rp4xw28\nSPA5\r\n=ZezY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n#### Caveat: Edge and CSS Variables\n\nIn browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.\nHowever, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.\nThis means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/touch-target":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5729943ba.0_1574227180246_0.7462989349799138","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/checkbox","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d2157067118896d18fb3bef99ce3facf955cdc7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.e89750dc7.0.tgz","fileCount":32,"integrity":"sha512-Atl6in1wq7xMsUy+zzrN/s8J2RwuT6SOS2d4kJ2o4OBVywi4pAryeHvK45iB7STbdIniN8XzzV8GYHDk8G5rBQ==","signatures":[{"sig":"MEUCIQCFUk65YXtbly8P/CLowOF6Ja5sNTAQyhutsa+6rm6NDgIgKPclXD3GlvIoTrgxRPgA7tBjn5XmqR00JcO66Wc4dOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr5CRA9TVsSAnZWagAAJuQP/j02AO1Ek31v+cPHDLqP\nJxLDl71aPhShrVCAYnmzHtghztvBs9F9Hnkf8yjqOHEEz7wf4vKAEZxcBj4g\n7IK8dG2WoLmYcT0SgFb2XKDQyUU2R47fGPIrhNiRfTIfoVCsyL1m3S8dQxT0\nJR6eCbAxrn9QopvVy1WXXazUwuTxZtKdTiIaghlZyMkmOXHQtxyryBQz8LTm\nM7D1C6FP2OmY+z5R8ZvghoVYhAZw4tXE9gtyESj3t7der28wQ1cXYsfTxviz\nRKdyCUCr3JEgEw6jcwT7sTFPUO9LZlGUuSVKqpIPO7haZ3bQGJPefRZnm9q9\nXFygxOw18cJduASvkqG1SGZ7I8p/kU+YJ9WxMD1zf9ecMXRtcIAVvUZG2M7E\nRbAQEIInYWpphOKvPGEYkQRGrtUVzGM8vrh5BdqwAmkQuU1IGntelHcWa9Xe\nbVxDTYZGPkObv4+PTMcXr69X6FmJV/ER8j5oJtw5v6fKCBlqVrWzLRMXN5aI\nhY/qW/vzSUAWrdUK+6SaPwnkchSrq215YJJID84wgHo1HsgndsZqOUsEpToT\njzODmv0CEUp91l6omH4a2VkU8Hk/4xy3HlZqZUzFlhn/li6OZrGKKuNVF3ix\nLntD+fv5jA5VglL/Xhu+CieeG5cDgasrhFwdS6NOkkEcBFvkhjSqCWYwwUG1\nCzJS\r\n=+fFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/touch-target":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.e89750dc7.0_1574820601137_0.29881599401359726","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/checkbox","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93383c0cba6122d0a331e11fe518b0ec5dad77df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.3e560b33a.0.tgz","fileCount":32,"integrity":"sha512-5jfV9XBrJAxZWRLpPdpTAOK7GyhmyX/VzZb0Mbkd1rkQdkni9k2OThiZImR3Yr/oI/73iecnfHRa6sZHehG34w==","signatures":[{"sig":"MEYCIQD+tN+je6IPgwbXgvPFulsITTubRTvPAqlvyRJrtIBnIgIhAPS1ZijW57gHtJ+00ZxXeeZ0iBs+6dtULmjTvcj0P61Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsrCRA9TVsSAnZWagAA82AQAJDFOVTUjEjiuSnUSYWA\n7qw1OYlJFeA/OLVRDsp1ZlFCe9njK6mwq7MGza1LKnFRqm97WAHO4kLQ+lG4\nWsnqTNfVsZoSZY85l5Id2RXY7B/AC0uRjNLzmrHCjs2RPH5z740KWBOTRS84\n2SWTOBIvZ6TWadYFOxEbvlmGvXosx7zfmQUwEdaukYSQQQmxjGFfQT98ImhR\n05Lf7NcAlQHMNVEkiFGqhddoYMZwIeBo0eAs1FYcHthYuRG0daFMtSi7XNIQ\nriZ9uDukXAr4smh+A/9Re41ltM9On0mDldK+Ym4buqq0z7LRQgGR1QQ1pX/F\nXfJnYpGg0+Dd2QnFh4YQ27I4KXBG12xnQmw2SI2Oj+sxoiBRPxh9nYEi4nWY\nOcT/wzBUCA2yjnagGrWZuTbDjPTz82FaFkdBngfKb1T2s1vxiDP0+nvE6xGa\nxO9JvI+tD4e2VeACyZORgPT7Zz07Yzx60A7gmvYdYXVVbtTqUEHnbtqp/gcE\np8GqPOMhj1ymaDStiB/CJtyM4tyflp/jsiJzc6GGG4l87uyS8E11UoCpMF2i\nfD620fCDC209Mer649Y+M78NFDs4lkNd77tWXjPmrUJHTGaRq9w+7bVRX6/j\nTh9g45gT4NawI53mBcGg5zN0JWGoo8IukVwePsWtHZys5+GW/v9psne7Oaiu\nmny2\r\n=bzqu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/touch-target":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.3e560b33a.0_1574820650699_0.7565936903480095","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/checkbox","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89265cf83d8beb0a99e0c2015fbf35a33624dc1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":32,"integrity":"sha512-z1dKWr9Nm7I7S+QvdJ0yp1FC3h5ec+KAvLm6GIpvfy1XBvYNQnQMzyQvo9DhS2qNJVV1bPXFLSI1LO2TRBAc6w==","signatures":[{"sig":"MEUCIQC1LAt56MF6kYUR+/Q0Au234HsS12Q4C0BXtgQcyV4uqAIgL0RiscMWi8F4mhKy/AGm4IB7HM+nVCMoQ4HAME/79OE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtCCRA9TVsSAnZWagAAG2YP/jkgLAsAfkhAUFnOWIGl\nPw1fmMjHVLaTW5O9aDfSGXX/CDwnIb2OlMUUmshsqQmKdXFbrZGo+HduDYT0\nVk0Mm9igbJpsw8dkWqv89Oa/r+oixt62gAZSQRnxWsGtX2ovUAABwbntQo7L\nPMpJHPvBTlkJLISvQLyqC5948ZjDk8W6Pocorb9D/NsHj1C2vXtsXm5faFHC\n37TJy69jo03DLb+dwx6sqtTuK2XSK6tddYJgAKoV+nasmhcKSNZ4Jvf3Z5Zy\nCZCDxXYnF9HGwDX2er+CrF1VsOG3KOSPJsWHqB7p1QxsgijmqniGvXmuM2Ex\no4NyJ+Zh9XbXCVwEUcSyRV3iIJr38MBYn4sf8U/HlV/yGx5t6ATWBe9CUcBh\nZ/UUaCgAqfMi5ojOov8AcQhGG8eKF+4jN5P4bvTg93DeFSPt6mR8eWCQZwFm\n6stNCxxZ5PVfKeKs4fRBKJJynOyRfI/qn5HRduKoHerjvDMdNJF5NQAGBzhf\nuQyySFGBrBM88/0ckH2RkOg6qLV/nS1V0AisO+Ak/ENKSOJ7zdR1X3qDQhza\nB7yXLmiRv9A9vuUbfxF5c54a8idXZmJEXitVPhnygVQ8HGaPEQX4gyTjLxO1\nSDze5mqVTJlUqY+KZwLxy4KYrcObBYrNqVkmEkFmEB7gw7004VQbGV90YOl8\nQqfD\r\n=KBV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/touch-target":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7fd17ce5e.0_1574820674345_0.5302160484117204","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/checkbox","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ec729683b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d98958d28b48d0bf49671cf86e19deaee4851800","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ec729683b.0.tgz","fileCount":32,"integrity":"sha512-UkUDeZNGtc32KZUQo4HfM2lka3cbKrHeJTF4PkoB7HeWVmNf8k4gV8H2YSbb0UExjvQfqcTo6JrKNIm3nuXcUQ==","signatures":[{"sig":"MEUCIHghdcD3xk6sb4TBuu12W8OixR4zhSW5WmgcwzMgCXAJAiEAlSOELfHi+67lm6pd3xvC5bgoP28RnoB58Hv9cDMBg3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxoCRA9TVsSAnZWagAADgAQAIPCXgK3kkwXfDM3IEKd\nN57E85zFvdh2tAEPvqsn0uW6137clgOOE4SaEmE2jFsfAiKvSOXUN82V8H/H\nqFwvS7O5jI71xe995JBNW/H67jXp2Iy3Fz2sVM02q86FB57Z0rvXQKvW3Sja\nS2OFutagDh4i23E5Z+VJEHFq+Il0u0qUiVRMSyfeMXqH1vrNwvhnDpL/dEPx\nJ1emea8E+BwaiA6CCDezz94ZYerVtLejkt0xceane8YdI8hdzEmk85Lk46G7\nfbOJFX2CTR9+SRhw/d7fO+ClX+uZFDoVk6FxXzafvi12DFWx2N5GnEiDI8iV\nGoSL82lqp1E4qVxpKGpg6ycB3styvEkNu0cjx2WgVPQlNkxFnQe42lqe2PCS\nKGwFE9HscXwl4EK8XrvA6vVsf6sbUgnmJkiPTKeC9Qk8BA8W9SZ47O98uJy3\n913i9AyC2E9xpdHBRq+eDmhkMnOmUMtMBrERnILCP9JWu/VJUHGi4REvIpgQ\nQkfhmj0fatMzGtpIJH8hY1QWyimSdGTMLqA44B3lcTQUuTLWRU/zFiQmZr8Q\nPZbRlSe3h0tAI/r/qzpI52a1MrzySOaYkq7i+1iPxg6eLpcrDiyWAPK0KXj1\nSA8gxbgRJtOb+keSUCCklb5WjXsdV6B0ekJyXq1HRiezOwkCfh0kq3HGUon+\n2ACt\r\n=ZEKY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/touch-target":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ec729683b.0_1574870120129_0.3012229054631359","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/checkbox","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31c77201e03dae7ee86d1f71ab68ac9c5730257f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":32,"integrity":"sha512-t+qR5AmQkWUXPrUaeHOAkcaF9+A5q87/mT2+nJB22ZfM1TgSSRQxRMrVKKkGaoul/va+uhz7QAks+eFeTsJEKg==","signatures":[{"sig":"MEUCIErI+yNJI+GJbVNIqnA1EfBV2ywjw5CHuQ/NbT2zVcxXAiEAjohZQ4C3Ln2UwALYuMnJYdnQS87GXJuTzlCUbzDiHoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3susCRA9TVsSAnZWagAAH0gP/RLK+7pQK/b/eJ9TRFxu\nfF0XjNFlEul4pOp3TygBfhmLtvsyZUZHKWAracLayBtlAvN8x3IRv19J1uq/\n8O4SPTkBse2uKLSrAVl1fVaeUa1iLjuQP/1y48Z/PbblzohCiELYV9Vh7uNQ\nCHq58Ja8hjxP0ySHydSMrDFjekAhLoqCW+LHRxFjK8bktp/xc9T4APXoPvrd\nxjxoi+Ep9Y8dcpaBrzfPrxBJ2VowpXUa97yfDGIpeWgyGlZhFJ9l8Ir4a8q+\nZdejHddq/YOMUaaHefQ+oTQ74Jp6H8KUf3KjyrZhjhAy+RXAj0mnwDxio6fL\nnJlu3GaZvjBOsgEkX9DxIAaej7l1cjCq5zf1KHBWZsnikxW+pVXhfNBuLqFi\nG9l2OFi5giaVKlG7koWhaE22vCC8ygjfMR/vp6tb8GWJr/ZRefX+tMKW2Rpi\nPBHrY4LHRvkoT79VggH6aoN8LIt5+XUMs0NbBqMMe/AdK0gb1CzVH4etyfs0\ndqdWdgZ3qICiGadph2zv3e4PHGeJkz7kgbXUvUI06g6G7B8MAQZbrp39yn5m\npwvtLn6++oHD6QPXkmRlhEYckcQE1B6RE7viXrmFbwlpMEHuQQK3diG2L+5d\nbnSXJiE3/jcSUwEk49fmnYoo9YrWnEOQssEotcBRaYYlrWrEBHUxgg5VQLlW\nnlza\r\n=cUEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/touch-target":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b8bc4a26e.0_1574882220195_0.7256255755484438","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/checkbox","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.f978109c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c684be29e36ac3666d60cb91d843cb05e31860a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.f978109c3.0.tgz","fileCount":32,"integrity":"sha512-S0/B6+L5Blcy5JXD2zj4YOt/Me7g/sHtu0KlGRY23sr6srqYhtdbhAlXpnKr9QxihL7UIXrWjpw51BPEZzyVtw==","signatures":[{"sig":"MEQCIBmtoEx2pBvO2DSXjBD58gXKLBAjOd8shR/VTGAMMXyAAiBbwI16deiatRwShsVrcFIcvMQdRLfOIZoWkKihOC5Kew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTeCRA9TVsSAnZWagAAVlIQAIBdIlUiku94Ei3pwNNV\njg2gttvAgmCO1l30XlBwxODpybhmmOQfGGQZADcODIrLaZ5JLcyJfirgN5ww\nZN6FOt3R/0xzwfN6ZLuq3ClVCZ7FmRLdjmD8zeTGX2leZS4PHWWjoQhwzvfb\nj4hi+CcYSlQS2qqI5s2MR0blhOZ7g9D4k6AOP4FaioniOYqKzLaWt05vwrw9\n3utLOMqCqiz5Q66LCHXobGMYtB7Rvck+LjIjC8Nr4l0902SL4Or+6WiE3QXT\nxHyRFtlDlzXQkuyHc0AN+ceprxbh9//CLlh9IYWJz1s98xQ6kEeyOE1WsVHg\nvTvIjmy60cveCOjfvduE+uNYsnCXL7pA3RbQHCIbnOUBb0014wRdw1+SDBe8\nVWLRQwfkHDn/CemcTZDnqlGzot6UJJ9y/FDqCFcjpGQaUEEKaEE7pAobDLkp\nBm4dvV6GrJ7Zgj5Wvg3PvBzgI4RshwT90bkWDDb1861wx8ftGboMPVbmpH/J\nlqjTTeZgkCH+AhJAkN08C/uuZWtQlWLcTRy62w+N5aFFuBzlTipegAEmYcZP\nAsJuF0ccjzhs+WHcjhfzHg2N5qXqpe8vlaa62DGPvxN084Za2nq03Qy1p19c\nr24CcNR4k+dIh80bWibTFzREPNu5avOSoTMOdqqzofbbwbWLiUIlUHLwHS2I\nTbe5\r\n=19NZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/touch-target":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.f978109c3.0_1575306461870_0.09479727339045119","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/checkbox","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d194f0ea600efa837dfdeb4ac9070efb141ed40b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ad9dfe706.0.tgz","fileCount":32,"integrity":"sha512-7GTI/ZsDJq+Augd869TMelec7KE707goz8YhQgVPry/A4E9SlwAQBcMMyipHJ+wSh3PwZi0HAnSx/Qhqy1889A==","signatures":[{"sig":"MEUCIQCiPpxyBQ/iFj1tF0+zzemb8KpxvJqcxk4+7pWq85d5pgIgGYspPgSlwBjnSJP0k4SisPtF1/dByO7Yi8k6yRW9w+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0+CRA9TVsSAnZWagAAba4P/jEhtybUkAUHojEk2bvJ\nD+AzV2wcLWQEfTFji73YFBYfk9FDvsx0Y13eKAYYe7k8jqbEgAzXKZipagab\nb8IbIn+bCnnYPRZpw2tTm7VQwAqC8CEsxHp8oIWxyJpRtXiBXa+FxgjiTgtN\ntq4RU7J+ZykOp3alOukHX95JEYe1s6UIOqi9euSfAKYxViPFB7oB+hZIAAvU\ntzlaHM9jCqJ7hsNZS3zdtbG+2zIQazlPWAV0vxB9ByTV0RJ1eIJc80YlJmzt\nXmWnvm2ipf3n+K9SqkuE7fm1b8W5xqauD+Bs5PJ4X7QDhgs2DQn3DNUnf2ke\nKdcp8lIDhVAKQOc6K9nRSfAkSS14ANh9JixzRH6AyBgYR3HwYMZYR3xUPQFm\nsv0am4HpKmpI4Jgl+v9e9hIeM2BUnnihZTulRsadsbO9ooNo16sglIcuIsL1\nihJxqjfAt6XD3DUWDt2vPNw/quwe/iy6YJYW0YdKg2CIb8KiUTTqv0dxiU0K\nKrejUb47OdtfVrbqEtER3wOWanjLzlXCVpwcwFKeiSZThb5BuN6DzBKM1+BL\noeC9QuhtbXBbr6Y+c/d+iek5n5Jnx+ursvmGgS3qXAtkGhk6kZtlJ7oQmAxe\nEtcYA+k1ZHNhBciBqRqVqSULX4t4j+2mY4kcGpjNDJXDhd76dIa29MU9XfLU\nuNCT\r\n=PZ2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/touch-target":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ad9dfe706.0_1575415101890_0.26676121108726014","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/checkbox","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"946eaa9875806b6a6154318e8b87d045a22ad6f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5e45d77f3.0.tgz","fileCount":32,"integrity":"sha512-n5WccHgnO3u+q7vdASo443S/SLhymrv5FOZY+0I8XoE6ol1aNBy5ssW2OiajxPvMhzhE8CjlYB1dXUbYvcUqCg==","signatures":[{"sig":"MEYCIQC4bPj3oJetldWaH8ab8pbxXYhYoXxdWQUL59FCZdKttgIhAJ1Twj5NklRfMBh7qUfM+korHjtxBXJ2nysoAed5Maq8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2mCRA9TVsSAnZWagAAuDMP/A87uNYqUysOzWF3E6cS\n/exS7KVHtClQqi86AhQGoocl/6dSqxHCiiOu0U7wL3uw2VpF42zFAyIxjSK4\n9Ai9ldHCppyFxrOq9Qq2QFNBvHk0r0ZjMP29J7uwuvJ8jrxY0A1eAKEQYv1G\nk1ojfrs9B+ki3rRrearh/P1z5IExF4iAqC9m3iSg+vFGVcHPKcpIEswzqqll\ni/kEbe3cHnXTi1YfW9Y0Fpzu3NI5ExuEIqlp8jGLDeeUKqDmlRgX7HqX8tUf\nrCEs9kejnfYMukO6VWN1QHp/daUz4OpYHJeaHxscf4oS5GoqkPj3VwbcWvI4\njBozsi8vSh78c7MCrdO4oaFg8ZklcfIFGgoaqzZQmnx07yymqH+gz0dEk+gg\nHIRxW1mqguyGOCGL8GkCzzddrwLda0vjj1hW7uMtwHQC50pVB7xUlMLjh59d\nHp0NSKXCLmy5SQnvKXmWWBOwjl2Ti+uf548ioeDEEZriR0n9t3Sj8kw93ME5\n2QAStdO1OJvA2lVP6ejsaxCnT8jCx1MMnNfwiy7EOvC1ccp6y0fChSkLHP4h\nc/9X57X+E/zzxNMovCGVxQOkfSl9Ml32KMxe2SKTlALSXdCA2MkpefF/iwgE\nanoi/qUgjDSY5h9hwe7No50d2ZVOE5v/vGWQZXixLygrMsJQlw5rv8r1jCac\nxgjt\r\n=JOU2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/touch-target":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5e45d77f3.0_1575415205865_0.6133987644450454","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/checkbox","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e8a09354a02639f9a7158551606265f2f2ae0d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":32,"integrity":"sha512-7idG3paoihHJO7B7pPm8/UXZf2pUKEuiKoeLoCzdhLHv/dwnjRiumR/2q2FuRxWY/uPFcYPhWTJ6OlFJAiTlOQ==","signatures":[{"sig":"MEUCIQCXlEMx8d80lobgyOsM3LOSdNZJYA4xd7rWvJ9sB0ktGQIgO7EJWNhV2Xgh8hLbPpYO7qVjgFBKodjmd1gQkKyY/ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3HCRA9TVsSAnZWagAAV7IQAJikgVH4M1fx7bvGvfry\ng+JXZz3daPzr698Fz3lRlSUUTDXRcjOlLZuoQu0Roy8x/jeQtvTgII8DCO9O\nQ8ZEQvzv7dlW0ePZ+Y2mylGLoCRuBA/7n0l0Vd6KBCisw4pzCtiuPBkGACq+\nTZ1IDSMti4uRtL+8638CuBEUJ3rP/9m9/6fPIuAoB5u52J3onSOCg9r9/R57\nB79kSbiLq2prE1+BPqg40GIj4HS15+DlUOLeapYxAzOCwCNV9LpBA/jK9+Y+\n+AAhlGtPV+LW/GN4taXxoPFv0Q4BS9vi5eWWx1aAy4TLmD6+9PYK61l6Ey4Q\ninHlAZ0J3uIBxAJOIRBM0fIMNL48NEAfIyhN+PK6d7I62SIkyZUK5ItFIAOa\ns6pUVmOzGGQO/ULtNTWzWVC7rHAf5yTA0SS/pRmspbi2BKuTkmollyS00R3d\n1aBYAYXdGGS3Z7DUfshCcj/PT1CIOlsHwu5HGU/FU0Sm7n6ZwJKVN6E8lVbq\nRjj8U5spmujGvYH70Zc+bSxx8pO9BIfgJlc8WeSS0aapgMFS/owdThRAzBEP\nysCC7ucaUmc3D4pr4wMtQRbCSgwwF+qPkvZPdsSKg1GM1AF5X8W0X4/KA4LW\nyPveFQDcQdzrymuwq+Bqg/1KQOiEhUjWircgKpzCSlZiBQe1tHF6F08Ahh+Y\nWIKp\r\n=qyRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/touch-target":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d10e8cdf3.0_1575415239252_0.01822031393283874","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/checkbox","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88692ba7a97a889337e70130d5d22d0e534a0f17","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":32,"integrity":"sha512-u6m0jUxIJb5AWqIkrTS5OfAbwdH/6vxNzd7YS8q3pb9VbDtRvLo58w7yg8tcjvugkJV4rHaudO38WykWIilmxg==","signatures":[{"sig":"MEYCIQCqrzRs4vPjNax5le88nj3A2giemWiM/hzN2RishM0GsQIhAIEEeRHJhWTMioK9WdzvlG6OuGquMNKcqkoMUswXTFhg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXlCRA9TVsSAnZWagAA5foP/1fRYuZpixqfvH+5LYOZ\n33EfUjrZgrdDYMsRT+RRtRaL01NwlQm8mLqlYhcJUoNoZsXxXwZuwHD0Qwkr\nUvN9S+quQ0vbSNqZ7cGoifD6+U6+aX/zqXtiKkpW91Rr3EcHtGa4gdFfS1GL\nAlNX4JlM2CtigsWYcpIEiRg1AAeafLJ67i9opyHVKvhNEEfXA+uLHt6+d3E1\nrSZ5tLdROxjxacU+CEEu4vl1RRQUMhbkUExmzrI3AGeYWSTGBHAQD5EL5xmr\nElhk52OZdfz5PRYFIE+GuhD7GqV3BdaXf5ulRCdUznyODpm7nonYbxVopUNg\nw1aXsg8boHN7OSrAocobmA69EOwZbZasGgEZg3/VMVsA3S5HhMdwmQvufrkQ\nX1rW2RUcHt8t95KZyP1NewgbSzdjXe2N8UQ5/XpkNwOB+NN7Tl8aGU8tD+MQ\nNOmYCMYRXV5jwsuEIfNliTJO9ObhYTEBGKjnpjEozaAI0anT3zu0RtIoYzks\nZt6bgU4lqti5gU6BQslWA3WQ4aLukgACFjDzjpIH3vkgh7Z8PdUwDM+2N7jD\nNptAgY9SpdT+/mXlTIGpq/S0M1+IDUB4XUR68XvM07pFBPuvEWOOR3EwphKo\nWNs1daJ+U03KU7+V51Jv4ii+N6ivRYQAm4jF/GKjGRSHnNdxYTp2A1itnAmM\nAu1p\r\n=RBor\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/touch-target":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a5dbd8a2a.0_1575417317363_0.4428045937743028","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/checkbox","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"489ed175d938e2cb284e7f4ff724cdf674a4b854","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ba879b68b.0.tgz","fileCount":32,"integrity":"sha512-2NbiUOSjPnhtZvRtrAFznR46hXlu0hWdDhv4v3UkWYqkIUlZcsf0tiBQur9A2G61S6Myl9M9vGbshYzUZ/WhMQ==","signatures":[{"sig":"MEQCIGbwNyXN0a1AO5u6hL794es7wARWzNIzXv0lE5b96JkLAiAuWm0kfGnck4QlcjLquXCt3nkJjZInicrpIubh/v73QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWjCRA9TVsSAnZWagAAbzgP/1NUxfXspR+6exMU0g3a\nRznKhgPIOku9pL7LSg/ZPJzNqlK++WyIjj+rXN9BHf6Rb9Q6pX4k9e3csb1N\ntndHVtyiAAn5DMCV8p2BZLY3J01dFa9yVaptwewPyvevznkgeM74dH4T2uxw\nk1Bx+PNibE9h8hjj6icy/X6sz2/HKg7oK1RM9wc8JqcdoqoAn7mV7vdayUJ5\ne00u0K7wso6F64BbNFBQSUk/+WSAXocfZNzzbaNyI28MJXwscX4fDIWcEvR5\nvl/ahLY5fWzR5sP/ctyEJAYPdVKXHGIeG3aCuAQ0TGKa9cqQXcKFlLql4SMu\nS0K4b2yFjnaAp4jPle34R+Xsmq0FBIDyWoDUirFtq7t5hhNGS922uF57JfHB\nYOBTxbAWkfBRucaTxGemgrTYUlsVK6akK51vdVjkj92zacPZwW8gfrWMQXps\neUbwPjYxK1wdNLnlPMUWNiDXJr6ukUKOeA61SU1l5E+qPoPQVwR7S6uTOL1W\nJyWthwRF/DZqqXCaM8H5CaLmwceeYvS3sBfKuCh74ubzVFvKSn7EpwT3NY4G\nVpc6icin/+y/0jLvtaVWw7kt9nfSolXTGlfBPORqwIzNdlB+TgsKIRw7wx80\n1k0PEen8WAIo06pGs7Xwu0bzLO7gOpT6oJBYohXvgHXVQa399cvM9cL7Yzwz\n35As\r\n=K2zp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/touch-target":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ba879b68b.0_1575490978952_0.4597356636143184","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/checkbox","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dea08a15817d49d834a8348697eb011eebb96220","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.aa0eba489.0.tgz","fileCount":32,"integrity":"sha512-BiYyGcepCdOHG8B8PX71pU1MZVY+IQkz000yzlq3gCDWpt84tBaeO1aBlcyNIVZpm9ScsHVAZxObIGnK62CTMw==","signatures":[{"sig":"MEUCIQDJ8/iSLhAMC2jodOZMP4V7nRbzPkLYQlPN79cOPpfT9QIgbFLk7TNhXI99exdTtmUUciYBlrE/jb7EQfbIMzKI4hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bX6CRA9TVsSAnZWagAAtD4QAI33CLkd0IRnr8BI4YBz\nfKlroEBQYh+VSox/WKBEjDU983Q6N5TMdOOzuaRl1BoSko0Ak7sGfTO0Dm9O\njvCniGUEPF3RLIlbIn3vTdhYMgjVZvLimn1PGR18oqWwDKThBKeNLx/i9/XF\nduJ0kDZd4A0Afz5p0d7ullgfIDEOcJ8ARcQTbwi99cKcqNB6WXKoTZsaXVPU\nleo2+vbGoC6dD1klJwRQuUZ60ZlrpsX1J2wFiLbJFw9tMU4ocPxJK+igi12p\np7pkR95ZxC3hfJZV5+HvrR9Kq/srgFevuxedupZXwGgX50zRzyPa4QzXISM1\nNxpV0Mp7/U2fy9etsVr0lziPAFrTOZ85FN5hO2dzpU2MdbnEnck+YxNxJeHL\ne7udDjc5d9EZXwTYyRGAYEHsFKoVwJ+GCY+jB+vtSjBEoCcyG98xu8MmM0rG\n8QaRC1lOWmncYAARBbrplp8fHsIUS/BOBhlnALm0fGBx35IzKiycGLEykWS7\nLJgj20PBM9v0YVdrWWaI3lmuH62ylXnbD8wmecw8VH0Fk9qgGq0ZU75u35Re\nsMRSV1oTP3guP84NPXH1x0rFKnu1PtRsEEmxlxcd+ygmZrmx9qg3XTnR2rcY\ntOUxiwhbtUfeoonxxkeVVJKYJFhjrjgkE8kn/YumitG/sTn6HnyfkG6yqcfg\nTUV4\r\n=grPY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/touch-target":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.aa0eba489.0_1575597561965_0.9271202776789256","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/checkbox","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bf0fa9631bd05f810f86f9db4f1fac44d8710d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.cb7b71a86.0.tgz","fileCount":32,"integrity":"sha512-ycv49BRU2q7sPscMKQKYIuqwX/pgYfigysm4UxhoZfNyLpNBsuYzW71cQetjg1RMozE94wWnCiZ7xNDauAoouA==","signatures":[{"sig":"MEUCIE2grBzkVGaxH9pdVXtlkpTnYUtDt1Kz3pmozLOxx+1OAiEArRFTlll1F/i3p+VrROUd1PyQka0gZ+VWOLiIMFJdTtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqaCRA9TVsSAnZWagAAVRsP/2YSrKLd2VF3o1yt4oTK\ntDB1ROW9f+Hi36ikFWU++RpZ1f+yyHUWNmwfUZ4f4Z6UJ6oHv5u0Ilm7XpXL\n6AEBKjOM726r28GiU74UUrw9eauC3c5JxdnHuGM2PT+HimTDNZJeWUXmcJ7o\nr4T0ZGCy58oq/OeGw7NvTnqV4MacnnK2qcgTEz35VI2WCBWo53CDQIOywfN+\noIClYjnczCriBNUPtnpel2jCjawzAdEzPc+J+wtRbIcKGjqI2KaQqWEVttju\nfx2tane5v80X0/7iEgahY00FG/NyKBqvFLsWYx+48bosUFsadRmIWgmxMtk6\nRA7rziJHOZomKfeNYZD0kOpiVdXwX0fBLQMyl/kMJ3NiepgaBvO49RkNXgaH\nxP71ZGp51dyIoaXfjG+6Cqi0QbUUdj8+a95rcp8LVH5pdGGPgAv3DepEkLlk\nQfoJ2goDxfsuDexEStXndpWbrcWu/Pndt61YO4AIbGvl+bzK8+nZTUuA1Mzl\nItcvPkBHFtJYjurUcVp/gYq2xYLMYlEZIEMK6laM9RA0qAiY4xx6hha5wvJZ\nhYOPYjGpUNVqI3UGwNQ0Jzjo+Ze6EhHGTrn7mU/ZHN7SUUhg6B4Kp6xLtq7z\nSF446kZTENrA/N8f2tCqShvMnKRaLTO+sSJyg16ZC9Z0m7Rh7a+mDi6RbASX\nryLb\r\n=QVXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/touch-target":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.cb7b71a86.0_1575676569717_0.3665314135083062","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/checkbox","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c884fcc16a65a39a343e70a64922118a9c4a3f63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.50f110a6c.0.tgz","fileCount":32,"integrity":"sha512-gX0TRYYC8iDku9dEWbxrDSyFX+Y2Xqa6dXOxWekTSzWEUDDy0AEOEiTMPBPqNUd2wW193V1RdvxkyBf4ll7GSA==","signatures":[{"sig":"MEUCIDXs/o2fByoiIXEwpQJIpcXQ1JTg9ZsmMppafhvrvWNiAiEA38OfjgCTe+YgC6ic9RRDl+p3uyEhZBhWB3QnwNN/YWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788LCRA9TVsSAnZWagAARl0P/3QBRfmRJCQCgL7XAXTO\nL2L1ceWy88i2mRrVpsEcQjwjYI99DOIHaJRYLxLkYnl8Ebs/xIZG1fHcHQ4A\n9J6fd4d5yY1kEp0iwHzmWb16LoeY9JOe1nxe8YaTbB1FLHJJ9NZp5A1NZ7cP\nkONsLRSiATeR8apKfCTuDCt5f4BQjGXqvbT5DS1kTBOa2kzQbRN9IU4bZFV0\npNTzNq/9H8kyAmqDDvSrtM0uVCrG0dOx0mclGOZwlrD7vZ4LhfosCzCfalV9\nukcUzC/UXhj0jNPulgF2c9ctglJZ0JyVsVleIFc+DRlYU5zL4Z8wiV0tS4Uw\nr/tTkU09W4b3ZEbLJx2RPXttjVkLsev4CaCL1BcVVC1LnZJxbrrXGsBLon3U\nARHhLbzegVgnJ/9WMH7qGu/NBFeHAtCLVui4JFe5P5amfwYkwqiV7Ls2/avb\nR+JALMgABjbHMfNCoD6rSFlV5Lhqx2fL2GKFefY2t0YCQx3c1Vav1abLISwx\nT7h1w1BPh5RNLFIy6cmDn8qNB39VbLA/dDePcYMm7L3wDHYpszkOQmfjAzYp\noLVLD23TgxyydZxI4VVF0pVf/+IZ8mDCq3ARSekR6esHXk/WEZj94Px+m/Fh\nx0x5/266NaBjPSM58EnnEIDjc4xtJHKP6SK7IbjfE75zvlXnGgKqR7Sbn/gp\nHnTL\r\n=esY4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/touch-target":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.50f110a6c.0_1575997195258_0.09054324861040763","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/checkbox","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b360fd9e00593c92762620b8dd07a3b1ca46288","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.878a08b7c.0.tgz","fileCount":32,"integrity":"sha512-gZZC8N7fkZPZ33TrwSVsRvv1hVhVrWlr7akIdIxFo4Mn9mUO3OczVgVUveCDhrIi0h7aV7aUt6QjpQMVxLjVRQ==","signatures":[{"sig":"MEYCIQDupJmFX6B4xVjvC6UYsnZf3uehrKCRgJ00y24Oy07HgwIhAIa8tKBRHZ5B+15xSfgiKJScRw9pu8AYwvSOo7HAlZdT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6iCRA9TVsSAnZWagAAytoQAJSCQ3uFw03wInd6jaLP\ncsQKhTjUKk2S4Ap0fI4f+4wDdDElB8BX8WOrwhzla3kNRpinC2L7dqdLyepw\nsKwrIsNEhs0DqDferaT0Eu+X3qmQJesL7LEG7iiQe29Lc7GI4S+tDHLioOh4\naQ8ESXznmKe9x3e8pCELmrI4QUEEKE5yf2iQjSYDqEC9iKDBz5zsfUw3x4On\nqmAqNl12Iy9wjRvmcPFvzueREdBXFnjmWXY6T4+hJvABb5OlMp9OwyHHRn2/\nRPvaeX4jqjZSkNZiQ3pwXS1PceikyTpnKq3n8jNsIQFyFVJ4EpxDYqP9PFwM\njfUkPu8nfDCQSIZxIt8KrUTrLEqK3FO4lsdpWMgQFz3BDOhGZ0IKHamN4n41\n/Oas1OBXa+21WjWikxcvHvhkKdudCT+t/yUIRhqSke2BPfIpG9i+UYvkecbI\n2lfufyPF7ICq8qgHEFrX3EOKbJI9jnsGnHO9o8m+9MPQcoVkkQ6P1BdL5CUP\nrJkIhXIxeyck1ZHtJDTSJPkr425mM7XNHPYUp1XyE8Kg3U2aivmSuTerB1QS\nnlqJ0fy8RzCNTGcEm4Xf/l7k2ufDkFHXHanQGpu2QG9HQ9s6wZ2U8B+kEMl7\n/ha/BItXinf6FfdHTZ6DAy5s5NlsmfCkgbdRxyfPJh60YFTb4qVFxnANVHFz\nimDu\r\n=3K65\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/touch-target":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.878a08b7c.0_1576095394475_0.9389989228926585","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/checkbox","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.397905b4e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1db5225d42e9d39b7d6077cf82c8a1108bde305f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.397905b4e.0.tgz","fileCount":32,"integrity":"sha512-d5d9+V8YtoCwMqmfpsOKPGwJloCmHKhxtT5lCk12tcgTvkRWm3CNjEYIAKm5mHXybimZp37NRXDFOlTuTl+GZw==","signatures":[{"sig":"MEYCIQC31jBfSmKbCYu9tNbMPABtUBRiBVc7Sj3HNmVd/q0gBAIhALJRMLFiPUNJhQIaH9oCV4rVUUE26xC7TfFi0BbM0X0e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apFCRA9TVsSAnZWagAAyksP+wd41qP2SEcQBMqHDoh9\nfg1pykju4T118alpmFUYFduBJcpGR6J5qzDBZg6FayhyzpV4M8Udn8hOBeX6\nQ6ZmeNznpJtpPwupaGIqskvNmPREfiPQQxvkILHYHfGOcUwU4EFWyinezwcx\nZeV59ig1moAp7nJ6nfhDzBvndjvKwIEAxRoVD6H+TgWjJwMuu6alxFPEr5Kg\nkYactkGeD3vLapwt7dSwMkVLQQxaYxyFkLcnqdxDAPHFWAdNpxAQAh8kTfIw\nyLm7oo979VLy7qgFcZc0gw0gNAHwh8V8G91HQKP203Ue4r7cI3u4SbmS94Ax\n9sTjQKapoUgbtNQMmE7UfsrIoeyvzs7NO8383j/yrlNKFN4v2j191P0FPAnA\nnpUFAxdlbbAcSGFjrz+rj7wagtE9tmDjqouxIU8Ld+4vTVSKaBDj1AavRgC/\n5EMfzhnzEXCrE9vZYPwUVH0SauaZaFH9OhuWG17MA+CHQaWI96HBRqKjizup\novFXoi2ze3zCUBy3ajNK7Vh96u2a1E6tCgLv4FiDdUPvD79S1awhoLgUIT5B\nQrKW6+Jjq75g9Y3z6tcfqMcrBJsmuCA35EyXpi0LRO3Yz8AO+4JRD1KWxH+h\n8qtmTd0BuejBpSMIpuQMYNJOrhfWLs22vdyONq8Zgiekj1OMekY09xVCTeuQ\n1aPC\r\n=JyOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/touch-target":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.397905b4e.0_1576118852856_0.14936523904329513","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/checkbox","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"880beae527a9fc4affb19645b5264d0968f64724","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":32,"integrity":"sha512-J6Zdei0Ytq/ZHKv0+pou8SOhZqdN58lAhCekvUWT81iY6vMAvf72tmX0dXPnLMVZZaoTFsrztIiLIkRnv7tfaA==","signatures":[{"sig":"MEQCIDzcncvW3zi136LSGVxIfPGzDQiDPhhXDeYKBdhJDJPoAiAKAdZYrjaPIvqyLS+nPoY7SqckgFXnkMvyl5UoUO/VFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4VCRA9TVsSAnZWagAAlNkP/3HCs1uRCZOs9tjJhM61\nqZg7m/NHfJPR9ml6e9VCSyzno5wGlfXpMOv3arLcx4gnEpN6rNWKgYAjlphJ\nhCjb62S9ozdW9Au6bJ1rKg7DMo/JYg1q09xsNuhyJ1V5U8BZVJjqpqPGMiG5\nfSKxhxvOuCyVa4djHfplPWUyfzp1kbbHDsWizXHzbMHABqfTAzD3T0OTIsO5\nD7gJlkATEhi18e6zmLIxl5OkOMOEivaUpjmlDKcaOjGOBKyYhZQmsgLZjGXh\nacFPdBicqSGZtu3mvtbn/Yo6bI3YtZiGQqmqDg8IQyuNGrO6FFaF2BX6FbXX\ndYSTXWQzd26oFyjxtn1rO+LF4pVtPRd1nQSqFQOjLiUAS25PvmgllRHkP7xi\nHhF8KvgTJEJVpAegYWuFp89rl788WLEZqWme7Q4MqT6LKys8byDOvRexV24v\np9lieskxdIpflbDEg8r6SFlCn+92Jt1s6sCsz7EtebZDxT3Zyfs0vCt85Wq+\nZFqV5pSCFgpt0RhTsvaF34bPZhDgf9bgEn+JrYKGk4BRkDpy7KWa+hjfp0mw\n+YBKcVoQqSvFWJj/BCDwuZkW+GP6mfl4CNT8VYs9l8+sqaxkTfcgtiEUgKqK\n64KP2GzFKIULxeL1LiC+zDo3n4xdwlh/afEp4mEBh8qQP3JUpZHFOllymKQ4\npD44\r\n=KG/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/touch-target":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.1fbf5bd1d.0_1576177173459_0.673663358295812","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/checkbox","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0aaaf16f4a04c5ca242cda90c127483540da34a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b723dfa78.0.tgz","fileCount":32,"integrity":"sha512-j225cYZ7mhneBiGUbmhACsUg9xNuqBlzr+P+DPMGoAfeN2RPpmRSV03jYn6cl93c0UQlDbq9dh8x6wzRS0E+lg==","signatures":[{"sig":"MEYCIQD/DfPe6OTgw27Edym2mrD+XvzhC6Njg+40j8OIkfuaMwIhANgB7SQO9ZdkVm65BB/b6W5C80u4JM0QuIlu1FdEqDAh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6oCRA9TVsSAnZWagAAGNgP/1xK6LEMNMG8hnXN0Hot\n/iClWVM+mcKZFeCQfkOUSivn4W7qAr5aZVXQTuYSTHftm2h4jSdA2DYURAE2\n7SwX/dsOLSAdeB0ltp7sHTNAyKgx6taNVWrpoAov/DbKUolTWFmg1Y0kxtL9\n7VJaFS76A2gBom2Hcnfo9Zexn7+zrKnvZAWkrC2xoSbNMhDYPWzHmNJFalv1\nED5zjgPZanhHkgBdesemM2z7/cEvtRXoUkx4SHjvWvwHiKVOZ32dTNoHV+vW\nvaig1x9wEIdwbfmJThaBe5UAN28MoATnwzmU+hgC/Enyf9FQ3sZIoWUueN7R\nwdKLEhZl3ct3AgFdZfYx0YqN05Hs9YBHA7+rsV6TYwZ0jgx8RAuEB07bMn9r\nsAK3pgxlpjUHwULYhFsBDUAmSaKjuPu044whURvS248OMrCZgMDmEqmsldD0\n5/Gej3++2+lj1JxGwd2cuur8RpqnjnuV23fXs3ypX5CjVjZRpAkSHmVb89e1\n1Fdf6epDIfXpgQj+7oiQWAAZm2/bSYlGNMJ5R5bYZ9hW9rEcTfq3RUexwLpZ\nl2O3ifUJwyT9YqFo7AEKWepCofIzjVFSe52C0Nri45fj5I+CSMMXWXXlERl8\npVHMWvLKsg3esB/BbdKBcAHgbJ8vvfGQ/HMfHYBPW3Tise130ZccKo07VNqq\nW+2g\r\n=m3ZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/touch-target":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b723dfa78.0_1576181415617_0.41121674160477806","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/checkbox","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.1c494e567.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eebb489f1e452d504528b668af962b211e80a8d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.1c494e567.0.tgz","fileCount":32,"integrity":"sha512-bfQ3k4QHs6OW4GJ6Sr7faNtZ5BRswnuzxvSlWlWK0SxcFKoxLgJYWcwlg+9SLHWoSfYkiHpodccLhOfHrJAd5A==","signatures":[{"sig":"MEYCIQDnALpBv97GBRidtCQnCG/W8w89jiwDMgm7OfQq2Wkk2gIhAJqST3mN1cdO5sFYbu9X/qquaTh6YfgFfCAUYGhqqNul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8lCRA9TVsSAnZWagAASBEQAJ8ghePY9QhSVdHn4AY0\nn1ZRz+HKceivupRZv2oawPG74WMeXaPxMy6DcgVk83kZqPY7nhQEbMiZL+zZ\nlS0pfqDtoPvVQVTwxZ8uKyAy+j3NkcxM9Hfw6SixLMdJpBPpHzgBdiIslcWp\nlCyrbHiQ+6l3jZrnM5jPv581qRhzcCVJgCw67a/1JK+91ANurxvm5/IGOwHP\n8iLy4yQVMDpM/w/bp9SorjnZOUjexKfSMepsLz1g440dzwmqCWgnjZ8izlT6\nrFicZodJtY7HzGJPYslyx+FjIKXMtiI2Z7K/y8yD/uHV7QXInjghWqoJtjdZ\njfCLLExud8Da3JY5chBdr8vzhDQpIW8BqJiYft/L8lschkW9SLnCt4XvZto9\nd97JcxEtFflAmPg27FMurX8tAnIdFA/LO8snxiY8u5JIDu/YoT1hrWfJcut4\noM2ddGU5btEtE8bMK2sEvkwu0KpnGrtf2Ehf9ewwmGtxBn/MRey+gHnTkQU5\nW1zvorpFkNeNbs+QpjcD8hberLdXF9DU/0mP06aEYvyHkLVJSYXnki7m4umt\n0UWJCVCFZg81VoyfMdV9jMAOBAr4tp6hZJyjqGA6V9PorBFKbeD6bZUD5dT7\nEgxb/m06gAfFjq4iJ2ssMs8mSsYqMI3AtGRzhZ61A6AZKDv72aDOY7LZ28jO\nPaPq\r\n=XsMu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/touch-target":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.1c494e567.0_1576193829182_0.2600112912496342","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/checkbox","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef00dc4bb5463dce2fa90c8e8794f54f843ede7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c9e98a125.0.tgz","fileCount":32,"integrity":"sha512-dDHr8xU1JDxyY2q9TU6pPHXDG1gbh8wQeCLEfHxmecMOHuP6hGj6sK8k9lgZ06zBhAqzoAJ3J2di7oOivkuZUQ==","signatures":[{"sig":"MEUCIQDt/oVoNPOzZiLRyLQkCxffCZw/nMFGaJGZ6YDLdmNwlgIgerI2wGMroOrh39RhaXzV7c+CbZlJSwAKPs+3a6OnIpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoOCRA9TVsSAnZWagAAlB0P/1hnuy8ndQ0TMu7eScDR\nsX320JdviulW369ijRPhr/7WSdwglMC4jsLdpSLOFKk9ujhOYeAUp9xEIMuq\nH3SkjPoEanuV30FG24QDN8TfuDMz5i32h+R3cS7mnoputWzj3gC1YDuL+gr3\n4FQLmAiWMctI+rG+Din0hWCkE/43IYccD4xCObqhpuQpeX4mUEFdSS/jVyDm\n/Qa519tlrpRpe72VytPjcNLKduEig0SmU68jTH+ruZ03Yt39Om0Y55XIyL9g\nMsHi/7sgJ3wtFSb0ds1a0jjypygmQ8nF3zd7gsOuKOoSC8Kb/7PKTlTTyaYC\n2syc3qMh34cQc1zz4QXa3zfN71wViuCoxyj8aeej3cnyAzIAp3UyPDqNtgT2\nNNNuOvyypDndZNXpmxG1FDnbcVPq1xRNVIWIQ1tw//L7boRKioxpqdY6AzCA\nnRGyO8iNxL3deBHEnMAdzlRgy4hq2E6tvtI5U6jljyX7VXeDsnriiBSOEt8L\n+QB9IfhIVfO9KdWle5uspjWvWPCfZ8M2FIzyVrKBuazbO3lPITtWNLjojo/1\nH/uWuXGe0dgYyTtofs/WOZjoIG+ejTnbHpba4mvrM4H/sRlrGr7wxwGQ6hWp\nhVb2l8QLwOrZSP+PJgR1EPAoaoHtlXmYFvuRaYhpf83f4vtZnUEPGWKyyAaX\n7g2n\r\n=gNgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/touch-target":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c9e98a125.0_1576606222285_0.8469594851266509","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/checkbox","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c03cacf0ed880ab3f7aeaa2475ddef075a7f5f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":32,"integrity":"sha512-JU5gHCY11GsqNBZpc0/AzhWs97kUNWYtmleW2/52mBTl5txzq3rbuJvhdKaB8eHvzLsTBZast9ThwCauUYRpYQ==","signatures":[{"sig":"MEQCIGN5O/wVOBZ5eo6zl7FIjoMQ1BNOErE46N7bYyFBk1IYAiBHXn1clhAD6Ycl4xENIKIrBQ+WH/NKrStcJGFd8hXJ0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ve9CRA9TVsSAnZWagAA6PYP/3mjg4Hh/NKzjClYI1+e\nOaJgvRq/8QFYjscMDGBN/DccK+ihBFvrtzHvjbe2FRSsBNVA8BbGpxXiHqgP\nZalX3gDqO/Pbf8y+5A7DXesUyoyG0GCg5l2St9Eb09NFDrQM7AustlV8biVE\n/yIHJQGDC9y6Q70k6Rc7wiCaO0FjinaHnGmIGahyoTwcJB2rmn+Dl5e25ey2\nEnoskcq4HL+cC+aDzCh+qLOrgKSDEV3/MqCmDSNXl6443ndien/WWZtoWCdG\nOCKXTeFvzNEBO74nzAp5nWXnBkh6shhx4X+qXjUF1c/szTvt7zEM75/KPSWM\nZVvEZn6cI+xGHwXOuQcjEK+EcHVJNNpKec/kqNt29LLu1kNRxF3gWi69OAn/\nkVR9LffczqiatyF0wStstkxtHp5yZ5BjSCEhvu3sgm3Zxu6WAnlhT7/jY0gV\nALn9VdvSaWiE1A0d47xMzMiVnpgSzfXNtmphk3oM7b/JULzqUQdMJ/CHfZ2c\nX3XL7xPVIegvgEcmc4j+/ia42BduvMiwGtTlOs7skO4n34T03++GfHu3e4qz\nCos9o8310mwDRoC8B/h0DZn6mJ2m4pCPc84/06VidHejkPFQFGFPUkLF2P87\nCmJKmrOSiaszatbizYU9xPseVm+z71fL5Faa/V4BUcEAvfpQ4+eR/wIheE1A\nvCqG\r\n=VY1X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/touch-target":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5ffe8f7e3.0_1576622013139_0.25165235544930575","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/checkbox","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.47949b08e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f145b18c4c08080af93e9000d867ad186fc7e153","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.47949b08e.0.tgz","fileCount":32,"integrity":"sha512-jmsu2oDA8owcSxCyMmLhvUzCmOi0S2yrLybSxrV85MT9WMZTGKzdFXprKU1gbVIBlbMu/ohXrFlIsfx120b3HQ==","signatures":[{"sig":"MEUCIDU000i66a5YErfkjKw/PZqEDQ5Vk8vZIHxkmosUu8KQAiEAy0EIqf8m8CPQmDfNV9DjGi5DKZjPhK8E7x568p+rWXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mShCRA9TVsSAnZWagAArjwP/jzb4ZZ3Y758bBbyiDSL\nyIoT16J5noVLhBthIESOllAAi4hKI4aBC6sgUT4ws1b0egdVczHBTtuFtqKO\ntaB6oNzhflLelHtplxDJtOhDTPl5+c1ueWhesitY+jcUKdomG8xngKVpEWQP\n/T1oBB2/Zgm5Kv78/p5byP0ygxYJ1YGS4QtRH7sXa+9Arg/dOektw017X6Ga\nFOgvAQs9amz4ieV0YUFtYUDdMAa9UH5WWhTnTw9ax3ATNYc4X8DYNVqzNP9A\nelvXoA25b3sW+clIFBkH9rOd86WTYr4AbMbRtaL9eQvU0yCmFWaAmoB6i9tI\nQGYWF7TnRYgf9+idogYoc3Z47vRA98Jd/0b8Xd5ZlB3U/89ixGTOfj5pOyA/\ncPWME+0muBln45sDNIC4YpKA0VPpf9CCiMm5EvwVHYli8LaKqGZDZWIDNBfI\nyIgtOtyn7IGnx0gYRtejScHcj2MSzbZ4z0mXpmwojPOv5JZlvuesc/ZpAxEv\neL1uhdYPpqCBqahzPFOHBML4RdxvtagSQStkGs0RWQ84AocMnSlkWSnQPZ6H\nBtJqg5XEKGBgFhG+dW3fhlCQNpIjgVlhZ+BZdl/8ApAvEBDPzMgqcKH2eUY9\no7vBzes1X5hIyGh0It981Pk5EzmGdA1czQpVeWEew48wWpo95Il5Y8TGXqRx\nEAu2\r\n=c0Ln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/touch-target":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.47949b08e.0_1576690848676_0.7752158452840363","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/checkbox","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"079663140d2612c520db40df2f6759295ca9b39f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b240bcc1b.0.tgz","fileCount":32,"integrity":"sha512-jzSmbcbcoeHg7XpE9kgb7hSejTHWI9d9CDvojJjxL1N0+OWXY6sOQZYPN8toiaPz9tn8vB+qgjZAzTGqKohyfA==","signatures":[{"sig":"MEYCIQCntb4teN+/SFTTWy7OlyV1ovUc9JhvLJm+mGrr4J1cpgIhAJhCmchv2CWM0X2IFEpyHh70v76yMpbMfZRseAy1QfED","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ns3CRA9TVsSAnZWagAAW0AP/j4NdwWTDYJ8q8qippoD\nHO3nm1ik0kGHxd8EToSyJHagOsEDPtdvtHxJtahdigWzz37NUTq63lMuDnkg\nX27xE9CEo/G/1ER9jOHx2kDJeDqB0DUpDbr93BaBzcTjzVc0XxQgZzeMQjx/\nBgaGIKAO5H1c7jts1q3xb7d426XX72HlDSA6tqugezeVfjOPMeBNey+Xz/Cm\np2FFx8rOYXcnM2yjcMpENlh4G3CXD6hWu+8H8bnEMeR92VclYiwnssQZUw51\npOjSu/WZ9bOdc8f0S6UDoGguMKyqpbzxmiZiBYy1KYHhDsU/aRSti+gl5J9q\nQeypnC9QHdAXjf0mYa2L9vw5t6UW618z3+19fQFHVDVxPL8di6/8+h04ijFz\nwkfdGxEGl55Mce1fVWV2X5bM9g9J1ursqjzqGNPIVDiJuAE3k9qwelHYHkgM\nEaHbr8sIBrMAXIix3M/Bdl/451bVW1EruvXYDrqbroExkeFHX8sc8VKYUHMD\nex85bMzXNdgG4njelI4SsxSCqP/7RxrDYby5NfAww5+0o8VkBibHgAnp83GF\nnraJzgKWopNhTGKrcbZ9URY7T7hX4o7bOPQC5wOb3/WfRgLLAxSqPEj8Cuy+\nVpljD9/dBZ7PO+2WvWNyONpohgxaas1MDPxaxIPT/dKzFYXNMGDygO6wmPLb\n3ahm\r\n=zt+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/touch-target":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b240bcc1b.0_1576696630717_0.25824646509059357","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/checkbox","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.391674a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea500d4cd9b56ed86e9c350daa8561a389bd992b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.391674a26.0.tgz","fileCount":32,"integrity":"sha512-dMu63UJrqUnk0QCfZiHS+VVuY8JLVtaQ871W0Dp/N4NuZanVmcqtgHkCFoKWLKadTwqPTeSnsSjZxDKHrP1x3A==","signatures":[{"sig":"MEUCIEAvyCsHLdUUliVMvGuP2MSUlbWU2ixYei46Ov1U1L+RAiEAi0qu+owOWGz8/LRAtnHDf6ayF6Yx/A0AaZaVNFRZI+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntHCRA9TVsSAnZWagAAa5wP/1seVa6+MB0XfG+sp04Z\nbvIm0SDr/bicO0Ps70TrR3pCiuSHv15RAdaIGKFzbX7e87XSueKAvLEfyX47\na8cOM7SM24nz8ID0Pd4J1ICdV5hkw9nH/a8ZWeKRpUJZYgyNxRV5xONGKqPg\nONMPMzK8PmA2Uf/tItN1P4ZlN3BkWusywmj/vaEeQY1v6ugkGnHXyq+DcjFF\n0TQJSvjsqSF/JUvJBMj/4Kq+JYEgwpawjwua12rpIIT1lqqAbo6Zp1LoFJ38\negyORtLSqlD2w/6euXpTdOT96Tj7MgRE66Lh58cvSWOf5XJyktYEvzmfiXlT\nAGPIFzGWLPkM4PIcamWYpNRWGhyrX1cjnECCADj7c3kd1OLBiBbafp5OxVxh\ncxp/YBaV0k+0NqCp1NN60O29yWkKe85czOPwrGM4doIx82gL/d+cJbUYB/+u\n89vOPH18xPZVw6HO6YFz/W1agsGuhPZniOO+ZFW7pIdBIxSNebQh/E3a52Pq\neji3IGoJWZ6vmm2KgHGf7SC4whvuviw6sHJnd0Ts/NWQU4VdQpEmnH0VvBth\nentqMfw+CwvHpcq9qzf2OFIEWg546Pme96R7AmHkd3J4nuB7I+ZbjE7Vynwa\nKZO+d7ZJYGeyGZVun6xysQ950KVokgwHcHVQ+kTBI8Udb3FKLb6654EdH9R0\nVKpr\r\n=Lxef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/touch-target":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.391674a26.0_1576696646913_0.9007120224874585","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/checkbox","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c4837746c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03d332d25cf61bd3cdf947d1a812a83526550236","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c4837746c.0.tgz","fileCount":32,"integrity":"sha512-lJBqMBOswQQmy7A0YW9CoIHCi6biRMvke6lLHxME5P20+VbVTIHH437gEi5P4rO0qSHS/78mS0fWItvYY+TTQw==","signatures":[{"sig":"MEYCIQCr/vNAN4ujXYOu/oOodELG8ptd5gTxHt/h5kedpl7A4AIhAIrpfmlPL9Hp/fuA5ZRZnXB4FmMMNL1xZ3lCFraSSxWm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9/CRA9TVsSAnZWagAADjkP/jIWR6clfQoYg6A4Gtk+\nOkB8XP4o+2p0egmQMN9+Jq0R4kLEkAmL08gwgFWytYSrAxMJcEBRr/Rx9vo7\nQPZUmbYe30n9o7XVwG9sSpx9kyHk0pPZy0bihqTB58G9pwElCufFFHtgq0mB\nFHFZa8Xqh8sND3hGPbVz3bG0geeVdAXtnOO44oSDKXN3bLpmkELCYYZS1QfL\n400OvskD0bB7A4v/VXCWfRMyzgrmYXrMRtrZz+VDhFg9TtwnC6ik/6NjNNmy\nJz2s2UXrOoFB24np4EB22F0cQA/LeIyF2FewvJ4el0FGgY+5sHckQvvVU53q\nzDWw0rtW+UjvJGD8uBTFuEowfCds+suY2O7ADojXab3fvNh/ccsacIU0BzEa\nagCT+LD4gAiDspWyWgbDbuPEzTVl9b8FUSRm0eMNZqE5MUiOaQJK44PN4YhF\nQIwOvnkBK+I9tyAHhm1tD9HT9517zBVY1GJzZS1SzwdMJgPkEnIvrATNz+l+\nxBchLKxNSKm8E0BZaMJdou9WITeeVOktVL2dGsIyXJGmPd1p95JmOsNaoE5p\ntXn/rEpKq6SBXlP8GBtT/BUFwFC+I2a8QyHsfFPTaIvAevqNRY2JOh6MbyBo\nlBUnB+h7ot66odNUotMhywPPysU25d/POi6OSWHjnSx4JffBoxWYCt4kJCan\nO21F\r\n=C2gr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/touch-target":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c4837746c.0_1576697727464_0.4694993607704452","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/checkbox","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.e41a70425.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61c7dbe18229bf21a151a091ccd0d1447820366c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.e41a70425.0.tgz","fileCount":32,"integrity":"sha512-L/dOGYhhP51tb0597FEOSoXMt3RPZHwmfrcyPSXjVRNJqHSJdF6TPfbMWJHAwN4O+pVnzk5XFddpEqyXaad7Ww==","signatures":[{"sig":"MEUCIDosAVtJDf5ABohPc/SM2+qBZ/wP5h4k/6t0XPUwHRH3AiEAhAFFDkvNhf2SWgP8sj//+hi+aJPseWTHhPsB1nBGRJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRFCRA9TVsSAnZWagAAMqwP/jdy2bRpgNO2bTxmaSK+\nMDJV4g8O1OD19hHrq7pkVNJAYaij8aaYxbtQFe9vwbec1l3Bfi8SFqnp9ge5\nN/5UueWtrt/d9P7DpqMMLunvUnp/pIJNsO3WB9+ytPlC0MArD750kZYamRKK\nWr2vzDDfqpTm/SuYJKe/ckKxLw5iCwBblkDJkXxGOW4jLktOGLZpw4SCDZdl\neEalh+mBor12UWd36Yfm0EMtKMBcj8KnD6tNooMuJ/qnkEaH4iPZjJfVjbQv\nKLSxz5AlM6gDzWboj0TZ/5bLf0mfQqy9uqpaJtk6xly4T3uLiKWeNSuXEtKM\npF4CODX8BaZmHrrvujgquQ9dRLA52bVbJ4Dj/MPfkIiSAoGq+VTxakIkNECq\nItzBF0ka4QXBOg1C8O6lHoCCrOXTXhRTSU0KxjdDEIs9bICCrNSW9aGzzHrA\nttMkOyRtUvPNsVc/n1XQW9NWpmIQIdKiQZCywJj4EDBZK69sSkH57ePbuonl\nWXpDqu8Tu9a0p0EFL8Yo689qn+rQCLqRa824NJTB+QmXClsnbIJuwMg9l7DO\nlHfXmwQiPvTxm3UOqOd7IyT9Ylyb4DqA8ydxAGxL/0jHjwestaDExMMfQbU/\n85NuRyqZTD1DcSnjd5frcx1EdP/7WKuk948DxDPyGk+3c8wD/zAPrR13b7+D\nmPNA\r\n=Jhod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/touch-target":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.e41a70425.0_1576711236627_0.9514204923799792","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/checkbox","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ad3fae434b8b3550738374b75acb1fa9e64cb42","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.bac43eb43.0.tgz","fileCount":32,"integrity":"sha512-gqSrsNklhcPaOt541GBuEPuDq8XyGG0AZ/Weo3OlnY79B1rbf/C4Vodpgkygs5a7TNu004EjB+U6Dsys2ONwEw==","signatures":[{"sig":"MEYCIQD1g7SDP1N5Y8FsfUqeqB4oDjD6JmQOwmGfFtMOge9f6gIhAKBT1RunyTWFkdmJwuzomyqmHCb7gO7B7iH1bmbvtHKT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUmCRA9TVsSAnZWagAA7jMQAI7IlYv8CilYgrKo3R1O\nacI2IcTYBT8NvxgtvvW0XtypCCl01BHR8GwKLmB6vRJWoqdoZ16siLaSzZae\n3Z9C4jGUzx52lyFs8ZIETY14hOA99usRyh0adh+7QjaBqCo+X8cOWw+PC+/a\nW5Cnzo/ZrRxVuDMb2kYcChI3KROJB2PyO94fVArOAW6GNJibGx4qs91BXb28\nSoPm8CTVlG5PxSnjCfSpdvYAO/+0ZRhX9r1trrNMz8pA0EG9m9qUIeeuW0yv\nC5khShv5eSIB72TNgyjScniFtXDANqzovhfGrnSP269gTh84T6xhVsX1r+tF\nSu+fhiQ/ItKeTFygVfKkhb847T1WgjhGGqcmolkHnH4OOjE6wwJNucrakKWD\ns18m3CErHqu3EuTFSoiktpfLvWrv1q0+vHWdqu77lrJnOCkKSG0oSYOq1ATs\nL0lsL7DvHYNMdgvR6NLtuDR0ti+k9KD6F++qrwGDB0vrJOe4vA6wtND4PYUH\nXeC9DfcCi9dD9nYiHIAkNLbQuo0WNbLZYKqnDnxzqtD0AmNHEyFyLbsb5A3w\nkLBMCk+l33V4Ft8A/kHqtCZvF4wZ5i93GzShfGyL2yOw7btyiQZO5yExisGG\nKv0MycCuSOUVhKJUPa0bVMJRVn/KvK5l9+FTXw6SVU0EZ2oaho9wNq/Pp7aL\nRDmp\r\n=YsiD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/touch-target":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.bac43eb43.0_1576711462192_0.9857112801632244","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/checkbox","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.2e491de55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5822b478b4b309d9143ec2ee2b54b6410765d091","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.2e491de55.0.tgz","fileCount":32,"integrity":"sha512-j/uMmshVC4FXvqdD6qofUvf4QY1M48DshVbb232JmL0KKEAoB7a5WvrCF+FPKCutLCWMOtReyca9lXIqfNH7ig==","signatures":[{"sig":"MEUCIG9iWw1BJv3Rp76Xq0h4Nc21hYt1uK2pY9VIF9X9wdljAiEAj6u424JTjZWyQNl3we7kuIskseVZy+iBlAWNh/TUb6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XgCRA9TVsSAnZWagAAyVQP/A1ngQDor9/C/rVr+e3r\nUbUujpiERuWxzIVx7BKMbI45/BU/ZobicNA3LkBLp9EBqtrBYcb0H4HAsA9Y\nFLTylJoPNaloCujyUvmmHuHk0LLuZDKN3TuEKgbu22zInNDxQCyra74KZHV/\nx75JrSoa0cp+nJBEp/yBfXEqsbUIAuW4+eVOFnk0kJMYRJAtGax78GxoJWGK\n5IMj2lnCo4U4uremBm+mcicoktB6XLbexfskv/Y49xWH9MKdlAyLhfoiM4/n\nTXGNH7EiW4ExLB6pa90JSUJGYS/LIrwqpgfe1TwUXkcjTdkAG5XcNCI8xMEr\nQORJzxT+D/6IBqxXMfwEmNvf8RTl/fgvm67XbDzEYx6KEBT48Uz6s9Co9mhC\n/Bh/y1Z+O/fSCxht8RcclJSEh5L+t0OtvqYEuB1lfKtKn0QYtYOjqYyxJRQf\nbGNt/XTLKhfttBJf0oeLj9gCgAyzBefDFpaWECZH37l8yN3cxEGotxqEXcPg\nKG5J2IcNWRzsayVBuUfw2FmzChoRQO2g536JeXYKZK7J+HbZvc5gzIIe3WbP\nz912uTmmlDY4XkA4Zkh30Mtr8LmcLzPWIEe2GxDrZbJ25cg3/s70vxLsLox7\n74G0o1B4M0q0y75huf/gGp3qZIn+Yf2qXYnGK3S4DiwEnOblFqHHwegVkqZP\n3jL/\r\n=sEcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setChecked(checkStatus: boolean) => void` | Sets the check status of the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleClick() => void` | `click` event handler that should be applied to the checkbox element.\n`handleChange() => void` | Handles check status changes.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/touch-target":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.2e491de55.0_1576752608210_0.7605843575228979","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/checkbox","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ae101c144.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c78dcf7b5a7ffd88c51ede8e1731a06c3e446d91","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ae101c144.0.tgz","fileCount":32,"integrity":"sha512-PlMaM2UYbXos4qJr7YeyipHxS//IkSzEVlG5ZMKCsY9LT9ZMq4NWoemsyXWKT25lr6kVIkTAxNYbzxtVc2F+ag==","signatures":[{"sig":"MEYCIQCr3FvgKk5Hi9QwGECINpXHVNtoXjrIgabeSrfKnVx0nAIhAJ9TtqpaSaYy6+5ch8biD30Dq6w+RdhLxsxPWv5A1x2W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RmCRA9TVsSAnZWagAACAwQAKQ0nz4Y89Ai0wOc2QrI\n+wzzxa7nOmHcRE2HCmo9x2eY/c/s2VTeC8KUS/REZeMt54ey2kQ/MjO4h8UW\n7ntv8lSKwQIfbRICa2o8mFjLBuF+sNPX3hhtWiFV/O9Czt6yk5HsKXhKKul0\nX5rHJbTW/pl5Ac4Uuskr/jvZ7M/IQT/ibuIiQNrq44tRZFjQq+38dldEHlTw\nEzs61IaOpANh/1IaNVZVn0FC5QnxGTaI8U2hT59bVIC+qgQzu0d8w6LOv/NB\nME4ZVGY+3TEyKI5yihoYoSYqh/G+1xl4C9mLGMWsLqtWvMS3czvAuKprgnz7\n35oS06m59cySO0b515t+RxDqHL5BXRCXUeYBg14wzzisXIUAMvQptyWjhc+W\nAs9a8BE6E0u5bQkg547PnlcuILMN3qviLgwsvekoRGs8qapKvmTsV2+CUEbU\ncId6GNqnjcKPh9oD07xTdMYXbkKn6HWud3thyl+8hS1gKTnAEHizwTy992LS\niHtQYlimocg/ZZeVkNOQClRqOuo8UzCanrQ6wjErPUCBsGdrxM0eyPE7uw5o\nWw8aQMT3Xul4noBx8vkeov6gUN+kusqH7zKJq/iLZVzPBou5aedxUTyfBlDU\nYkSK5bCOoEwVO3IF4dkP2jnI7Ug/I/ABO/xzPM3wtnR1A3dsNUZdEWNVVxrM\nUWnz\r\n=jgr/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setChecked(checkStatus: boolean) => void` | Sets the check status of the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleClick() => void` | `click` event handler that should be applied to the checkbox element.\n`handleChange() => void` | Handles check status changes.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/touch-target":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ae101c144.0_1576772710151_0.3018787938237881","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/checkbox","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5032bc33b7604fef3761c530990857077b22dc4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a51c31f26.0.tgz","fileCount":32,"integrity":"sha512-2JHFZhNjdFDJx2JXpwz/t8TVIVowfuzvyKtql+T9gx2FoqnwSABgMZEACIw4asQovFT3T29hsuk2Ev+SvVMhKw==","signatures":[{"sig":"MEUCICMvwWwP8U/noskuW3gw7fNuiG8m4GQNb9n1O9CmfocXAiEAhVcfXJ0fyiObnxr6nq/UV4F/Xeuli6jLJGlcCSIEVLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/6CRA9TVsSAnZWagAA8p4P/29FgTLp8ubIc/j3J5gb\nrxZpiafKfUrza0dv4NH2OrP5wvs8PNzPdiuzXMsCloWXErTkIaITl2vN+4Zs\nNz6hIaOsLV+G5u3tBHUe8Dm1OUm72rPqMxuL+9G/SYolQ4bNGdirDC3wRtBg\nYdCVBWmURsA2AnAv81qxL01s1Ib5lgH/7t6PR3gJpY2DWGQbN0690ehilpGV\nPBBAMO87cAC67jrSx35l8yc9vPOrIrkIytXKjOhCjFGj+7JPh64kSno5hEvb\npxJIzaTIP1pDM6xGWvNGN15ZBzBujfGskLfh4ndlbcinmU82DGCuWskGRSLo\nJ02dQ9kWLM6Y+Noxqz6caUepdBR0NXDIHCNq0R8YUfWnhTznIkONPcWYE/s2\nh5Uw6nBtVs/p5LCsybCu/ilyTIPAennRchm6CsVk1Qw7p2kJOT2cxPFdFTCb\niiNOBNjAyz7AgjSnMyPzbQ3puAHiYL5SkRnNLhHptWEGu0SyXVG0SN9FkwKo\ne8LT/RUgvbN1PipcScIwxBS99CuY2LTn/1/bfbh+eQqhUGaHrVhmuIoYVd8+\nbGstprn/7ZQ1LqRZ6R+kDT25oVYFo7A2EIxXGWBVstwn/GarHKyhW++r38/X\nWEIs2NTF/Mrj5bfw5DtFSYRIlfJrNIiF3TN7+emwFpLPOwcYrot4HH9oFcwg\nGCdF\r\n=1Pfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setChecked(checkStatus: boolean) => void` | Sets the check status of the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleClick() => void` | `click` event handler that should be applied to the checkbox element.\n`handleChange() => void` | Handles check status changes.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/touch-target":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a51c31f26.0_1576775673807_0.008739683983276514","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/checkbox","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"303538724c91fd5c4553f5438b33ae1c6ee2621a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.21fc4e13b.0.tgz","fileCount":32,"integrity":"sha512-iO/ZSjxoBqJZILTn6tlF+kVgUgEYzs6AGptgfkIJ+RPErBK0uJkPyUx+fJ8lzDFo83rGnK3cYfWJmiHy1+hOqA==","signatures":[{"sig":"MEYCIQDrDkyKFAxQESQUMROayw2V9T1BVe8UMteVL+jBs9D2aQIhAOzmn228vDOMkufFdOTWBa0HHKzloCs7jHTf5+snjJu1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++s6CRA9TVsSAnZWagAAzB8P+QA+IP0GqK7ZmHbtafA0\nkU1itpt5bfpaiaTiaCWfaITfXIuNGmbn5zCvyVhp3G6+vkXxRnLTtXgVV5Kc\nLuUKO05JiD1GfHk8Eys0p57d9mzY6K9x9vr6jpl9zJTQ3bOmPf1wbAQzgVwh\nuMLxjEx/dSYtECozQHeCG7bQ/9ohhJkJxvL7cBA7mRmzA+ApoQhIZpHATXdf\ncbVtAFDZOPOAjzYakF9UNMF6w01ftu5FOi+5H+Jn3GRPX1muiTyWpttCOTqU\nHm4VERqImoZ0fOSWw2wHV9UwfzCBtXmphgNoDGCmPWVKH20p6BUwkufMklPk\nol0A5OZv76fJF1cRZuIiowEYoMOPOzq+VNO0nY0sMxW9SehJa6gPhgGzr5YB\nAVEqWhUVfSSqIMxCs5KYfgdGXz5OvBYi9ye5KDlkagGbXbLFJv24lshp/R+/\n3BJrzV/lQJ2gf2wm3iu+ysH5UXbsFAXljn+ghbW+ugdkKt4iXZg7XOeP7M98\ncZ4HHcF4VbsOXLn1P7Llftwh8E8rABOFhCEt4ulajhi0SJbRnFG8gyWUFG/l\nZJZ2eneWHDTYDawcR6nnwEw8Kxbk2XcFE+0/EndLby0iAZJl3ODsSDNhgBCI\nEo3/KeDYAflLJVSgynQ1Mkb7kxoWyrdmux0s3IYO2PTtnlik9+UNdbmVFqDu\nhYKK\r\n=gO0m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setChecked(checkStatus: boolean) => void` | Sets the check status of the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleClick() => void` | `click` event handler that should be applied to the checkbox element.\n`handleChange() => void` | Handles check status changes.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/touch-target":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.21fc4e13b.0_1576790842302_0.2641193241787909","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/checkbox","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f4e956d5c369499da0eff448c1b810cbeddc65","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":32,"integrity":"sha512-ecItT/b75DvElLOCnTw3++LixPpaDzZ9RjNthtjcE27pHCj5r4gt/Be9groReJyydY9fkSaFsxYUw1pMVkql6Q==","signatures":[{"sig":"MEUCIQDKmzw/AtUxJsrTK7oV2B9Ofg8NwTtb6X7sU0jQompDWgIgEkE/EfKsFqzFQ+TB7CQ7E2d4ZaPKwhc0OusrZflz2uc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iXCRA9TVsSAnZWagAAefsP/0ykiGDCisEyopOvT9+V\nwKFE/914UcbztdOxpQOymC190p0f4wflNA6YnS83hejyU1RDsUI1fT4GPFHX\ne9DZieqIWEiAbh/5HmeoJfiSuksbQF7QunlpPYWikvsSETLbt6+l/rZutKZB\nL4VvuUdwGg5l8ya2FYWYSQz5R6pTDuJfXOWMuBNoEHD68wkkov52CIiZChZe\nbIy5TKIBvttXccKYgyadK9KhFL+RyZEhGvYs2VqWGgiXDOZkVshBD34uyjAw\n4qGOGfrhi6L73onrqsjvY67cS2EDk/qCSZ6F6+lZV15+6LJw6QAD+9ZGhoGc\neSKt28VVr1ZtvZqbYrRi3VMiZmK14YalSPec825Q4DqVZCnFFqu+Rm8K3837\nvHPY6TMGmTUAW7uI2h83Zz5DMuhjzSIy5S/c7KFfRUutw6xAJOz78keHyJni\nIINDOd1+k8uudgSX8/rv1xCrF3mRFCQvtduFvAC65TYJftyvD7pV4SVa3ekJ\ncKE6AKmSWTrD4ViAsaoHNQ0VWQ/unTIWPYZvWUNpSb+XxXkY6FF+F4yI02dP\n/DGek8WlcS2+t72QZgkwj7TYibhd3I0hnKMiX4cPvvs1GfTkdb3Icz3DALuh\nTDM5yjnq6VKqXrIJX/TXAtLkOQPz+FFEnHgNiUXo8VOTeAYzEjqHOv7jvBKH\nOsHO\r\n=UQ4d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setChecked(checkStatus: boolean) => void` | Sets the check status of the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleClick() => void` | `click` event handler that should be applied to the checkbox element.\n`handleChange() => void` | Handles check status changes.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/touch-target":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d2ae6e17d.0_1576794262627_0.6100051766427326","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/checkbox","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caa0d6cd42213608f68ccb728d4b7f012f88424a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ba30399ad.0.tgz","fileCount":32,"integrity":"sha512-fw7U6BaXHn10e4SmgbAGHDMAslBtUYZkmLODtaMNDD8fusvQMV773yXiqOor+24gSkpmvPAt0BkLeiy4aqWNTA==","signatures":[{"sig":"MEQCIDxZomLO+X1HErnOzIcKNQIHMauVGSb/cBZ/xtL/BV6KAiAHoQHa6HZzdyZnLmdspckDj0oH1eG5pGsIhIq2IlEYzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9oCRA9TVsSAnZWagAAKQoQAIo3rIJzRya2u1c2RMtp\nN9MCVbHBv1X8ELb1YSaIp/VE3Cm/CTtwXPmgR/K1YSfXLgSMCMgsc4wJtYVV\nKE//O9Jf2PwiaF0wl9GsXmVddt/Bwuh848UcUE4hsqvrvv09klSayylrrCs7\nm+nYe0oaYtfHknBpHTQJc2AdxAwqvNrcphbKyOp+O3Crtzjx7LBemXg4dCCA\nyxmBAl6a9WvVH6IRiAm3iHDV3vNinyBY2Xc/WJccx/LI6XQCClIX8XIzyLaX\nbNVJqiq7KMqsCOlLhpQxeEtc3LmmTO5AUqCTuTOrS2odBmzF+G0n+GPE+0UI\nZW4+Mx+HL6PdR2ucU21pO8eJrbARc8usCir54LSnhWV3O9VFZSBSZIF5xFBs\nJbPOAd1jpWvq5DzcDhni+iU7KtSotem5PHODqf/Az/2vyu5Y+pafd0FxQCnB\nyE6Bh3T2qfX7BG4LmQz87GS+kYSK9yhr7dylqWg7FmZKXj1ubxMKttSIFoHL\nS5e9a5b2JCaBM0YhsQ60kYaOoEEuGF7pFN6dgeM0m/sf2DfSUqAvYM3+LUAP\nP4Z+Nc+I3lcN4WjR52cS3j6RKUy/4lRcHsHlSrO6GFFr5V4yyH3KTSTB6iGT\nr1LGooQ8vDM1dMnWhMbH+6OMOFYwUBhvYcKIY2HDhZ79uIdBuySQo1ygEGlZ\ntx8z\r\n=yTOF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/touch-target":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ba30399ad.0_1576804200285_0.5720758622056685","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/checkbox","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bac2d06e978737b7cda55d3d9dac5b0e773a5de","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a08ccec35.0.tgz","fileCount":32,"integrity":"sha512-ssNXNuIotsifp54SXmh0nVcy0uYjIxeI2c1I+wEAlMy/RUor3JOuxbpIgnPlYzLDARY0mdTa++qjGrNsT4y6jQ==","signatures":[{"sig":"MEYCIQD1SXsaOV7w+rBOUucbdH2xKFO/BPDsclDqbcLZpAL8fAIhAJUTMhEvWj96AbZBauhBj97Hp5iMUfEM2SNJJpCzmUdM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjHCRA9TVsSAnZWagAA/SwP/RYSBH2fdz3vaXnH8onk\nHU1A10dJ+qByiHyFjfb07Pw1XGKdVi/wXUNQH/laI6Zm6nEPPDl2uiYzkZUK\nS+/sO9Bm+A8sbQJ05WI1NXi4vePQhrC9qx8Li3kmuM8ptJV88SB3JMjAaVEP\nGRKQfWpQ6R9Q5AWuR/KJXYEOhXyl1kXk9fpfOoBJaIjMdVwc8xE08RqeqY13\n6/QbOnvURiSJOdrQjhPAfau4NfENMRz1ac52GdkF/okJTE2Wn00zFOr73wVs\ndepmarHbBvJ7+OTX8hCfT04L9ny58cas+wiKruJKRUbu1alUTy5PsHcUu9LS\nYpWLlpkht9dlR9svvw1P0XFTPL1GJ5HgK5nksK7SqaC16lzhR9posmhsqLMU\n8UdpQtHAPGBtXqHS7eH8gewOILgd4WNfPEwenPIPTRWm6GCDBRjvWIRqmxVC\nWjbnoeLe8KYxKe+8W/XDHz0r8jnRik1IDZIr00TVTcBvyF9vagPzXwF808G+\nH4FW7WgafxDJ1OELTkHig96LUCvdVDWN8495NZuwSH99NVIQyKfCFhykTkHY\nF0JcAlPSyBc7FXjcbcGJ1PrL7wyubF4OCPwn5QSYkfLkh6ITaSBnb8Q/Lnff\nc9Lc6oE+e8iu/Bg9z9fD1r0rcU/zNq3LUb1204zP5oB5d6N0XoWg/kCYmCrg\nQXPf\r\n=0UEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/touch-target":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a08ccec35.0_1576884423015_0.14803633920572135","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/checkbox","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43d249418cfc3c8758e0df36c7fbed312a6165f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a2f75105e.0.tgz","fileCount":32,"integrity":"sha512-bEwznI8yTuHiXbPakpJz8V2ITqpNhT+boMdt/7++KatsQ1FMu8NSY6Jxul3ybwTOEQbDYrzZDYs59L+2jFQvBQ==","signatures":[{"sig":"MEQCIC+cnI2YH+7uS7tOD8QMPTat7kFIqcX8uJSUfvGzbiDUAiAXIhos/LSyUAYoRfw2PQduWkDsje9dTUp4ZVRAjvtQtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnxCRA9TVsSAnZWagAAcYwP/iyyzQTQHIJ7pPPqo3Va\n/epM6+mqYha3YB0UB/qibk2e88RK+RRdrh5XS5hokKVMg47SLP1whwQQMuJO\nKVact/1VbKDZ0WVBZJuS10fGnIl3/gxWRd4V/u+tm59LoXfxLwruHv31Hqjp\nPpPoNEnv6PVxQJEL/dEc97P+45Vl+Ll2Fd2y2pOvtoSSlo3vvJoGEMQ2j04s\nbTY6+tXuLp5ipRobk1YS+Ak5T+O0BtwqCBRKhq33XmDjWMz2pimISOLzuyvU\n8R9qcn3AfkSz6//JAB5HzVpaSGrHOR8YnEP2fUz2qWGhBMZOceyVNNdTtDvR\nguzefWFdiffpqN6OfI0ECemCom0LsppF3y8OkM/v4LFnxwl0ALXHqRqYcQZk\nJ3O6JJL6H2iN7igMq2S68eE7Z4GUFMevyfgS6aAbvkf7yxbs2F9znrLUSk3s\ndY/1lWcR3It+W7jodr2ErF2CR6tHxSIHm8jkZKCD2pmvSFBU9YVh4CXNjk0K\nxI7JOGVsMlbWRBFncL4++kpKI/dmdjCCbZnoM59mOPyGr+vvZlDfVatW5DzE\nfnFhl4PF+oQRgDcw1lrDrRCFD7ec//r+ZYc71W+g+GvmnLlLbPBYGVz73xFs\nPnNAszqfSgF44c0WnVrK+n5g3m8LmoMBf10wxi48J13hK4tur3qeiHW6rMAW\ne4wK\r\n=zIzz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/touch-target":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a2f75105e.0_1577130480768_0.8253332896090679","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/checkbox","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8a11f56d3ee21c5f4fe298518ca49a9e2c811d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c054a24c7.0.tgz","fileCount":32,"integrity":"sha512-LAZy1k8rfk3NJKwJdMePTZs/L1a2MVckhXEqJTHctBTc8EHGQiZEF/ViXMmfF/xU7SPm1dg+vpHQj30JbekvTw==","signatures":[{"sig":"MEUCIQC083c0MLTL+J8DGjcuCYjjP+ZjXlyeCcmkmMTxNtuWRwIgbTZKtvKLnaVuXDx/m79LCXFPItq9y3RBiDmTsEBust4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaYCRA9TVsSAnZWagAAy9IP/jR5PNo/WqjiyzQouAfn\noZiTAjEaoBzcng+XPqzQzrk1gU4L8tqbYrxgCLZbd79Ig91stepP/FAocCTa\nrpKeRwgxmXz2szCfevdKLYKI6MBuUgLpAsm0JRq+j/nZMfg2HzSKLfDzpEwf\n7+BIajn1jp45/FaYj+mRt2rZ5p5HfPyrM8MG54zKbnwXq18o4i+Wkn6Wd2vo\ngINMBOGFB9XDq+AGHKZOzo11+og3o2zJCZindN5LJSYLf7jbyXTsfQXzLZC9\noEi50dx7awyiJr+mlKDFrlbYhwm635fBgI1ed3waVqUvni9tSjvgQRF5HYUW\nNSAvZgD/7T1ZUI5s8RTySd4a5XjG8HojVkedRXsoIwymnH5HJ24IeBtUk2sI\nRgVQ4PFH763xEIm6y4nWdpH88+/2KHZff8o62wnwxYqyUfME47g0iMwYMKWk\nyJMwLHgz+Z+PiZdKn2GFvlsi+52OHtHD0Pv7nLg3Kmuefw/ehMbVSP/lR0as\n3j1nvmcVoGd8+EjL1yOyhXoen4BiZ5x4X0Z78ySEFBCgr4sgLn5Yww8X3JIm\nPLbyjCLRW4K823RTNhxmzZfpBa2mQ6NBASY0ifw1ml5ulZOCjcQdBwatULo7\n/eMtU03KeFRajCzcks9ZndPDY1a5DwgxsT8FWHfaFZJo8NbX59T4B/XyRGSp\nwzrI\r\n=ZCk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/touch-target":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c054a24c7.0_1577137816403_0.24885758774680022","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/checkbox","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda25a96465a2848f4036fa6c215203a618ae85d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c6808c51c.0.tgz","fileCount":32,"integrity":"sha512-e6lp+Z16cSTQ7CE5W3unbyuA/yYlIHwlfgvLG7RFXY79leERqa9nu0h6M7rxXnna0rH00fJnOJTLPRAwLIgZJA==","signatures":[{"sig":"MEUCIQDMvVd2lx7xO30n9uYyLtgH/shlurr+mtjqR1YQEr1MqgIgf16DMdMNJBke8o9PsFbc/1z1RrpYIoj8/Y2KFmAoZ4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATetCRA9TVsSAnZWagAAVsAP/jZtZcddHXzYKMF/IBzv\nzSNrDYzjWGS1B+TbaTGuIP/Z+ZBurt25J7mqVKKX/0mKDukdP9x1QjjgFncI\n975G4za6pbYuqngfjmdw9pPE6abauaMAxgkVx+cftgDHGlvWyS7KpfTAndwT\nlB583aDgg8/MxR/yJMyWzfB0QrhbDKyRK+aLas7jKQaNTOizmkNysmy6pLqz\nN7wCIbagQIak6CZjF3fLSIMkrBJNALKYk9bDoC0p0by19gi8l9TdYeHm7P6K\n6/clVQAvOaheaKE6+o3BmyMbK0avww7qqLfpQTfWeR8s8E6wlVsMh3YuaQGS\nXii5j6/XokBK41WHR3MzQLB0N0dVQT5OrM7zMLOWDgfbufonVVf+/pbONTnn\ne2fU9N/ZIpO46QJ9ruFQpY6AF6ATsTcz5Kx15oUspXLAM1GFv+JPZJI2Sfc7\ne5NUU6x2D9WINuJR+6j85lgtH5fMfd4ir0khleZtt2kGsaWhq+ifziLwc6p7\nbfRJWPRvT7er0ax0wE3nbJ7P2++2eMrCaIzwnh9Xg4Y+2XvE9cfsIOY6XN4y\nuQjbROsRuZGA35ZYCN/WnUjaEAtumuLhh2fg+Oipz1HJg7h4OhWVaPMdvlK+\nayGxH5CyDrEqJG7UwslZmdwTanvYkk9O8TyoJBgxKof2vB62uuszSCyZdNLG\nbMn3\r\n=dTO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/touch-target":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c6808c51c.0_1577138093367_0.7671349480537513","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/checkbox","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57d1aafea1dccb2af2a170e81cb97d2a42f69f54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7bce9cf77.0.tgz","fileCount":32,"integrity":"sha512-HL9SENacx8r8nbie8pazaTXfPaLwPcYqXey0AjTEZ2IMgap8FLNJuaFQe96SjSMzAvYaPXBMmSiB9d/XQ5SOxQ==","signatures":[{"sig":"MEUCIDwrAssK31qiNSH7qYbmn+3WAue0gyQ1FUACMSRCPA41AiEA7TRnaBXsQC+E3XBGsGul/rhtUQTBiLXtKqfHU8x8+e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/jCRA9TVsSAnZWagAA2UIP/jZJMIz9rikqn56ld27Y\ndrq8jWQV/qpYXlZi7sFmkSU3l9OfY3/DjCz+On/EEFfDTbawxU3Hslhv1lGz\nKo/nOmq8tnUxrGhiRr2l2bdaSJent5Kwn+klwnmTGIrffmq2X1iniaClqdtP\nHkjp1e9D8tpvXkN0OxPkyrtvfWtTv6HwwEF24ZcR0d07TEr0YkTbMWUeOMAd\nX0Tv3yn3QkxfwnUXdnRmqFUJtJkU+2aKiioUTon7JE/zXocIXfUVTie3z+W4\ngN+sqkbXfotqIJSJQk4GXAzBfIxuDJbnehwemd9obg9ko1RfM4HbdfXiIk5T\nvq3RV3qexcTwZkpKJLppHRb9RvD1xImfoQr2SualCvXNYBxiuoU9Z3d4HAoG\nqsQ1DITRpwvDoUnQsxf/gZktZSlhxCZJ6xKt7aTIuDoNjeiGv9HHtnwovynF\nTSW9jq5qHIussxdrF6t02puqFq6z5rutfGpAKiSTks4+IIRVmMarWTS/NS0d\nU07VzsRZpb54pGHaOVFMc5BwSd3LPAQfRApip7GXGWMjcTA1NvL84uQuSLjb\nsGfq+3ZWzPZLCHbJ/PvqGuVi5CSYZ4CAKhKijIxH7EwgVN4CGbzI6KE/oh6N\nie1aLf8Or+If5QORnhXTyXXxLpixyh6yIUR7U2413Nw2/dMQqCYgsN13TxGu\n1KzM\r\n=ahoC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/touch-target":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7bce9cf77.0_1577385955428_0.28130466967558077","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/checkbox","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08609dc25ec84d31dedf651ccbf0bcee420b2420","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c92f038c3.0.tgz","fileCount":32,"integrity":"sha512-79y8RrYHMW0UGHnJbIDYwXm6277YWnqwILCcziA8aMvqpIslaY8b3HeSwtiyzemgK85D2nCv/8q0EWfv4LbZqg==","signatures":[{"sig":"MEYCIQDOap2zPQwLRfjsxLBSpshpFHsv2YZ/PVB7XAgsVN1UYwIhAJTVcRWuxtZS7bvX8ELneeKXwV64rkxW/765Eq6fPKBO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQyCRA9TVsSAnZWagAAYx0QAJLVd1ZooZ+xNdArb5Qi\nDJQPEjkHdy8ahxYxkcrAUojY05CWSEiQsbzEW8oYuPevZFuwtwJswDz/L2Z7\npjD1Xywlz/GA1T71N1Ahut9iaUYAnoGs07ggS2wYwhd5FDvarjdDCpiFw1KV\ndJubUf3pVIVIWKsPhB9F4CgLurUT7ZDF7zhuHDEg4GuYBWFrSqAgr/7+D5Jr\nPY4dQKMY0KWguPUq+wNci7ODeNMGXkWQqWgBaei/QxS64MR4A114PdNOZ8i7\nBJLpyb7zBnAbtyZMCQgJSnRhfjzrP254OON21cyGLQxkLxkAW96x4tJFtUQR\nnziLJAsIHNVyR+kLxhXbIqCGX9+oTZ9HT3IjpJ4hce4GQdlHQG7hl2BxBM3Q\n4r74QWkWvImo/QilfnU4haMWKN6xvfbxUgxPZVEYTjQ0LQURM3oV3WMDeJZq\nUPlciT+te1nUXoIybwSNtGGqcJQqqd1UoehFf4fZtJxD74C0KmwdxV1QLJOB\n9P1LUymJ6lfnczaiDfZz+yQtzY9t5xu+58HrD8yjmi7KywugOr8F/af5J4BQ\nuJTQA4NUEYfpR6exxDzaYH/56xgzZLX1pNZ0fyjB2breXzhwmOCcAVdPi+Ck\neeE9Sl2GtbOrfpw/IvTt7SVdDsd+6xez6p341paQklY5oZ/TtqvlhnixkMu6\nU4VZ\r\n=Z43m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/touch-target":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c92f038c3.0_1577743409917_0.37013802610515745","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/checkbox","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bf14d468eb388e869ceaa16da50c883a6daccde","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.1f1ac7558.0.tgz","fileCount":32,"integrity":"sha512-XuKQ9TnHybEzJXFLCS3wS0uRRmj3sk/To7NCO0n5SA25vdP5b40IoxeO5/nXEBoRJWfXJ/u0J3Y0wyfmUSc2nw==","signatures":[{"sig":"MEQCIDfrNb8+gCogn1QtQpEhYsK9eqZc+rjtDpLQ6B3PB82mAiBve65ixu8WxH3FJBndgOIbbQMq7k+bs7v+YQ1d8CNQFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlh+CRA9TVsSAnZWagAAgrQP+QETjxnPDi/SAjnHCzFu\nwAp4e5hj68FILosCWzSc5ZwoaN/Q9n9EZw8tlo9xJvv8qOQE5bfU1MEb3AOI\nyrlEk5Fvz97XXQ4HmBNKTCQv3tPztcGKsdIvUsa4mcOsVCCDE055+23hdPt0\nGhKKoEN4OkGP/wl9Nyrt4rAHAZZpfBGiLel9SZXFp0YK120sC61nZ1E0gYY6\n5YGCm6CFNzqoXCbz60ILeJccMdXfVFx9UAlMT8yR/YYUSW6ji0BNP7E+kLrH\niS1lcTKUDIFZmfj4r7B+ZzWssgW44Y+VSaC6WjHUTpg0TjWqXSi5LIM2HTrJ\nzFoeSIJ1O8gYaCJ7qSRrmi5P3xQ2YdYZw2XulB5uIUhr3nQhuegE5+8wuFxg\nWgOpQz701qzgcT2IqpbnpR+YwbVLXCmxWWPvWmO/rQftuevln0kIxv3Nwdo7\nKo6ijzrDbTxX5s14Ruql6MmlsUFBC9+2Q/gtQJAcq0wM45+TYCkwGqsWPKTO\na9UZm1NDnRCgXBGkBpWm/qJTaZ8M8qm8cNaR76ujMtTbUGzNOKsTPVTTAITo\nh0oCIW11yoCzS2aB3Qnyb8XE41KdCJHn6pBzzX0EJBWg5FdlDumeWLNwCwAV\n48ybjRHliBhsRISxxGeQTx9w8X0qJLoOXNdPfY66+/nffc2rIu1x7HDaYMtV\nBrdF\r\n=w0JP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/touch-target":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.1f1ac7558.0_1577998462356_0.1720767865650461","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/checkbox","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"637a97ab7b1349b9188eccb75766e1b45b52eb36","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ec26e799c.0.tgz","fileCount":32,"integrity":"sha512-u2vQKKUnfNA7houHpep8EBaIVvp5mU1+sVpmQaKoOFlp2z9OvPcaic5f5k2aZHXS3eRYoEKMXzyl7RGXYDKA4w==","signatures":[{"sig":"MEYCIQDdAP6ieEmJ/3UIFve9iAB6k/HsTpbzaOKKkR+SS5ghbQIhAKxPrXfZTNjwsqlikZ7sAE3Z6e5o4KRH+dzbq3lsOgq9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPKCRA9TVsSAnZWagAA7iYQAI46Mev6N3Mjrf1n2DKf\n5lkZQNp5hTMBL3EJrZn7wKbV1Xol+7bIbtAi7VJTNOKR2HZbvYHSW5Rf8k5Q\nt2DC8WgCzxhaTyT72eXMvR4bLREYDyQT3BjtFGQ7KBmLW7R+jna3ILBpzHUX\nljgfeaqdYnT4zNP3Gs7WHadEgyMk/tOT5OEtvXZg1fYlSE0yKsB65WF/Ptlz\nd6lHz04L+Nq+djmuWQqwKW45zkg/GFBjAQLveYNYSeETp0l7ffyyx2b4+sEp\nSxz9UqHBy0oUgYXunO3wU15+j+GdSp/Uq70foxGBguqWs0nx40aScr7M3sAQ\nZEnq6UGXx3Z94bJGunwE2MpMT9HCRBaRdHoA0ay8Lum+ndIQc4D/u6kItqKY\ne5jcy0m47UZlcuq/woBMXGeBHDYcYn0RloMpxcGn2i8XT2hsajWihqZ8NXtK\nIuLQzQmr/qfgyv5MmruZMMNjoApqQL1Ps60L2fhLeyYe9tJoyEm3VODU6xZj\n6ED942T3ye/Uff6GKRT/KUMMcaZKwjA79s0U95nFXZvjXF6mG+0JORl5LywJ\n7GqT1qkyUY8fgtTueYya299ppIme5Vvf/LC6+MHatFgKkRlHmW0ML5qNS3rO\npirus/jU09fYtZrZ1YhJbI/DE9BRmHJD25phfZmI/7g0Aiz1CMQ/KbhOiu8I\nMvYS\r\n=KnuG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/touch-target":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ec26e799c.0_1578001354577_0.17323594649530372","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/checkbox","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb81c20931df0901c5c4cd3dbc5e32568a52af24","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.0a40ced40.0.tgz","fileCount":32,"integrity":"sha512-57jIzGa/lb2YSmIDpGZ8ep+G0Xgc0jWILSMzTr+50KSGfw2GueF0AYSn5+PLsaCKDbDi19LlTTDciAjZt97Y8A==","signatures":[{"sig":"MEUCIQDcPvEYbWuFpwOQmZbUNhvm4jgOSkbG5OaNNHSr5kCUwAIgD0kyhyKluAHwzQFeaBWcaME3SiXaiBTtVEdauQ3b1o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VYCRA9TVsSAnZWagAA02YQAI+OF64r6ziRwL31Wif6\n0iZmVqpOzWvy9n+c/eW48ZfR0/1ZZRPcECbm0ixqmOq5kOr+OK4lbrKIE+VJ\n/ltpLMymvOOCkuQng54SZPnO0jlzj0dvZwJQ2wnmMQpQXBG/5demk8sTJ689\nwKACh6TNTlmf0adOFkNxKfEKlvWAqcPbGTB+ZEnZECOM9hRJE3REo0o4GEU9\nbaVZmIc2isUSjia47FIzJ+h8054GrGpDmev6LqTRQAKDp0huIOoWfIvuwg0X\n1d1zj0sSlGA3gDwNeZ6dz0pM4WD+nsvqK5K7RIpDkb59HM43W+27qjfAUkvW\nHp24zjjbWlzB5tzcYsRY4gEsuPRHhB7OrwPZgQyvOGV01lrMECZLsDd8I6qt\ne7xWhHA3fKvDDezgyU6fwtbtYq4LU9MrM5oabsFPeCpZ9jGeAU2rQmi9UdAq\nh7+lGkvjlcEf4wxyt2J5LpwTOMh8qCxHiFwbdp+GTVKNHMTL/cvXPmng+yfn\nCoQD4jsShYD8DerqUEhCyaTVS4M+uyPW1uOQhEEzzSHJ99Qn/dFvO8B03nl6\n2mOOKMpEPa4gkEBAslGzHstvV23wbCxOKsrAPrDsxRtETLVvwXAmVK8sb48q\n/RjXFAH3G38OVlWxUQlbdewAtwzozUzBMXzcmfECDmEjxx/ksSTgYqjDmWaR\nCf1K\r\n=HYmR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/touch-target":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.0a40ced40.0_1578071383922_0.7322356762851101","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/checkbox","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.3adf84899.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d98a32ec290281df627818c5cddc5fe86cec3a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.3adf84899.0.tgz","fileCount":32,"integrity":"sha512-HhtKsRqSJMI1jyp60EWdI9tMijeSEEbbxkmQzxoU/HCCBqqKBUFSWmvUSiMHoSu2T/doKm5N1eKIKPzsIBNTMQ==","signatures":[{"sig":"MEQCIAU1fX30hRbLD0XKC3HcKcbvyQfCWnPJb8grSXPWZcTMAiBAIl0KB38sT0YzowZFgjqf1urQn5vCdoYvVaLgILoENw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZwCRA9TVsSAnZWagAAWg8P/2L7l3B+mPgHEFOnG5wd\nYe0+ZIzstji5h6ukh27jLu5QbrGF1kXpqNzz2NbmifWkHK3jWbmC9CWxQayV\nAXpLB+ytloO8AsGuazBDUS9PT5LMWYTH7uOizy5P2kXq3DI5e3X7pMSa/SQk\ncMvOXJMWAMI8zNo2baj7Jzuz99gMYEfrk0rXZKwWKLmXQ8u/Q3SfFziNrNOE\ndabOcKozt4RV/UjTYkIew6Nms+WNE0U0tyCAF4QNEx4PNDqNUa0qIiv/ywOf\nZSZw3uzvsN/Ld5qoSSAmP9QrrVPAbVu9Ktcidb666uwL3Ek+YiOXd1e1rnJ1\nUQws9uD5YSzXpVuk/OpjDg1zaOrcNdKvW1iivRZ+bJYRhY4dCqoev2FNUcFq\niCV5Tmmv4IRMjMbh8exN8fiTwJs+H36z3tGfG4WHV1oVoDvePnTfJ1ZVS8zS\n54fb3/oayWi6421D/vQba1RAgfEE9fKi/jSX/vD++ZtazBqzznHutZtwd/GZ\nN019LHEBhALglr1yEWKxqJIaY6cGvRU8q9IKZl/Pdjl8ZAF+8Ur6BzOwwxIg\nqFPBDTNyJNVKtp+UMRVAF6RTpYapRNpZf5MEUBcnC2VvPS4B/9zvvoAxCrKk\nh3jbC5fUk/tgSZce0uSztbkTmOnIcGrxPzXxjF/YrPnH7V2Jshy5PBvijJdL\nhsMp\r\n=T4ob\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/touch-target":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.3adf84899.0_1578075760545_0.6637463369302574","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/checkbox","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ab8e7cd1547a2c3623c6e790dc7f72c9c961a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.0d42ee650.0.tgz","fileCount":32,"integrity":"sha512-vN+vynzzwKj4Bo1Y5UuHpwlDLKrehx+Np9bDVu/ddUuwTTjlO/nWEeXHPSw9A0cewwovs0ExoBu6uEP2F3u6wA==","signatures":[{"sig":"MEYCIQClFDLItVh3S+dwzEGedy8P4vJECccjsEe2Mdh9N+TEhQIhAMYJLV2gpJ9uR2vT/4tPhLdpiBjQ7eKg0/IrLzmposc9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QMCRA9TVsSAnZWagAAvzAP/RprV/55MxBTrOVQ6gnS\njjw1FcsqVHzm44bzIxNBDb4qhzm8UUozZalcRqBuE/8bqkOhs4T/9IE80/MA\ntrhSQ1/ogqUDTd28H/wIdnl4Fl9tTWgyZeGhbrMhQr8iTN6bxy1J1zRhrr+W\nD58z5jJzpmxUg5lZcQb+Q25vT3HCBYpOrjpy2z+gLzmoCR17aMa6dJz/XJFx\nWLdb6JaekjqCLPhBXi2Gq+9fCYEusywEHjKOunpczOyoqvyg9qnm/4w7ivXl\n1mfBNynNeMZuGf7BifGx8ApuEUxzOpMmiIBtQj3JSNNZvM+b3frQrnmlNrSF\n2TwDmYoHu8mEj3CULNQb5KDEgb1TvO1FxH9iCOdeIu+5GSLQXqYTN1NVfw/J\n3mnvewCBgoK6dVG7l/9Nf2z/biGz67JxcG5BX1vY39nNPQSafU1oj0JT4n5D\nKigHvJJbUrppeKyXxSS2LDP8+s6/pvkbYJVoCWfblH7WMh4DNM3lsebyGR97\nyPONirJnZOtN5lYuBkzVXCJGYV2iNPHiP9MhTG72DJVCtY6YhVmKyFl+dFgm\nhZ3nMtKT0EjhS0pfUMvqg3u5jjfJCDq41EAQkQpJkedSBRv77N3DDtccYrUx\nGVj0YM8iZx+f2o99FT3W59CSePBzDfUxmYWPkScDHJbXqW8hcWY0lcppcPLh\nZfbO\r\n=xAyy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/touch-target":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.0d42ee650.0_1578087436505_0.8473328836376075","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/checkbox","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00c5ad3962b1359cfd31a4b86b8b8456c95b5dde","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.847dd1ada.0.tgz","fileCount":32,"integrity":"sha512-8n1zFlkKeRocfgyrPiIpd7e50hras0WdQcBd5bk7hQIsa1RS2PyE2JBJFE7Z3SGkROSfEhNxypHzFF+FAeVbFQ==","signatures":[{"sig":"MEYCIQD0FFLewRvvc1imdcT1UlTJVvwA/hpGy3GTtr6n4M/wvwIhANvR6Z8qE0Z1DD38sM5JyGHHxvE0ThmxN0+ZqEJc9Qv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nqCRA9TVsSAnZWagAAyVEP/2ib8LU3FiefNpq3zGmD\npzc0pEs7fL3tnbxrCFmT7oQvrrrjLq0pCI8k0lBh9/92ow5lXuBCXBbhFTpc\nXrIsDPRdHSGwIgifhN6psAgvOoc+7Kz3wotp2bnelAvPxzcbZyzh+DGAMKN+\n5mucFp4tnANlTaA8RVL9Z9zesZezftSED6AAqLYIxxQhrHRfuoXXaCl4Uxyu\ngPX71nYcILk50cqjtcYXLfvN9WXHQmsG/XPxvJk0Uj98z4wNP5y/0Y9Nq3Ks\nQ7shJKRhh2PK9QLzhK5GhcZFiUVFT4W0t5U6ym3IuJfHzol6DO5umSlOmofe\nu+KdRX/2yOc+ZNOJfU6bbQU7aBVlcM4056Y2YTBTIUM0j9cqmBiKNAfokQL8\n9uRhBbxmI4ZWmXeSPEAvKOVZylO7QWrzMK9q+yiw4BJec3+RPZPjziNWpjU+\nGQv3BADpw0FFuM6pnfc8c/qm49zwwrATxteNHXCt448TFOy6rzenv1q6zLPt\nvGTPME6TyACNuFBDvoBxOqGvH2lHyCdbUxZtlTKJsCcVaaqX+ET7DmxjP1ei\nKAieFLc/qcDDHjAep5PXoZqRBj55gs+Hgp6vF27mTVIIKxiBt0WlrXO2R3xH\nRdfaZ16DDwQwXnAC6TUy5bUSrY209bAA3FbjP7XmlpeC1xujSiNNzFQc8XUr\nxhPb\r\n=DgOG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/touch-target":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.847dd1ada.0_1578338793995_0.6559970802935164","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/checkbox","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e197c90136d7fb62eae8bc38cfcf94d116aa147e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.39df7e5df.0.tgz","fileCount":32,"integrity":"sha512-JGwSFssfQfRWocoWePOpOOvh0Xp6W4UVW9wj/GHx1yHb0AvggN+0fEIwv5nAp7rcE6Oo5Bf3nzzRmilsuKkhQA==","signatures":[{"sig":"MEUCICluHtA3h2P5GzYhNEa2MNRyCPvZnaxEFSQDtkjivtLHAiEAus9+SNOCRefnp+LHGyfLYOT9fVOqnTUMsyVNDlnHfmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cVCRA9TVsSAnZWagAA/XwP/jVFzRrxrDrbvNnzt3hC\neIYWkqwhaAmYCSc48nZG3qvv5aZgtKIL3Asmf/Qfg5sAnuIsjSlhvHIOK+7P\nV8JwPrHpA0j15k24E2frutk/ziwOenD0ltFXjL3y2Ky/pXYMG06cv44n+tNE\nGSHaLf6DiclPj/1ICvDneQ4rQfXffE53jy72t3BrMJx1gBrqy9kKNrMOJKhU\nOnTeIJMDsmY8UP3Pdx3ewVdsT6w3v1mdD/nvKegXsNQtnrrfz3pO88R0JIaF\ndpIYw0Yskvbs/zQlT6VsEX+WBJox+PsQI2u/Cqbmkcd/HAuJUS5EWREtzT1P\nHj+mYABreUj09fpdWtWL0oM+DsJMLKgt7pwmZ3YK4KeWMtITMzqfeCofQNem\nAYyxQ2XYN4GbYqKwyMG8pZWEeAHT7YWIZftivqJ0mJhyq+F6JFbhpFOCO3i/\nfsJoUvYCtOweJtKcFFfZat6kaw5sDckoo80xgNXxdxWLdbAqGE1HjYEFouOf\nZNTtN7IamV3Ac6RQJCH8frCQfRMMua3Kb5wDt3TOEsEl+jnbkf1ZdbTd+sfu\nqnvLMylxs+spFEer7GpvdyHDSinUXs/oHxPsh+M3ey64N3m/tlnmgf0l4dot\nY80Pm4H0F+B8kaXoHB4wh/siAGYeMRPPJkwu+gOad7KT69//nq0baYSgVfL8\nHjJH\r\n=f5Zs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/touch-target":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.39df7e5df.0_1578358548268_0.8066500836364185","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/checkbox","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eac94ea2a376177234adaf45956407838d67eabd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.f1a2581ab.0.tgz","fileCount":32,"integrity":"sha512-famttniPm9nbx9DmyDnqLFf0pHr99/hwKMCIL/wk8J3rbk33eePahf4mia7fUeiiDouArT5WJrI/ybSNl3XFiA==","signatures":[{"sig":"MEYCIQCNjwdAdMpb8Nw2L+/E23OnO6bWy1dMgmw5+sHFlO+DOwIhAO9spgNqJE0wkHyRPv0sSluAE/V3fWeQImvMgFxNORlZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzxCRA9TVsSAnZWagAAjIoP/RSCGxh2L65Gl6MUdl8K\n1FIvM6LLhwxEKwAIAEx+XvesbThpGfskBxKUek/O9BWnwpLYArFFy612u3ut\n2fXJTH8GxpRhzDcLBv2Xed4quvufo47HuBGcBpH9Jn1wKf/CO2ByX1Pd18wA\nJ45jW1pu0sZuolVdFpjugI8FsJ7OKWonXJ1A80ccS+QMEbtZVST1TjvvyM9C\nfJZip3Y4isl6MhdUs+QO2fk1+UDdFP7KqnpANiMkfX4/nV3tWxER5IBuHcII\nU+yVij7mdhbUVeB7hJcLNyHe6OxXFBJeZAs76lrPZWV0eAxMqSjM90zhqTr3\nvPSd33YMkHPoOGaf/rv2KC27xPoUAwfQBts8Pw/zYBel62Xn2zfXDv7SMnHH\nqCMN7aPid6M1iY1g83Q/JMmbHWXroUmh95cKCeLV7WNtKvvLKsyC/Wl71iJk\nFM/qckEYMKphFEJ8kuMbc/IBSvzsXY8nGzUyOsvRY34HxLoBMp4j1M7ke32S\nv/pcW0jnBvu9qPw9g6+eVOALkdxBhEBr39liLlL9LKM2v11MU2dF0Hs6WvQS\nIN6NJIi5GzRdsmYWjk4tFgL6U0kgxwPcJJyvwpJinZTMYuQ58fOlW4Q7ww20\nsbqLj1ji8JoUzOKfFUt3N48byuCeJaIcQ/csfet5cRmBD6bYQyBgVi5SyZ9j\nhdjr\r\n=D4gC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/touch-target":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.f1a2581ab.0_1578409200581_0.9215746692088256","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/checkbox","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2394018fe57c14c2bd1d10bf0346d8cd1b71c63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7c7ddf347.0.tgz","fileCount":32,"integrity":"sha512-QBoFSoM/BqNfr5Uk5gz235t+768hY48udgErfV+Y95G9tq267l15X+2FF2XYAU17Obr39jxe8cuxAJxn06WU0Q==","signatures":[{"sig":"MEYCIQCXKaTw2jsMbLGBM8DbdyFSmYcknhsZ+Cdj8Vdlu7PcOAIhAPZ0AoQK1IFoAF2tM46nRbNsnokAfcvbjSVScvFBNRQj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDNCRA9TVsSAnZWagAA3JMP/A4T65r7iPgVahz89UeZ\n8+0jRm1GWkjB8e3694pUbMtoElyLSvs+9BbtQhYgDq7J1yoL93zqjihdhGMD\n+HWR1UhRDeFm2Z2amuIrBH6sDjT6s31C2YzMHhceTcFpjRHTzbBgg35xZhyO\nVoDzU48EUrogW7zQDI4ZeUWeJDAh5fqASxuUJss1xtSQLAEOjsyDjgm0vHBh\nwJ8Rkcpm9yZg9Kt0EFGtsuZRX966OF5AuBVBKfHiCMOsH66BSnZtVRoBLz3B\ncGQyLAoBrrXCarGFozo6zXZDx8b7eFZScVWUW6O0/x1NQ60aHllVJdQyQ3la\nlR/v1R+Z7L2Y+X2FN4JhmWkCtzNreBnoHzyY9cJkkyOLjAQlPMmF35kBSp/p\ncP8dN9xOCprwelxeQ6tRfdJJ0Gg93nrR+0iEznb57Zw5yqyFO4MIGewDTfb3\nymmdZY21ZuqVorGVjcb0rkAz/ioilgGQ6YlVonbhPpXtXJhQgLBQljTlLlrx\nnU2NhbEKrA+9UXy2pgLrWTJPfXDEH2ibLcNInbSk/DMjYE82g5E1mZ1d1g/9\nytasUt50cTR2wYQxayA8gqEKpkhcX+F8FmVUJ+Yy/3Jr12W6zKVTGi+aBY2S\nYjK3Q+YYF5FpqKjGOaCN6oNEBHqob+yDSz6NtIOUwRecfndoSscx3XWqfp/X\nEiC4\r\n=Cj3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/touch-target":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7c7ddf347.0_1578410188860_0.043748456344736564","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/checkbox","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"828744d4948d860df477a3a522532c218ca49ac5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":32,"integrity":"sha512-XGm7mRC8pjLVYPHieP57VDMK8/2/n/+WFQFV6NKgl6oa/8tR3CvIcUCfYD/K3g+9K2M51ASYaYA9c327iiTedA==","signatures":[{"sig":"MEYCIQCQrE1ejzMKHp14qQC/u/Kx9ZX3hI+SZr+hvF23yj4bPwIhALN7J+WofzQzepVTGoM3vIJvSraJCpnXgZ0yrf5WaACL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmWCRA9TVsSAnZWagAAuN4QAIcxIMHBubhcZy1spw/O\nLry3UYvVXG8Pm4U/ff9h68/hV00sy2jQkT+czvVzYTjlQVoP/VgjMOLxu2rR\nFbAogClF7viywcAGQ6IfQCiI9FT44/CUcxZGdIB89Py5JVGB4OtYaQYAN/VJ\ncyEW1fbZebtkKz1nXVY97SgXXibQubd4S7ctSZGVP5drNxGqI4Lxpt/Eq8Ar\nF3Dr5jAu5CzIOTl50npM/+K01HOmYFk49jvr3W1R+BKoSxKyfu0XkxzJ6isT\n21pJLt5yS00ObkfsGBn6gP5ykagtcRNGaA5W69cLfy/l/JMslRZO4X2m+XgR\nelWYnMIRsFtNHnsc0v0NCja89lzuXz+Zh7btAjK7nvbGg5zyxU3oYzk1v4LH\nVojTDXdDUeI5gAi1t9Jl+UA/XfZoX3cbu73DMOBB2fzpXNJSWprmW24uCpG/\nc9MF2LVHU/LmQcZfYvlLshVplusUChEKNLaT29XzxBxn7kisMOEzYjZF8/Sy\nhB3u5QBAKzdc9j54LOncylN/T2f0pgvwwmXxawao2r4QB8UL+boprR5f4NV4\n1t+jZfdYH6oYOyFBg+1ZQPqH2vGGJFShovJmEH6xuzC4aNt1I1Go643JxYnA\nZfHOQ1/R/obb89ZuXrgDMMPezgFfEHtTkD/fcKL/o8mhJbKOQmOXOpv4uEP4\nkLph\r\n=R+d6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/touch-target":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a1c84d4b5.0_1578420629813_0.43852875261609126","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/checkbox","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed33e4e7f8db9800eedf5b435cebaa45579c545","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ec9f16578.0.tgz","fileCount":32,"integrity":"sha512-7/yST/ZuugMwrhTG0EIKTqmz7nJXpsmjmys5zzwBL78d1oUIYDyWtXKTYfDXQLbd3AMvCMbnKE+3DfCODRNxsw==","signatures":[{"sig":"MEUCIGMA07xz7PZZGRa2yOAqYfB1IEU/rxm+97+Y5CwCtOyOAiEA2BSQsucd7jYP2bMIYcKHschnWL04z6xXNbBq/i4MMdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6BCRA9TVsSAnZWagAAupIP/0AAKdA2Ra0xvtsdtxOz\nCqE5sL9ypVIRCIabtHdPJSGfIFzAcWtOSkZkvGdYS6xQbk5JEavwQn5msxsQ\nSWE8RNm5q0ta2+ku/8uqhPHktT2jxELw4bK4zybKpaambiiSFqkI1tmyept1\n/6w2enQWon19+opT9+0qBLuex8RqlId2Ijzppof/akv4/1JhYDBUejQU/19I\nzxGTCGZCK+K4u+clMXx9so5xouSNMQ/UmkW8V4WihVJeC/8eyphKFmGbrySs\nvF1mmoSbGdHx/l+925mQnF2DZ8+mfwkA5aPSzx5kWbfIFMRcC2SvpC8DEvjo\nchgj0V8YQPajmcm+W15QNKCoBdWFB0mgNMWfFlRmZ2jt3fOk3JzrNJAovZZ5\nzFXUI5DIVR7uujaLxvP5s9Z3t7uFoehBmXCfSRXr1NGDnZTG84XLPyxcYL02\nhSPOjhgCCjNt8adLY2ISgnsIl9/AhOACwZz6SOriKD4Rc4GKIU4Bsux3ENST\nanHmSe9hWjg37OV7jsM7pA8qoEuqsVDbebyim9Qd+Rx9494YHwpEhGw6/qNq\n+sFVh4yC35Vy9QXhwMMfvr+dXjhShUn3xRFvGKAq7SEiwx7KooZt7Q43hIYE\n6BYB90zOQjLQKJxb72b5m9ONxd1NcNPGsH2rMfGl/Y2oulAaHODvkZIU1FIS\n4e0W\r\n=EZKS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/touch-target":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ec9f16578.0_1578425984661_0.6412690766783677","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/checkbox","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b602226ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2249f41cb991c8295d1a26484d6d6b3e9d7a3b22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b602226ce.0.tgz","fileCount":32,"integrity":"sha512-Gz1IMmWingwSwtwQydl/UWV1NahtH8HXQp08n7eZDBJmJ42Zpf0qN8QjgJvromWqErztWWv83Pbu3QIoeV/2gw==","signatures":[{"sig":"MEQCIDolnxyb4KfN2qiaO7DERqVH/p6J4vaVwcyE01MpFEFMAiBTtr7rkxuUVCqvE45EsAVoXIV4WhBK7uSS1edKZmLEwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObiCRA9TVsSAnZWagAAc3IP/3d45Oodr1UfUEwVEL0g\nGPKbxVS2LcIGZvvXrMgVbjYMaZcW2YMxKTm2Kgyua+hzwfXEuv2fdO1zOUYM\nOFtyuKllliOM6S54PcMP8XQSrhNG7YLXhguP01QZql+Yd2r5ijerz4M0B1Pm\nV67nFBWeFAZtU+X8VxFfYcJ78aipIRK0VKK45DtdfZXKov4lMmKhSAIVvTot\n2aDBIrFUZXhGX/u44bRQ6FXaFU/343xriD7kTQNu7C/wWJfsD6N1G7n1J4M5\nEq07AGpw2Pwyl9xrHTLCo7o8E2WBcMLYkrwZR9OIBUHtDgYiwchDFiALYceP\n1T6tSMIVGxUCaAvsmv1kxpDvL4LKs78B8QKhvfvUn5B6USMjdXNLCEp/h1w+\nS9xw6eEBoDqSlR+VqxAfrjEZ6P4rs80EClDZl2L5Ltmtl4st2a7g8UfR+9og\nvFWOU/Az0FcE0sbWDT5BB9Ar+iCAvvJtb8cWtEb+nl7XC6ljxn0MzimTkhJM\nx6K0nFibiZu76+a9d7damD5Dhf+sAjjZmY3Fu1eJprHn6ntiptuN4Fx0sOk0\n4+85RcOgyVCYavbwAzCtfHG2ee66otJdyE7GqToDAlx1eFQyeg6MXSDAV3Yv\n561rb6yJzayGyAV6FJ+mZn8bPmvd7gi+UcqkZLC84P827GEJEqpjyeE/pGqx\nmy+r\r\n=KdFp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/touch-target":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b602226ce.0_1578428130152_0.6772943843226411","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/checkbox","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f964a0ad0f1919514a96f1d9061e2f7d209a936","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":32,"integrity":"sha512-D5c31AikNGmnWaA2M1GX6XED+ni6Y66B9s+ZShB5I1zpU1wtY87i1ActXQu68BD/FCW/i14ksYshvcj5iCmIMw==","signatures":[{"sig":"MEUCIGf8HW/cEd5zznZmJZDuYFyPFVF6tXscfKfcHi4kLyp+AiEAlp4aUG0PjwjIRTqNgJ7Ja0nERHwLhyZyhS5PtW5HBzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPd6CRA9TVsSAnZWagAANJEQAJiJWW/sP7PaWfbUQHVc\n5f0nNVEGQ6/sH0VjXrTl2pMRKuBL9O3iUvlaUZPWHTCoKNh5DSF+H4t14C61\nBUmPbgrwx8Rw/oygg6K+llTX+nZrFrOuYqHH2GqG2TiB/VPc/6gQAkjN4Vfc\nhhTp4eFNa1npQJbYg4BEoMjt+js0JcW+pCZLgXci3kIV5Km61nwDi9gq+3f+\nMNMDn1exm/60vRJhFpzD2erEXRlaIBAT7Yc5lVS30ytCwUB0QSmHMFQF4T8V\nP2pNHuwJiGIFng2g5UVRUchtS9eXLVdP/6hOG2Zn5iYr+6AlqijxK22doggU\nJsYoWKJAP22nnFkznNUXRKvsP13QtGrkNaa0t0vPsn6jLyX4oNaeskKNxbkG\nA4lf2lmDguF2XM6dthBzz2ZXKT4yD71zb14dPn1ftaVGqwdaNCYmVkIgSMd4\nb1fXJ3jOZRGWIlSM2Vatiq+a3SfIlGOipaAUcWjrKX/5FjBaluMz0jq+QZ70\n6GyxiUz87deZZNjvbB98niXSHXRPUPuhcF3jCc1lUsM2b6dCzYeReYCziI/1\n3k05NHVhw4nwiOSl06ybsC2TV86chCklrK1KkDEhLVAGNptBo2306Uy5nNzv\nY5cST4HRUoLa9f3H0fA7MQtTm3fxY+S3QlXCuUw80ekIFOFSM66yZ/HmTUcI\nkZVh\r\n=bVn7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/touch-target":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b2d2dc08c.0_1578432378463_0.28872341965886483","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/checkbox","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ebe99c7a60b05810146654da19bf7496e598655","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.61f2d7580.0.tgz","fileCount":32,"integrity":"sha512-kl9UFA7vKcs2utcHoa797CV5ZD1cmAM/w1KelFkrRw8DOKP6zbQ7RCZ0zAJ3+hN2hJdYDPp7dOop2/k92c4/8A==","signatures":[{"sig":"MEUCIArqEghV90HGEnYZ/tba6YRiWnLL2Q7nKcgz+CUPpsXKAiEA+02jTF73ib6CHG+rWcBr5kzlQyn0F6/L2cTQDN8Acek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqqCRA9TVsSAnZWagAAJiwP/0dunhVGUPYpk1qLehCl\nsPYVpPJyIS5t+sAbvcXyVqZAJuBbZI6oYIGS93AyAXFn9V0k3qt3121tRDpU\nuuuCbrzeO6rjh+SJhUj7Qop+hPRZomSZrQPSTYLmyMHbLG25fpSRWfQdenZx\nAu1tCPGL0f5ZkKnmUimFwJbxe0z8xqIgqIqNtm6/vd8+xVhr0TFIL6in6o0q\nID91LGbtqgLiG9P9RtiXNR1q5rD+ZaDM9D5ErxH9PT8YWqv2zV9C00VtFXMD\nQrBbKHiuR7cVs69Qdfjb8B0gSckP4dgLMKYRk4s1tb3nqGpKjkqirCbnC1Qc\nL/QOvVODIKyg1mt7vTmw9JV+TvaQ2tnbuyWtTbet9duOdMYUwK1InN0XjmZM\nsNIcdgMUnyKqiWh/JBWLoPur8JJUyDp7gajnmqAr6+FCONimLtirH1baWAW0\nPrwnCEPZvvDYmBumvmRbCMcm8msdCV4KMkvQj+TASilZAasG0f0b4iQpbhsX\nvyhNDxCekP/5VYw3Nr6C0ncYr09T6XgKNP06O13i/BpzUsT54pNBLi6zHLJ7\n5yb3L4Bv7SlzBKALlo58Wz9LBt/cnNXXp59d9wPi4fpJVxFuxmx0dutQmUNi\nDs4yb2FssI8yvAvadDj4P4u3btfCVVlzGrIuRlvYRGl2fic4vRxsuKehk28V\n5luV\r\n=P0is\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/touch-target":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.61f2d7580.0_1578433193924_0.6554726749736342","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/checkbox","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"def2549dc05a10662e48a30ba3dad1d324ba06c4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d1be53a2e.0.tgz","fileCount":32,"integrity":"sha512-sIlUw1JSvgitILE5kUt8pUHPNaXGZ+zrYO1dX9huuzFoSOH49Dn03T5cJnMXW/kMyFzhIko5CkIIfMCWPIc35g==","signatures":[{"sig":"MEUCIHGuowXDBiGR3HcNk40QsoIRluM+OIk+jhPOOgPs5AOSAiEA1sBywk2m9IykdfJ8iXqfuLRXlPFb+sQijaHFwoOq+4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNwCRA9TVsSAnZWagAAg4oP/RY8M7o4pioZqrIAvzqc\n8xfIc0OMDAJ9Gt9P1Cu+p+e5W2kj0J/9UpKi/T2/Epb3Jr+2tm95WBB4lpzo\nK//e7BDZH0xL2EMcsCxKS8HtYN9P9OKZgKkYlpHO3ugUXb9xpU5iPZF7Qyt1\n/dBJsT8sNJe7SA+IVcdW3LHPEWvBK5eH1S8R1f/MImGGnNQvSWL8d49WI+IA\npH3aGGp97riyJJnzRs1h7I+RCaSUr5Oadw8kJdODGXQPep94lbRK3DW2fMTF\nDXo6SO9sUrAHXdBah4hsyAaOvQTGBLE1Q8he7qFqOvjgzEzgvJSo184wGHm+\neI2p+rjq1flUAAo5CMY2XOMuncU5VWlPekzoXvQBlw2UGKlpvscScNq2xm0h\nGcXY4Lyx2qI02xNb0SC0D8wW5OK7DRnjuW1+ZDDWqoPtF8XRI0WU2aCDVx9D\nJXIkXtFJEl4YC0Hr2aXOcwlnKekNum3aYFjbwi1UyKfErWhhWso0qFsUInNx\nEyB+7tX47U74TUzTiSEcdwVM1r3EQi4/VTdYqQiv6udbd/28/uoIdLcsp0rV\ng25KoQ+5Fy26611stEA/KFaTihJUNqnQDIt5RZShL36TagUG8rNaws+0RZgq\nkY6EiOBrP1tilu3tPwxUy1CJaXtqfFVBnCdigkzxg/+zXScMcRjKtnKL2gNr\n7FcN\r\n=7SoR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/touch-target":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d1be53a2e.0_1578435439904_0.2856477781069908","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/checkbox","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c574dcd273305f5e7a020545812ef19d4a16fd32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.9b0d06e32.0.tgz","fileCount":32,"integrity":"sha512-8lQ5fgosM5oAmKPkuSTJr2m9KyxE+IXBnMXTyX00hQWsjRGVYVQ5YKO/5G0PHgSq8AJk4C1p/zlp0K900BVDSg==","signatures":[{"sig":"MEYCIQCCQ/wsUldz2Xt3AfkCz8WMqUkboooxDM9krmVYOCF86AIhAMtChtmLTLTFF+3AtaPOIcr2KXBrIGfICMVaskUMKO0E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQP0CRA9TVsSAnZWagAAMx8P/0E3sIS6bo2moVK0UGWh\nnGwLLY43zBczH5/1RSFUKnW8xmJPWK+z/k704objHAQ+afA8/XXEtyTZ4zzI\nuwLqdYm54lKcdcyM/+GDc7qQtOGWQV5lshBYw4xk3Li5fprMdn7hlDzDOclV\nIiTLql53Pv3/0byP8hUswSan/CVZtmdPAvtBz9YVACEnpykgov2/jhItl15h\n7zaWO7a7EMj1NDsSHcoWSHb1Fs11PdzvluMfyDp10vjJ7f5H3vZKURCvoWxm\nQ7WfyYuHePIseXvXbgTlCgWPWZSw7QNPzurx8ESbJjQ9rb/VUME6/q4hejNP\nZX7Q7jexPkvhrh3CKBY8xifUi1HyOy4zAE/gUH/fYAOBejXFIhDGEH44Fn4T\nmHDfrNw+IWn7+ohnsOTyS/XJ1PC6EE8KnVEztkS5/wIqc6ZL3ymiISiZ43pB\nbHzCi7nq3lgb2j2bOdfleMvyjVjA7IbGFaqzMydpuln7MGUzklyZBAN75cZa\nIZasQoto5crsUtKitBI8zJJqbDCMrVn35nO8cLxlwTPP2Bk47x8Id3d8XXHP\nTQqX1vOIp3J3t9AXeYYugp3WMwz+1qwZXhClhJuEILRqlDhCfVltv6OuimGr\nTWAlGa7jvJl8zQ1IUUtRODyjsqezH1QukGDUYraCr6oQqH+LT7DKCpXD154/\nyXXK\r\n=ExRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/touch-target":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.9b0d06e32.0_1578435571682_0.11078360431136369","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/checkbox","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.730c807a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93cfdbbb681960312c33a779e541634edf564e9d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.730c807a0.0.tgz","fileCount":32,"integrity":"sha512-hQBojzplsJceM2kgUwqnA6WEg+X+N7ROpCUiJDZFCDRC8MXHP3ltXbbNXoMaeEoFDV1LWqil1Jj7KIBcRNU4+A==","signatures":[{"sig":"MEUCIHGwjP40vSpWkcTfl6xD/B64pPE2lEJDG4y3K/4QPDAiAiEA0aVX0lQf5mrEdmTaXPLK4bwwzov//Ry6lTZY1+Aa9lM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRSCRA9TVsSAnZWagAAYwMP/RlltM5fAkhuQgv0ShcO\nJdKkq3oaVYykK/iSb2oOfUze9Qf2bNhlaVWCRJwJbCb7oGBylN0hGBX/KrUZ\nVaMquRi52rjQZ8AtMAO99GgExv/OnH6IlY50dU2/q4yrLL5MdvYZLYxbQHEZ\n0dww3vrmcAn314PKyc2Ijpg2WTgZDPw+eWL5WLaFK84kd4sg+cAccABufVAt\nkZPnSU/1ZAGCPvRQftyTVcdy7HTNet3aF1KTjdH77jZj3YWGGNPdXjlkxNYX\nm0Zwx0LkVn6wXZIcqQLC37Z9bJqKuCSlBmHv4ON//GDzknvonmmmgZ8viK+3\nkrnT0GYZq2rs30EonlnLGlnJDq5e4k05XAGuPTb+9tli7Qu4UyjGLg8CMUYa\nuwGmLMpw5C+IZWXDVfjBRXSpxIxFcE+mcqCI4BB9/9Bi7WNEes/E30QuKKNy\nrdrFIY4Hls4vTpco2YUiM4TpRX89C1ZpEvgzN1SoI5f3nGkrUkD+s0R5MOlc\np7A8UL8pyPD0uq3S9lgkJrwMx6xTG1WmF4d+0K5PlSjlm9o4rUoAD0N3UOUN\nk7Yy5GQD/qKpSsW9GmuHaMtUBEi84Iqbhnczi1txBvSP9LEYUv6vbB9O6ACe\nNL4+b39L5cJTc8neyS1stzGnMgzTz4DMec0J9VyERZosLk2Zxn6DVoYo9LMl\nH8hl\r\n=Ng4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/touch-target":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.730c807a0.0_1578435666330_0.22085139640306983","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/checkbox","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.2213152cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a60adf134b52afd761278a791c78c09cdbf9e7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.2213152cd.0.tgz","fileCount":32,"integrity":"sha512-Qufsnj9zbQDFjz79V5CcT1XM19ulLNI0dmfV5qV7CK8ptBAVRAAkB+GDhVJgum1Hdz6dGd7d8x+M/kA0OL92IQ==","signatures":[{"sig":"MEQCIHuLKRg//X9UGPLuZ7+/NLHq+/AAhso9yKa/42QVBJYyAiANkv2HYCCfLPNGRFDpd9OrGPTEu1pYT2NYD0EM2XQGBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/RCRA9TVsSAnZWagAACFgP/2kjF+BfA3fcI6RR8yj4\nueK+z4ootfAFlyzYb4fakNgylYXGRctA051U7e2wIKJ2M87hUkrOxOhMbDYJ\nmzl2jcExL5uJZS9dfRL/9RdGIcXBVQI8AMqSxR3bEbCbIZaOXiBxahfhySis\nPMxBL0/HHinMjLLTYle+JGaCLlJsGVazCZmlREKFlCoJzY65UaFj+5olFGIe\nobLrig7b5KJLcRLgxpVRf2bDYDWeQ+4oHX90egZtXo4YW674/UIrCjy9Zlgl\nDPyZmHmcDURMRglqezDrHGswTOJ94Ja+NajVCC7n2rCc5iiOG6zUz6dbKaVC\nTKLECjUHIafa+Cr5xmt4eHpo/NCit6F8vnDmXTNx/iDyrHaE7DeBKMjqUSmd\nr54nkg+tQ3uhFdmSV5GtgELLsBJ+x0+8jyaUfa4AykUzL4tL7XYltej88G8Z\nb0qoHOCgYeej92xCyhE0DMPKKGBv+zN3wqPO4XFlwEa3qoybrc/wmwS24q3t\nrToMGrk5tUdlp8ogzb5mi8A/AgOypS21+mXcGkyo9vkJe1t38UZ361lp+LGh\nX9XUvcc5JJcsZr7z3Oc3gYOjkehBQVKsipkFNqX0udg8VoH3eNWOvZzN9fEQ\nC65Npx+5ktZykB6MbHffPfDH04YhvKuebpfZC0mJk+IDNKhhQ8zzRM8/gu0e\n+MF6\r\n=y4OA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/touch-target":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.2213152cd.0_1578504144609_0.4306412276400149","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/checkbox","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5750f7169.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bb673642d2337f1348c9f144b957c0f94c29e93","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5750f7169.0.tgz","fileCount":32,"integrity":"sha512-fZ+1DHhnraOQty4FaJaVgB/jYLdf0OlI7xRu2+Nt6IaipIxwk2PPcdHCLCGAiKQivK4quiSx1+Q6F7M2g/py8Q==","signatures":[{"sig":"MEUCIQDiBx6Ak0ePGELZPQZSzBgcL7x+ZM427mJqhemzNZtBVwIgHEfX7pW0rXWprkBE/4RLabTDDJzAuWT6M91V1LbTCqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhf1CRA9TVsSAnZWagAARw4QAIU5riUpxHT09mVr8IWW\n2Awjpb5RL/xX02QcXDtCR7VGR/jyuhf/sbUbUIqaCVjGB2U5Qcwyq6paiAfj\n9HM/QV9cuQTIAdWQWOtzmW7kVY46GTQ6Jve5PtPuPzleAeNks+Q0YY27R31R\nErSq8mPbOSIaxEXUmib5zRR0yITFJpy/HDdsDZIOldCMq1K5EStvuzkZhRkh\nzpGsZ9OtZrVXv3DYB/Vh6qsRWrXGlP8dqaiuKpmsQrZSUdOABL2LFj8VZRpp\nU0VmiRTwZPLOxpul9kXAcX5GBS8AGXJ2McYQjuFZzn8jMupwMbPqnefPF2uw\nEhEbzRIe3qLa53WEIx5el2/vDsovrO6dGZzpmICn01ACKVvvCLSMyINJL/OB\nvMVCQQeJgQQEsxzbHULYvUVqNtHoKpval4pI5YCKBYcg27IpZbRbIQQymtyQ\nH3HpnhWQ/u3GCaziiIEy9JIlMFasznX4KVuauu1GM87onzMUgcE25Ab7uetO\n+y2ZKRgyqpA3TXz95eDPGdYR0zpiT1ptIqJw5ggwyCmk4nC1u4xOs5FMVHtO\nOpy+WXU9SmCnRBdF2/AjyUQPgkUYinKmEpUy+jKzU6SZIvIQoYCsuIq3QvGE\n4SWSBlPROAfmYNAhR579kQX7zVGxsCUFObDKkKcAnSQFPLfGjVudEMH8SGDG\nBoaY\r\n=VRsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/touch-target":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5750f7169.0_1578506229587_0.12133672194400846","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/checkbox","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6f4011e17bc043043451bab51df901faf6e254","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.f7abc7a43.0.tgz","fileCount":32,"integrity":"sha512-wpcIL8znVmr/Rbm8tlebVRwbYkQxkGDk5rdeiN7pY4SVqru51fF6zFzZOdRhvnPHhk2tbA+Szic7VX2ajglYGQ==","signatures":[{"sig":"MEUCIGzoBkhMEhD8I+z9C+PKj1TMtD+h+goKssUOM+Pc5uOZAiEAtvMsE38NJP9i+a6JS0o/mnFwdUJm1G0WTkcFrna9GZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh81CRA9TVsSAnZWagAA2oMQAI+LhpsLKy7CNHZQtegk\n3SFeYSmYe20IAiDC4fNVZZMW/yKCftt1qv5w5nATDPzFKP+nrCrQM/H+9yq/\nX9UveWANe5F/gaMAwADska1rDyFhAh11LV9w49iEwxdT6r9Q7v7GWKB2okWC\nk8VZktNXAWmYTOoSDyRy09Myktd6Rwo7bmQawRj3Ktp2m4FQ4xDL334rPHBU\nzNTFf1ZjH/lTb/5qVX4zfblmUz9eBhp2KXMbL3Ybk/zNHrmSWKTaZllhwYML\nBRytTGrQ4fbrwgZwz66aBa4SegtzZxRCXFOJdRkno6qe+c95HNP4uH1AQW6q\nzFB3JyfIUBRHLBQJiGIYl1eLeH3IU9aauQsHL/uy8dyx4hKQne3ncBGTwclu\nK1QM0jy7Gj1g+Q/2hU023a8yrGbJEX+00pU3knP+OijbAQEs+buVWvGpeQ46\nYHYeJzlCILqjj/uneRTVH6FZv1ET5n1L51FkjchDqjggTs1sra/M/RaU7uIk\nZK0wd1OA0gxr41E8YFM/6s8umnXCrvh968Q3PtdL4yTOX6oivaoW3H672vx+\nmHLBM1I/YkdP6qfqskJ+fG7dOB96wIN0/Vo0xhHF8Wliq258hGnzi9lVbrAv\n8mwxnr+Edkk1oz+0lvV7ETK8ZksBX10IyYmE5h/ie8dMbYQnq88rBPtCdEU5\nVG7A\r\n=wSeY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/touch-target":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.f7abc7a43.0_1578508084649_0.17695839967811144","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/checkbox","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6fa8279d196c547ddf4324c4f464da2a77e15fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.bf7b4a061.0.tgz","fileCount":32,"integrity":"sha512-5OSQ6hkW/pCU8G0IJbrM+QDdRrxTtKH/U22SzRinlnPshimQLi96jdappVK8NXSRhKbwHvITDuaV9/OdQ9habA==","signatures":[{"sig":"MEUCIDv3NH+4nTfzm3xe+01dPooz8H8kd3mn8mNFRYMel8+4AiEA3Idy7zTZGIwQEzYc6ynappOkK1iB69k8Zllo3g8xtf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJqCRA9TVsSAnZWagAAArMQAJL3EMu2G3YvRmn+RMnr\n21yyCnAklzxBAPRx77mUJ/XQyv3cFuFr4Gn8BBd18+m4Tst25OYsX1xwjGAQ\nUoGFuxqj5AG4J0trxuyG9bWHhLe8mLt7L2xqajZHXKpesCLaCQ2i+twwI8Pp\neaaoH5jTsNs2M+tjXDlH1zDHQPO02Gvlzu7zywP/8gxHWn1DWmwqU2KbiNfA\nrP16clpCu3JWrN4rzu+hUchMbM8jddDzT0gcVP6YYWPlj64s4adHvoYmLjBn\nlFAduc3/egOiYqqOOnbMEWSK88y+8RrM30StNOCQ2fhf8rB1JVpPDYGq4+3O\nvAXoXfJtwgdfILMw0SlB/n4WQ2J2cj8LnbzXg8FiH0ZqCTHsEQczfe+AJ5Qd\nHKUsGlFFvb45bYDaC1QfVupAihGkJJ/uFRHizxoJfqKNNpFdNYFAoQMfE63t\ncyTZJrgT9w8+lEjzL9IWO+POvaP1OsgwwXJdlJcBHzCfqDXeIgu0VY/0twah\nImNY3HJjlAg+e6PPSvb6a9va0l7k78aYV2k9UqltdMXMW8gTHZAuDG3xahW0\nwISL63Jt2CoiKy30Uf5HXDub6Z/uMgj0aakR4Q7eLipZlgn7eU0bYOVNgt22\n9J6juyoidxwTVu3Ca1owRq1N01J45Z0L/SID/CnDDR5ZVFzJduCzL7ggTlo3\nspY4\r\n=xmOi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/touch-target":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.bf7b4a061.0_1578508905744_0.052452539968901535","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/checkbox","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.784fa7903.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bbb5c1634cdebfd265feb22d2526f410f12a67a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.784fa7903.0.tgz","fileCount":32,"integrity":"sha512-qMeMH8L36qMYs4UgEgIy0uH8ybz5vd/EAwCaTjxQs8RrSkeJyqmMCS8Q/N6ynfXUhkd8tiIZblQqMdM8Ul7/YQ==","signatures":[{"sig":"MEUCIC3Mp8K5vpsOYMbw0o8Ryaz7t3OptWGknl86O3HFf1MMAiEA35bNZ7WYUKJNSNqPndtYj4riYKlrUtI3o9E8qjRDP5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiknCRA9TVsSAnZWagAAJ0gP/1QQhZZQ75+6259TOSgi\n8RrynskW3hJn8nQnUgn7gdgT3qfRZWbRhn8t8p9+dJdMea5FWyeVAzNlzTZV\nyKkuQHFiH/YeN98Nl5a4RBdpgcfncYDsjihXJ+mruoy+rSNd0sQHqi1GJUdx\ng/G+57fs1Podk7BABaY1J3ixDNHV9F6x5TmZgOhlchaq3SHkgQnF1VgaKjw4\nIfCe9RBGVebDkUcm4dVAXXw81AVeQDBiuQ5TsIfO1U2F1mrh2VOfeMRFwMVT\nzY77De3Uo2AV9t663DnrOtPfM90E4i/bFgGutAaPecMviC853UsMHYlUlNxK\nzwSjttN2Nyz837h1izzzocDQqIy2ar70HEgtpI/wGw9nZwLOAuyqQhjMBWPf\noMJPUcW9BQQonj/wPW8dnooWr8PMLBNPG0b4wss/zvcP8/1KlRLa98HV2qpP\nhn59xM0ng3UOZmEt405daVMqEGRxoMbu5va/EGkVPXOg300JzgE2e82ti/m1\nNo2NuDAcJNHE7ys2JBmen0gQucHdjKAZhiXyTDqzV44lgED6FksaRNKgkXV7\nSjBf40loEISESirtoMZZ7sPK+XCoDA2U74J02fB+cEn36T61kwKk/9NzRGSH\nBl6cDGKbqAe7T5ST7LOb+RFEyxtaZTwZNARWBIzrRSi/IsHcuH2wCoZ4tz7Z\nEapk\r\n=wCEu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/touch-target":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.784fa7903.0_1578510631429_0.45543750379614","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/checkbox","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.823c050ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b567b71f8d5bc4eb7a864376cd734f38f8026b10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.823c050ba.0.tgz","fileCount":32,"integrity":"sha512-sTs7dnGXZicXcPNaI1y14IhYrneG0TxQwi0e/jXh6Z3aUzAH1AD26KmkiUU1co+bkJW/14iZyv1BBshbMD9Edw==","signatures":[{"sig":"MEYCIQDZRuZGW4Y2lG0u/8k/eGd78Uxz+eO0Ru8Itn2ldVD4AAIhAOJjWGt0u2TX8FSv0ASjItFoD4fTJPLuvAzjMxlbTW9h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdWCRA9TVsSAnZWagAA0sIP/0+ok9pb+ybmtc9d+pSt\n1gHtgGRdKLOTmtLFBd2h9WIhFh5MIXey18VJKgmdRKh0vIhA+dULFCr2yKXF\nBXLwOdDuUHYB1UiyMapstJY98zdNyij20SWG8XFlLFcgbzUKI2RlefoBMiVZ\nFCbxzLKSGUyri80/7rys1owoFQasHlPugwPW0InX4nBJ05hHVDDetvtSH70+\nlTJ4u9uV30Mie09UnoIcmqXGEWDXYKMBkFbFsXJvIrWPVybiPLbYEeo764Cs\nIbXSMXtUQRUe1Pu3ZcvEhWCC2XYFEJY9izSe+Ap/WNnMuCcxIVii8gmp1SJN\neWy5Lm6ZdYSCUqHSLIJBzG9L79TU2j8l1hDAVxa5nUa26a73DKnZzTkdhlH/\nA+B/F6zFeZ9PZeDgZeoENg8GaVazoXMjvH+r8zyKHSVItYrljXSmyvWtxX3E\nkhHyIazPtbGRNoO8hW4RarTxDNwSPUPaMYbrg9RgqTKtR4F6HUq5FZHFXZ8E\nqoOWnV5Zs4IggJU1sXPs/8QWlQkczKttwuLr+BTddub3JPMUBX69MziCdJWQ\n3eWyPPFww2ENVUrwRk4uZL5AYA0JtJFN0hBCA0H2s0MDdpUCAAGFKw9AxgCU\nqPXso6PCm64LjM9jJiruKDpUuvZJZmdg78qnAPnBj0aeUqfS3iPuC+fHIC7L\nzmxk\r\n=qklz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/touch-target":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.823c050ba.0_1578514261893_0.9247052328359711","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/checkbox","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.70c708dee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"209b316415913830cc2e2ac0ff78bab68cfdc663","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.70c708dee.0.tgz","fileCount":32,"integrity":"sha512-V3gnEEGMXFfUBy+XBNNpSbM6/0aWWIjUenUsSAshRqj2giCTNZ8zVlyyq8R2HECnTgpLo+zJy1e8BLuxiv37Iw==","signatures":[{"sig":"MEUCIDEV1P3t2von4rd2LaWmmHeZDFVbEPjold2I1Mv8d64zAiEA3a7p6oqGA51e2u8/dCtsRgsfLAt+LEfbgzIB0Ebp7w4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoKCRA9TVsSAnZWagAAvE4P/00Ebq4mi6j7AjS8D93y\nyqc86h7jF0iYdSZKhjI1Zdj6UyeEZ8xhp5w7wxjQV1FKDIZeRW+QxqRw4yd/\nQCgW0RVgK/Zo1cJAeomfdGnjls0EDReLMkRrQ4ix8jOZRQHgafeYnzAQJRSN\nieGj7Vj497Ao7EB3W8xpxm2Ykr/SScy86SduhgCFem8JV4bWUnNx4LXA0UT3\nSPZfj10+jmEhQV/Eb9sazPxZ5dO18HyLnOoaRtJsh7iBlf4jkeDCIfHn0xZo\n/PiACACS1S8cMMGXrsIOw3+wgD25+cyd9D32iTUyLNwMLpqlp+K4LmuvoSWx\nAuRNNPLoDXhuN1bMfCA/3TF1XmzcfNjAw7zA5S3DIAbtPPjYIkezhKAQJSqb\n8GeKCj1C07JIiI3ZMgEHvL6rxFsNiVErV2DUnNzvCtWb/i/m1ncja6yB91Xn\n9cGT3AFgZjkgJWC1fzgWPWTul4fQaBl8Guu3vDbj3WK8+7XiI+hTkRkx9FFF\n2/aSqhJLEydYVCkkUIIym7hNEXgGd0hXtSARlS3osee5/l+zVsTWk1G7TY8R\nQ64zSbcZBxG8Whn4nXEBlbCF1CC2jcQqyMXHCJYf7vOwKO1tiOj3hbDP03Ut\nJS4vGnIdNAMO3GOajFYrL6Yg5uWk4hCuZhi4XEWB6ltzH2I6H9VVnhFcgeu9\nP0XI\r\n=bXYp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/touch-target":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.70c708dee.0_1578514954060_0.013885117284600623","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/checkbox","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"982cdf3fc6b6769fb12aa8c925ac78108ef153a9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":32,"integrity":"sha512-Mq58JzMtPKmlAjPpJ9Y+EXPHUSgfzdHnRAWR+EBmbXS9wxrFEnFVSSxOsWyVCF6Jl/g1R7RRHg3PZhMCgND5IA==","signatures":[{"sig":"MEQCIDb79khtCRJJMbmNPJKIi7wZzyQZ7FjneUZ2U55fSwfbAiAXAJHEVMHzJbL/Mg5zuckOXKaSuoog8bEgA58h1HpP8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzbCRA9TVsSAnZWagAARy4P/RyyUWZXDVnIjsO4Njrq\nl6W3uCMgxkrDi4Q1PAD5LlQZ4mKihmUmaRMKuqetYH3GTynqjrAZ+3MBGppw\nxc2KaLqBx9lEyEKwmZ+f+wuHRzm3/8hdT5brz6EC1NDZ2ZjnJU7ofu0QpP1f\nQkIQRjozZHwxSQ1XMm3s0w0duzSKHNQA5fZ06gY8nzEzlmZ2UVBougC7juDF\nrF/z1GBkfnlpjSR33WA3epWGsKozHWA4C+R6IZ0aos6kwgBsVoRiIejGIIfH\nlC3A1U80D8pXaREa0ShnBufcwEjzeJE8eqV855wDD+lSYvuMBOt+HVOqBChy\npAXSPBTKkzkmyoA3HuEdU6Xh8kwgqV3RdMkcGrKejwTxaobCzt51b0JOoaw7\nmj8ZHm0wlUtLzs1l6ssAudS7Mej/pcE2FElNh1HzCLPXLTMjcxV42OlMyl3y\nmEv4JsgwYZyqgJwcvDLQEmf9aRh2jOR/e8T486mbtRIizPy91VEmFaLxDsjH\n5a4QGenUv64WQPLl+jHdiAKrVbkgsUSENif9c3SmWkyL4VAkF7mXH57YpCjE\ne8WQm4GK5gfeCgbQE9juSdPmpEycKU8HMvWMsxEf4ROJp+8IkoIo8MzVoH0t\nHlx091j6/IYztcGOu36oriiwPrx5cPu0G1nwqfcjngCZU14yuTafPJp/97ex\n5yuJ\r\n=/BQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/touch-target":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5ed9d13d0.0_1578519771000_0.8081182995250926","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/checkbox","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ccd0f69d9c1039a7b9c39de5d6a89dd30526be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.4819cc7e5.0.tgz","fileCount":32,"integrity":"sha512-Gerwjz2WgQYfVEYd19wSw+IVH8CP+RWeT92tP845OVVaDLpJQsL7EsXR6XypPKeATH4r7AkNwNrxNgrIjiA/sw==","signatures":[{"sig":"MEUCIQCYr7dw7TsoExCX7ljSRA0fUkPtoNeBFllpRSrIt7d4hgIgQgn7NbKmH2V8gSRvyxkSiGHFIelBQsRolSC5+vQdb08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCECRA9TVsSAnZWagAAf84P/36JYWqQ3eppB+dICyMw\nlNeBIn6wm8eqKEBn0uQdM2gyLeSZvh27E8+0ueUOEHk3ul7DGWceNP8QdC57\n/DaLGjjgKnK6h8YTG1gSdpSMwOpDwia3jKZKyPE5npQhSKjde0/MvYA5yVP8\n0B80hj3nntLXIAIPLxrGr14iVD2he+wd2U7YcWE8eRP3ZFNXr1vByWr8XND3\nYHhyEPPALXh+jeESIQNlD4Dj4qBIMvwWSOX/Ci4itUSmUyBQhmEMONmIf8VD\n/QUaqGqR0sLvslBT4k1OXW4mbaxvQNMugHzXlkg3ToMpShRqYtN70dsbVvi3\nG2xcZiEW6Bs0VhpxMWBMN4Vo0NF6tPiSl2mW+fA2oBp2Nqaf0hyN38n1rK1T\nXuWb9fzej6Z6mRpoqkZAbTOiXFCK4LZDBIp4JQjQYFKKW7dhXv/6O4eZ4lQi\nuFBgueBVolwy2uxkjZIJ/aMLZFVG36DH2YyhtxqWGba/aF0rBPI1Pj5NWpR4\nbqF1MG+CoMtFypaTRsAzIHKOeHtJ+S7nsWn2i0Ob7+FVgU4rT+9ZuWSWLiJ+\nV6roeyxB8dHuGQ8WDIcMa13DMsGrxoIxN+C5c8S2emnpLA1rW7wT1sCllqYe\nRLursVMt6+hF/UKBV+D5JPHC/F6iQL+Q/vE2YUClAvaMeHmrqiBTHHBIK4o5\nMkaF\r\n=37VO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/touch-target":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.4819cc7e5.0_1578520708066_0.7875425969165073","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/checkbox","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aee3017ad79890e4810181927e413af57eb0de00","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":32,"integrity":"sha512-BOE+jbiR+sIyOH61U4XeoYErCcoePchweXUL4YZLx7yZ2Zt5aaZfm5x19a0n2PymnJOGQfafe4UzCEQKI8Sy2w==","signatures":[{"sig":"MEQCICE+awRDL96pq7mneIG5fk8EN24DmS0CD5tf6+Q02CPBAiBWMcRdwUqdhkCR11JpDv24HSbyoPDBbM/0J+88bjf+Aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTICRA9TVsSAnZWagAAiPkP/1/wmeBuHXAKtpjLWNl7\nlJgnlHtSmTotoVqWpuIPUHTH2Du8cbFPUqerbd9kHHXDKyM+w/P8xTLF+mYN\nyMrGMxo8TeTja5KugQtyXPxyCWuo271HotjYZxyx0ysttVkSHnOJYY9jWzSS\n8GT+KroKoMtSbp/Fyu4VhgeUfZC/fKqUeeKEjXpY8vXYwzDqVsnPqLQPpXGM\ndR9kErXG8qLVmtzoX3BmUTKh3LsXbKZLEAVxqp7p3C6QDyzakXwDu1KP0n0E\nzcSXiF/N82/Iry1mDN/9GHiU+gAHrbFq9jOSnMPtT/ygSc+SMo6lGWPJcI/G\nQ9i3QcUoDf3BKa3q9CpG7yDKVzK+jLs08RlsEx/oLwgVJzofVaSo5bpYPD2V\nRn7uEvZYMhwa8fXru1e+xCi9hpL2u9pEGCne0T3nQHQmsRoh5jDV22TbOJ/r\n7nXXBr15NlRkRrWfNddTHnYlfqWUOf+7aJHiv7gOHT3fUyYEcVVJO5xLJasJ\nAd6HbJ4djBf2nLYbUbyXxnfmeg8XQF9lH0ySfVXkmeS1fDqhexmcBtky6JeB\nGPMFYuabXAyZ9EEDDOlhL2zb82A3BXBIcUNJcQ5W6j1N1N7A2InTjC/yJJql\nVIgGvJnmianaO/6Kq8NBGI2ClLlMDhovDQ7agK9sXh44YLFhNkkKEBUQjovh\nVBWm\r\n=DqIk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/touch-target":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.fe3ffd2c3.0_1578521799664_0.45255531724889453","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/checkbox","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c0e850090.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76951da08a30f408d48d0359bc47a7aae3d13cb4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c0e850090.0.tgz","fileCount":32,"integrity":"sha512-k+EqgprCjeSVEo554RH9WgBIbyTznkZub4n8k1agg6dT12zH6rXOOQBFjXWAQwCwGKi5IY0nR6f6NZ7/P+3Yog==","signatures":[{"sig":"MEQCICLXr1BBj3rztgskXkxBIcxSnHg6KhhC9rtEM60plstDAiBvvIgPfTHG+GuElELIN5PCDxKrfe8Rje5/lN9YGwWElw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZcCRA9TVsSAnZWagAAGLAP/jFwz0jx13VS7rpBujL5\nAyFR0zhKi9R+adiqxJUFyIGfPld3+kleXlwJOd/720Bw3EY//3jQAwNslYnS\nj1ZlSmbrvC1YyVlV212j/1FgF3NVy365VQqjEnyLU9XpX7jm5z3AqzuGi19q\ncL8F1KYhglffPvFGlBxjai8+oUoJauvOm/WxcyVYIdIhvlrlFdLrrG97Fo1C\nWzQ1A/y4ARtfarnnRAxZCVXsO+ceI8Iy4kSD6GsadhpPGrWt3yiwNl3AW1bV\nICfSugsgZTQeft1duAVx7BavOoBZCvbNAGDsD7Pzwzfgx/METfWwza/utU9p\nM2/YnlYQtO0oKx3c1aMpd3NdmOgeVXPdeAV+nLmii91+ooo9wCcgr/OiVbUZ\n397gqeKGhJ6MVcfGOpxOIq/cWe7v9+U2Q0G4VD23Jf8zIygZSz3vcn99HU5a\nzDJ8czY2oFslkupweOEy4NbEH2y/D3KmyhqSugJ/ZTJLD58snopdWD5GvNtd\n0LAYjtX1ilokDGimlDbXwt3MWCxe0Nbwv387k2zjpIRfywsdEMocQu397euD\nadv2w+82MCGaHK6RiDRPGKhEsqMPqHSD5LR8wmEtC9q7cQ6+7dPJ3VRRPKzb\nXueB/H/j6aiPs/dBE8+qsVlpZaXtdgFe4Dhz8mjGRPZi8jinBV2odGF+ISGS\nPpxo\r\n=ndrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/touch-target":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c0e850090.0_1578522203688_0.7404594219420226","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/checkbox","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.615f86f38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d09a771c59a7efce11b81220a3fa2c09823a37ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.615f86f38.0.tgz","fileCount":32,"integrity":"sha512-G2wKVKb/NWVM+CtjUmV3aoQOPxzc0kxhqk0w62qPRey3sGiJ3lCrsRse3WsKi/86Oe1QJBuzqIsPT9p8aXuALQ==","signatures":[{"sig":"MEYCIQCEw1IfCYwdzX3oVV0C2XCT1LjaDgaHPH8jy94oUHXmYwIhAM89IodBiL8PMeZ79XhXOIa5HIkzGQN00+rfnoYOrl4H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpiCRA9TVsSAnZWagAA4OcP/1bZmS70VytXwY2vuYbu\n3I8bXuTstrlpskGwx82bZ2skyAvHwZTQL32s2gGOWuBwINf0FUSDX+7/6QdT\n0qsJb6Rd36cyqWMbT+ZJ4znZFMdUdd0Tv8+oe+FUSqwey2pVpjNJ5oY07zFd\nIGsLt8FqxKyxyyEeA748VoNfm91p0Y08Tai/+EJJpsD/6oGAWLSoTg8lSSbx\nHEvbjTPOF9dj42HOPvVrv3JrjgR5SmixQZRpS0+CrAxGCFX+5w3IOJItFtx3\nmK0El2ehwSu14AsXZKZRZyn4xl6Xh70+Y1OHq4VjHnKj8PYDmBaj10Xp4r6c\na/q0lId7joq0MIISL7B6bcSKB6iRP+SPWSJ925ODcv7xWC0+t7/DC0VsO3TU\nj/bELwkZXA8MmDDF48Q4rlIdYGE79Ee2AM+BZ+0HJFVYs6BO9w32ZfEaapRg\ncK28HTTcsoTq4Ki21LWSs50FEVjoVyW4qAn7eoJ3H4NUBRN8SIJWMmAMruWX\nDVfrUEFovONIMyFVd/IzDqK0Gq6clKt6OqMsg7X4qswFaa48HMJl/2HAkGZk\nqhGkPLJ7wyq+AnF2HC2XahkD+9Bs3N1H9zvq2POb1HpbzTwgy+rBrODCFIpc\ncvN9QaQTC3fA2s3/a/Yg4E5THcfi4urgPVoVckBzVFP1odFF+SLrwpYiDhtr\nugHg\r\n=8s6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/touch-target":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.615f86f38.0_1578523232951_0.9547958175366802","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/checkbox","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.1eb032637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29291ac0c94d6262fde9bf131460d7a7733fa8a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.1eb032637.0.tgz","fileCount":32,"integrity":"sha512-uyythwHKUExB3zSHILWg7PLOJQxfmkesH03KwqYsMnNAYtKTBUulSVVtN3n4AzH5tEXdYCaWfC74Z2oczCXTQg==","signatures":[{"sig":"MEYCIQD1TAQZ5JRLVAaIqy8QDymLvBGgu/V22Q2Ao5rkxP+sJwIhAIw9vqjCWZi7/0ZvcN+TO0Cf6DG1YVvDzTDUmL0YN5++","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl78CRA9TVsSAnZWagAA4cQQAI6pNwZKV2QjG0dwMG/6\nBPvkXhCQDhsXlIGpzv6DHUJQrbVQSSD+J2D7YNOJWBgHgtkprjTT78cWhjn9\nZ8yAMFR+C5kzH4rXIHAGk+gtvo11XNwk12S+YHsG6GxMa62LlgfIxWWj35L3\n1eV7qsQnUpuaobNuVInopXwMEZ//7iLBZekNNL/adR52z6lWbbNSALBWpWLt\nwPk9Qp+fDEvhmejlw0ogePhr8Ucn02QgPfkvtoedUtVc3HTUTuU1qOmlJYv9\nHPjrItuXaSk3brWmvcpZQHur3mWZTmMLCYMMyJlONnHsqCU/kElYRzN8Q3X8\nygR2hPkKLsywSz/bQHE1xIwGTlHIF8DXuzICHVwHDPFqITTVIlyMdz7d3/fD\ncPEC0leFebFmTlRZ4aiFgF2RvTueR8ZevIM23eRxMcRpCZBd2g9XHWSJeSze\nCLIWu5LPWhd6VGDL78+aK7gDwPZ+an7yRXzlfcZnrCsNJdPtr3BojMlzNXCd\nFOjk/txEG4/Yn4SWueEpJJOpGwzpdI7f0C/qaX8wLB6n/Y0ZA+kz0tYHfNyX\nY9A6tBtRnnmwro4m9XZyt+2ubKHK654aSTZVe3kaYYZ4tDaJje1HSF5bYfZU\non0aKJ89Hk8iEcLsDm3dcTZMLgtkq8sG5Zt6QyH9btf8A6ZQKDpw8ye6Q1ud\nSJle\r\n=5NjI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/touch-target":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.1eb032637.0_1578524411219_0.36329775255321084","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/checkbox","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5751cfc61049f1b037c54aceca68f70a76578b8b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":32,"integrity":"sha512-dhAyDxUymUU4LllaH48hAXhxO3zr7NZpN4LRImj16QBMBVSxY3/LJowajeBgfMY6cwgHEVxxmK8y1prYLH281A==","signatures":[{"sig":"MEQCIDz/uduPuJREW06HDf36wlEhPlQotteEDzzclrKFC4rRAiBSZBlYANNCm3GD16o0o6d6hkG2jTiYP0MIFVLQPapPjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8xCRA9TVsSAnZWagAAyF8P/1JjYGd1Qx9gD6OQWnYI\nq5Nb464ebytqv77865bHjhY/TZCEuHrZXqm4gHDOiQ1qnbgX3t6Uo3ZdrStN\nxVgQz5wXMeozfSdLZLz3QSdCMIt86uC0dB0MUQayn0QReB8Wy81PCllW5OPw\nnX+kGuLCjnb+5qne1YtL3N0CPtnLf8J8EQCQ8h0Hd8bS0VARN6G2lh/h7cVV\nlbJxsEbOXwgKauc7194cLdev0CTYugFQFFHxJlVvbKBBqPiaCvSsHawnTc9C\nehPZyevTW9YQ27drplcyMK4Yn96pLKS98lzT17JgRmmyIkOwA6Nw5cIHe6ir\nVw3JnCBGABHPIW7sX1+0mgFn4SyiPT0Q/QVK3ib8PiBC8esiVx94ZARz/X1y\nA5XucZcGjn+tlGIlmu/d2D5tc/hpWHmpUPJvniUcP5SuIZAASFfbtjren+W6\n3Ta5kH/A5Tb/wNBefO79z1RYCXVLav3qUKerBPwm4rLcJ5GSZNxRnwIQXv8w\nfdTB9txgn+QKHvOObt3SrwYEf+HoAYbvxAuwhMUPOPlzJQURLoxc4j1Iysr4\nJvaFsMsl/41SxtXcrL3UrkKMTQ3ZxBEzEBDd9oKeWS46r8u2xGiIImcqtzfm\nfM8ahWFUvzqv5gTroBESfutMUtnSWP0v5z4Rg2XQ5zth6p3q2qS1Mo+NbEDJ\nGONH\r\n=0zoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/touch-target":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5bc5ebfea.0_1578524464733_0.7861164851214455","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/checkbox","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.1112b8def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25b9ec21225e840313c3506f230bfdeebd159588","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.1112b8def.0.tgz","fileCount":32,"integrity":"sha512-6ozKhOgsssgBkjC8B04S7UVYedyyaO9XRaVjCJ6rRah5/Gopl9VlXDAXaJHM2lTUyI+P3DpWQepso3QcNhDG/Q==","signatures":[{"sig":"MEQCIByPH1T0c53tc5xch9KXH2FsDd36yIHPNMMnHGUbtVcMAiBvV/0VIq6+WzsRFM4Mjk4VTd6RBMpcfpaYLdOBkqQw8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TUCRA9TVsSAnZWagAAb3cP/28AKRXXa7Q6D3d2doO6\ngTtljs46c8k5guEXPH4Csl0eFBOYcpj/TYkwIKBAZgQLkH1ZC9iirkWmPB2A\n/rZnQIb9pSDuXz7ZtU7UrL4nOJsH44kEGJFdfONO+9/yHlrCMsPRyRg4jMM5\nBh4aeSDkE60iXWINCaHzsaUd+cEDNvbz1Q7szPx6o2viMFN5cVx49xyoqepY\nrKeeWO+HGzHPpa8nBcKGOMVUA3QZVUjLZw9R2vbWbGZIKR0Ba63RsaAq8jXA\n/SV9bIMtTztXWLOeW2C5FwAxqWv1P6X7xKEyGCm5jHNcYY/oYeDInq+IsxMn\ndDaXcB9ltjV57qMuwqXY7TNhuGgpVvaVzlc7RoYH32cSX4cU0z23t+Mr5lHN\nOsaJnC3VyLC/H/6CSWkupjsMRx/FG0zZzSILMtgpK/8X3QFljlRW+hlPhqn8\nSCF/ZBbGFAFcknTCeEqRwK37v2Uz/nfM9cDLAdwgAUqzW99TsvSMc//yNud6\nqShOVqYZZosnZT4NvWg1tpZZapeosouwxFJ9jVykAkoO1g0zR65gapVxWxMg\n0Af8v65y3ROiwuLXVM93b8knZPEM/+6D6G8N+S7vAQSyDDI/EmA+HGmWF0t9\nukfaM0kr0CrtDU4I+3T8cFS0+RP5/X0/NDre6Lu1dMEJLJ9Pa3FWBbN1INzQ\nBeIV\r\n=sbq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/touch-target":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.1112b8def.0_1578607828310_0.08522928437423638","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/checkbox","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.aab102017.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936ae5a79bc5c4e05cfc2f819cd407877f4377df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.aab102017.0.tgz","fileCount":32,"integrity":"sha512-m/o++QK7hGy0DzkHk4b9f3iPp+69qekUZP5v6F9h5HIjFEwO9sH/FukuvPQCTkc9AdWVR6dwiY6k4YY4nwpthA==","signatures":[{"sig":"MEUCIBBQxW6PxBgpN96H/HVr19JAJWCCg1G+8z0kOxfeufscAiEAh2S2CfeTvfojzJ/ACrkrtUaaB3Pf7+XrunbUHJpKGV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FwCRA9TVsSAnZWagAApSEP/0nHcUmelAt/j10MfoYp\nIzvUsDWk0VbZdWq3dEY1sjjmfdAn5pzEL2rVaPn0wFvK1lgG6owCIO+siJl1\n+lOHJ0IGk0wsV2dvOYTGGCBiC3nYQd+bHGKzZSXV8Thgkp9sUK7oTeh5CEOU\nEZUwPs+67ggW/6JFW4WQrPE3PRNdcfgZ0MLFzD0qa0Wp4GI/k/3GTMwgctAV\n+B7gUHqZ++/ROw0Pjk+kE8a2gyxeZf/coCszsL7c21mk0lPhhXJBU6GQhq7R\na056zmM39Knbtm86ik8EQhZRx2WLpN0wjsceJz39vjNyDQb9Jvv0p+zGsa7+\n3PaWrkyJJ0RkauoqpNTdN0NF4ZUHTedMARgsoAweKEmvgfamF69zpd3bmeoX\nUuNPuU7M7l56cSA8WdvPBeDSjJ3nIJpzfOTK310Rj6pnEWWclgkwGCk7xOqX\nYVUZNK+70VAkesFw44/0h2YNLbBTZDz0iA9+dPxaCqjSKpMv91ns+dGbbqu/\nhxxFhrJ4HxdIV3aBgUPTPz7yXBlVAoIp++E/QUCSY258kggzZ94f5chvtPZG\n9YK9ulLK918FIUvCdLLcqk5TLCDKOOukRdwiq96FrtUeOuTcSqo1UFDk/YIj\npEDR3eGyKs/O0tUZeEKgHymcmaJxU9QICuCBNVEu81eD3/NEB/azPnU047XC\nKqHu\r\n=wL7B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/touch-target":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.aab102017.0_1578615151769_0.10806452802181488","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/checkbox","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.426913342.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17427135373b87b870d1ed60e02bb3ff3074f459","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.426913342.0.tgz","fileCount":32,"integrity":"sha512-gTB+Z5t/FzSDGyFu2k6kGJSuj+AtYDnbXa7qrZlJj8SNwtbA8lNamJ1z0hO6duZplfSQjYivR4ViejOTJbVLEw==","signatures":[{"sig":"MEUCIHOqMslGWxgunLyDksbAlBTev28Gg2OVRHU3cIjLDI3rAiEA7y19aEaV23I2jo0r247ypzBk8DffkJZFoHpksg2Ej5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9b6CRA9TVsSAnZWagAAi90P/3tg56Q7ahmqC8g19ged\nXYJa22+PHOovjGcPgZdvk284lYzSbKvMKwYGFndhc7zQ5x5/Y+my/ddRVxYJ\nHfiq4nNxuVE+lctROoAAXXveibHhv5v3yTqbA6oMi7RNtfJl0CVswNv5HFwT\nrLcByQ+6+o0It+jFuz3Nii7dOXNCZes+1w26coQaF3nyz8GiA2LNyg2HeSg2\nO17j2EpIKH63MJSG5RapZFJy7jgb86Sfp8E7/NIgp49rhH0pfwwQqkeuy3ue\nGSuLOVp4fbCZprrzfXl5N+hPdYC0/P5RHw7XmRiL3DFHgkufZIwJHN1GcgbK\n4ohyHqXyWtbn3Yl9cYgD3Y6dD9CArKjHqByl+32Z9JKgJLs8PF1tjnbjSQ22\nZuJ8VqdxwfI6rDuQeZGNltd6k2t57rn9h24rxZnU6+RGbenoTgMKML7Fl/pg\ny1W2/ualZG8ISup2M1CLxQOEdCR29OiJg94FQgS/HldQCrm1tW10AYFjIJeI\n4VCO2hk6PzAboUG4U7fJNJ4j4jWGsgRfh9BMCO5TJ302MKyWmqMbJjsmF3Jr\n3OxhquPuXVox0klPzZWNFTM3+KvsOkWd87kV21M35ZccVeIVLyN2iISbTj3T\nsuiCEb7TMe/9sPQuMWFzH7unNlEZdWUTNTmtk7+R1nRqQg2yWxr0O0o3lILw\nukEo\r\n=GfPK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/touch-target":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.426913342.0_1578620666310_0.4291932545326105","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/checkbox","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae94be449d41f7566a150764cb61157b37e83a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d4ea9a706.0.tgz","fileCount":32,"integrity":"sha512-dFqXTrF2TvS8TiNhUOcLWppWCIE67LVF7oLMTielUnvoCjYkSXPu1Zi3AqrG9Au43lQay6rAZKc+Qh5HLD5DJA==","signatures":[{"sig":"MEYCIQC5DNgYt4R6tm7HxlP7lNzBnh53AJvJMUMXsOdirOZBhQIhAIpqkeSKL5wznNNrfSL/JXGDKkYzfgqVlwRnH7FhDngW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOPCRA9TVsSAnZWagAAU40P/iT/QJzVwIdEnxL6w6gr\nAh1wcpK9RP8FYbPQHbzIuNcwFTk7mFM/wj/4wSFNj605uPzLabq/7YM892hJ\n2SFALWicOkO1Fr/bn7uALlbcjA4X9gxc6GInNwawuhc+MdTHkYI4DBxYrQX4\nt29E0MeCgOkydqkfdx7TSQyQ7WCTd3DOL0ycyU/qo+bIT937+LZHoZpdqCpS\nnTI5ENYSnKOX1xeZkhSjNRfMBTsYJsb+iOg0T0IrHBi4xFXFUicgiNyq1Qxt\nu+fUEWF1pW4qtneBNpjRr4TEmy7orq4Sqd6npHkuMFozcEhyuaWuv3U/plGF\ndOndGrGDiWVZuP9SdmloIPIAHo9rFeaP/S1jda2MZeEv8z5r+cWco+JQuoaJ\numOGpJCCSmnE6w/Dx0MWFWHpgUW72jTZpHLzyzGlsu/+edmbruugjsbmmdke\nyHH9R5j4tJcuPlsx5liMba+cEl4cmXJYLR8k9VrHwKfpy5zgkDU6XPuV4N65\nKegTRzA+rTvsdMDwyd/7ICE+jYFCdDt+paKVSGHGSUqPkncrUvNrramH0Ncl\nuYL8gb+7h+3TYxjdE/BS8XaIN8dGMBl4WWGMrqea00VBT260sLvGFZ73OeAH\nL55YQqSC9bxJMlcaGSI09VYxMtPlM5129AfkdaWsd+xXYRBLrxPhXnc6HZro\nN2P0\r\n=Zyhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/touch-target":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d4ea9a706.0_1578677135296_0.20366879112332792","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/checkbox","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a59a4eab73b820b31d4cfbb87a5dbc3099104a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7d4ee2996.0.tgz","fileCount":32,"integrity":"sha512-CHoxBdxg3RyTx0Vzkeo3gS56PQQvIWZYGaDNZ/GtRa9sRtKkzeuoL+EgrFEEfpt7tPTe+LuR11FEGLf7i7OW8Q==","signatures":[{"sig":"MEYCIQDjSoM22wEgNsKQJsDq6Xar+PbQSXmff1ZZdaeq4RXfUAIhAJpH9bZhrVLr7N/y7rU9VUtmNxn4o1nYb2ur9jp23j+w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":503683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrzCRA9TVsSAnZWagAAT9oQAIxJThwj15H/8aEephT/\nYK5e87YBW8i4aaXpwRDsy74Od0rGd+rzVGWuihNWmZzUeULjSOiFFCKrZ3Vk\noIxYGooaxnd1vVt9cLqsVjxQdnGAIG1oydw+Hlp9IjlDTHK4y6l5Tq+IcvBo\nS2i9sqYcyv6hZQ0wYLQdwWB6ZpV3c8rNE3zAqyBBa+DUYLYh4UZyQas51qyM\nTxcyo6ynJaMXNC5j9hNZGfQBCJS+lT+rjX7zlzngXc7pdQTIIeiaasGgNy1H\n4vW5k9vhUH4i6XCRvGvk/oA7RVp4+PpSq/NugHbKnt3Yyw/ZJ5HVm4kdIAae\ncy+8WX8syVyA2Nxjue/oTjD5XvpoM+OvjsY5Q9RQNp+Rs3Ss2v7C2wZU1dsL\nCDos6dnxkTU6OIyRN1unshqm3s+lJ3AkxvePj1uOy3X6qMGaKX7Dqf/xfDQR\nF7MTGVqtPVsvFGHQVd5P/5i28G0iiLFn60M2VNUJs0+mhZhEaMLaFNymv5q4\nOnnM+tv9p0KoHPFNFQyLVCsdxq4YnCCOfbi6Ilhlnuzou5qmBOUChXd5ZL/l\n+6OdLpLHBeiv1Nnbt6zB7P9LMyIE+rBRLHoLA1LD/8sTMTVfmyzLVP739WP6\niHmVzrmP0FThRC840Gklh0L/tpEPyYL57VrLgf7331Fl2dnFXzB/tRFfezrC\nySnY\r\n=zLGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/touch-target":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7d4ee2996.0_1578679027326_0.5179413232615573","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/checkbox","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3660843ec841f5aa03a41c4d1b1c8e79e45093d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.981ec9b6f.0.tgz","fileCount":32,"integrity":"sha512-1MmAHOt6Gc/hMc0HPTeFzNnyNZwRgTMRfBK+pZV7JT4Mu0XiWWvSvqbgU/Up7VUdpoU6ysLNxsUDTpTYrKgg4w==","signatures":[{"sig":"MEUCID8tSlIcvvTtZ72TaNcRz/+Kd6t4aoNUfMPfdg/hFV8PAiEAypeMCma6JT3kZwIMqnp5zgpt9HlJB93zvA1y7Cb8Qio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAOCRA9TVsSAnZWagAAhGYP/i6iEjthadqizEKrhLly\np7dS477/+Ys49Mrg5J/GAUJFHbNQptzv36vyuSiClivobwSIN79KMg8iItxX\n1c0twyMVms0CMnJeOSZjb0QA2uacwdQFk6Cc6L8HyHCFpcQokjEVZb4MCVwT\n5rzCU6ycnIpXIvZmBLQ4rUdsWJbF/kGv3Mre+ypvaZsjqTkV2x/qWYhbA2jO\nex8kInRRaQQ6prGRrsrV5+fA+utgTUEQp2t3CvrkqYuTMeqODvJvkUAGpuPs\n9S37hmyuy1b83Eu46Jyp4kGo3XZJNgDEC81EmvdbZ08C2v2VqPxvJE8Vv1ah\nLnPD2m+6adUvuJeh1ANNjWknk2ZCN5wO8NrUEw8dCPPrf1RhaRTN4V1lDxTM\n8ELS6EaaOX+kSVzdg7Q4DK12h5nQoQ0IGdsH/2hqgcil0ahU+D77dNQdxUKZ\nXEyEEm960BuGGQpxrBaKXch0YHQWWJWm8HS9meJ3QQcMAe52WUi5ml80UJGI\nqLyX1IdyCc5nMR26vMrhDwjCeX4JCjKbQluxDWB2na2U/F1a35ruM7+dAyrN\nQB3HUZUTEnHAzJewNdKquWEvpRvP+65ulGVLOcna2EVST7KZOiJ0ZyuHJNQN\njrRte9eluHZBVM1YINDei7xRAGigsrbQXPm5fgC+PROkm6NmKtRLDOnE1E1K\n/WH0\r\n=C6cR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/touch-target":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.981ec9b6f.0_1578684429710_0.935076589936132","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/checkbox","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.737da83fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae865bab28e85cc47eb63f497a1c4bc1b65baf9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.737da83fc.0.tgz","fileCount":32,"integrity":"sha512-T1rWlhD8QjfAKo2uGa4GGcxiCxY4K3olyAz9ApqGHTBc59Vx2xg/5q/ZAWnORj1H2W1p1BKe6JWwqRngTUFHgw==","signatures":[{"sig":"MEUCIFYQWxFj0GIlO4/de0yE560uKGq77bXqhXT40YvT36RLAiEA3MVrjxB/HoP1NysAUB4qkmccLMcBkWW9EKr3oZpq0aM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpICRA9TVsSAnZWagAApsgP/2twKpRqqZM2jEVYCbAw\nyCaG8rV/nmT8xGR3ervdPg0hgcDTSzREXbnCKUo/9voemLLTUmgXnyeHt2Ii\ndQnIn4/eL7hxw8sM1gnFzNfsfeMzS3UdwibQ8IMLMZ0vhRae9UA3W2ZEQnqX\nlyBtLrI/G9TKTHeidJH+K3A40bBiGjhsujszhyiDRC4W2oMliSaSbJCrKqUr\nSGMewC8GJiJ/GWL/LsZdn+nXC50nFBBh4QSKu1S7Y5fnDVP7srNYKd20f9Qe\n/1NgUl5XJrn0EJ4qguxMh0TDvRmiIYtVN/O/g+YyiJGJ1yKp6blHkRfTREUe\nYFQaoTwPevbs2Dz1dhhA9V3XrTJ3LaZWMrYYgNmJRuQbqunFf4P7Q0v023iN\nqmz5WgoAzBLdiE0LInp3+VC5rt5ViFc0siC7LNhH+y4PtoAWbYVGVkjhBwEE\nukNR6LvnLOTnZkr9IGrAGxZHgZNswaU36vlTS7JOuZj0JKKIa/4NKWeqCHOc\nc212dguFW1GT2agAfQP+GRIEZ3VK6T/S/EwmPaRtTYgtGmNfF2t1Jm24PnZX\nEsyFFCjbMrjwfWAw5NsWFIRFhIilgJCHd0d+/q44rjqPErAh26J41I6QRa3V\nFbyuVN6J7s4UHcl4BnPv40FQOvNz10lCPxZ7PVlvNyvwEyxFYpxar1pS3NHJ\niQsT\r\n=ZYnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/touch-target":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.737da83fc.0_1578691144057_0.2719192788409801","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/checkbox","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffb6d1d02d3f0cdc8ea6b54dc0c1729ae07f36d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.aca8e6c18.0.tgz","fileCount":32,"integrity":"sha512-wEgiy+0LulTJsJeY7fCQ3TpEXveI+xPT6Z5c1lZeADmxOuWi9lv7W1jwJs/gKu2oGgT/TGLKFXdJgHteoewXkQ==","signatures":[{"sig":"MEUCIAIuat5s6U5+OZB24Kn4acYyxyWafq/ws5378+m/kHxYAiEArXw141UVrbTfY8ci6RrG5bn9MamQYmpDaStffCcYosQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXcCRA9TVsSAnZWagAA0zIQAJqUmZadpyx/L/nFRUfX\nnLg5xYSLYK91ZAK3BFjFiuZ8B3PX5f0L8KzWWawfZwhciX8bKlZlSkK+z8Zx\n8J/fkzKqOSo7djAUU41LP4WLV9ZEJqY6gDNcsKTH1fBF5ybGuB8qpnYVRlz6\nZpUPC5WEFzvPyYQoHlizY0zF75rjCJBPdq7sC5N0n7YMxupz8mODTJ7c9L9i\ng9ArbKAjjuzOVnB4h6wlCnitR6B2rB1zu3Adkj3KqCGspFVDBgW6ZBOmJvvf\nVFTVWtQdqbMnUCai/a0C4xhG9KRQCIQJyF4bu3QO42jkEkYh01Ckh9ZtHQaF\nbs3QtljRe7mwCFFvDoaiw4tg6Qc6Eyi5xfPJE5f8dAtr5uEQEUonbDP703Hx\nqBswfhe/0rG4QLp7kn7WzvlTeqMQl0Mi1syOoFQSbz81cSofBuAwxJuM82p/\nhGLOJX3Q9HDMP9Qc/tZAxu/7f4m6ZH7PuSMqmOsxFFubgBwyGHHMNAlxIS0j\n4DfNHHPlEZ7daTqnpkgnQ+ECb4iz+Ltl0ImjL90CWhZFeE0+cuvvZZkt9RuC\n2jNziHDVizsTznMuDUpymMLa7lUWilMrJ1rW5gTJzQnPln8p+I9a2DCD3LqH\n+G9N2il05ARU1BW14dgJajFaVWWFWkvT6Cy+2djX2cg7y4kSP95ajUm512W3\nDr2Q\r\n=PbqM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/touch-target":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.aca8e6c18.0_1578943962907_0.6158407570803368","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/checkbox","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3a2fbff2ef612ee1ccf943f6612b3f6a6af2fff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c38d84e21.0.tgz","fileCount":32,"integrity":"sha512-5y/b4Vjip5cJD1+8aHD0fU/2/LWDn3mz+KaduhmF2ib7Q/h0VBq50nb5qpB7nysE5rAze4gnLgqYI/Rcckwjlw==","signatures":[{"sig":"MEUCIQDbvGs/8om/3HRzCHeQEkruW27k04J8I00WxWPRZGlptgIgN6xBWUJYRggMiMPZdsDoRlKpFFLcOO6ZozXv2cyIsXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOudCRA9TVsSAnZWagAAAF8QAIpzvtRk3Z7CcTSczh+V\nY2uHRKFjTAU4+cqwDTvWyr9XVra/9K+QWVBp93mHLrGUtTbHMRLqsc5ZaVcH\nfQAbZmU0n5SHWlsJHZU7RZlYzA1UNtezZJ50wM92ifKgmnCvftb3g/TnSICI\n1s6cQ+VLk2CxjIelwln3gHr9zK8AFBzKDEQ+AgRuBwQCvPLuHSV3rgLJr/B+\nob3O0bqtFrfZDIkpVHexXJRxQVfmlYClJtYUdadOYw8zWvOTg3h/t8O0vfwd\nWosbFTUm8VsJBQ4COyJ+9T1sDU7N8R1ME0LsW5L9ePxHURhJQkPZLeiIPh5r\nFW5pgrYvuhBC0JCEgnR1344xzo2agpzA6VSOJDO21uivuNZeJzetn9emNrpd\nkbG7VDOg7lsaMBCXCfmbgDATH1fvUTrF2RViT9TUVaa9NPFIJOBOyzi2iddO\nGktJO/wGfCwiJLNh4qKRF8OkFXotMugFBcCarDbstopifAiOvcE/AtDPhZh2\nR6Wb6C4R3PkI12nXN8zyD4VB1G/dkROa+fR3q6SoLnJFcQzr+z5E9P5fPI/1\nZtHTMYiEajTvHYt4qQVOsgZfhSUDaOiRbFEJvQ3fsNq4jU2SohaCUcC1AvL9\nneLltDxFHST8BOL4bzIX8oPRpLIAf5EvBiPoCGxQjxgGrl7Qnl9QrDhMOsfv\nvaeq\r\n=YZUN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/touch-target":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c38d84e21.0_1578953628633_0.5604034635035304","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/checkbox","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1069e36f0f5012560270640c3e200d5f7f17259e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a4db5fbad.0.tgz","fileCount":32,"integrity":"sha512-h4Qw9VI+PR5+wV7k7miVfIAcyBTalk/s/r6LdFvRgpzhrQzWfPL3Vs94ZVgBcKl5hfe4j3Na6yB7oq8ihbR/UQ==","signatures":[{"sig":"MEUCIQCRCVaEO0tTA/JeZTa6OCLkkMVdZ/L/oxG8KjU85j9hMwIgfjoojzpWbMvMyvffgHe4bwST6OoCMDFtRg1kYpVpv7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRICRA9TVsSAnZWagAA+90P+weoygMRDLY6/CQfVxo3\nS5VW9QsJg5oeJmRsfMIODTCpu5koV/Dvl64xmKZ1xdgdZetBuCGrH+dZEq9J\nlVOMlDC1HDPeLaekxNv8f0BTxflMqAqpyBO1MyMH4YOrGhy1ZSdpCJpWvevt\nnm0GL7J8qNQjXd2HyYmPQxorvfgr2IqvhGPLCVZA3Ult4w/Zezo9JyH/uzgb\nokozxpjtj88SMDK4s3fMhGdkCLCSTE365ReTHEWeXCbtE+sQyA+Sh2aBhvNl\nzxfRIk7GObQn+g/4dvwHNqHu24mJD0/wmxiX8tq/+ajt+S7k4imGrtF1gkLY\nLBeie9ctwV0oL50TGPIaV8+/EzQGpFf76V3O8OVPIdIosiRh9clIvX4Ztqow\nqI4jtWfZRWRnZFeuNS0j0kHLy+df72wufrvdLyX/vvhR1sXlG0UUD7P1gJgl\nDB+lX1Yn6++VypTHjp0UOngVjknQYN7Qh9QIpSQ+iQwcOCOQFfxOrfwxqeOa\nRCOcQdSvWZxX22/IGqRXDWQ5WqAI1Mn2nBDN7E1bxWDRF1h8s7iVK7/wSVGL\nGMQ5LeuneuL/hUS7EEd6wY7MN5olHLhIBtij6eWNk+nxsy22oYbJ4U2ACJHi\ntDT/pR7Pniyww7Enfr4alq++yhFUvVJ2Q+BPKL/w+2o1ax8A/Drfi9KYcgos\ngorg\r\n=iUcp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/touch-target":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a4db5fbad.0_1578968135674_0.03647604848032615","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/checkbox","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.faa9af310.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de1d53018a704aa28223129b0b367ce3625783b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.faa9af310.0.tgz","fileCount":37,"integrity":"sha512-uX1bALrM279C+bl0f9pzofe/VZjWxDaivdNp/6Zv8CuUK2jsf6I/9Sw+/wwcctlnY1zzjaHnMOSkoyuuG980Ow==","signatures":[{"sig":"MEUCIFiUlj1KbuSCGBAZphWXH4NzqrtwE2bCsQvFR0Us+t8gAiEAy6jXzePLaFRflE60TUdFfGKqFEPvnOmbQYlaZ+Gk36w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfH1CRA9TVsSAnZWagAAvaUQAInQ87gMN0fMv0dlu2Rz\n2qdaC89ZO5MAm7a24SI1VwGs5fZ90FYgY5lnqmPYKR62iU3GbL4YxONp/ROB\nb6WgR9NqjRdPmpVbriMcIBQuhpDHkdbyVyWzZltVVrYI3lxPYGX/qHj4JG6A\noxTnyJmqq3kIKD0tYHo8V+idoptGh7Fwb6y69RDZ3mixvphziKubXMXIaHtY\nLZplrez+7Q17yFYDsedfDdVuwoat5lLPgnH/8d7iiWHvYLLabCk9xHLr6+Hs\nK3fHhJCA/YlGLK3uCiT4AqW3pc63PMNIFSxx9F2u+o3vXRX5AT0b8eeEymr8\nsm3d/8GPAwISuZ1xovS9UFFl93KRQrj5+PSxHHWP6pQJ930+tOpr3R8Il4Zh\nfLh0FHLWaIKcUpKOWiCIdug2vHV/2fHZ6FWEglfwYnQAZX/AnPmjLzwgRndJ\ntTwpY7/knz55GQSN+LbD4RkEwoN31HUuo8iNVzrHgeGWkja/kELQ0FQVriQE\nM1IdjCBx9zuiKCD1fbAOHOlMZS0inW24HBNr2XRScy381He0flPwvCJnpG1y\n3ZVRDfHwNvmygyjeJG4BvpxFLrDKz6HI36ZrzB6yn7nAsBPgit3L+mi+L1Uq\n0EY+MLoRecMdelN0r+4Gfgoz3thQ5tqFb7zVMyFv+YCprns+VyeDdTGCoCBC\nOCbR\r\n=WNY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/touch-target":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.faa9af310.0_1579020788981_0.3695218959049722","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/checkbox","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.60354c577.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1e69e6d53756fc5bb9de4171263185a32d7f569","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.60354c577.0.tgz","fileCount":37,"integrity":"sha512-Z+b9uKrH43APJiafNZo+YI72jzBExujy2r16n8WNaNqLSixZ7lVnXPI7O4soUQQ1aMJW7Lk149SnGEDeZcc3rg==","signatures":[{"sig":"MEQCIHHa3K0LvbBBBza26A+09zzUG3mYN8xjgSYLuADXAUE8AiBGRMDLLmrajlQvOWMWN4EsP4gfmMj6yrvS6ZbvNcnyyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSxCRA9TVsSAnZWagAAgLgP/1VBn9rt+myIa7qWjxPu\n9DdGtJpldzlqKVRUFj8+qmvqzeGW1y5H2/C4eVpHPpg36kI7Nv5Zz7SGjswe\nE0G/25U2Va90Q174WNakL3b8RYdjlSIGDvfu+Rl5ZntKEYSBz2uO8WxZialx\nrGN6iJEz6s2kNV1u6jw2Xmt0iwYMXkx62kPZTSp12KNsDg5zkvvfEwV0ruib\nbFr9BdegBzzqGWPyMEm6L8gQJuruJskJT4PVDhOviWTGnYqGvds45hHh6Cop\ndYNXlZN7kdIdpBIIYwlt3tfPX9TYQagf8JPwEoMnYGf6L/qL5Ev2TiSiPYMv\nk2b5CuFw1Z4Ky6JQESz9iSfz/6AGPm9IZBsQjp3b9xJS6IsZVVpDVij9jMV0\nAfgXmJc1pgml4UUi+nSJmIbHVVpNmfe3hEkpmfWCG/3+rE90roeHeizBm7re\nxFUW5FvV/2iSol1g36FB5K446kQuEJpm4ZAsh4Kdtrk5ktwDvJb31KZJ3yIm\nGDAzy+OS19ADkV/MoGRLiYyNzd8Je6uovfFFHojoi2q+pITjvJt1H/SvUZwU\nKNvfj+IjnCduTnyu82VzDAQ5lPW80XP6tN33QtCgBuxlqXmd/big4fQgOlQ5\nycJwQ37lmq3I9maI3wxb+sSmiXMSX/hbGSND/eJOlhEVEHOiORsvnO+Fxlzz\nUYxM\r\n=Gcfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/touch-target":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.60354c577.0_1579041969003_0.7869929691884581","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/checkbox","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c705e8efe940af9feda3370738e8f569ea109c03","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d07c78daa.0.tgz","fileCount":37,"integrity":"sha512-bF8jRfyX1Fme/PUjjWfJTQAsMK1h7L5CAypNENq9wLynSuxKDCTKX/KeiLhzi7HtzC5nZI9TKt1lOYQveRn57w==","signatures":[{"sig":"MEUCIQDln/bi3BuLsxfS8jZXv/ufDcwVTfLqJPm669lFS7IGtwIgICNJr4zXY3EGEPxOPLulQIimGv49u4ngrsgjmyXZl+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEPCRA9TVsSAnZWagAAUssP/iUUwEOSZvGgEkj5aXW1\ntplop2jpxjBFIn+4mxaDTOmOAGKJ0j/uwbxF7VvX2RNdVrY0pTDwpMxU3TKm\nX/MpRS6mNmCCLyoFlxxxjkJAbzpctYhl8stnmTiSWTWLyOG9D3U1gVAV9U6I\nD4dbXSTrh/WINeS/d6q4raHbbMJeqBSb0wzuU/+u4RvniuO/vtW6QahfwYyG\nBtS439xZCvpIjZDPEHvDoAKN9WNrkpGPd7+A8bixhbF1XFsaP2e3wbzOlHzN\n5iv0OJy2U9DxBSmBQbwo/vsR1O90YG0wYVLb8xiGa+uIEypcsatP1kRNmXjM\nGFYH2WWYliISZ3J31r9a83d9TbT/wAbr+8XDf6NxvDYiuTbmEu5taK2T89RF\ndCOI7LJzoGn8zAHuBHbac5isjLxOpMX7pd3skajDVes/pTDWDvH7Fbrtv0rY\nJNkJTOujDJfMpPN4MGVHvqn59ceeYknmiTfKv8K8X1Zg9KZJjLu9KSKJebJw\ni/bmVcWxT+LOuSzIYhhnNQbLNn+CD5yov++yBhfnuV/EHQeMFFbyfRIX/hRC\nY6769yoEpXvkH6n9tLhtpYFHUIAEMozMdOuDmUPaQ9EZzv6IfOyyjM092SqC\nSeKDMS3jH8tRQZ+CVdZvM18QijdhKLoxU8QFZgam3WqYlDCNy94Dd3olQ7Uf\n/tjL\r\n=Dm0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/touch-target":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d07c78daa.0_1579045135091_0.243918086573369","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/checkbox","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22254bd693b0c170219fe0cf0df5d0aa7af90aa9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":37,"integrity":"sha512-Swxbwecb+JnGxJ2DWs8EviDFE2E0RP6PL6VnHFb7BpxK2rfdD5OWcND9+H7nLrWxKV79Fj/FoxNoHw0HlO59vA==","signatures":[{"sig":"MEYCIQDO+iWyyYn+YqJlBnAkmiebnxpe5wIL5azdmDldRI8atwIhAPoY4K3SJ12P7eR1lrv8+yBm/ZNxTutu16qxgNciLkfb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4yCRA9TVsSAnZWagAAq6MP/RQJZGsgOgzfFlCsnViR\ngDFzVdhHA3cFozliW/97gSde+RaQ+z2K8bIPwlQ5Ocz6ubF8si2HYMah57UC\na+DqnK/XpCQD9EuGFNaXd6aKHDbs213clHMebUUxAuOLGrXF957FVrGketjM\nxGiahInvlYEWaDfEAACVhoJ+17/nwqwYwbOjpKLuPLei+0QSuq9L7nPYQScV\n9ouym8V+gsdzkaVUwY5c8ySKQbloSKyPz7FvRoa96iSLJkOnhew7hWLtlBDD\n+e3zZf39lJ01RyoeOn7jH9f0c9GVjsw8YQ/BCpHnJKfSLHucJNqC6seh5/Bj\nBMz1stO7rxjFNlcYDpHwQm/NeBmOQpSBZtFj0cjEQVYOgQLzWJ47Ox6Zg2hw\nUDiWoUekQFUtmBIKMjDkuG7ubwtFBCtyNcQBkfUAoiDOb8eShSVmdvcSVUGA\nJh5beQxMLc3tEKosl+4w6LYNl3G/IR5jenbOznd5ZuWvX9juKS3B5aKnoq8M\nw+VE/uSsSh4zJ/hCAWyYlqIUKRCY2GwSdEsVKDF/B2LtYYLahLtY+qHoh6h6\naf4Z2n7iPUouGTroUNJQTTJC6J9+0OoF9GfzApl2piTvnR1Xr9szhD3yDGy3\nkHmxpFx/idHRR5Dbn8Te0aHscwPLltZ/UeHoNcc6uzsgBPxV5fXldeMhD0Mw\nCnOI\r\n=rn4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/touch-target":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.8ddd5c6dc.0_1579052594052_0.07067540386706139","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/checkbox","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a9511d870.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12e66b95be1ef98342a4ffea214483b513028f1e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a9511d870.0.tgz","fileCount":37,"integrity":"sha512-u6J3FXmS/HRZl8yzkrYkP+/PHk+/1+tvxyS7jbDenT24/s3GrehyfB9b0J354MGnCDaA5LQ5lUtWR6wc4N3xpA==","signatures":[{"sig":"MEUCIQCgZ68WUybCTMMNQaDC4m59O0ri3HCwW7N9FzPtNB1IMQIgXWcl7BQISZrhZoLVnxDpoxQyT2MVNa2xRgEQpFNMcsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OrCRA9TVsSAnZWagAAAPMP/R0WGilSfbGX77HkME9f\nfzeEDbQlAzibLeiGA6gAZ7Qi34JqeX+MAWQmTAPNd/1ygdGX5E9R/F+IVB5K\n2CWPuPDKuVWfO0Dsnzfy94V+gBp4Nb8CZe2KgJJL/xxhoexlLM9r+c/jbiEM\nN3xF3E/9qevqpeq9uyEzMq/pZEHstw/UFFaEVDQ9GoRZq8wUeBVVMAZA6Geb\nxnVpZhce0mnKfaL/ZUmYR7lBnC4Mi3ARD3yqKVbnDyfIV033jxWTphsm1C2r\nUnXQi+fzg72bWMO8DewPc+hLoOYXRe/RgcbNHXodES+VMdcI4uWDyztlJokG\n6WAkGWgczXUeAK3bykH7cuH3KZAZxFdjoDhKFr7QiRzXbaQp4M+SJI7O62vr\ne7s0zJrCPI39H/TLA7iFuoehVuz/D00fxBRmj62Y8Ww4NG+KDsTIyPY+Wrgz\nxM1lA+FTvPWUIXUHFlkRoTvq6Hs2qXb/PEZOmytmxUBoUhQAUkEC5V78zmUb\nd7cnr/BqaowsyXVIDLfS427buN78DZId6xC+Jih230EXuuDr/yYLsKaNfMNL\n2qaT23Vaosvq1JVyNrH1tuZuC+b0N1YKxa7ogSUiis6YW4nkDGKY3OwRftlp\nAEODDKPKH6y2Xbz56gtOFdMiBC2697j6/GUr5rEKgyAQsJrYvMyzVDPaQNUG\nNw1x\r\n=D7FR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/touch-target":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a9511d870.0_1579115435119_0.9500500293121832","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/checkbox","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a32e14ed3c7ab66c7489b5b79d592a5700ca150b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7c8583c4c.0.tgz","fileCount":37,"integrity":"sha512-9kh+ZpmZzQHe6Zd8OiDOg/4JMyEAQZnLHhAzME/buhHEo0rl+Qz+Bje/f8s7hKblaucJLmVuYfEdSSTXPNId6w==","signatures":[{"sig":"MEUCIHQOcLhhaKYWue/Bx1plzhrOMVgb/R8P+8baeDOGWaIaAiEAvC+5SDMMEMmHobyKNMqqPZNAHH9i2SYddxc9aBhnQOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5avCRA9TVsSAnZWagAAnWcP/1BPxRqbd5Vk+5IMDfPU\nvD9HMwQ3L6SXjOatFmR+6hDZTKoZN5/eep92vUSmg+ncfVMYNuOyL1DtkPCi\nzDWDyeG8Gas8qCzsj8Qk0HElPSHxgLQFxWMzlYoTWaLdr+rcW6+qhdbEacFw\nxvSoihaB/MCOObJt3oDy0AMupjBzPWeL5xnerzFuxME9QfoaKq3vHy1Ka7aD\nom1fRvHwE+q3/6twBdQ1IJXgbHsr/LXbtXEiMbiFDqvtl87BHHakt7S6jaOo\nbPQCTUeHLDmDD9feY7xyEJ0cm9iELeT3RLIk/huhJIscuxA+eZCb8ZhbWJ7G\nyAfGQOkqrBdxzmJFbggYBIGf0hHj3OaABMC2cd6Ok8A93G/+3Xc4PCfKKkRp\nNmLc29koSDIapR8zWS+s7q3sLsv86OlhamMBW09sq4O/AmOV51ZX5vcUoYHQ\nXBYQznZ2goDzrgD+Kp3NS27B81T93vCSQe3NPQc10MHnpe0zdD2uT0EE2INe\nsl7tFjbZe5K2GpSchaIZsTnKawILwGfOfbs1FUrqardKojTX6RJ7YFToK/NI\nAaA0aGIu/dmEg+LxtAHXHbh0m7u23W155sXVQzVsoOLhl4wNthEwcIoruLJl\n0qgoKZXl6CVaUMYAe0iEQLhf/eJrwXjkX34r+M83VXJfjRjeGipGJDf10TLo\n7UxV\r\n=LoaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/touch-target":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7c8583c4c.0_1579128494778_0.766615417369874","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/checkbox","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ff0998a6fe5be69f0592601e994ce2d847c88bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5d4b82bac.0.tgz","fileCount":37,"integrity":"sha512-CUKUoloYwzyeNdWxra5ltVzdMw+aW3b3fcZq0UupS6kwIB8L1MlTJrPPaYbZbJsJfWbPe5hn1+DPHIdkvK5fXA==","signatures":[{"sig":"MEQCIHMN1AGTPwyzTRf1gL8QWhTaOYWrtSDfbXvdp7e68OWaAiADyUdIMnMPkzyHA7ss7seK2/cnSOZrLM15Sjc+5cT/3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bFCRA9TVsSAnZWagAAslAP/A/lYtwPpJR2jRwTcZyF\nI99fx/40b5j3vdIAqZ/yca+HPB6c75Bh7qqqCOxLvsakrFzHUAjTZ++7Jewy\nKZUZGWOcHJNayd87DdfAESzkWjGTCI/QoGepFyrBUg7KO+y63Z+QOqMqIT/K\nNwXI0D5QNAR1Crseo+Xxl22cMyGlnTRHKLVyXoy4laOZfoD2sC0Bk33Cx4jj\nZd3U9bG7yux/gXb/C/LwaJ8LnhwIASwru/FEeUC/LC+SHW8lKIf0ihjw5HA0\nICQOL7GPmdCt0rzNiipfQtZae9YVzRO+EDjEnXpd+K2MGem+7Vm2TMQxAjOV\nAX0KR7Hc55vl04zjFmslH+KwJj1ixNWzbUU810GAsw0Ey/WGzVSpF6X9zF64\nt7VoRjzgCjMRV17LZChZKrJ6dK3L+7yaFAqO4SQflYfWwfQ/a/oLhKbfDo5m\nmydUAvu7Fy1w6s+gzkVD6d677WCpRxzeVaUyCPgb6WuUAFPTJVmgxCXjndan\ngdYWmmODqH5fnjM0EN9HEAOV3iiMSF2MBnFJXl0JwIFX+/VZSYBHVGLm/VpX\nBf3FCmWzgngE2CZQNTfkSxM1+RwkZvDm6YHkXJXJoLkWb9l7KHhRqQzSYO6i\nBfy213hL3GFvGRdvlf4IaUv/4h7sPFujb97KoR1RtTgGActhF6nbE4r/V1j7\n3l3k\r\n=gNqP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/touch-target":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5d4b82bac.0_1579128515679_0.9339899608725628","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/checkbox","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c905b81ad2ab2442f6e7bce058b8c6d3c93316e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.57d0186e4.0.tgz","fileCount":37,"integrity":"sha512-AAM1qw2oywT3XTkWw0VsDp6XFG2OR/LBvaKK1hjhVoIQLfTMbxZ2CLEETvpjv80Fg1oTX2C7j8rkwSQyPpTUXg==","signatures":[{"sig":"MEUCIQD73zD+YOrvoiXdO+iG6mBlWGTA7xgh5VYt1jSMAu/8JgIgVyyU12AciW2gkQ4DSm213PwkOiU8/etc1c58jwzEJYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjGCRA9TVsSAnZWagAAn50P+wUjCUWafj9pT1MvKVJh\nohEJxU6lFgyZOR7F9T/dNCiLFcbDkNu/0Tb+EDY/vaLEFofPrVSj/w5DrZgi\nY7xXqL+qxZU91L7A8pBXB+GEVILmcNpkgj1xkNNGaSirrJs1GrVtQIIu0Qr0\nkoyZR+BLSvn1AxgEpWZZnaJRUjRU2u6KT4ea6k0LO7jo8rrFsb5joph7GrcJ\nQDgDm+KCZh19qVgUPC4VtZoVxaUOzUd9ZmSlhTuxUy/E5NX16he7lZArhqul\neoYOtjRaoanW4xf8RjKAqhOXFn+Bs17JPEuWDr4LbJi/Hyczfu7PWIAEGLFe\nO1hALMR1c3r4L31znM22RM6CSbD2GH5Jk+nh3kgZfgGF0+YWL08LWVuMM1o/\ngjmP+81j8Gdjr6vuXgsRFHNahibrQ+5lk9zrW2wZpSjFacmfOMevdujTA7AN\n0kBhMlL6r//JWG+JUaIkn3iQcdC1xzX4Brx/zP7uhB7uhplSmrvtUMmI385N\n5fMq8e27BLgqYKevXYB8+qfDTYeAx3IG31Rkwht2RF4U7SKk69RHmobli3dV\nF1TaB6yOXrdDFxB266pHYYd3XjQ8uJioEWfgpwx6fBDepfuWskKM3lFe/PoY\nnVN7yxsKqzs8p6y44aJD6IPwdEIN5ciUxAiNymZEBoIiSDu+yWAiJMm1x8Jm\nyVqN\r\n=T2g+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/touch-target":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.57d0186e4.0_1579198662017_0.260589558311773","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/checkbox","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"265e67fca1bedef06b11280f7d443aedaa804d95","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.071a6ab70.0.tgz","fileCount":37,"integrity":"sha512-Gb3B+Kk07vqRyn2TZuleGtZRS+DwbUu/23KM1VYMtneFwttufey4OL5oRDudt4EXrzT+kJKNFCdjyMmiafN4sg==","signatures":[{"sig":"MEUCIBOyTpMrCsmc0zjcJwADF4jv2vrWgiZtNpD8oOdg1rRvAiEAs/g3h9R4Su+nPyHsKC+dWhp2E0UvnBGvx4rutd8+XF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpHCRA9TVsSAnZWagAAX7gP/2TPbkvucH5r1LEQdZLe\nAaT1U83afHUEzyyyWHUINbUdk758+sgZ+qxsshpIqrQk3KQBdZ4sqSA7IgKS\nzv/DVLcRkPADgZdH3u4BC7uwhxdBZOcemBYrc653Mc/D2B4qDB+JBCDioszt\n99kpnId3poYkZjNl5hGEWIF2pbRNwX8wrLyCkYONEjU8M+K0WLm2FWL92GKH\n2XUVz4Oa6mCXLVfozLqTpPnuXbGZ98YIO5o915g+frYHnrAYmA27ZzY11rgK\nOaHtVCt1w1dazkx5mNfWpDOlZ/JS3+wbUY9bPP7oj8mkzCHnR90rBrviV4OA\nNVpq2bX8r8jVIEvu3rqhAJN0hkJ0N5jBcljYQ5Wb6erc2ioM3TCh9hEUcUt2\neYrJpUpccXVKc6VfiLoEWzhOke9MksW4dgsVA3OGtHqO1GpCD/TClermQRM1\n2fYIG3dUqpVZL/lN2X0+WI8G2h8S8qiEZ9A+KgJsCC5semqI1R/mpzQrBE6U\nSGKn+yyI8aMrnh7nPSzK2qi3wsJ7XmQ0c1dVGlQLKJi6OtG5yW88jC/cc5kC\nzNpWuwfu2E4v7Aq73OaXvEs0xBvK5ztYWuN2uxK2yf62R6iq6jHOqFfdgpJa\n1nuDMmV1Etk+UBuokObIEQboxIAM9icZ4iq+TKfuiYAe3IFdsSjlYTpIY4b6\n4RSh\r\n=Eg7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/touch-target":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.071a6ab70.0_1579199047321_0.09958570766661845","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/checkbox","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c184aa99b6acf465e6602035cc475525f5148e6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.22e0cb618.0.tgz","fileCount":37,"integrity":"sha512-PrroKcJNyMO3tyH0gYxzXwcz/JVb5UBFQ7S3xemU8mDuyNzrJqRTWx7a1+VcuolQgvGUYxKY2piaLbM2lo+HKQ==","signatures":[{"sig":"MEUCIBzyhk1zyQRkUvJ6+Nmy8ChvgY/W5OgynbdAFqG69WSmAiEA+LmMWiqCYEw+hiG2wG4qtwujCyXae7MnxD5xAi0/onA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+uCRA9TVsSAnZWagAAuS0P/0GGafaM/1yUItR9iHGT\nfGYVgfb7KAnZFck07quGjXWumzBaOg4QTXc2arFuQz6P8Lfz4+hxP6Zj7Ung\nXSUCnsZzG/smisTAGKVkW3gV+vYsMLVwlr2cUuZAgxW78G3hwRo3vkW8QBIs\nZYaR4elTOqv+q13HfA12GCDy5cDXk4Dt7LkSYMresn+nSB3+C2nC9wj9HRNG\njNKdi0rKuRqKUoJthyX6ViJJmTuPpWDji+jHgHt9KiwG2pz9I46ra4yy+Lk6\nx3U2RyYt7OqYLXaMMf/Zz1znyZXLYu3LIWbVBipr8vuHDl18RQZ7C2ACE8eP\n/U91HF4hzXZu+ktf9uQabtcJUyj2h/jdt6UTVA+36InTUoUxVqX4Lyuogr/c\nmjlgNxmtLe3TZJzUoTbCm9v2bUWoXgxU5SCo6rFdKFK8CjueTYn610HgdY9M\nMH0fMRd7OjoNGrcOPF0ssQ4+l6p9uF/KSBFY/CzGQUeUXaJIaHMLjoVwEVOT\nJDqGuRbEr6ZQPEGjdi9d7YorGSOm3fNfMgTaqbQTapynLNBiwXXymh8RJaSo\n5yZkTHLr1SZofM9gdDBZgG5mMwQFnqzLI0OL+LSATqYdED2tw0sA4TYHXzMn\npWDgTe31CcH0V0WA6PFfHqMMSp0Ui2/0gh6RU5McF1lz4zq8vJJAuy/KE3fI\neSdD\r\n=+Cdx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/touch-target":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.22e0cb618.0_1579200430392_0.34885453377842635","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/checkbox","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b42bdf2e2b76b4bfbe7d964568553804c2a51b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.f16f15b8f.0.tgz","fileCount":37,"integrity":"sha512-P1hIEg32D0D2bXO6+eLdP5TEI8YhjDlpFbx6ezmNaGax7cJI288SwlE3884izcS/BgMzfJphdmy5FfPr23Ldjw==","signatures":[{"sig":"MEYCIQCe6h7hHTBGjTM4QG+3n0Ufo1tYljLtGfClYneXD4gNawIhAPiGaNgvYhMqM7kWsoI8UKkogE5LBey9kjZD2IODaCJ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPq+CRA9TVsSAnZWagAAIhgP/2itezYu6GBpmn5byxyy\nl8uuKldGqLY8VbyRsXqcc/5Wu/UlYZuV4nbJhvRTL1mH9Kj1bxcxqA2ZHK9F\n3/riWvyCyDTJbD4srzLtw8pPxqEZr7SudW8fVhW9u9sRHeYTbgSu6dSxStDe\nohSmhRYRDoNx0jr+xbN7od+nx4u2Fxkm6sYsTVdPG1E3Ycg5OiYlIgGVknQB\n49+8RChzzeRd+e0NbjaNVE1ysNvLNz4tazZllov+BLzt4GJU+ihAMJV0YMQz\npJjEBrBcHapQN9YRHfp8RhG4qfcM4/w9CIAsYgJQ+X9kwPNV4r1cX+E5G21b\noFMXsQg2CEHYXgN1XrVXI7eanRJxHXLn3IgfIcZqQALdNx9rawW67j2RhX/G\nAmhdInD/uofVBW5Zlg7q8Eogotz/LK7NB5MP3zhYqxr9PaqilrF351MHOo/g\nf1VkwkcXQleHAEgTdzeQOO8nDktURjc7mclqcsMg6cSfC41LBVzAwCsiUKs7\ncRDYybMqcIOKLehXUQlTcmwqeKEMh3q1OcfFLRCaPbJ9q+QWRMtCOAUdmGtg\noP46zBAnhNYEp4zPuzIGwfb2YwxtEfEHSzCES89jp+34VvbOVdG28c+M8Nug\nWjwgYrzp+Xv/VXn5DgBVEi/QSQA6LtFTC6oNzb4Ey3MmDvJAs9pLgy6cUqm1\nd5ww\r\n=LdPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/touch-target":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.f16f15b8f.0_1579219645866_0.4371440391235806","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/checkbox","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71aae8ef9408412eb765a16a073d38279e3fe2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":37,"integrity":"sha512-saQ4LB25RMt+lZrK7LSY34p2xhw4ip8hr14bIThVdyydTpxcSTtDmYyfI2s9U2eQyMGSy2rwEFjSWqpvp1634A==","signatures":[{"sig":"MEUCIQDgCGHmN2du1r+FvN8fiSV1Kp4Jl+gFNRSXeCDzKnIUogIgW0PIJ8+SYpwIGShbUBrEJ2i6dbTpe3aH85JE1sWBQGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGnCRA9TVsSAnZWagAAe3QP/10deCQoK1l0BbD5IVwl\nyDiPm8MPqXQfIrb4cgA2JACl065snlrbR+uH17YRDuEnroA8Ek9aweXj5oDJ\n4hk97YjniWmlRmQiBwrU1MZhLLoe8fsZ2t/dM5CAMXgzZBuTRZtogfKDya9Q\n95RZ1PFiaAliq5Mw1oGMHlu7WapCD4P78i/flZ/Ha9w2nYUU0G/rrMNZhhxw\nf/fyn5x78rE0m3mprp+QTAoTwfmXZR/9VMaOZmDQwY9gIgIHic0edWIxFogX\nJ9WMWgVV/Ws1bdkMa6KMMHPl6jLeTmUG8FKl7N1IDOKBTEw71UGvXymBjlRc\n6Pe8icyeN5FWKfDk0K10e1jaxN90a+pBHYkgIm4orfs1BSJGdeF/BWEQKY01\n87hvEbQcD9IOs0B/2uSoR8edfwZmfkxUFKsXKn4xFPt321kJLwUwAbb2l/EY\neBMo2hzzVWjGWvckRnALP2EKYoNwn8FkvSkSDbrLSGNYOaW79EHKM4wcqico\nUi2QeE4x0q4FNOxqwxmC1txQoidMjUyg5VIB1oDJkchRXzy3Q4mlWnxBWV5D\ngVngTmpNzlPAdH/1e8YIBeD1X1AOUjT8ObgTNKzgVYHG1Wf1mQRjHYqr5v9u\nXqvkJWxD4ASTXCoC6AizVT4pUmSjrXhMSLn90mqySv5DVYb78f6sAQ1Nbe/K\nUYEM\r\n=7bas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/touch-target":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.aa8e43e9a.0_1579221415367_0.46954209402641833","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/checkbox","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11933826cc54b5f32c3c5581b993f1eb6b194080","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":37,"integrity":"sha512-PaTa3wP0MYvSqeDeakv+MNctiIZTN5cycT+K9lOigoDHeO+k5IkqLQlsZ/SnxFCj0jpoi8Vdmb18jrlL3/nEXQ==","signatures":[{"sig":"MEUCIHOpw7e1Re9EIv1yqdgtm6bFVhUo13UpeXYU/VVqvInfAiEAlAJ74xMSG738YuTqXke94wK5FNTF30XzXafvUfdpuvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcwCRA9TVsSAnZWagAA9O4QAKFEVlcJ7pLply/2TqzE\n78qDXoaFu4//agcoQo9hFNX8n/2DjzPBQ4AjPC9S0I3swh3yDegkKmSkDEYa\ngdKpg3s8w1Fc6qXdPWhum9g5O7+ObIS4o1W/+fMglABhUD4kLEUrma/OSkAu\nlF+8b++VKF2p9ECPIdd1GOs8c86iaQeYis4KEpwG+sSeWNFcxy7xCPDAvf0m\nEZY2SM2XBfqbfoNB1opKdQ5RQa6EXl3vEK/d8ajsxe2kzWO+/JNPmwKJLCgC\n7NcnABcUI5pcR46lVgJYUeO9RUJC0JOQOfm9dDV8u3A6Jw6lsYrBUL7KHWGA\nVfY2XNSHQj4NpAU13HCWef2ojevu595wvCV/1ajd1AAwpg6Fj0QWZ6Td2TPK\nuY27goJ81nWlc6GGf+Li0zuiCnuCOS1T2bxgOrJwAxHnrSBRan115hyv2DSh\n/IFMfXB3/dakUdeF8OTeRwpN2Ns/sui9daFP+tFePcw9IzIMmK7F7ydGGt0S\n0ObkcqCUVeJD49prY+ELoYGCffhWwBj/29O3KvtqPufuy1nCYansx+25RxEc\nD3lABWdc8bpiQ6a5vpmygxIYqIJDjSmG5MvgarV/i/VLamb1cPfnuAL9R6Za\nn86UtzLo5J5ephZ9E55Kco5GZX8EX/6b8NaLFPEHNmNyfrhk3hnv+SL8Wfjn\nMpjV\r\n=diWG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/touch-target":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.fe1f3ca07.0_1579222831577_0.9476806814900116","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/checkbox","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d405af26b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a342afb4bd25b331c59abba40e1a8e668fc0a64f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d405af26b.0.tgz","fileCount":37,"integrity":"sha512-6gD8XlQhblgf/CrrRuqpWQcSkAAGrCg8FgCt1ie/Pu6cFSZiCgiwnEyrrRxyHqAk1el1JQIU/39OyowyMOtD5g==","signatures":[{"sig":"MEUCIQCwHnPPGr293eX4pIPZ3fwNDxTLF948KFNkksfS1gAvgwIgHssZvbGj421CgweDKAfdNdd+qypp0vAuj25PW9mwg+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfo3CRA9TVsSAnZWagAAgfcP/RAR3joRFya3FH33KuHw\nNZNzIMwfgmZNCGrYDlWj/EUehO+Z6ZiTn3zyOpJ+pkwAAxGG2IGCA0qG4LP+\nJwodvSiXC3b3Gzk9PG9WDTwp/qxQnVNQW0pO0ACuOmHIVHh6IF6COBQTFqWs\ncuNDXUf7MYOx8vHkY8zPDzKWHKzUna9Bln/gERPNQ8+T04EHmUYIOukbd3Xc\nwuVoebqpd9EPD8C83NODj6KW/kVNUwroo3Hgc+CbEDeMMqdFy76RbML88zIo\n81KmBdL0IvWnR1QUBA/YhCNJfLxX9AyQbddbR+qvSwuO9cFrsFrmSt3mPoPc\n++3EzK+OPAafuEx4cmdnaAQnyJEWv7Q2zSohFnI3m6+rsL5x2wKiu77tA+VV\nlYfi+isYC8eQnO3dVNj/WrDb83PpfhqYd1qeztIWYOL4cRbw6eWkv0QLteF5\nATQDKhHWDnpHv9EXd9+QRJoAGpEUmNqXdG2i4q3b6EjHlqW5eUTrXMmRgc7/\nYdTLuUOJlzudYxNbEyWhfeOnt4fpuVLp/PCb0M2YLzcfuVCzviKOmAiizP1I\nGdV0BmAjQoLHiT8qeeAApAb5opwhcngkYwUmrRW/MBH1GIHLjN384BwKDbMx\nTVzCJ77+TDMhaBTbOmH/NjZwTNXVio5xDWEhKFH7jfxGeY3Qu8uJ4z/xdQn9\nUTTK\r\n=dFmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/touch-target":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d405af26b.0_1579285046962_0.38358705561328077","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/checkbox","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"225e00fd067d392fad304b1f38807b7a7f172721","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.6e857aae2.0.tgz","fileCount":37,"integrity":"sha512-/1niXn1WBqre5evFsi0ze542Bp1oPiSvlRcr8iIr+1hBCEgctVUtlRb7rUYSP77immwDN+Aqkj8UAGYPixWevw==","signatures":[{"sig":"MEQCIHEXYkVhOHWJJE3Sv0CsTedfz3l/0gjhqmllWyQHF9CjAiBINGQ8NxAC1uCiThjdd6WgMIbg+tZ4lWSSC58pQnx/rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsLCRA9TVsSAnZWagAAcLoP/iNTejqKnvv/McXBrIhq\nHJCESD4OpAhVChrHlw5z3tgzxXeofQ2HmFfoENVJ2tYRDWoBtQHQ2OW1k4y+\nlh4pxMOSqvDnKkJSglwSuDbGEsqFDaSth0QImX2i6phzcp/xyqeAfqmrcn7v\n+CALSYIwRxEIGwtMlZ6bidCKqb/L59MrFoQ+nn7tYy5IP05PGw1C4h7uPlVe\nU00/2/gpcuM658eeUmEfkfx99gaDc+HJy/biITaIGw5Vv+fxU5lBYJ+OcqRO\nSL25FyDxLzzPDlXWMRX6xOuttYBHrbxr9VJQgbrlb1did++4I+nVobS/4csR\n2GT9U3YPWLocFMev4kXFq1eR1ZOXWm/VDMFmoPgbvJCQbUBo7lAjdtypAGjE\nNBr2cg8W4hWYdqpnIiI4A0G3wEG0hPXDdON6r0mlqg27sGTv8B3luibCsCSr\nesKSQeLFqdAMG+KXHws9gQMyjtQ9K7vtDX5hroQg8KhzAlMkwHKAAdi9oc27\nOSJG++vgeDBkOcZ3kr1O/jtEEItepgSLI4+qhidzxFkT8wFDX/bWPW+0fv9W\nP9fHxxiYQph15eSaGv5NF22v6lny1dhrJQmKDxR17BQY0pjLAcXe2Q9OFkQ3\nvgFw7ENMz8JBFO/bPaOM7k7gqifi29+3lU/bZWQq5Hl8xVorOGnNDdBAEVGl\nEx3o\r\n=kX8r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/touch-target":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.6e857aae2.0_1579285259326_0.6556832611047041","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/checkbox","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"125ab4494a02c333995b9f6ffcc9883d60ff62a9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.e2e764f7c.0.tgz","fileCount":37,"integrity":"sha512-vYsEP7yVEoMLvH483CYv7cIbCtrUQ5wCU2uMqc6C2Yt19ZsjTwJbI3Q+rusqLLvUlj1Agt4OaXuYpjwiPxXuFw==","signatures":[{"sig":"MEYCIQCF6MdavGMLjMrE5CYzh1I3BaU9mvYUHYjjnDA0uPw17AIhALzYVowSMAHrcB76L9WIp5B7SZRaxmCYs78vje2Wclt3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6dCRA9TVsSAnZWagAAldwQAKSqMhNNl51wyugG83UW\nI/uEbdhRzOzIAAtmOa9y/CH9FUWOuu/vjsVmdaYo1qNAP5n+gZNV724qBSdW\njMe4WgfZ1LpPHkx0nTmexRMiSgtb6P5BURzhO2naIknfVLnYHPYPTG5TXjWk\nLTwTe1HqpdeDuwu/yjzKWMRe2fmkoC3gmC9E5mbAin7UqE+ogpMX6Ac8HffU\n1rcXO3NnmNYlZnBXYdpx974GK8tEV42d+xpq8magsXA2wxnurEc+Gp4zmgBP\n6Mm7U86wkGWMUEOACaW/AJxXdqr+pip7SJ85tSUEkfwlG1Gy/ac31LAVqUPZ\ni1+8W+vBGgbcUWP/FROQP2LROYHWB3LGYQ0nFIq5jyIwbnbBbvOY4QgS32RD\nqQWLIVZFQ4gxBeqxzyX94OpoLYNvVPQabEVyoLcyH++3Tcxde8gbqzPTIJtI\nfq1wEvYG2YWZjZlLj31+VAPIRaqEzOEtH2ymsLLTqQ/qP4unYqrPfmxH/1HF\nKkZsNzEt1QU3tOZEtt9VQwIBNwaaLRB3pYs+bL1Or/ACqR4eAjRW5T42Vec6\ngfz81FysY/AV/r9iYr9pXsXNBoCG4bfBlZHKQyAkrl29YBNo7ikXlko3rNCi\n7k3ypIjJbPtDghKNnAbriD4OfVKyR6MtO9rcq5t/GpIqprTgpA214IkOnO9H\nUVvh\r\n=STUz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/touch-target":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.e2e764f7c.0_1579286172753_0.7561473475299063","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/checkbox","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5585430a40d7dd6074f7498e43e7cd095442e85c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7ef986a87.0.tgz","fileCount":37,"integrity":"sha512-poxtJGV74x8xphEeVtNca6ZFftWQtaUjMpRfenJu6xY89ARLcBWH2punS+HgVaqEwIa5oKQvErI7M+4a0BC4XQ==","signatures":[{"sig":"MEYCIQCBaUxHK8pVQLlOlSrNE/hYatg4fJn/U/QRapHxw+EToAIhALsdgRSDIMnERzuISkao7RURV+efG1d6b8wn+3h02HrQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgt4CRA9TVsSAnZWagAAyDoP/187moyzL5Wvux/LxTe+\nNvryXKk2XPHustqeQoYUSlwvtpqSaiVHxKbjy7TGGaVATV/7cpK49FIa642i\n7nljxrASeg7XJBqnsr3hITmV7zjcvv90XELpCEDEsjJtj2pAgQ0LpxB/fdzQ\n1aTV6peeOM0yk8YT/XRxaAzW6X3BZcUM8I6WzVEaDOuPz5ymOLuWf+yoMUwt\na/8uy1k4tf5z3FPfm7ThuDemWJJ7WiEqZharxRKHkK+fEbNFdFGTZrSaFjYF\nEJUFuVkCjGLaKhJl0J2T3V99jyj4nxc9nvEe2O5ZVUk/Iuc6qizULRNcJWIM\nLYrTZm7C4RFjd/20DelsVK2KVH7RC2NYcTxT2W5Y8JQMKBWrnUdCvSeDNqvV\nGJqjIOEIw3/z/V2egytJMQ8R6Zv05QdDAqR92Aqwb/cdXZPo5U1Qow5EN2PQ\nCEFLQduakqA6fj53XHD4rVlGqme+IydvPChvJkrl19MYIOuZFFCgWFCcBEdx\nxORSTioEMvVSQ5kJCEnKZOga7hK9FwxuKDO/mXdQKFWIWFBoO2o9bx1G/b3W\n3ruZCgmFDJzqleLabjRNfpchS2m8vCwVHZC0m+n0q6rKmr3RenawwmmQza1A\n9Xxkmw1p8Qqz55F9qkrRHH8la1AM3AI5rdeTNKY0dCPOtj7GPeKXweC4w+7E\nE4iP\r\n=p/yv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/touch-target":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7ef986a87.0_1579289463789_0.7647180652280672","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/checkbox","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1e3c8fdf03210de4eb190894e4aae838ee0971b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.29402e2d4.0.tgz","fileCount":37,"integrity":"sha512-16nO4Bg7NPtjHispSvh54tNWwoRN4Lb3WWUodT9iDJnNgvvg5EHhuofkHPpfn6pgrou7bGnkRSi+vwX8JBLFdQ==","signatures":[{"sig":"MEQCICoWCcvTn7lfRffbS+M1GphGYbXCemz0/fSzWcGv7+2QAiB3uvMtH6FqUE9/Hvb2cGg1NCm8lL4c+XkcO2O+epVCDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuiCRA9TVsSAnZWagAAJMUP/RzehmRLcJUodiSXHgHq\n7RV9QRM6bdkOxP3YZqjuT9EJKoKf3suD3ro4IOP1S6BSUCA6d3KLMY6XmTd3\nRXia50t2bzsa8cD1JdM90zGKnrRQntNe0kp2rmtanxuwnH2mFJDgRJ6tUVeL\nG4ttFXHiqi8QXs4ZOyqnYneNBECEeIg74E/R1+lAqMmjuezq00UEdQmrNYNk\n/grAxNP/GS9wmavlDUfhKPKqMHiezZmrNgGM1ZfQhsYIPEAqy0ePsYVO6C2Q\nQbdn1HXw8nOitwscMgGlSrEEzXY1uk85/ybj+db/daoGSnxO2Q9OgQBd/bME\noO7YMXYoaJTpqjBehdL8LhZwDVisjUMaNmZ4q1Z9CSQ7y1URm6q3H/6BLgk6\n5b9Tz9oKwWtoq6rRSBFqj+BHCufB/RzvvAokzvaERwphyPdXsai2u1/nzEDY\nVZHli/UNLg733TkIqSH4/NrIbcAGzPmNxQuaM4oxdXcZ+HHsj+r0FUYXRydk\n6Si3/1NkljWnTuYL9Tb1FciJC3oRqHZQ742nw5c8h0/DbEGXUIfp3kOFkWPd\ny8z9LbO2GSdwKikPbWZ8fsDyHKutbYkuTZVhFfDzBXEk24G/ppk2659TAmKd\nkHD4DWg46Ky+VuERhzG3Y+b3qva1+zsINzMgNIwnvgRd/ffl9KcnKbSE/PiL\nqZAe\r\n=1vVd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/touch-target":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.29402e2d4.0_1579293602574_0.9468646238122249","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/checkbox","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62386a45cb34a98ddeca90cfc12620aaf673634c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.2b3ec563c.0.tgz","fileCount":37,"integrity":"sha512-y2AvJadonQVWvB5u8rYPKN2PP70Eq0zlx33O/Gyeroe0dQNmLGHhPlzgo/okeRAfsTm3N7fgLw+sRHUYBwUpxA==","signatures":[{"sig":"MEQCICH/2begt6NsxD49aOO8elpr2xzgyCgSQxFoLnVv+4IwAiBSfEzNoVTkYu10o4jwo9xHH+v1g7i3xOd4F8l+ts7jVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj80CRA9TVsSAnZWagAAh/8P/35JLh36g8X0C6N/d42i\niy0O3LR+k9SkoWdVTEX6wctjxkYBNt/fOMjdz1kEZyEBOUfQTpy6Zam15x3v\n/NHHWkyexZJq/+wATZj2NFAo27JDATUzDcghCAwglgoRC0dITR09g9XTWVUE\nJ/lOkSDN9NWcA3PM32Z7hFfkFPVqLUXZ+raTI4rX9BRTGrRgFBIk5i1ka+Bj\nvLgDQiOjl14qO3JVqNWrnTVki3XX78Oo50yQWB9W675leDLHGZlVk4FuJg1y\nfth1B5X7U+xq+av0v30+thewJ/nFy8lmFw6NiG3YYvmE5KrWh8KP3Dsf126R\nuN6uzOjPJ2JN1e80cpZuBy9NAE5sRmh3O9RZjswcCpCsWBV/83bRyyLExNac\nzu7L2QJ446wGoK1nv4Xeqd3ZQsut+Sw4pqhBcD6Im0xIxyVLb30+WOk8Vfot\nGCqTIguGZJaflca2ZFJ6t1XEGqWv9ggr4+68hCwUYkoEwPuhGlA1VKdYesZu\npNR2GOLhn5JbJ83aOvVG2Vn4o69SgvYlknvcWacO5vxB1AaPb4wZ0l4iivhp\nPT/ZySyw8Y6OmCCLuze0FtpQGxBV5EUwYW95OtnjyLMoljQ9F5E6UfHZSq1F\nMuNeIqh0/uM3OrJVpONGD9gj6btnL/KSjCQUmP0HMCtDs4bY8gxvk3m6Vfl6\nwHVJ\r\n=v5C0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/touch-target":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.2b3ec563c.0_1579302706520_0.925458314847885","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/checkbox","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.e8a993677.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49554402e659b1809adc412b0d9ed5ef6815a748","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.e8a993677.0.tgz","fileCount":37,"integrity":"sha512-YwqGwqsckylue2zlnckYadWRZzCxd7quE2sFx4ANFuuVleEgdQwNgj1J+LGbpNdsSt8T/UEBnA5T1ocDzYjEkg==","signatures":[{"sig":"MEQCIH85ZLdG6E4C1LG3/5QN3BWELuxQx48nW8b4Vy7mBIsBAiB7GoT8tzWRiHrlsv2C87uOngsRm0UAU2l18sfHQUvdnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyu+CRA9TVsSAnZWagAAD/EP/0IkRiZzYBNihLsuy1xa\nML2nRjhkY0M4OPHbUOgX0PUizxEoZdR71jW52i356Y+scT/UtouCt9tEu5jQ\ntRVnJOg5Ho9sxVOBdBhoSnQk4pWaXI4Y/07hpGyQ4nC6UUn9I6OqZQDz5Kh6\nYIYwXVwd8YzrnRIcRpaVg8WO7wa8xx+fZ4dSiQb3LEdN9P8Mqfry1aF0bPJI\nb42+omyECHb16vD1k0+oH1fMQVB97rCy5QyNd5LBMrRUiIwG1lEzf3KUAUmz\niqFAeHF0Laet8r/l/hyuWFOXrdH26QudSPNI5NAUk8o+Gu22by4kmS2dT92+\nhXJzre+PogM2VemuwiE4co9MIwFDl6rO5QXziqNo+h6z4xFtkC/qyUUeNuob\nY96bTNkaTAFODu/hEIH9ehL71qbfZPkXeREe2t222uIOB5ixV7K0TB93AScN\nOZb8RY8oHkEDOAfp1DlEa7dbfMC7ss1aS7dytuiY0TiCbnkJEKomclr0dpUX\nqXhZ+k4XuIFmsICaifJHhCliXtKnz/uGNEgyHPeVmR+DC8aTCvd7q5ZQFWsy\nn8JG+8USIVXBqliLzXmCPrKfNVdE5qKlG22BBus2J49Pi5ToCB5AK3CY0gXn\nqNzCxVrFwWZ4+hjBqNXuBgA35zcryqjjxqOVE3AMUoGHLa2bw9xuZgYokrJg\nHJqh\r\n=L+oh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/touch-target":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.e8a993677.0_1579625405756_0.9621530971055745","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/checkbox","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.cd4903304.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04c8f32c9cc5112f7587b4bc136af5136ffeec5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.cd4903304.0.tgz","fileCount":37,"integrity":"sha512-R7narvVW9bk9ugWhS8PuBAM4XOAzq101DiJpd11VO3zrEe4j2LM9C6L8ECCEt2hsZ4mBanXsUEkt0M5+OgUMCg==","signatures":[{"sig":"MEUCIQD6lwPsv1XsFLQi+q+ckmN7UqMVxvKhYbBCXYVijcQWZgIga7bPihx7lbgeLK6FkwMqsy3Z55HdEbooxkSPc04r/uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28eCRA9TVsSAnZWagAAbEgP/j/AGh2eYRGYDlOLe8lH\n6gouMwD45gTBewTh5ZRwKCHKksN2KJtBtu74b9FlBkXRWxZSg1Ig2heDVfD7\n1O4djUja4K/4eOt27sZTE18q+4qkVbB45eeETuNavKq9Z8UPytJ2PZ1oVpmi\nOYiVIwREXSINbQ1vl1O9UgWhayHs5f5iwQ5T1i0UPLUF/eJ6At9zLH8v+fKh\n2vguHE3xO837IRacr6KnxC6hdp+DlDk/N1LKJa7Mh3Op8CRMl8n1ttKG5W90\nd7qBWE0nuvASGwR7eVLD4HH7u1fF/OTnxCumEjpPTRf00mlOLUI76HxdjQnt\nILPsWp2PYhXNzOEy2wilIgnkVJyswPkiQI4KC2WIOI1oWt8YoEyLQkLiN8DR\nXWTVxLd6VaZuPNqy6KswUTh28DZVWUGMJnq/SVtP2KaC6WXoGzLSkxV0igeF\nihxHHXgGeuU3F8M7cOfqc36/c40IdDedBvTm9rKKoy6PTCKX7X5t5+CvGSa2\nearZjdx2sGEME1T5pu027podxXt3j9MHRkzBfTb1h5bO3VYfpz/vh/4WHu/2\noJ9Xkfi57uYWsLAdXdqaRZ5b+yo6xnsCbRk7zRMCyeuRcR+2s6gOzmnoIpRU\n7NXa/QytzdcqdZ9tkC6TzkyuqTq7x6doqMRNNXqCASyA8+CboSNa+j3JaQlp\n6Hxy\r\n=Kh8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/touch-target":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.cd4903304.0_1579642653564_0.7492637837871134","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/checkbox","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a166ea0265f6c202d1a641cf84b687c4c37278","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7e4b04b25.0.tgz","fileCount":37,"integrity":"sha512-FnPs1W4QYQ4fqwr5buk2Q15L5KDmnoVMekRWfElEtoQnQdGfhyuhFJSRPEqUTHnSTJF+KdpVz09GUCF0plGb7g==","signatures":[{"sig":"MEUCIQC1gaWd/+0z8X3LIAt/W/pth6QhlpxH/Vkh/xw5/DZbdgIgPWHaTzgbbJ2+te+XdKfr9yibE6R7szM3VIt5kw/B2+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39MCRA9TVsSAnZWagAA9MAP/06mgQE9F7/fzxmqdmtU\n818bpA1rWl9jshtfvFleOhILyllWpLGOxy0A8Y1pr5whkt0zEBxY/ulft9CB\nvD1FQZacdx2lEE2hNx+Tv0Ned+HWwkv66Xjf9CyWRaye/lbXkl+0ECISovN2\nDMng73wBSqz1Nm6PQSpUiytV/kFflvHIH4RZ/7o6WWlSYxWKY22ON6X2IKlE\ni8kUpMcd15w1nl/efhcqzgfyEa+XYsEVrNdQA8JAFuGWD1FYTpwNdR1fd/uu\nFbghcZE+KczQxMmw+88pkPeZr0eEVU1K2nHAZfYOssocKVkcxT20GjzH+Svg\nDhigA4QkDnlIWGnWJV8/M4Zpmr4XVNIwBMfEDvs5Bu3cz3PCHiTRF35+FyoM\nyQzZZeFUVRQL8LhSoZTzEcfGJa4j6tTIIjKKzdz1dXJsWbD7gfCmXs0+O5fE\niCjDwgkAs/qXa0guRuhLwxsAWdkPilZbDVceT0KBwc/wfhcrPHojD4W7phaL\nrndcsreTwucfkZwXOGeCqwHabNdhfZP6CKvXxoNw5nnokjDL1LBzwD3tLkW0\nJNcySrhtqpl98eL6wSwwJRcbJBJyO7Q0j/PQwoZgmGlYt79MRaT+yfRyZoZz\nJLyceHfYg2K2mTWpCUNZOLMe4XTI3BVq04FxGnHLekZRcFtzHYDDS13j7SlM\nayH4\r\n=MqpB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/touch-target":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7e4b04b25.0_1579646795688_0.9637793995228408","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/checkbox","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ebc296937.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7061dbcae762cc3ab20eb39fa08d4d6a579c2efd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ebc296937.0.tgz","fileCount":37,"integrity":"sha512-Mg/DiFOSMbd539qAJkRgyYMNyiVNlbwg4p9zXL55Vz15SgZRBCXLLH7sJ3dqCVFUHeBEQk3wGWaV8v5KzNmYIA==","signatures":[{"sig":"MEUCIFviLN3WpDuvz8+dtf/C5Pr/BPxYcVJPmRYCM24NbIIsAiEAqWhtFsqUEb4mfy7HWFDHgQi1vo2ggCoae+VVG2hyX8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40ICRA9TVsSAnZWagAAHX0P/jbymsiiVS7z4j8rfFoA\nQOHKxdtQDMGuqqSPFvhPIIi5vXYlvfqJ7jMsHM90zPNCMpCghDTYldv7/tyw\nYNtBxpJboTj1BzTYj23mIpOOsjdClRx3eG8kV95s44qX/DAAiyUPI94CNpwU\nMjr3Htu2/NvXLh7+x5rwacNTHztTHm/fdcQ3DZBHVtUvsAanF8eNv5wQ/v5x\nfmMTCBBln2mPsgZAjzm81T/WT1SHEFDf1nMr+fxY/1+pVZ7gM6rT5PfJl0ww\n7vdx3JA4sUAZRiORyd9BF9V0/bP7EX7XP1lauvqP3plNEkzAgQtniyXxDhKA\nZml5Q7q9EM3qUkhOfJUZNsQKfu3noLo2/9Rcf6BBkzV5owSef7nePlh0veLf\njV9587Mz87m3apLb80eHByjSO3UnD7/tgGjUeqbb0yVtRuG83VmRIp3rTzmm\n1Yc4/Bj+fD00hlShrBnyMIScHxrk86y2dCJjAMkWgfATS/1xV0U5adhRszyU\n56WWrhosDhSLJBwB7owK2ln4KLgxb1hC32/rjXfNCwEskPdMvaMA/QTzPd23\nPw8qcm6CjMa0WMFYHmfWOfUigvRr7M+ZAKBzPr0twfx8e7LMKD1r4IKRW8sg\nFodlJ0EG9f/rRV/QsWuD8gqr/yTnszR2fn+7uZ48EpwHFNP8r518Cyt9OeAk\nHrL8\r\n=3paw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/touch-target":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ebc296937.0_1579650312311_0.2191567104947585","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/checkbox","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6a705714cc3b44e83473603e3a1750c33ae9936","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.cf33f113d.0.tgz","fileCount":37,"integrity":"sha512-SNids31CAte+jW6i5n/pwGLe5YQZyks63XCxE5yvFMDErxWns9WsV5P9jVp6i8071Xx/JLFu/kUimRWA5ssLXQ==","signatures":[{"sig":"MEUCIEAGF3LWchGJD7aHmh+gcJ+WVBsG4e9sW6t62pLZ99iyAiEAwtsYB3kB0s5BjNQUo1Mvg10mREEA7l3g9dYzRw5TK5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PlCRA9TVsSAnZWagAAn/AP/1Npaioek9rOdfqOr8PN\nCqxVtEEtV++cO3AunkwT6Zg1+9sBuoaGIVgcnywsdJjEYJfG8+rloQ2/peHg\ne5gwMnTFwivX5aHf2vj3i58h3BRNEco0WtwLzVMO8g5C2tVoJans6l161llq\nDkPSe2I71ktQI8GpC6HZDhn2sZi+zt95mMdjddDrfPx4qQdvrz61w8AZ1oZ0\nKm7DLagK75buKUAsKWDlv0x5Z2Ol0nGHFT+gl5TG2JhAwhzxlqn4k56KLemk\n47mYCll2sd13E3VQSsMc0gSekCHwXXTymmnlbTHyyKq5VZvlJjQViFzGmxOQ\n3uDkV8Y0krFI4P2ypPdOkQIu3RXKXLJb5mtzCk1Mh5Z4UFtNkpygwtqvijfP\nTDhqxD6dhdgLxEG0ctkbGEhh1VRN0e6D2r8m3Ru4F39bQRubLHvTkndq2/Ec\nKNsG+unzNvOMde8zfESSZMWaNUspUQqrFougY9smh3aJm7XLxYynJyd62lit\n3fhwbAC1xXIKlzclbkBdP0/j5Y37nQVz81EbqHHtVGvsxpskGaS1I4Xbxaf3\n4RI0EaaS0JPZuhIIGkR5MpFksBO5bjDxyzYPmzWoJzoX0IBp5Nz+AMzfyQp9\nZvY6tQDhPI3WMgYbBptAj8ARBkuciNhyT4eBYhZ2up6CPuR6LExW9i2Lfi3n\nTbhr\r\n=WaBY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/touch-target":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.cf33f113d.0_1579656164552_0.8710900508789945","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/checkbox","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cebcdfcf633bfef94d4e6fc517e2683606a27ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":37,"integrity":"sha512-IZ4VnThrPhfgK0YQ8KMrPmnDoOBUvzb2kIQuF4fp0Fob7zzCCBUm/bOVov0ZrpQjkztwPbIDSNmRa77FCtqU5A==","signatures":[{"sig":"MEUCIA7jVCwklgFPRorAK4h3QPUmZeesF8BQc5exnw2nzBP3AiEA7MDWjUMReGWbLG8QefDxi+2Y0V5tjmD5PkSbC4BdcgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6UCRA9TVsSAnZWagAAJxEP/RXOQwtQnFzW4zyjrdKT\nj8r4PvLDS5wwfJGPGtuw1Nr/+a43xxwdfJoJfgdv3N+GJ2C/UzHkB6syIwqf\nQXLfw6WZqHpB6S/Kdfm4ai8u3XFS1eCCcPumLT6UPceJWndEuYQ+eaTjC+TK\nHin1k88NoXfDHbsM7SlB/CphbN9qyt4MICo2qQiEbIj8l2YAagDsKW7ELHyf\nmHcgqvUGmtJtJG1TSOXkU50rEGsLOFMic3XUptqR1f8EY9QkvY/SfZk3IC5x\nKFTyOV7F44pbx3jKOhSD8D8pmAZcMQUnqSK1lm8xeRuTRpExOItS3OqzGxQH\nZqmAHIHhc3NOIteIpw+5+j3c3W/V9cq30ZLx8RQQOoNG2febT9ApZngj6dUW\nvcsbPuXbv2qti0GBQ0H0lSh9CoQItCjG4ox3f0v5+Ht9iDPM8xOBeS5VWxml\nuprLeoQYqeWU9ICns+U7OJ8hOUE4pq2vTe5Bybsc06lhMibTX42vZloQSX68\nXZURl8BMuqOwDPRresD2cZctpISqALjVqOICr245ycN6IHX0KcCF5g8iuUbC\n/d27tl4X43gv4EzDzMGxC8ioOkqg3NHY/mV4FMir1wJGQ57XyQtq+c/EYh5A\n1JCKWdqhfs4sOf50hWUau1YVjRU7Imz/RcIgGRqdqD+LcMz02oi4FJLL5Wpc\nG1xR\r\n=oy4n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/touch-target":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.e1d5f1be5.0_1579712147836_0.2205350778612567","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/checkbox","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac597cc376a7e03f03c7e41b6a97881155804d6e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":37,"integrity":"sha512-PtuiSu74/9mn9Q/bH0fhjdbJs5DCTdc5DCZlEOFASGEsbtwg6sT93vMxWidFJHGwglRM9kPXUM3G70PkT1KbKg==","signatures":[{"sig":"MEQCIFQzfW5WVtdOVE98HhqtU0dt1yw+cx/ye5hxSlls35URAiBo5bC+HLwF5UrXZugqj7JKDMxiWS1HY3hn4vDUsGjRYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0kCRA9TVsSAnZWagAAcvUP/Rhw5MpIZD+EPsiCKDA1\nUUk5ro+qiMvzxaGqXJpX9T5wPqatBhl2GUsQ0Sm19zvbMNPt3tMYvqz5a0PZ\nO6t9IQuYCxqqDBV2ChAaT/kDHMoXPmsMupGbt8e43Jl7WTOb7GCE2//n3Og+\nle+8rGKUrUFtfFf1G2Euae+QdPzdHgWLSy4qwiQ2KWcqkjf167uNUEUcsCkl\nit6g5S073MdYp0AJg798A6Wri9Aq46mvX81dSeORidB4lXFZuraQP7X5ZaPf\nBGz9easS6raV6zXQxr1AhSCD8XSv3Hr0a9s5YQjNCR21xd19bzPb/ArnDhMm\nSksSdsS3ELKaxCrZTM26+4FZ0qInYIxqxkGV8lM1mM1WS8dRGt2PpjKtE6do\nfnTXeFu17+O1DPxvyprbxIERU77Q9WXqYGULHa/Xf2iIe0H583pU5oI51ijn\nRootQBaODfaWQDiII+DinKGHwkzjGPpot6lCXg3BWx6iIz9tE76XL1lWo8T9\nsdg+5czBNnPJFH/e3/WaCOJnn/DlK72DykhCyoaOJifA279Jn9Nq4xuGEwC7\nxDOHfW0SrcABerIPo7do6LHjO9fvX5RM+CaU5a7oUD7oTCw8JieN0hJ741av\nGtC7wvXJahbxcM7nowLkJYESQ1uOrIlYpyOBIXJO+baPF0tvaaIn8IVekT9+\nZgzX\r\n=vy5l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/touch-target":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.6b6a4ff92.0_1579715875931_0.4808642998099877","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/checkbox","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be18348475401e516ca789d96178dc1fc0d4a1bd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.6092f71ee.0.tgz","fileCount":37,"integrity":"sha512-MDOCFeeKUpjGAqZwvFJ+DQX0oAks0qRcZwNsQuM3+JRT4IVlWumUzaMi4xIVaDBwtXi4LzSkDrlO3ta0vYV2pQ==","signatures":[{"sig":"MEUCIQCBrV+VWLzZHDEVdDVqkJk1hNWKg+KFuC1vPIt4n/7tZwIgGmMwS+jBTi2rG2mKc2wULZofKVVDMHaUv1yf/CdcjjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvZCRA9TVsSAnZWagAATV4QAKOhmgdmDJh+Er6SHt4e\niU2tldPT7RtDS9RkPwFcUhL4BOiptYfoHNWg+pJIo7LW/IGAiGIamFCQRIju\n1tNzx4FQFGlR350FIHdIw+W+n+kgn12/RrkLwNMCG8g3RKigOeTzP3KrvdPb\nydtTCd3RbDy4adtw4QDwSIrfxpc/Ub/8f2auN67WAp0VAF2BR2B+r1cYFhqp\nTsnLKgCsnslIVy2w0O2//q4wqCARypjX4io8feHM5/BtWDBuOe6vEw9zYlrj\ns+5zQCbv/AXYaC0IaDiqpBSFMDvPOj0uNFVyQJ2c0ToKB6/j6j8ad1Fcf0Zd\nfLx7M0yNuNh1UflV/BrOg8WYapwmZMRIHIRR7IaI4fueO/Swyt0bDxgcYdVP\nxFMzRR3RHyUMXMZWJN9NarpzpS6k3T8Hcdp1d/IM5s9CJI6axMUibu17jBFL\np5gEo17AA0KBQe1QRel4bZ1AB2Qvzo81RXFa+wvMgQFfCK5h0Hor1BQKqBxB\nHvVtiY73r6CX+3sMzO5cB3NUlfs4MhAmeFO9+B9bpikmpeqw5NMkPB0p+R8g\ns2EBoBwrq/6aPkgEay+gsvn7H56gSGAOTzDBUf5LqQfNHwYi8cQGF2q0MWDp\nBtC1LCOYgNTM/Uk8GFjRQGe9SagjinmNE73BED6z47ZBF6xzsiGFGqN59uWx\nyPbE\r\n=5giB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/touch-target":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.6092f71ee.0_1579727832576_0.007448919025484502","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/checkbox","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817fcff344fc692af735a3c81b205bb9fc09f106","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d8d95020f.0.tgz","fileCount":37,"integrity":"sha512-rKR1QDDrkxzwlM5dxNdwNrLCWFneFBQZscTIQ/Jr7Ix6Ym1vHj7BO0O7kLO14EhWhiAO5iAmXr4s9UsCBksh1Q==","signatures":[{"sig":"MEQCIAMVLQM6vWWBOeIU2CjBrGlQn2sYavIz3jPhHYesNf3wAiAugjtS6Y1RVZ6ckHgjDlenc1QuCGGgrIVH7vz0xZmd9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYzCRA9TVsSAnZWagAAW9kP/iZh5MOcLC+IFp2X77Dp\n+jNxSAzo9S422gRf7c4AbQLQVOGor93jHdR3Qbrla+IqcOa145IFj7vswGeN\nt68eyVkN8hJ4AX5V6/VMAxeiBDEajuzewmUJCimnAYJR3yoDksj44b8bXyb2\nH5BWIs91w2ZSejvUlu5cj5m08AODVSeKaBg/SbHSvMXsFQdb0zUmqHbFNq4A\narzCLYKZ18MUqXNLhxiAE8ShNBV56G4EWruJmgFQfqhhjI4HpTR195k1gRWr\n1KNKbJnkFkuE3l26Cq8S7+Sw/yXdO1hyDgYzGIBt9t+oHx7maWU9sREfkcNY\ngH14a+OpL909Fd6dn/kFzWJwzguHu7iBpDjSChJxAM8Q4NopK2tCkBlVIMxy\nS0FvFeG71Gp+PaY+Ed5Q9WzEJwLS0VKEH1LFsH7gTvk4Bi4Jt1uFMCotz7+A\npdej3q1QDG8ED3Vef4WUIcdmSJIXGLcRiCZu8IS4EVkmt0VxyGYTEyFUhAP0\n/aKoJn9d+Kx//kj7FmmO+Ys1QYSerR9+yCeyjsKkhh32AObQL7aqgMEM29ju\nMYlUF0qobTy42OVa/XmDYI1U872ypK0A73Y2CXbhbBCiB6aafD9U8wvCDGXw\nuJAOoOksl6t1iW7cTC9J2d+GptwUSLsRoCscr02h/ax7tylUkig9qx4gjhVy\niuGt\r\n=6DcR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/touch-target":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d8d95020f.0_1579734579327_0.34295149843354045","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/checkbox","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b7facc628.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6257a3207e4f81840d515e3fee744b06e9f4faf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b7facc628.0.tgz","fileCount":37,"integrity":"sha512-j6vs4aXN6G+cNTpma75uq4Z2D0qMe2HD1x1AvRPCZ/OcU9vIHO+hi1Q7fb+G96xBUHHYjRJ1YBESu1bOOSsbbg==","signatures":[{"sig":"MEUCIQCxWB4k7uQPhMufcUMaEjEbk/Uk3bZ+hgsvdWcqqBsSwQIgfuSIenLoTNedcc6reaMDA4ITIzS7zA0AyNx1IeA8py8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIkCRA9TVsSAnZWagAAZ3IQAIDGUszI+oHVvuVJzA3E\nIvGCNI2C91em3uDA8oGp+PaAypPSUyf2Kd/uQfG34qeulnVaqkWIDsm83fcW\nac7QO1fUYjln7OnEw0tpc40JhoJqCvKmYFtN29fR/T+r/5MfK6IsLP377HoN\nQgweLX/UHQtPd4Ud1KfQ0gnPv3lyNZ2/1j0WjXFXe8bESV4M4rSqGYhzROeI\nJ8wW7Bsp0GHQn4EHIo5e3qqmqXdczmH/JsOQU/Ag/KEVkiQsXVqQxIkfPVPH\n4DWwEkJR/VLvcScVKcGMit4yswk8MAZML6MilXTJtm86FIsJFBFo7csnkL0y\nnZEtT4r55OpsOJIBJs/nb7KfKy5DR4Iv9xmIa/uxg/5tZFzCBitq76NI7jCz\noCc6ybNs3JuX7kWevkmsFKSltV1d+WBpcNBDR9jVpPp5kgY90J1hZ8A1fx0A\nq1j8XykEZ2pnwq5seyUY8WO80ehJLP2QGPo/i+tp7hLnAZlblgQG+YltiP+x\nHTmNWivlGej2fOq1QmjKmO2T4lknOKV/TZGBzfpRFgBczh/LKludNUnz89dI\nE2LEz7jiHxniBbCh2nRysmRQU9PvKRw1JGKr7Z87+xQtCoHPvjAA9MHbY+A8\n5b0IyUTuCs/5MV3E7uzWRJ9uQ1cxGC7O68o5eybDGE5eBX2OwsU9Mrh72Ha7\nbFNr\r\n=DPdK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/touch-target":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b7facc628.0_1579803171595_0.9166080696927272","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/checkbox","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f9150b259df346f87cf5276ab62c84ee5e239a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.63f357dbf.0.tgz","fileCount":37,"integrity":"sha512-2yozsoR14wpDa2w2kCTpjkBCl+EFT6HNQGL9jt/c+VuD1XRS8j8iAyJrI1Uz8wE7KoSr8W+FTD3jYiBcR+gj8A==","signatures":[{"sig":"MEQCIDUzRyOPeqUFHI8EkLk9XOLrBaV0uaqfgG8ikJgwfmlVAiBcCYuKSkzJbf38tbjik48EWO35AiKjF/XRo+q4RrVczw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZRCRA9TVsSAnZWagAAzDoP/1VzBQ25APS9vtLQnG18\n2spMsE2oIRpvv9+KhrLDS1IkHuJ2HLKIibUpP9eWoORf3YOr3b08KfzuL7b2\nPx+ZxE+lUvlj+eYKOsMSUq54hZIZw19hBw3ZViI8Q6t6Qb+KhjxGRSen60fJ\nIyG/wsfxNeAssR2OiHe0WacJaaCEhZoIMRt5Iy64R6wbkjrDzR8WA8QECTab\nLmzhWIV12t7taKJY3GUUdE0VOBpHO4FaakTWOVI8gYjz9gWQG/Q2ANDDYSGi\n4cMovV90+9lFKtV7VtQIQWt8fwigyPLKcnW5NT1kl/ncN/qnZt83siO/Vrfu\nFNFqHMEjiLW77XVxK1vr+TP7UGoXSGMu63tQsz4b6HutKXEdXMY/XZzTSOtN\nSNW1TRYPoRgrgA+5v6mCch6+QSnPYRUr7gfKKsw4ygcoblA3QnZOKeC1p00S\nLxLcFVYJRJM5Di9kPi8/3NNt4DfgbXDy0CcH2YJGCvgLbH4r/aj0P7aGpDfF\nebbfso4Pce2uFnnOEAzfHscv4t9dg2zvv7sFkcR7ft8HXI81nqrPS9m4LvyY\nFe5K4MapXpGlhq8rcr8t7RK5hlgUPgcNYnz9JDorU2hNLjn/2Ul73E+I9IAN\nYD8mzxItbbHN6kfModZblVL33JjOhOqQVjsKEcnR3/crSVXcyITf9SCTy0Bw\nF5yL\r\n=9bYG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/touch-target":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.63f357dbf.0_1579816528662_0.3948265879481092","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/checkbox","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb806673a72030960c7edc60808c89b2ceea10d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.f2426d26e.0.tgz","fileCount":37,"integrity":"sha512-fXG968e/qTh9qBlIYWk76P0OYusomGBYWMO3S9fOQKPNGILfUb1V9kljdjYl61B/5KQPmJWj4Z6guH2U9EtgsA==","signatures":[{"sig":"MEUCIQDpp5Izp3xk9h97M8ak34C6SaYHM5krUzOp7ynKAWwOewIgbIe1h9lmPpoHitH9hZwJleFt+vSJmxC+hBUd2Y+JT+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJsCRA9TVsSAnZWagAARDUP/R4nqEH7Ikm2FA6SBEuc\nZ1NgSmWC3PLCIJEACQ43ta1mqPq3u9Zl2vma/3KMdKS16U7xfpOFaZoeFynb\nBS8LWEAwbVDVn5BanITN3N09En++WHT0N/ED3wB0R7RdIP7+DyB2ZWC+UAJO\n031iGuc5bhY8U+h1Hed40+P6u3zYwBS6l8jLj3SG5ewQ6d57Iru3GwiV7jpm\nLFhJXs8XiT1TvyELXWMg0UKjw//7ACygv4BCItboDRuqQZ4dMmTa+cJOD2/6\nxyPFrP6Ri5ENHfImSluMjBYhIj3Kziz2fmRXq1+D0tiJ/+n2xJPqj5+FmH02\nsbKIzkg9DS0wEef0svLvmMUaaxuxVPTiGKx3NViG0aIeyvOvzVOxOqTSZ4Ed\nBr/KIkna9SYpm2RZNr9d2AjWB6/Z1/3XZF5L0a4sWVQgBSEyOQc3YZW0mNMc\n8Vkb/OMrYmGkaj5lZ5q4m+aDZ60knwXI/kVa/m6/ayB1BbClfbE3zRxz2SOb\ngfTYpBflv8LJYqCXXLbpJ7M+Y5qdhQx4d0geBXAVGLrGlqU1YHjnB2PSbb1x\nePdq0PHhz+dgfBUI1LcYqULMLjWV1Yz9Z3wjCq5+a7OwVsCFOQFPkjwzeBFC\nApsw94J86FkoHQEQU5eCPywDzdD4JWRlMjSnY4lCGN9IqabjvkoeKqhJwwaa\nbtdx\r\n=xErR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/touch-target":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.f2426d26e.0_1579823724365_0.5950704746223632","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/checkbox","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16b17cccc49c285f3f033cb4bf6dbe113f7b26fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":37,"integrity":"sha512-OiqvPMPYxajQYLX0bCmm7RbuqqoD2bCTMzlF8xKOmBysNa7AkasU9RELga2IY3ZKYDKgf90A0oCCeHB+n/MbaQ==","signatures":[{"sig":"MEUCIQDDZS+W3vuidOkUxMjCPFqyvHJt1wypCrj0BGghm7r+JQIgAhleiWoJUsDNPKr1d5ZQ/2u3TF9O+j4aHfetQWccAOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+2CRA9TVsSAnZWagAAEkMP/jJL6J6HYwEa7nPzArp9\n3cWL3Q7TFvmFxPQyo7/6cuCK7s0nQJCxOGniWIOSEIu1tL4c+NMmAe3HNvn8\nE9s11VtISZg8bCYhkq9lp6NbcqkxoG+SxIh4VGXBa98i1mAeXot85n/tPP35\nUOIk7OFEcoj198tHHOieihts/02Hb1rss8XcOjuHx6wjiMG7PcGjEPqXv6fa\nnCIQnz9xpKHiiMqPN4YoyN4LXpYXZVpz0Yb15xKr/yM1I0CjYWxvjfxDbG4L\nCyFxd4K2JnfRY1Wo0Q81vhzhxCUSohcj5PmjQlYVhIbEnj80Tnko6p03OIUX\nltEbv+m2AG+AuAuV74z9d5/lsHE4rht1AmrkvZLRNRR33ZiIXi2Ck2DhMT2a\n5QS9HHiC09bl/2dPNMZpFojBheJN8F8Cfb2foPyMpjKZwl7PJomFxiJRJaao\nR2mHOxPYUqkSYdMVJBG8b2B77RQMa6KXjCvyWOaPKsio6qWuvYub9ftg4kTp\nfGGELoO/SqTrvZnvNIcp1QK4PejCIGVIiZIMW3K4ccP+yDNNhjWszIruvr85\nKX+5o9euDETrQnymbin4pxcUIdwLibEzeCST3pGnLUGR7iR9ajk6WsIYXEid\nwX8/hIQJhuxpWfzBjCmftcbu2cmMdSuU57qMWSgQyzGMTCyHBeLe5IBzvQMk\nGiIZ\r\n=3SH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/touch-target":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.7f5e0c23f.0_1579884470244_0.7334351487510844","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/checkbox","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abdf9ebfda62f0e3aa80f5c3615b2a428310b799","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.3fc3ab520.0.tgz","fileCount":37,"integrity":"sha512-Th4D6AAWSlGkdJJRs3MiyCIVw2m/q9ApoBPxH+FNwCTnOv/DS6srLQYB4cRZXaVmEpWwMZ4yCUAPAmtXh820yw==","signatures":[{"sig":"MEYCIQDylV7kETjUNISE+ZL8e26z8r7zIL5qCJwEjPekiyXPzgIhAJj7939GeiEyvoYCCkECFsX8FHbNnffgZ1qatJ/Ft/bw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyeRCRA9TVsSAnZWagAAxKIQAKHvTthpA4+C8P+49hxH\nuOVRqJ5OeJKU2AJroW7wT3cVQ+c50VkDxQaVEntCoOeJxpd8ogPgNjLAu7uG\ngcBgitrRYW0CB7Lvb+xu3TKt1IJOZxUzKidSjZy4lPgDa8Gq+WNWgbRsWqKF\noSjCT+8JBD4AvtGfne2QO6t97H292aedmATiLXaL82+UZKHXz0YvayVFlj//\nYgTPQiAmtN1h5BFdN6ejDCcXLCFgEVej5q49nPdjRYRp1EQzK2YAQynRk91x\nRabvNdkVItBVEdWclh9p/yDX/8pITgLj/rqJuewkPIJxGwP11Gk/zP6ArxfR\nAyUJkzs7a7fCqalwUccSbPc9V6FmBFvHIAdiWA7D46ASPP+gLIwEQRXZ2l3L\nBqkBjaSzeft7P08rFwD9/UG2xMdYZVD36mp7iPRKmGwWFICzIDLKSzv3Vo/3\ndIJNdYjMC8bq4Cwve2QO01FgSMa0DkO/x59ZejZcDD6MBrCpo6qj9cHGQ0FO\nAPEiBXJcKFV7RKCe948mU1SB1Fd3eeocF6p45mOKtEqz1Pst/x7ZLq8Ng6Sl\nDZd2IRcSATmsNqFIIyG+pj6F/1178cmVXsfSnHUViXfGYdZRd1/17QkKKR2D\nPbPMdxZFTAkfeuppbyY+o9hmbjOp6BvAtxlRG5nY8ReTyHjxJOD9rN6JH2MG\nYrPO\r\n=lbhI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/touch-target":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.3fc3ab520.0_1579886480727_0.09307764139599639","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/checkbox","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b766a4a04d24afbe31fbe63d7517e1e168958b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.80a4d326f.0.tgz","fileCount":37,"integrity":"sha512-KSog5YdKJCwYPoRI3E5zP7A7KNx5bPxO6as7PNNE6xced2l1mXwQkJNquvMKZjjfLWPAP5z9yuTv+zySD1LYyQ==","signatures":[{"sig":"MEUCIQD2IsteHPAp2XZAkey7Hd62EXOTe/yaqbkta4yv0jGkowIgT/TF5YrceETR93vECJTnPtnpT0/PYGn6Z3ll+ANfxvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eFCRA9TVsSAnZWagAARqQP/3yuhoVH5uoQxBRGsqUq\nqu0j/w4vjQI7JtKHfeD4gCCR0gqOde0mArL72rj7GtFiyLedAnGY9wUpelpw\nXk9HMfa6UZqsHhMMaWOT38yYpNgA3qVn0UDXA0XZZ5QPqzYqMbzu9/nh+DBv\nIDFdoAhNxCoZjA8OpdI5lvJTKgtjAgmgPJVR1Hj33/NPcNseQi9+XDaYzziV\nipUwEeCoYqrSlkFU3tMvv3cTI5letKXIxNg4aOmN6V/J97dKW238XfaF5xRS\nI/DRNhomLYDfZt4QySrBcY/ULDtLJ7jwEsDg3sku9mlkdg93bLPhDpSBp4IK\neLzWattciqxtEYKKWUdvWEGGu5eFopA/8bS2GEwYJ6MVlox3MGwVC6/r7Xwi\nIV+SY6E8E19Y1h7OalwFRG6UPlldV5Tx6Sb1HvWm9eJM8O66LFALhak8Me6U\nYFInqHVsSQdBXIPXKNDFSFGY75oBhv6+58s7TBPwRccbC4A8l2SkX7JVlvDw\n6kHWmOtHBgEXC+XoJ08k2TrCvDQslliLnUybEfBzZ5O2mz2D15SH8YfFBiRk\nG7oC8aeXAHlnYEDBXWyKx9YI3bSfy9LYAAG5rxXbhaCTsF9wle19InnaWuxq\nS4Enr41n24DQKoxbsUoqqoqyh7Mz9G4Ic5Ys/t9z9ZP8CxvrMX8ERvh6tNyM\noeUp\r\n=+m6J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/touch-target":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.80a4d326f.0_1579898756812_0.49576327325137015","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/checkbox","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f11a6766aaf388be44c320d667db8e0df99d116","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ef7de4def.0.tgz","fileCount":37,"integrity":"sha512-f3CTGCq6T8ocoGRTQTOU1hopRVdpNQldskWFpB/snKqlt7cY0Ll/cOVfDrJiW9tzxlAe8LDLSmIWtqiElJ9XzQ==","signatures":[{"sig":"MEQCIGKi6n+8116ZdkesPkIGCastJwbv3RPteBPhsOANA4vlAiBNlHXh3Zh1zYd0kBrpCRWoLm5oyHm67AwgLE4+QQHQ3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JwCRA9TVsSAnZWagAAnCcQAJq3aGCQt5vMJoUZGHgx\nNeX7HCDD0OL74SgeajAtf0muwia20XT0ZeE6HxErwpy9igX8YR8x78XHuU/a\nAnFwowBz4jxubgyzHCSDLGYzhdoozAUirE8/unQ4EgZ8sK5TAdd+QUhWDp9Y\nKbUD9GjctVENCa0ln2ytfA1/EafF5AlzXUwu1EkoAinj0X3Oyi4vmrRnY1Yv\nIG7xRapcHqAMugXPnqa5ogTVdO0IZ6EwlLNmYV0KwVite2yTm4fnwbssQl7W\nKRG4SnKYQkPxSttRtEI8DI1PYe1mQF2zzYcc4XKI+KVbMZG4cutCqGf3GCPi\nNUJzFKkNDUTxV32ZwpJcUBWcQltkFVcSsOtfhz+2Hry03Lnlr3XD0KHzbK/O\nI1G7c05sEhct6ulIdd3GnJaEcIGw8OivQSvMGrqYTpvGICTsJjRnbB82ONrB\n+5qZh73NnzxQU8ekkoHzWoamSv7PJao3WCk/CVuC+Ip/wIJ6RkjvdrCWAa1r\n4fU9ZP6lIIi3LYen08pO7na4afKr9auwdhCstnP/deToPbev83UufRVyCesU\njhtv4XXSEqlEya50ftDxWOvZkAykEDn5kP0hj3BHNAcVraePe+NnCPyIh7Dd\n/swPVL2jos1JZsgsZLe/UvQ1Ihpj0FJYa/S72bvMrS3mI3g48kSOdUokhKOu\nkfw6\r\n=3SMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/touch-target":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ef7de4def.0_1579901551648_0.4096555757612026","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/checkbox","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccad51d47c3401c46259df1da095b4b15e409fe5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.93e2288b6.0.tgz","fileCount":37,"integrity":"sha512-xt8c8SBRe+e/Kp5pqpbaI7iVsZzgGue9rUOZhE6SxVS83LcfinU6R6KL+qKhnm49XwQJvxOVa271KW0ri6Liug==","signatures":[{"sig":"MEYCIQDEkN3cCPYDaLVuu9MWuur5Bi99LxznMfyvEIBijODs1QIhAPxf7WfjQz0icAIccdVXFhR8X033b6wH0ACWTGCyB6WG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGeqCRA9TVsSAnZWagAAd2IP/1cqhIFx8w/+UM167zID\nxUi3ES1ij5ANK4qWFMwZ6OtTrE8M2A5yiaOOC/31rmJVM8l3khOPZ3GGv649\nc481vpa7pk8V/h9NT4HUylo0Hq7opOyb1FEr28ghhkcicaSnqhEVBjqnrzfZ\nsRhFJC6aglyxP1k0Wv92USKQA8JaoU4ohnd6FLozI9QkqwSQRSKZqaRppH+7\ny2cke14wjaw0ua26YKXJxRDkINSUP09q/kLHXJKw9c/+UFLDgS0cx29+M+tc\nhDCwHVbgWdFf65HmXztEubvyPovv3sllLoppf5erb0UeY1ESfOF7okQh1SUz\nBIWQONd+0H99rhTWDuJv0uVm1rFtLb8KDZI1VkboYz01DxPmpWOp9XFAlIhn\n3Z3+WIC8FQBpAtR6iAy/eotf9pBMW9oZEGiG7i6EwafLE2357da4SdHUjbDR\no2jebkatkpJpXZGsq0zv9+B0Ftq9PKnXTPuuB0HUjapHcI5jt/BfddeR5NCI\njXKvSb8jMTyIDnJxazxL4dPs8EE7j0GrNWrqmOUvcVWNxnB4EnP/yEuc5D6u\n8s6TxD86Iz2Zt3XxHC/wM9Np3uOlBzj2L4IjZX4rTvPlrSz3jtjOw+qsYEiU\nXgMMy97GIEhdL4OkpaA8TF6sUX+5D8y7vTepvJi1oCwpcJ4qq0mz1yeHUmUu\nye/8\r\n=gZLr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/touch-target":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.93e2288b6.0_1580230570262_0.0687895213362768","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/checkbox","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c1607082063dbe37979437883283b80b1daf0c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.34ef15f67.0.tgz","fileCount":37,"integrity":"sha512-WdgY9XMTpgw5cOFs7FVfQBmHtqDeih3z14uwzTyAbdbOjABjsOXvDmu9ezTjv/fNvXVSbEhUUEdIeyut+Qjf6A==","signatures":[{"sig":"MEUCIAogXcFhT6TYe/F7V78weKrhi3Sl0VZNZfgn4Y4Gv0biAiEA+8Yb+D5TPglRzVxj+ry3i3TLHIm1/ul1tUMt/m8Zjs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5JCRA9TVsSAnZWagAAXUUQAJ3gmDg1Yc0n41bWqC9d\nwqG4wm+kPgiA/X4xaC7h3vFRnwf9Ewqs6eP64/DklyIVpeqA02TFJ4gGBuL9\nD5go+aUgXujpfpXQ5CGtvYGFj8+Id3gA34r+RlJv18V203xa8l0Gsub5pgJQ\nrUC888/7xEKMk7IIPd9GyqMTlpBxvo2jk4e4HOoVhnBx+4obWjDWl683OMGb\nEu2zgTTg3thHrfYc2SmI0G4RXrdPxbPqa4TSpK6NKP55uH0n7CJIP0fDpmsR\nJILlgiANqJyQuW7iwqH8htTEXnesV+DNnuIlxKkJwJLuB6O9WwANjIPts7I4\nuYv1DthFL2PkeNNOu8b6kY7hpBCf44RsJbDSeryhl9f20mpWSTfkMsONZhw1\nZdM/EZRgw23lPQFUfY05/mdcPY4JSqWUsWyyqiP4ZYfMXVtgPPQh5UsSpXPy\neXOTV9upZ34ntBJvueCzoym+GX90Jky+dTqP7Cj1Rbs9VPKBjrLKcCrpO2sY\nDXWaEOGtn3LPKZ6UDfQsoblYYy8rA0UJIVPnA9qb/45bRB51ykWNOh3QErWs\nN7+bXZ6g1ZBfM8sNHVVtDhs07yea8JmBPAceJr4jlu+NYS7Jzb0x7wwhaWHK\nrTG9nD5VR92ZUe9bk/RhM08emylypvctfwJ2PT2d6TSukB26wLnvZvu6cljd\n1I1O\r\n=ScLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/touch-target":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.34ef15f67.0_1580232264919_0.6409231200117251","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/checkbox","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e0b9a27fd409a1e7c2389dfbc917ede1db1c137","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d3d176ba5.0.tgz","fileCount":37,"integrity":"sha512-LhIUPlr5X6h+qzKcbNgfAnz0BWYFpb8xSBFl/49zdWHfzF6jNnnZukA1vw3xAK+yoDtUTdqTm9zUYDJhci8WrA==","signatures":[{"sig":"MEUCIQCDJrW1/Aqgc/ruX+MqBQbxqV4PBaLlfVIvamZHo2poJAIgcoAguOcKOtqJRvU1LlDjRzzpZeubTuWtqeFhcaKRksY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+BCRA9TVsSAnZWagAA9R4P+QAqZLP18dnBoSjcbokV\nnqnLX+WlJXmOzYYWGtfkW5bIwx2bx7hwQdsZ5kBftAf7T43C/APY2yZVhH48\nlLLY+SZmvyfg4WgnqZHnIPnL5Im3hM9skjhpoo/4YO8MNLuDmSoj+rU9u12g\n+9fvx4j94ukXhu0ijcU2vfJvWgnvoYXIp1Gi/w0bhXEyElgRjtJvJjkCkdgM\nSQa5ynPgWyGrnrsYmpQraOWIuFMUHTBzL1+mA3bRUEWQuGt8qnW2CfxSQoGz\nZgAWLa//B1nvVzJHZTxyNE/8eVGpqfu+6ZpuJKk2hlIYyaIMTBQjafKR9hcD\ng+t1CxECCsy1LDYHzboRSkuSk52/lquBw1vllggsOQMjGsASQa3yglC5RyGw\nWR7m/7nUXG3roKPzEHyoulyZnwrBCHl3lHJ2Nr+g7L9+uB3M/j0Okxd/MGbe\nn3H7Wf2Iu7cDFcM+A8PxjCyCs8xdXsoRPe7JpDOc8S7RROMiGFI0+I1A7YLB\nwTCr0DBNttU7sxG02lijCgM7LJfoaDtmR43nKZgGF8P6OwcI8A9emVR0rdk9\nslS7Qi2lD9qNZoeeDt2LAyPZIY0D7scrKhxJITPNf6YkvPJXCszhTKs52YNR\nC6peqU1Z+PMt+RyrnI1PtM9CR4lrFKKLz0CjxQP0RVIVH32CQNURRPNYeYLu\ndiX9\r\n=b5Px\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/touch-target":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d3d176ba5.0_1580232576571_0.3411486564280839","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/checkbox","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.32c1df133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07db4397135cf277f0dc2488eefa4f27b056de58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.32c1df133.0.tgz","fileCount":37,"integrity":"sha512-+V4TpwOt2j7NEs0qAIj7CfbAlix9dSJR+Phc54Pzh3jRn/SLFNXPurimZjUCq8DzmWtpqRHLCHVCc8cFCS0BUg==","signatures":[{"sig":"MEUCIEERyQR5GSljcJlmLhxceVSeK8JZiWpsdJiyJnWc87NEAiEA550ngDHu1H6CGkcm2O2c3nkFmtoWiASOSE9/kUnSw7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7mCRA9TVsSAnZWagAAH8sP/2PlbcAwVAK/iFaeZq3T\ngpQ9YaC9qa4OPmlJGT9b+NXnAYUPOniSFaUq2p35bXERf3vPQskF0Vsv7d/r\n5XvewrXwUlKFhyu3bYBOZu+YVgQhhgbXrt0RZ2v4x/By/ARL7++1MGyZkYNF\nTN4le76mtN7R/PxB8y1Pfo9YZhi2qCG8q+IyBZg4jxrdDInwXXF5+MhIe0kf\ndfR5rXk9qBWcD7TMw8C7BvYRzLICONbeq/05rL0DqKial2rimegSyBd+huUl\nzceeOS/bHtXGwUD+7+S+bTJSsVFdGrS51lj1OCC0LlCQX3N/Qyjt6oRVHDmi\n2gXJIho6IazkhI+wv9QDL7ctOl6IsKYoUL3MYTqNecDUxOq7WkzvUzp/aAUJ\njgEyvLKnm3BlxvgKFgenofxc2VLCOrFdpkFtkk0aymsOG6dASAvAc8iLfH5v\nDUJl4NrUEJkVPAnisvaI2lHoRD4CiXDvdt9+p/+nE951TH/XNGETtCMTrG62\n8UO9EXSfW5XEguH7KCYdGTpTXYkqaE6bcsHYYaKy2cuF3FbeOZUMnsvEdrDx\nP7PwTFLkKZGIhgn1CdeM3WsUVXC5EG0Ii3NKvs++gUQDOifFQXC62kLONQ8N\nAp+8FIj6mT0KxOKeXkDItpIKaq0PmxMrHdYEV7UMpuo/PYDmxb6FAc+JOBBG\n+Z+t\r\n=Cbqp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/touch-target":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.32c1df133.0_1580240613957_0.638508349375877","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/checkbox","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d45e60a65a96a38595ed7d9c6aafc3d30d9b9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.f3adce86f.0.tgz","fileCount":37,"integrity":"sha512-xU7Di/p8ImYACnBMcwU/gDNJI0naQ81Qal95lM9uFE8fFVJ6LyORjLzVeEGFE3MQq+Chi1Ef8D4FBIkGeis3Zw==","signatures":[{"sig":"MEUCIQDxC4QAqSJ21xWPanXe///BfrNjjKH+jcnUtiJkU4Z1TQIgaN/FqftmddlmtBWyc79KcToyRInbSSHF/fuHLHul6eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxWCRA9TVsSAnZWagAAzuEP/ifnXhRIJMmHZpmxm3t/\nveMeysWH5nVWjL4Y6ywz6n0FY5crJmkWt3arWZ6LvKZ/TdLx6SkgouvPv2qI\nD3LCnVF0Sei0Sr4Lg9IScqeQKnkVb9KxZsBYNTW5UxBERXMkJIEHEAxG09HY\nKezY2onlOgRHkpBKMT3XfDSD2FRxTjMKm37yp625JKMsE3aEeO/kwlRS5QkR\nZeP0N0VUbcFGAAq5Dil1s7iuEDE6oLL1QD3AKHS6DcqdSGPWFKcQMJJyHpVf\nQPnYM+++uIX2uZc00lFi5Meii5vBJWElvA5YAJYkA8VpgPZdfh1yX6V89ckj\nEa2WnfH7t9IyDvf9Q3cP95AIw5KJLCzX7cW8Y7oJb6EsJEWvDG10+NbrSwsG\nT1qziTT2D0ppF2EP1UN1IK7u/+i7tJ/GwWB2dvAvc7+f4UgZeW8POT5KSONz\nFQaCOHnDUnTc/wAXK0e8RC2soG0BplJsGEDC5CNO1+3HybAU/TH9v9M2rINN\nl0U46xMM3pzc99czPPi73tVpY+LaUEOlhGPRM3UdtBTdKTHTJvaOCaJeyLDr\nrCuQb/5InGEQ5EbQGnaFHvNrS1vjOhJYVNJhh0xNfR5JhAQgKDj/IDuEU3Xc\noEJsxmOuyo4wNJ0AmF0OX+E5aIWC5fijfsdkc2CuKh+h5I8KlpS/UhB6ZNlt\ngO5e\r\n=oL75\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/touch-target":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.f3adce86f.0_1580248150035_0.29861529481711635","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/checkbox","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a4423f890.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6dbc2d857a0001359064fe94b068f62bf514761","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a4423f890.0.tgz","fileCount":37,"integrity":"sha512-EOOlKS2N5nYA0zy4dUjMoOwWdZoW6OMbJIrULbO7q7x5ZAJZEtR5VhJ+nCaQ834y59HElG7RDFERo6GaIyPobg==","signatures":[{"sig":"MEUCIQDGYNBA1S5LQXU9Vj0Nuv565Ooz9A8Lxdtzd9anKGvgjwIgAmEU+G/6wRsepv3TdJbiQets/c4NgnG9QMIPWEiKchE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSaCRA9TVsSAnZWagAAvtcP/2w7vvnUQWFRyi1TAVvz\n+OssrbFyY3YpSkI0DnVQOudRnCS8wzsvS3Xrjv+TuJsYsrvEvPbYAz6wjH7x\nHYQg2pZsPCLJ6GE+55CfUKs50q+lTwg63+NJCoTvPf1aFu7Vl+n7osyp6422\niSHypbOqddXpThiOOdywaX/cDaba7z/b9+KeY6txrQWwbfEiClEVq241Ufyn\nR1ZAgUsCnTuXdlaDXUES7czjxW179peAlsL2TgoRE1vRN9jMuMlWTZynmLPa\n75i/3rRFMJz4m1M0VHod2zk1zptft14mx6+IHo+cchexupvZJQ18UB+kx2Fo\n+4NYX3xGnccbJxZT/3IOpjT074zEPbZO9jKa6V0dQjv5Ob5X90kMdSOUWun7\nABzlBiDhYvzL4j3liPE4GDRSdUJdBXiPbipQ4X3vt3kz7Rl1CEDyhP2ViImv\nmh7zxJKyuNy03a5+mbyhvW068Z8WeDoFXM5WDoa+36J8kZxZhx0Ov1VYCGt1\nL3yTBIqKbD/9heCAf7yXVA+AIuplm9vVh/frGvBhm9fLuaECAEM0eVTRyu+c\n254Y9Z8d4ery1/vx1kMOTX0JKSxYAzg6RhmtgZZZzmVhxFQZUDVp1M0eMSJW\nSXkovCma1MT5iZY+M8NvNsJjVhBLGWX38dqmiGaeLe2R5c3mGQHNjFTNBaMR\ngVNw\r\n=dD+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/touch-target":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a4423f890.0_1580332185824_0.4037557858842198","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/checkbox","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.9351f167d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8dd99e8521ad706f4197f2a34af6afa72e4e23e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.9351f167d.0.tgz","fileCount":37,"integrity":"sha512-ZN2g6u+0g4FrkDDaHgqSC3sjAdxgqREqgAcw+wwPNZ8K6vSWgJgQTgKdeGGYooG/PhOIbb1Y85rZDgJ8i2Y1+A==","signatures":[{"sig":"MEQCIFzc3REFsw0x/+Ba37W0IIOhs/kyGi13mBCBoe92MTXhAiAJ95dLYU3ClIJ2sfQK83TEKMwBztuebP3HtcwvXlsILw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9qCRA9TVsSAnZWagAAvA8P/R3TXjBGMAw936oqBfo7\nf4DNPkxL8Q01skN8Xis8A/Ygzx2s7eVmI/yEXNDc/ujWkctn8NbWqzJFL8Nt\ngFFtBWIO4RR1IzJ7YooAqt4u9yVzyXRsWrEI7zOcq1WmaFfV0Kgwh3LgvSjS\nsZRrnfEmC6RHrTeYNIavDhYBDqgV6o1/iWhkafPM6qcaXnl5lPHJhOKcfm9t\nmhv1ASjqzsqkFGIH+R3c6tJyCS5fKLvwpU2twCQAK7HodqGOLCiaJT9c+MG8\nTGIrFo2c1CykyEdW1SD+Ga/OKhXKYKv0dZCtaUW6k2o/FvDAtCnzU1x2bWim\nDGdMU1CV5zZxILo0a94OvuKKCRln/kMmOaGq/fhiU1ERx1BAocyQ9XdTurv2\ngalxJezabl8GSz5byhiH1lSEO+2z/YmO6Jt+TOUngfvi4NrPUrGIn8sARI9O\nbFiSw/1GpFKoYaW83z7JsJR6lBZ+IPVyQLI0h9aZAi8WvtbNbSKM6PEwVHRs\nZoJjo37XpM7KgBboC0HFa/fxXilgX/eDyI0z5qWnU606XGtY2hW2YY7s+2DC\nYT/eTh6rMo8gngiWYB6T7NftUL6jpKIKO5U3umUoE/36qdE8SVdweZWLdBjX\nCbxJJQxWAhu4sZnsEhtkaeStPLIA/y7yMbMOSblmXs2k/LVNnPLEW0uq0vly\nPpf3\r\n=lRcU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/touch-target":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.9351f167d.0_1580334953763_0.3338783366120712","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/checkbox","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"100082ee858528275572d0fc642e50145450d3a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.29b89dbc1.0.tgz","fileCount":37,"integrity":"sha512-8GZgwajcTarKfwtZ4lKC/GdtBE84ZwCJd3PNj3TgSJhQCCXElBkLjr1NeJeimLMVTA6vbdlHHvrU8cbmjWItnw==","signatures":[{"sig":"MEUCIAKiDrl/j9L9TUJT4H5lIHZkkEgQj58olmJW/qhxRzHaAiEAjNp78D9kdRjOK/PH9ItkG/DObZTpNKsLjJsbkYFQpVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRWCRA9TVsSAnZWagAA71gP/RiYKzoYSRTXLGBogDLo\npjMQwWeDnKHIwh3smftzBgMfitFoCpfhag4praVqODGIdNGW90pO1KDOvlP8\nDkvXZCIVzDb0mPAq2WvzC8KhWNscujcKSuyE0j+2F5yYSZvS0d1SmESY1zFw\nkI8EBAtjGrL0oqskDAxpIggLGGA8VXs+6qtIeHzCmKwtrsOm4762Os9xok+l\ngUWxpF4wSjKtG/B4e7xFu8plHUNnSnJMocPt5LbEZyMF2UeTq/Qn6W8zzbqV\nuuL72aN0h0vVei7hKcWi52DNSIyFEib2FFz0U0CTTkZQuE/eyPCJARemHeQ7\ncLLMVJ9Qio9AW0cnIGSxrfGkdPcBPWjuhN6c5K5p3bNNkMwdHOi4GqabLNag\n+4jxc/D6AzfE5v+tED8Tofzpzg870jEpDL8agNEsrME7gVSncGuSkaH++YzV\nDxyMBJGmXagwnkiRjhpZLqw8NpyketBE/KTMj6FrTx3aBfRUZrN/saJV0/f7\nbmAaa387X/srdIZGs+qO93/KlF5rwOYHwTQvZGPWCySKOGIlNgEN5NzzdbS4\nYr1tbFGgDAmx24Nw9D3aZYqtABvqVnkQxkq6bWePo87c9gRTjmrTd8tduflC\n0hzSAqCwb5TmIG7XQhqwWKBfJmkTECuCCno+AnOqcRyfs8dcsrin0sxIAzT2\n3U26\r\n=FQ3t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"anonymous","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/touch-target":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.29b89dbc1.0_1580336214085_0.6381814083450237","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/checkbox","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.45985457b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cac463379bb07ef0bc962dacfc8c4d8ea286a125","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.45985457b.0.tgz","fileCount":37,"integrity":"sha512-GShoxOmrl0m1KrxjCDBXn3yMfLyrD85qEs4UF2N2R+66fHS0/jXVt4ypegN4SMrbXc0PYe4ZTd0R0JBEYQZLdA==","signatures":[{"sig":"MEUCICCxH/d8hHu4wOankkynVcgUvqskU943DEZIexmUbmnQAiEA967oglBl2gIAEsXjbdafWywXwlxdkGYnqA2ctv8yAJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":516144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhaBCRA9TVsSAnZWagAAmwwP/1U2mL0SiOeaROSyxMct\n0gMYN5HECOP0T3ELBDrbKNcJq2GjsBelOQ9iu95pOsNv9E6gJ+AMxdIaoDkn\nfJbfWLVbjJ4xDBTS3HnmQCzpMsvNrNO24avkTDx+/0vcEXGt3SoB6w1ivfTh\n4o/9gTJY0V1LMi2FnjZ/ec9jrQzFVflXFUI2FxY9cvl1tz1+eyfZrNLH5EfK\nQZj8E0F7lNNg6/3hlc4vGwaR3BeT4rYfGqykEb02UEiVnpjNN2yTzCb4YWhq\ncYn47V6EhgwhaTDQRTW5IBN2FcH4GqWMauoFcJltI2FN5IDEMvlDV+EUnm70\nMb5J3icmm6Rm1oOwHvCb09TNwqGsdm3dxiNT+UmLWPT/Q2WVL4EFUZgwRw1a\nWvZg+8rdikzrf6ylp+b2G2SN/H65Qadhh1AnaWAfDZRWPDMmD9B+jOSGaTyj\nD0advFuokZpJJYG2CGd8N0/PsmwAvd8Bs+hmcW5LMImaHLnaSIYeX5p0jfHZ\nVX3gWCgxgwjKQAKUpXS2YRu5vChmu97A5bqPCsfM0ZnssYXNCge2fcGBNwIJ\nTZBLOLLDLF/R0ROVPnEryEQ66vqZ/emMQv26cywJUjd7SUAFpDBwEl0VKXCi\nWsQbLQYoTsyqEs2FghIltv+I2p9oFfGngDNuF7T8f91FXi8VSE1d/m3LXUHE\nGwjg\r\n=TtJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/touch-target":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.45985457b.0_1580340865102_0.7368982979302754","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/checkbox","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df44ca36bfda711bebb2a35cd5de406399aa5b61","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":37,"integrity":"sha512-9ISLxNBVwWZSpjotMXaoVM7dO9AMWudON+DcxtZ5Gn8+zniv5H+I7SS0Elr0vFRX3GtFVfIrLm2UH/D6eoQR0w==","signatures":[{"sig":"MEQCIGpbI7KaqjaylmGK6z6igzZlcLVeIXfqtR2Y4VsgqFgIAiAwoXY4vW3cgfYcXVX8Oh1Jz3Xw7FThgwU1weLuYVivnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":516144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRdCRA9TVsSAnZWagAAwIsP+gPvD6pB7PdVkgSXA184\n6i/ZyGbr1RLTAa4p0NCMyuthgHmqOKsxqjEIM/BG1l29BwC18X6cOiWnmW5a\n60RzQISdEZ/FvOKDbEwZ8CzS3QrWBSbknJpkacCe+gc2hxQggIUH5hktRto7\nzJUiNSG8ikxkliK7XTnGyNLnFSZufzkNc18rHhXTHGwIZduoSfJATW+zjVFy\n5biPGEHVw1m/uJT/f9dSv16UCIHada0PQ5e5aYTrke62VszDJnf2E+0hkzLq\nhqDAgIdqWscpyeiGRoJzlbPVL1REn3zyaTE+MW7Qjp0p85UBwc1jUQ+A6EQ5\noSEwLc2jbkg7T+gTSEo5eDeT/WpZWIl2JyYNxnuxEFsEozLY1HB1BQHG84p8\n/G5bCyZhkezruZVWEmDmevZyRFfCXzUWaQvEZgXhCpMeBKSX+aACLHwstKhh\nsAwCgWq4VLjbXkQfn0mtl6CJeXRM5aQ0khOWX8JoXWB35YexuCFfiUMeDmD/\n8Enr4GDaArOR7n754u8yhA2Fg7WIgCJU7hACIZ9s+/9MzBNQX0xHaUZIEoZY\n/6k6swnRTWgswaYsdUiVG048oXz9G0mmToYORnD2uzmry+Dy/fI6wVdrifjQ\n/esrZlqIONahol/drpmug/OeTHJD76ADd78hKF1sTJ6HNZpvqOzm2zYwKcw7\nYn1M\r\n=xrgE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/touch-target":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.a1a0deb3e.0_1580405853042_0.8261673039337141","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/checkbox","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.181486643.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49697aadb9975dfbff35ec6be099957b536430bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.181486643.0.tgz","fileCount":38,"integrity":"sha512-ha9SZVPsqUPJzpRfFOrXOsNSfxIbVngMEFTPA7txiYlpKq03VLO8694iIRmoyVRyxmZkOdfrqa8D+A0/kRnPZA==","signatures":[{"sig":"MEUCIQDJ1nxy1LgTbGorqK8RAEFbX/eExXJIE1iRIJRaNbaviAIgb0/nNDu1Fl8uWwC95INDhNzDY5gR3Gmmznn8v6tZpBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0L5CRA9TVsSAnZWagAAZ78P/1JHH3hLhZnNpZDo+TrX\nSdAu6CJUiW+I3gQIjExHI1zlIxJqgvvZqbGm6BhP4ioORrX8daGRBiixfesM\nPdaaCDvidxR193fMLLQph/UMZgEb0dWcfuoE4CQbzHWDulIhDSlFkr/4Kt4Z\ny9l/M3b6lulV2Dt4mGsYDaRG9/FKzFwL/IqdE4Znk2iRr1DCe/fewj1FI2ie\nuhD9TcGUvzvtot0F/2JjAraIjUnNj/bagSVFHaT3BT9S30K3QxImOgvTjswS\nFBynRJp9jlzX01/Xo1z5aYGN1iyUAoxerD7sWj6QFtp9lDZRlNjiz5RGiorz\nRp7PtKFHixK0yuzXrYQmLX0mQp+Zlm3Rfp9x8nH3aAcIxDmWnuubTOvI5N1x\n7khrdDNE0tYscVRkROocUjSqdU4FT9lHUJWo0ecBb2Mw9ek4nDXieH9VUvZK\ncPePkGYVJbM1TGMRNVAZyS1z212nte4FecUCnWfvKE6NaqYh2sbWZ05UtT62\nJx+kd1IPB82V7XyALKS/o/vouYWQu6iZJLiD7OTIzJsqd5Kn1L5Tn8sg6vrH\nbWyeqVkk9ZO0+8biCOI8CCE7x5SyGpy127oFEmvBW8GppJx6gH7bccy4AO5f\nPvo5PhTIvgnwH6ShP6oNgaLwcQPS1jRC+cRJPAKswy+W/xmWw0hIIFkuPfjJ\nDgn5\r\n=hM1E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/touch-target":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.181486643.0_1580417784792_0.12841804824441394","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/checkbox","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da6bb63d9f50c23898542245991f3b5df6d3ba86","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.3a85313ac.0.tgz","fileCount":38,"integrity":"sha512-jfP7E2h/r0Itr9Q9TYyiPJLViTRpijAUe55rgJq8GNiyojBFstAlvDpRBzE7w/1A0LtxICWa5d8thJmzrrbEnA==","signatures":[{"sig":"MEUCIE8geO3qB1X2qaXKfGNZA5+Te6lOI82NgZYLF2+EB5f0AiEAvrxy5rFqrw7PHpWQpY4kc4SIB8i6qVG4rRpLOnIC5ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFR+CRA9TVsSAnZWagAAmgcP/Rr+eJCqpfrslCfz+c6A\nAnj/x5i7YUmkOK3TVrFLL2+QuY77l60oXp3kcsHjoQ/wp/s565Pb2IrQy0na\nUswyFkhgF1uq6rIamXQZ7OAo831qiwlQfNyJzBp5u0pdzSU1eVNE0zLPi1R6\n1KSm2oAO2MnUVrLFmOLlcBO2LCtdaZvbBVWv20ZnvK7m1aAIgUZuhfajF1GU\n9JopPiBHZr7S+8RojpM8QrCK/2+gG+RlyuOUxd5j2hL42tkHEil59rgWaoXW\n+0bDf1PMV9dFSZZ9u1ZrQyjGMJuPZsq9rbe3yCE2gNVDzCXGxl3BzyeZWGSy\nml5KO2ELnPYsG83M9oGuwhfMo6iRVhCGm6/ddndeEGlIxWffAXuwZ17xggOC\nufOo1HugEIiImTSIzLITq7H+MaExOq9M/kKXFC9Jub9KVNPA0kyRh9+6Qd65\nrB1K19Y4q4+Ze2IIWnLkGmHjoxc+RYCy7McnFS2AQTEFlBFmz0CmwMxohpbi\nlbrbfL4g046DRjBpVLRpGg/XQvmHkt5qZ61Aef9TSRohltkvgq9L5qXtU+2r\nwwtAhxpIyrqyJVGCltB71OxJ9xI3Nmssdhqpu47ojsrkBA2FZC2uqOzTnUUV\nBt9O0WoBXiNuZFpTJb+25BU3oDg4V06ze2xalOpgEBIJQjyCv/ARX1buszCL\n0rIF\r\n=7M8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/touch-target":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.3a85313ac.0_1580487805538_0.4992312432312991","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/checkbox","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3c3b195dcc312ace248154236ac5a2f269e5805","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b6c7f624b.0.tgz","fileCount":38,"integrity":"sha512-nPKa9nICgjO6Nzym8fZKhGoskIg7UXwVXOM1VR/c3zrpK6VKoQJ7mYH/sm4EfYMwDwZFwOJxRPMPnrFnMRA17A==","signatures":[{"sig":"MEUCIERu15ADvjEAMvk6dHD2jJZh5/tQ98Pw8qF1JyotqUDcAiEAnHoKW/pVufBBhUa+pEuzYk84JqLdwpYBeUJP8O+tEL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3PCRA9TVsSAnZWagAAOxEP/1Fy3CRhz/zb1icwKuad\nIAU9aJnMJL9Y+XUBTFDwnptpS/6M0xW3TtT5PLOpgeYDwtb/dILFf/ziAlWe\nUpaDgaswgwMLUg1LkknYhjPokuipbUXSkANGeEdde7g0fSe0A/MlwDZf5Jq6\nJr/0MPGkvaBJgd83NmWTlTuAZS+rMxKtLxhkUTqLikXTV0jFXdlD1IAxTXBs\njcAPGr+faIzks0CyM64VtsmfjGN9W2sEaCBIq2Gn6ePTphw6DSRVE01v/2AP\nN+g54hTQDXa3tg5rcsWLuNX7xLw50syZyVjOjXzMXDtxV1RZkr8FsBnnVLK8\ncuW8gTkZgQaTEs2n3egPgXrYNWL0tIlxiW+Nq6OJXvldiJLTWHHIT5pAV8Jy\nu9kSw9UGgStbOXgdfHBNAPfZXYvg9RFB/L44gGBGBJzkOsmdWgHENN2+gVND\n9HpUHpBircd2uTqLVHVlzDnwI30mP55/Xjpu6lnFgGUyElTceCsOZmFPiBjx\ngPzh9furCwcXAWyY/ZDwjdP7/4VbKjo7NTNGpg1LzzXcwrovVEQxYSsUZNKA\n2nK9Gug3q77od+IWJEXx48OIbiemn4yelc2KemVAJeeoAaXU4z8zRAflQ5oC\n/p3zxmwtOYGBkBLLiuq/dNkIsBLsH6x7e03tyJGD5BGjSSr/uvaQ+qE51qwQ\nbW6O\r\n=8cRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/touch-target":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b6c7f624b.0_1580490190851_0.7136934538055089","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/checkbox","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a47fa4e84b32d9cc86ee6c28583dff107fc044","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b3f70ebde.0.tgz","fileCount":38,"integrity":"sha512-oPn8b4CRz3Um4BN0VoMnYt+NYuiEdMnd3Tr43HDw+Fynrx6EXoXRKxBZ9PX2fjHfowty7LK3tq4sth5RCTdfmA==","signatures":[{"sig":"MEUCIQD7tDZAoEQ3Ncy5ncc9vGr2AfSBHZaVcY/anCbPsipmrQIgH8/Cm9rv07L7wJkVLLOR+joYUrUHZt0stJutqFp+QgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImyCRA9TVsSAnZWagAAqOwP/RBV93sZRDBNBi/V/v+W\nS86xI5uh5px36/z4HLtmNTWTIRazy6l93F+4llS6MwPeCo/gQ5pGmUdj/ZWU\nth6NCTaW4qkyzscmX162ycVuFWvFuacpRWxSJzv7llrNyU/Js5H3iaoJ0TGS\nnU9OPsmDWXcVKud2mMK/UcEMk8CdrcplYjeMMVKmiMXub4gGY7YwsBSwVMGy\nZzSOSFJwdfmc75t2cCIuW62HokSEQfiiomI8cXzknEBfXEimNG6i0oppZmX2\nzdoTD7QE9TkkWIGMp2vp2dlbM7Ug6zOZbcsqBw6AWwj6Drg8GvPr/YJm6N/1\nuPwIQ0X8+/NXBOiYM0vU97bK2s2Ilyf0rZ3QFyzklDNcYp6wQ9CgU8HVFbgq\nJu0MTi1c6G8otkYXwOaVCkUV/o81m81+MUJHgc0qcE8p1BfzWrrvhVWSorJx\nK9YO1k21cWt72Gl3k0SZk7MIEbSXVvJ+OvT/GWqyZCb+Q3yKHVhrbzM0hOoy\nrR5oa7rDhZfjXuLp3fZySackZpzLBfE5TrnI4elQ3tDz5XXxv7RgrTRo/0ER\norbcNt6UiElRJ9KE7L/NtWtLl26MU9YDTERslejl4WcfZVYU+6GT3lYD4VJY\nGx+44EotBAyX4tEXHMQtPHvDp1aGyloHG0ol1EAlO9xHVyo4LJBFv/scvbfV\nltkE\r\n=bZwr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/touch-target":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b3f70ebde.0_1580501425634_0.7312335338960481","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/checkbox","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ec4e6e8827c18b0fbcb2a6cf83fb8bd8f80982","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.3e782d8f8.0.tgz","fileCount":38,"integrity":"sha512-/6sqra3rDxblP1/bSToKn5iMuNE9Yc3DFXXuUsXv6wManY58t2l8b5ek2ez5R6EtSL7ObEP5UwA7/tIbF0PnbQ==","signatures":[{"sig":"MEUCICG2P2otuUbp8iYIW+BZ6FNeEh5QcGWxEvbQw0cgl0kbAiEA5bD9oLOshM+l2MVIwbXSFFEEcs+SYqsePk2qIu7iMIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiISCRA9TVsSAnZWagAAEbUQAJYk/wGchtsNGz440LD2\n8Nme65uxuaN4YyHkj9eJEtBLHZp+HG2DRPB3c9meZNd6EUz7ts1sTZuV+/ax\nfdxpYv//oH/0DCI/w8z2j37BRaOAgNXJhoFYJwa2jHZFdDPlc9WV2IWAYiqk\nE7tNWiOgoSNQllkXj2d59OFJPEDpkodj419yXThAZzzY2AGPfHVV/+9Y2AwF\nyWNetKoi131ofixgMeDSqxKGqOpiTu4V4MVkfM+o2Yyv987EjCFdWKv209zQ\nobJixpszXDkFxXWOFoxypdq2F5h/B9s3zXM9LRHu6SDB4YWnJaSEIWWUzKiD\nQV2jij3F/XNGB8HgexoQ6Qzkn9gJ83DCKmyE7fOtHC1yQi+PJzPftOdxKH7o\n8WxHIoKBGpNyWlvXOaOgRM/ir29aIrFUzyONj7UCTVsPlSMiXsUgf2K5hc82\nyATxcBVOBwhUcZd82QwtAi2JUCHJJmjB3a3fO8N6MF0oXieu7dAmBZewiOsK\noHndiHFppj1/5MqC2EPSvfg5zsisbmHJRQqFbsql6ok3v527qJkOf3CDk2aE\ncri/L86AalGNXAqEr8AaO2gh6I5iYkIoZpDHcOJWEqErUef6n7hIar3YKObI\nPIBYZpqoSBjNrYpqDZKkqZYPgddDpXoJ0tZebXsba47h908JjwyChsoNUU/M\nOWRm\r\n=KGaK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/touch-target":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.3e782d8f8.0_1580605969911_0.4013090985525405","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/checkbox","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.535398572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cf9e2c095a87f99b3f0039d2987d479977fa125","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.535398572.0.tgz","fileCount":38,"integrity":"sha512-oWfwnfXSemuuR97faMzGWf9+uaMetzgBnQQJXHTrliHFo1GLdbU+G4neGoa9dkn0bF415yEdLEJK2cPIPfKIfw==","signatures":[{"sig":"MEYCIQDVq6pIb1xB3xXgfEIIzhcmJlhwyVqb6ve3Qlmc00u6YwIhANnoOT0yQz7TbIeNja5Ki9gbdIUiFWgagWOkbMyx1k/M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKQCRA9TVsSAnZWagAAVdoQAIf9XZOXB9X5xdsj8SD9\nPhbCbUnPIU4s1aDwZfG4++LkrDZnLfuVqYq5mer3ri+5K1hUQi98ZNerBzQx\ntmGnvwBLncA8d9GuRd0qoWfGK3XPShu9zeE/RFkiXxxslcmOEuYlhg5AOStZ\nLXppOWGebYltvk8mQZyNdRTLYInB23HcsKZICfuPMQ+Nsr5zYdYRYDaGV2ld\n3OOZx9jGXfjzU0JK80khfWPMdexZO6vaw5o5QWZvQeU9Qh81sR6KYuhHhnEi\nINDlmu8IMJsVJM1DwogvppX85pyqgZXR+6b4E4e0EiqPc4MBSLA/afFhsgly\nQyMPiNI2Kefd710afnu2NduQTCfHeTFD/+cIcliCkgpPLGxEdGIO6to4kaXF\nwQ1bW+XTQ+Ax0aZNCgqVaQFrpmCja1LGE2MrWm5y8EAlayEnIBpewjE71W2c\n2sjuU4XzPOFS1sSlw5PUABSOiaYDhNPwFs3c/hBUiwOCzzf8fQsbSEV86ynm\nR81nlE9dY6CoUI8luljhwCnut30uGicy4sikC6hX+EfU/7q+jVFfC5PvjbHo\nqXRgfcSdXECYKdjPmczQF3T8G1nUBcF5HQ8oSIlYk+PjgmonSq6WdX0P8fhO\nprLYhi+EMUrRUwFeVRw2hldjCBxDxn+EWT8bm49hyw70Df/nouKGesmNK/iC\nAGl+\r\n=A6fV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/touch-target":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.535398572.0_1580753550995_0.16971165518365816","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/checkbox","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd05882a9d7108ec73151626037e3e809d7acf4e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.5ff33802c.0.tgz","fileCount":38,"integrity":"sha512-JGS/i5ofXsad919hdIhyAUyqJxY3Y8jEYu0+zbrr8b4Gf/rH0C0VzWoe7KKErImcKdpubXHNhFYFij2b557XfA==","signatures":[{"sig":"MEUCIDM7IrNDcUomxlIBYoR+EArFhF/FmaIoS3u4o2+G2/yJAiEA9+N19L22vEMPi4KzSoJGVDQfFHqsZR7fyuvQqheIKyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIOCRA9TVsSAnZWagAA+j4P/11Xu55vqSnPbxkkVvdt\nOM5bvkhNt8HHm2qlO/3syLbMX7pjkFnxvPb4CQX1BDkSxoDmmCTT79GLozS7\n30fg4nVyau2QD7+oCfF7qmMaDFghhd0vqHjFE1D1GAmZ6iMsCqVCAsenmV01\nyjyhO5/2f57TkiCg7Hg2SyEE7mfAPrDye/EnKuhqJ7qQW/vFXdFtvh+qDu+L\ntZeZ4+yLJeOkmOto9mONR+ORUEGFU342l2dX12VTTKpPRyFVFYHlJkXBckfM\nFWswbF+jcVjOCaC+VBCxQEPFrm31L1MBM7uHJ5gJ9Yc+IzxW3xyELN8Ttyhs\n+HRoAdoVjxIFi+xzso7bMnZDpxTg/BtfGslUMr0vP+MQwwaQxbnHUuAtjgSf\n5aHJMskdTDu/gwQwmg4yPQx9CZzQ+LIfCe8BXrqE2Rl6yRo7ZjYMT/1td5Uc\nT87z11ZDDCtllojB8MJtF0GKBVP+qytxd7WOkHP9uo8LYpEAzW/UaNYV8YtG\nLPGUDd4iwNsM65om0MELJWH4puoO1W450C4i6/JRckoBGzovTsWd8FOrpZdV\nWIYs5OKYwxkpIKo0NSfpKie1uym+pGR0c37GOmOfqnwgBV3h3g4ysm539amZ\nF8fvnR3oFzXRoyywhCYCLrzXPJFkKi4ncp3RIcECLiGnAAA18kkFU+Y3zLto\n4swZ\r\n=LpDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/touch-target":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.5ff33802c.0_1580839437402_0.17481744285874878","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/checkbox","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78a6e73b217b8cd0760dd73147a48bc5f5f92ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.1eb29491c.0.tgz","fileCount":38,"integrity":"sha512-zvQR4m7houOXWL//PSzLaGglVpl21/P6pOrmY81gc3I+F4uJi9+Urk5VdxTEp5aB2fIMTn4aCtpeP3mMyEh5WQ==","signatures":[{"sig":"MEUCIQDG3h0ebPtyCLRKKGmwBun1KP7YtlLBc7pTi3BEGp5exQIgccPktGsRZ4/UQM7MsxdHCtL6Tmd4u2xcOVkd+UtqVE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduBCRA9TVsSAnZWagAAPGgP/0FpzMhH0TzQHngi/vIr\naO3COjWBjLLGsRa1IKym4YAWo1suMidVzUwtf9x8+v8pDuYTBRIN+WIsdFoe\nE6PzkR1px5iBfXLRyDaW7jbkumg/B8/Mat8ko081gx3FaTqs60+Okvb05YPI\nlNnF9Dq9aveXWbUSHuRfMkZ68VPHip9Json9+sUp9tPub2hXrlSUnMp3GzZB\n9AAS8sfdNFo9pm5tbKW7hE8+FYmVrsqe1ryDrkf19xQ07esIB0ge2cs1reb7\nHml+XWs/8vC6CHGpZST0EeU/MgTTRBREtmw0CIQci17cxPkHF6YwEdbTjE+t\nVEHeeX4C0NfO+7k+ngu+HNTDyoWQ4mgOioMEbvLZC4GOjcMX358ybnUZAfke\nWiK9y8OjK6moIf6zhX0qq2XixxVz2V5y3Ue7Sww1qvtKxMJmIWpo3POcbzVA\nUR1TwCpVwV1pdWOnkpCg0naKH3LKjHAwndfZGHaQic50enXcXSQrszT4n/Zc\nSDWQ8x6kfSjH0vPfRewoDKWUmy4JeVeJQ4OvWbVmP7rorQenM1UelyytmgA2\nDzPUhulbnfHs8JOUO8BprYkX7O0kB0J8zrV8Cq2GCZeHP6IHQb8M9rTZVXVg\nHBg2FbbxcmGnvDfrdxHwGUDbDuBzeUNQe77fc+NvzB2jhQceP5+IOmjf3Xi8\nugIM\r\n=mvJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/touch-target":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.1eb29491c.0_1580850048354_0.4645365662732366","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/checkbox","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f30678f7484e1c17b13afe33916292edb3229615","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.4c7154b26.0.tgz","fileCount":38,"integrity":"sha512-T60u4sdKP0Ax0mOFS2GxYuKh3s9vBcZB1VpJyYGbGdRhf1Fwgcuz3SRcjBDwJrlvhP0pRFrKGeaBCDQOAYHqdw==","signatures":[{"sig":"MEUCIH2WD4/eKlpnnIvtfP35JAmJeYPeCl607sbg22HJBtqMAiEAu5vTPamlbHqn2WQzkcgAlYE/zlLaX1y0JoXA9zqsNyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOudZCRA9TVsSAnZWagAAE/EQAIns74iu8C+YGeyzSIfN\nwGLNOiA8EZW1A+7+OLKmRXZetCD9Rzkf3K5/XypbmkpXwnO6HD6WRlmtTU/Z\nLQ8lY5GJM+FGasbJVuV0+64RLRXNe+9HxBq1kL6XbS6nZ76wbaHiHuAGResY\naV0Mbu+VzyglRaDGmxItIpdbcIz6/icxW8XOa5+38a7lM/3gBD2Rc3W6w04I\nvueiHkEv1Ehxd/TvVK71snUM5kYDblrvSkIRwWw0WKqHuKq9VEKJuXNdR9k3\n3ToK69z40CgGNK9kPN6efX0VQgpM2qSn18spxd6K6V1hUKTGFn9pfm6JBepP\n8vIhAtt3TqonXBUri+knfxZNccRuDD+muzv8GkzGcNUXJADJ45Vihm9mu1fx\nQsnEseAlg6nDnJKnNpfByc4upXaXtRfc4G7Oue1H3gfVDz0t6hatpugrzZxH\nPZ1H7Wh7C44K2IKvLBiFxCr1GhGJAqfEbwlVuwhSFWFHm7rGXdgAid1Z2+v7\noOfSA7tVSr3YPXdW4TxAiTs5UktaZd6Bibe13nURvFW5gxBtEDcIetdd6XhA\nsoPydVZg4JAHtGIyt/bolSQrgbPFIN1F81Mxt7JVkaAO2aR9Ijuw+f2cRSK9\n1Nc5M1G2baiUMg8wT7BdQjb8IrplWOh4mawt1ceMGacT4mdQvQqWlcC2eF/d\nw9R3\r\n=B9OZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/touch-target":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.4c7154b26.0_1580918617055_0.6339514412823997","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/checkbox","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a39871f5a807801fc06e8cced846513ec34074f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":38,"integrity":"sha512-uf4JiWPKJuxrKdfq2UqXLJ0cGdxPBqWIslYl3YVwXn+DejGKMu8z3Cm6vJwDw+dhdntchCnUy6XmP458cFzNZA==","signatures":[{"sig":"MEUCIQDRwxkbvPvKFby34WoTqw61/ePouCOIbJ+bEibxzFlVrwIgDO4kJxq7zjX0+59nT/RM9NNt0Sbc/j/FwTGqEymeriE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DCCRA9TVsSAnZWagAAlgQP/AgtnHOuz0G4vkW+g+vw\nak0wjWdd5AZDvyenPRnuXjiTpZPJg/DVcbrwwvYIS3zT5hX1FXDIWaNbWmXc\ne2JbhcGx/f1qf+VOI+XfC4COOLxCFFE6mzZ+36aHRg5MUVt6WteCfycuJPP9\nINSJwqlTPI0Q1mvg14cx63rpGZn6N7NUB77K7auoR53TFECxWoNZrbfx1Rok\n61rHjlNJgaZ0kuwBNbKazqYEboYxDAN8Bv8xfYpIyLPo5kAmcjyqFZtuRmOK\nQRR4MGm5eZAbDi5wqF4lF23VEuNvPJURAM/6TP1Z2m4wxIWtWTJ5w3Tjr871\n1KjEGBGjwcEQubHsldISdHVS810h37WxGG0lINLzro+ra1lGgN3X7tRQJaf1\nNbXoMNXlXfqbfzqn5lOrxeN8+eCjFxXHkMR2QBGkfz/PeXO/4Xd/efxAqsDV\nHj0lnZzO21pcdS+2sTyxl1luJh6QGo/IGmJ1JHEYvFHexWrmqgZtZMtExjtw\nYoIVAEq4B9dpZt+mbGNyhCNVIiMpN1avtFdX/1FrsBXzCWPQVtt4Znzmwk4+\nHo02nne3TUw+BxfUFvCu2NooqHCxUgq4SsiBUfgH7i8sXstE/2N88WvPDoL1\nLZK/HIO+tc/gqWMw4DCbBtFgHgjSo5bZO8TSTTue390YS+nMfcbMO1sNvMCX\n+ORN\r\n=KsCM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/touch-target":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ab5f49a2c.0_1580945601357_0.8021273185079232","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/checkbox","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bb91726157cbf91cef5b4049c960881850c82b1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.c541ebe15.0.tgz","fileCount":38,"integrity":"sha512-nDvoi/9F3gvxVEWakaOAy5XlLeigKMaSKFvLWPtdcO3aTWLXGltwzgxISaxyoAGmJ0lK4XKzxY6LPlfwJvLEzw==","signatures":[{"sig":"MEYCIQDDP74pvNbORjE8GCenw7oY/10wHigUNAAdDpearX688QIhAJ7hqip4ufHs1A7UQFyMktMKQqcf2JF7dEbI9NEwsDJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNqCRA9TVsSAnZWagAAAWYP/0ZncNqw6V1TT8Xo8C1k\n6dU0axiSv7PcRI1VyInagE3rczXnUgnmUTCb5EO7Vkp0YRKK/mMh5+/x1LeT\ngzTqHSIrauBkdisdLnRtbBo8REIytagyV5PJgXY7kUk1U/SwM8IFIb0qWI9M\neGObj2RKJ/x7e6evDq/vhezQVwb0k5hDZQXqQmcXPVw5h+BkhXh4sRSo2AWg\norM4chV5MaUsRrXqFaBSp0MJBSb/8dulCR2/k6OVi3CxVCoBAvDSPkz8he7/\ngJiqcOHNoefxxpzJATTXONJsJZ6H7mQWirYmnemBaOGLw64S/eUhqedkv8yv\n3y8/UNYqu++z719HNId9zyXT2L1ZITFTEFzB+9mKS0KuHwaIgLqIY5aJz5Go\neLATFrFem1GNnOHexINug5XEjmTI2meSAguYFZGO+PEn+gn6jLxbbfQ1go+b\nLW6MLRnUwLG3aABsbPYSIeLSR8GmKx1N2CAlmdcSutNpR20/8FgbO1yBQ6LV\nb/DVsnrxDrXDZFvkmikn2UkjWhXYlQcx9oGfAGfd66LPkY/z39XklXxSvilC\n3PdEsFcaiMpD/maB9Vlz7qfz4eEgEPTCDDFr73sOe0Sj3lMKvV7BNkktK9qe\nTDEM/QqcDqjNQdjLx6Uq2DrkKvHCSxu9GCqrx9r4N5fUuB73FtfgwmB33em2\nqxdW\r\n=fXdM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@import \"@material/form-field/mdc-form-field\";\n@import \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`mdc-checkbox-disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`mdc-checkbox-disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`mdc-checkbox-density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/touch-target":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.c541ebe15.0_1581028202328_0.09392535267915503","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/checkbox","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85fabcda5ca9cb43a88af4266f8cd390f0e12b90","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.98f7faa05.0.tgz","fileCount":38,"integrity":"sha512-h84wXyVdDDj0HS48IJfYIZGzFT/rhK294uTEpp9Gq4n7irpxHKyMtr8sIX1aFpWLEACWQw5I8/LzVsFWEaQXBA==","signatures":[{"sig":"MEQCIH7BOvOCDLe3DWEQmViuYpbbx3AEgR0vzQ2D2LtzxfDeAiBrHjDQ5ReQElEO1KGI8Pjwn+AYcm9gv95cd2xLFXKYMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbi0CRA9TVsSAnZWagAAyS0P/1tnCYGHVm6JgWUnu4pq\nHMqBaaFp2qkZHtIv7qkl1tteHUYsCKE14A55CNlFfsE1Y4nGu7CJz0KGGSY3\nESFDwQDphdc87cxClrluo0XZ7r0sS5OveYLmnc2e8CFnT3YFbAfWL5FsccpR\nu7I3xqDGIfmC1s/NVbifyoMN6nimHH56PqF6mfxdW8IMw1Q68G25S+4E54xs\nWMLrXY2qQ3vn4PhnPeCxRoiOZCoDfjTlOD9UlTjlqKkpEjT2mxPbysU75Mmk\nAmSU3UMJWa8UWU00hCMUkQ5uXBHnsEZnkxIJVzUmBMhpQSDKq7dT2D50L1MP\nRxcU5ddaWSWYxCbr86KZOPzJtjMFBgmGhhk4Yk8OxY8PNXoIE8zfsUiwv9Vd\nLJg9zjIv6Ju92THpq40rOR9Hp50iGCHLczjzML9ZWyhHWaoye8Dju39vQgS3\nSCoJYEufl4c4GQaJYz1mdvnhwh/1MjISTmgnkzmMPsQ6ZOiXGVv10iuHTRxo\nG5FTOwGNu7mr3Hc41JyryoGtZSEi/u9X76v1ZP/88ig7cLg48b9mE6wJfnRA\nMEsUV3RkfWUePgjqQc4e3CchU/cPGPC0VTTxB7CprPpjNnJ6Wd7QxoxxWihp\nQO0s7M6LHSqy5wTvoYb5qJVs8MsSCw4B99HNCZ9I59oL7gDl+g6Unzw+4/Ka\n4cmB\r\n=rKwG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/touch-target":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.98f7faa05.0_1581103284092_0.29449304556039224","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/checkbox","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c94d91c59aada013e693c2252e668020767efc8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b4727e43a.0.tgz","fileCount":38,"integrity":"sha512-6J9/hyeQruA45eemEWOCZw3k/xlymWxuO5zOIx41Ak/xKsG4NtQA8OMxbz/D4zYKJ4FXcLsBfF5CLsc304zwMA==","signatures":[{"sig":"MEYCIQDonfcWZ36l8KMw5ztd31rC/9t+Ltl6jjiImVKgPHw+VQIhAJ6IjQUDrQkK0KKd70Mbrc8S3BtXWN4L9JuvAN0ZxL+8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcC4CRA9TVsSAnZWagAA6VwP/jlyAQuVZSSRwlLI/ebO\nHXxcxfDk4UCVtus06jC3TVqRcaxm/M/4dtNPPTlw7xmg+58cxTTKfQYiyYd2\nyUrPPJwV0RmLEB0SS1SMWz+Y6F2QB2NonJtnS3o3ArcPWlspvw0rK+2nQknU\n+upuVQ95e92yhnWK4wDIZUsjekxp1hwFCt3ZA6d+lHKBeCrHWwpCUTvYDEux\nAx6BC64QdrrK46jd0A9zTIuQmdm4T2jKnqROMpAq4CAljJPE+pDVtgXCgJUD\n+nDe1oA43LV79nh930B9pvO2LX2fs0+0ovqs3su5mhFZjx72Qv8nOPSThl11\nIBt+gyY7kABl0KR8GhITbttdAroTWgyQhCP5cBIZPB9Rp2XdloTvKaaKfCgq\n7BmXhYLBs90hgzU2KGdnCBfxllebgXbrIvnPleWm3hfhmN55BBsCmdHvWqos\n6pZX3X6XIQ81UN65kiy7cMRfBmCuTJ5xJXAtvvG1EMXT6AsTO4Hh4CDo1T7I\nTVWVJGBLmQiqjWSDcr8/1aLne0xc96WZ8YoFVbpkWlGm4U54cvR+47rJf5BW\noU8AIPo6DMUO3lGi/dkImOHOnQzs3OEe/1eDhUmMX/zQQiU1hdhu7474rj4o\nNTsdpcP12swEc3rZeCnViR5x7RLfMwGv6fSn1XVfXS1CzLd/6vag1OG+hcHQ\nQFKj\r\n=S+Dp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/touch-target":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b4727e43a.0_1581105336385_0.9118909336272643","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/checkbox","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f15036136d7d59678225c987b7b98984d31d5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.91d9d5a65.0.tgz","fileCount":38,"integrity":"sha512-YAf88g+ZixYl+CBFOvauHtGuaAPCejibU/z50H5FX4W50em1X95w8P2MhhrLHFPJVWV9+687seTRHU6JGsOSmQ==","signatures":[{"sig":"MEUCIQDv29OMgXA0kuiZp0S6P7gRIWG2rFWFRnqywoqD9qP5cwIgdnGKNox2C4ZzGGNndGVzXvbKDMReduA1sO9CHIXRsbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevXCRA9TVsSAnZWagAAlBoQAIiu/CXgItjsxlFd9mTs\nikJ3g+Di4pjMn03ZtQzNC8saAJutnWRsXvM+KOzYI94cIJGtsp2y5Fvy/qgj\nRR4vF4AkW9+ooRFxvRs6sBGPjVg6nLoFxi6Z1DFBqduMfNPK0067h4o43gzZ\nGFgf0l819wrGrcPoaZpEXg531oVUsnx3lbN41DpVyMVED3SOyuGAs2wOlhfU\n2cU5y/bZbS6691gqS9Jmd2eODwJaoZykCMTb85ty+Rf8FEmOHLyYIRNvViWu\nu7q6l80CwaEEgYc6NnhetS12L89y0ygmItqoseFqM47x/jpmZxjVf+X+xp0m\nuIrUqqiYCUR0bC6FptzC2uDzhdZo3wkSnGYnDoV3ageMTmNyWk+UQKlNmNmV\nQUBM9kfotgKKXrMzJ7CUan/1lqYtKHFlgqsgLC9+TPKVTy48mnLed0M1Ha4l\ntUVEsIvS6JSp5AEKhCAuNA306cMoROyrgK+rJCHoSJ1XupY+R+Z5BZya6PEt\nsiWfvncaZQMHB+zbLSUhyra+yIpGX8isvXla1Qyk83zz0wakYnKZyfD5McdJ\nksoQlKQTOwXJcAiN+0Pz6BtV0t4NOE9X4qRHwDkWXyaaVN+OUIroRqh6N7be\n9IX7+ULaLIbJh2KRFgot5Bi3W+vfU5V9Q5i4jvugW/76b4477tW1vyPazTIw\nK/Ik\r\n=Xikk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/touch-target":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.91d9d5a65.0_1581116374620_0.799543182792805","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/checkbox","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22808fd50b3d8b83c1f8b3ae0c09d04f0421dee4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.d5c006ed1.0.tgz","fileCount":38,"integrity":"sha512-8fuDJh0GzuLUK3RzXYLfAoM6TQ5O6Qcky4VqVymWYbQRlD0qU1uOrWcYoTlC/Dy0vciWUfYs8g+mYMtRxHo6lw==","signatures":[{"sig":"MEUCIA2h/io3m26lfXezFTorJKkv2lamYDYKYSVqf+fFaqjPAiEA1r8Xj+QqRB1bZF49CjecCoUTlWnOtldV8MNa6GHF2Xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYl0CRA9TVsSAnZWagAA1VYP/R7la2Iwt3Gofzt8Y8jL\nteBxacP5Gqm6XY8yGWbOfcgkTxfjPsYQeT2NGCXoxOqJ7WlWWSQJKbGV2xZj\n77gvTTMkty1dsLBFocrerwPlRsV4XSBL9pKEVGohEDfIrxKPLDj+4DInfRtj\n8vQuNY6HUnMKjnZQcHodcGwlqUDMTiHLzL9CYPdSSVkiaoRieO3NRrgbiJSt\n96JDvi2tlrNc/HBukRJnowMOu9EXKMLAiUghQVh1BMIlA0Oha9lzI7oOObee\n0iBhFR1SStbBW+lbVG9XCvkTaRng0IczOfgq96UR6BfiDZzncWqEDZ+TeSri\n1q4iKtfRezbPtTR+NQVZSn5PqvjdGdLposycy8b8DtQdM1kZNzRe0LbAQ+wX\n8thlwfnhoR/JhX5mSMUU2fEexsqzxuuL8OUw30I8I07DFiPImbamM4hMtYWe\ni13VX9nDhyS/vFUej9ILXlS1PAXj/0d/qSwOfyYT38y5uBG2q9vFs7zRNCAs\nQy2CDhIl2z0xMGmKGE2I1KLKIvgZGYWfEmNpxv2bUGoWZ6hkyi0kEUV0z+MX\n1jqYtxHpgkF1KJHdhw5rwafJCe9aaQ6W/e7bJnEwJHqqGZ8zaLr9iOR1MVKc\nYP+YII/d2Bjs+ghTSHFXnPTCPvPtD9FA+Y8wr3Xc0gxmm9nYdjLGZfQsEU0c\nEppj\r\n=Y7Nj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/touch-target":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.d5c006ed1.0_1581353332588_0.22847152839838736","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/checkbox","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.559f1a570.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b73b08fdc4ef69c37eb29ef25636559c9a25725","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.559f1a570.0.tgz","fileCount":38,"integrity":"sha512-ZJo1nhX3H6fzBphwN2b9xWeDs14Sf30UPliGRDTMJX/jtbbbUl/6vxr9UPNm5eSRc2a6rb30031a6dUTKo616w==","signatures":[{"sig":"MEYCIQD6Ye/o4BnHbn6bUk1crXWLxFF0sxGQR6P0+vl19BDGnQIhAKF9ZLTjZ9GFhtC/vVS5mYKNOriOuB+hQF3FAcu0kPwS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZH2CRA9TVsSAnZWagAAYtcP/jBlFnahwdYIT61vAsJs\nOlBAZEg3Dk5/6g6V2B1sgYt8SFVOshH46zifXmQ9zmCOaLcdNHHNL7YSjaNF\njlDZ2v8R3t2FZj4GrudHpnP01S1wFbel1ffHFF2AML/TRVR2Y/sYlphFtL4h\n0H8IjZEq3pHw0tVeRU4UZtxMeNGQ3p2I8zCzOs6vGkM63/+EYdWEylNP1Cl0\neWPyswS8eJvLuW76Eg7eU6ocl5TICx+XFcZe+REUJqrYJYNglovhlva8upH3\nhYYVlhltn4p5VBrF/uO0l9TSVbCpFLv+/eKiSxcub6nu60i8+PIPhABMtDq7\nvmrT/P889OMhVBTeYmYdNRV/PANlsty1fuHJo464IEmCGcIPxwoXNvICxoUZ\n7NAxnxNEPCuMlKraoyfV4AXgJ2PZh82Wv6lkC8t83xPma1e4sU8iVK8/5Dvf\nfFnn7jfkMfBvnalMwUNzSywiPJkpRe58SoUFa3i4fObGALmwW0WbA/kgkL4i\n+Q44VOHhnct9q+P5ImMbOqeu7NdmEgC/sEF2ZsXWKoZLpcGA/XPOaGjpGMkw\nly+vYbXVgso5JpYbIjR3L0fowvLu3WamyAMgXZqlg7HKgoK3KZkpSU+cuZ3d\n01cPoShYgykRI+prpwTGB59p6pJj7PmJwm7pvUMDv+rS8Lv4dE9P8bZnfrJH\nmYHK\r\n=1Ocu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/touch-target":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.559f1a570.0_1581355509869_0.5004545293532152","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/checkbox","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b29960e86953dc69c807aea781368864b3c9f3cb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.ad3bbf782.0.tgz","fileCount":38,"integrity":"sha512-2srhgXdNcQq/wkCY1dWhEAo7VZOkr/nJavLwpWfgC5LNWeoRkU3zOIgPWa5Bd9BGBOgNbeZOG/hiPz0DScZWEQ==","signatures":[{"sig":"MEYCIQCTqMrUBMuMAeyeAXv9PXJ+1gKwZvlz42xf7vkdzwX4ogIhAN52CFSiYqRfL6ce+22Ne22J72MXOhYBjHcgTJQsQBee","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQartCRA9TVsSAnZWagAA+RgP/03oWPldjdotfP+i2Jzh\nvkNng4pBY8tXaWVcnQwTc2QHBDUc6jv/LhFUk/aqA3HmUURj6d1NseXLlRnu\npyyP7TYDoLkkr1Is+cKtKq2xS3f5tys49S/IERr5jOXm5yRT39BBJvUFcRyE\nBFMVf9iVKuVSeZ5Hx7YsaIxTKqWwpvuKbA+UNNK4G5iw/g3+Qsl67jxWToa5\n/ZzXFGF98XzFqCckPyouCRg+jdWzbS0X3N2V3jWaa3CX/bBMKGWTTl1Sbulq\nrKjDCteSYCsxj0Z8FD1v/U77t0QqSXjpFUaaptYvnRGcgD65L2GZG6UEiAhl\nyrmPtyqRfvbtDDYGVbIuhc+sZS6N5r6vhR+YWJBYw6FVuw5xt8fos7qpK6Hg\nCU93PSu5KlStZySyVKRUypqG4Yw/WHhGsAVjQQBscEfPHbyDvzraE92JZfgD\nFtg5a9K2H/Y6yklHrKu5yO0uqrdoeG0YeWMtoue8+F66lizgLHtx7svDL2cf\njvThmQNoQzLdMCwlyTAIJUe/q+0dr+PgqSo/jd2ECaUEMeDDkkoJyl+aGGif\njW3blHqEyy6tQslC4H6Ajmw+Jjjf7ws+nIxdDF3wvmaViaGIqzZzbNN4xBbJ\nlwFzDJG+UFkj6G515/ILxVts0q2239tHdcAo1Q5KqJUqkZyRiIey+w323VVw\nBKa0\r\n=wmPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/touch-target":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.ad3bbf782.0_1581361901146_0.5279466177044867","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/checkbox","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8656be3e81dc688f90ad45a7c8374c0c91e76b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.570d8e49c.0.tgz","fileCount":38,"integrity":"sha512-m2pjb807+eYuOfG2Behsuh2p/5ELiYyzw55R5X3ydr1CNl2G0+PByBqa5ofUS/libKilKnZKyum60uFPUKimWQ==","signatures":[{"sig":"MEQCICapkX+57yZcU/2noFBEq4vebBs9BKisM/L67ujvN071AiA1K0jRB03GPCx1ax4HAtjRRbGJ36RFavYxhVVk7KUs9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcB3CRA9TVsSAnZWagAAQBQP/1s5tNsmT6svOJfv862r\nI0EJaKgutQqUY6V3wqL4tPq4zUUEX276XFkTq4QTVWUWDzg04znkK9e3XhsI\nUx8Sn1KKzGnyscKttlgA3Wb1j6ijSH1uzm0eud4zPAEZMJ/bFRV1XURKo/Rx\nEpHP6R85QLcv0xKUsY7OJPkg55C6NUe4yprP2Aai9c0UwiSoocD7SyRUNUHE\nSHjhBFfJjM8IYUZDK+bRRirCm6EPA/gwFx3kZVlwAlirIIL9c/ANQjiUiLwC\nrx1rC9sdZNXRLttiHAQLLZ+bjh039p3wTxxYDuMl3RPAa78Uiv+no2DRLI/4\nuz4GjHzKR8tSHpWV2MlBqPRe3FPCSVKs8LnSzu/MwCX5bpyJDk+Es1BnPqoL\nsAMzPTV+9jPVCRZBl+C2EKwCg7hta3vfqW4vpT3Sd5VXaYPojdF5EU5H/Yfs\nSxF5H3I8TDjPmrZq2KWiSaA1BgjuVsD2plXhmh9dsPzwsu8YzIGxxyIu+cR8\nAnKudwQ9Ltr01+SehAJpYeYNuipAapSdWxbjUqbnJJQuFzGqT6GpcXRVo0DI\nn3sWZmFtisFGzXXGpkSqmxx9utz0Nuy9Jk8h9rE8RrmQmmPYWERSWbiYVyFv\ni14QCDnx/K6Glzjf71k+FY9ChH3iPkl3LaYfDVIW+iJzC4j3tFPuN7Ez9gAb\n2Ye7\r\n=M6OK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/touch-target":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.570d8e49c.0_1581367415262_0.5148960236603213","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/checkbox","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26c883d41177d23c90eec38c6cc9ab6dd3ed654","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.48b06b89a.0.tgz","fileCount":38,"integrity":"sha512-yJSzq1oau8Cn7xR7BubzwbckqA65BoxJarB1MWZi5F1TjvVcKtMwu15LTbebCWa7EuEGqpwsiGNz3XqVFor9Zw==","signatures":[{"sig":"MEQCIE1pOtIPeqjF0EV+bl37ZcI/S1dAgiX0+FNw8xPPSHR4AiAWLztvJg5btgJ2L6+dmX8dr9Cf3NExZ9U/FaI1g0NJMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXJCRA9TVsSAnZWagAAytgP/0zYt9cIhRsD1hY6AnOv\nsy5VRb4Gyf/RHxV4wvvbQkL4wbl8UVTGVDETZjW7oIz359oMhRm24s3pFYZX\nyCVlrojAQWdqKzSyJ4pSbNFbZrhdG3S80j2RrTtfYOJt759QgaKK3Fg+cII7\nnuK6jLsgTG3YKRWbzhiAhRzyAdkU2oE1dYkBLszOqXkeLbBo0pyzeN9aFwRi\nqBCKbWm1FsKWwgD4+pTLfBJAuBAmVtPQCKxTly+sSvZcQSqOPvYrIcSsBiln\nXQWaQfwipchuRyBsf+/JyVbL8tInMDsY3NJMyy1LHISzo2AbMw7lFfcMYKnq\nCUBq8795CPRDgHTkmVMxJIRdUUM1L5b0Hw64PNDFLWr3wcXFGvajFzm4lHLX\nQJE7g9HzpkAsAPCz/jiSvBSXy59CxJ7DckU1YzMZ+tXxHf2KG6fiZVKbRlvb\nL7v8mZ3+CsRqKcAfyo4ryYyf1AIaTDmnCR4l671AzQ+unjoCibPzaRiMt1m5\n6Yi2Z6wdTGOATAfWByQ2TJT8p8OJtq2LRX1q48U6LYVfAo+ye84WQ9+iqg18\ng33GlSSlgvgnZA6uG9n3lXnm4cxSPn3PkuL6uoxLrLdeME6MDCsZnh17Wx8x\njxlzfZw1gawqDPMknY0Y3SboS369iVZDeHLU42btIAI7STEHhfm66p5ONo+2\ngSS1\r\n=vMLP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/touch-target":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.48b06b89a.0_1581446600502_0.968176821859382","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/checkbox","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.612443dfb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec504706fb7506a2dfdf3b1b581665e4615bed9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.612443dfb.0.tgz","fileCount":38,"integrity":"sha512-+oTjvoLRCLTsjp3jlmjJWoQSpVtMNw6XRCsLd4rINNRSvzgE2Q1Q120Hf2pWB0Rz9jo4c56cYFA+RuOoDDv6cQ==","signatures":[{"sig":"MEYCIQCFgFFVmkN8lKYtvo1MPbOwQ7CAtOI60MYx8yuAqdToDQIhAIM+D7I8iY1YNAklFNEI0vV2v5l7eRs5Pdbgn6nesXTu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwU5CRA9TVsSAnZWagAAVXwP/0CBMXAhuXO6X1uV1JPy\n3I4Mw7OQ/D8VPDVbem8S8VcGQBTmV2HAdevTIqf2TT+h9M0JzfX2f5ddnE8c\nMfozKbYj+nKwE/Etsglvh5G134GRw4BGWhqBQSp6JaJ6ha7gA8onIqhPog/B\ne/hArYmk4YkgKDKd5oDmCpob6Z3gFlg1eRS2bN9gl+4D751YHMEDl+N8HJPl\nISAepeZCl8pJ5NlAIsNK8PI+WlT3KE1voMXVuAjXxLRYR8hh+YvTZs1t79a1\nGTrNCbdR0Uzm+4stsVKthTu5hzfPxdJYALAgG1f25f3MyxocCrfn6VZ/vDGN\ntC1VavY+sk6u85/5pNg8jskDS2nJPS+wzte9XhWuUMR0x7zm+bJWEJXpuvTV\nn29Q8Jbv6eO7f/d+pDpkHZD8UXNkjLuMdBWcQkU2uYeeU2uR6SPN/M7bP8Ab\n4zwYTICTE9MMlTSrqlXtxnyeY7n3+mPictooj3BBnH7E4ZiNRgjlKQYjymWr\nhTLjIQmSWfZMRC70d2tMs/5I2doZkFS2aw/9qWx0tzjkQmnFreCbaMBZwH5I\nZt/WKXcWJfowAfN3598flDi0R42fULPPGfxb2m6jGB3+TJY2dP7InTJhYwT7\npAGHnDNMmvvCdgoFF8QeUotQ3oK5gn9f2AbTA80Fm2ona/LTvbaJdiKAhSZW\ngBlW\r\n=aACm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/touch-target":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.612443dfb.0_1581450553367_0.9224200620790892","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/checkbox","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d94e81b6f4238220fe80e824ced826260a9d93e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":38,"integrity":"sha512-E7Sd9EllseYnD84xXJqROlnvDkDM1ILYTm3VN4ThcLw1g76AIdsOZ4afneZw08V0H0WptSu4+IuICv8hKydN4g==","signatures":[{"sig":"MEMCH11hJF6RyN4QJwSndaIox/b5qdoMtftNDO+Op5rxlyQCIFwYLwgRnrLUrUB7DWPUGVMT09uYn2PtHEkpBF9k49T6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yqCRA9TVsSAnZWagAAW+8QAKS3Td3VuTylcPT+2VOy\nklvCZpx1EHdsRK5RujNAnu8VeYXDYue277xirAuUdy0KOoFMz6FB+Xs2Hdqo\nI2teMjB1nJRs5QyioSzRC+JP5dAFNHglttl/XROSu6TCMn8v2Q5E4l9C1Mcd\nsF+dyoJUqd5i6b+lmgdn1V6mAWOQw1l87ILTQmZW1ld+Z0KFrjDghN567sgu\nQaXWzVCLa7ZwmiDBAtlz6me0JczFWIEy+mg2ilQ1I2ydZSuBbLW5+JUfGo28\nH9OjmaEYpDxE/bxVSUHg7VM3D4DKf1sKVeR69rU3x3jM663vEg9Ae++TMx7h\nHX6N6V8zXxLZipI0gasue6WZ7wrgG3gLQ7EujTr+a1rphDTemyKPHYEmEVDg\nQP1sODk6wC15x9h5z4WPDVyRB2IWadIck5R8yf0VW5Qjprxpvb3ShGkh1RSw\nqRVnIA74j7xFrAk6ejDTbgOzK+fAyTvzfde8I1qz76r9yDJl1Vh/aCBmcBCO\nkaIpKim8puJ38utLRc/qkokVvkAkqVTsfJgfvD7T1bGg9kCS+cLBwfn81VEC\nAJtof9Qozar0/TQ1/m44SJCju016XmdeYR+tCVCaPVwMV57STIU/RjSpF8cZ\nXwR2OCN7hvRQSbVicRdrTqAjhFxbyRHhCMnZRYj5ghhAmkjg/wTBjTsjiHSh\nCBVN\r\n=C/fh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/touch-target":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.8c11ea2a3.0_1581497513641_0.7356174710879722","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/checkbox","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f93898d4110af10d3b93e2bde1b5ef342fbaf4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.b2f3d311e.0.tgz","fileCount":38,"integrity":"sha512-iie3lHk3fkt0c4wjlj5e2V1Cs1kAgYPuYisaF75EPW1s8CjLNTjWVk5LlI/Xc5HgczY3cvWihnqcy4DMyKBnVw==","signatures":[{"sig":"MEYCIQDsKQ6H7XAjYqCrh7x5qysPDYxMGAPW9rkpSMf+XFHUjQIhAILxMbmVE3HIXKVvtBAg2wmzzkCD/xWWQG3UYjlYbIiF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMbCRA9TVsSAnZWagAAtOkP/36GfcGdupmzslY6PBSd\n3h3ZjFUtVNUAkJWoEhF154pxfa1MXL9Jl7YXolfwEG1pd0EyHKhIAlCe0IcQ\nfJAwG2J5uJ4ZQu7dZ+9FjoERgycRweARaLSt/FKFtbMfjMlCUTMtWtsZUy6Q\n/0siXSeF0nINkyIfVMQ2xc4mpQbBRHIa+G/hjlBt6szaNrSGi/6G5QLzad8c\nPT0AtC0TyP8yNyThRQcAFAoBBKxPwr87uBSDGkg69+oez+afxsn6pNMJnB27\n/B6/9DXCb1VjWFQnxLWK1ZqmtSnWSbCQS0UQl0jxZUkVSIxXmEoIHhThefYY\ncuBl83a4fgJZParsm6C8UoFfC3OAeWy8lgWH6UCvPdWGb7XKj8MoG/RGIMmy\nN4lM0xMwNLpW/4KDhxMS55U3ZqsSOcfrbcROZi215iPaFhmLh3XivocoNEEW\nnzP76WcYRvf2TsL6jB/H0sII8HFRyibC0HlyAce2toyyWyCnd/R7n3NAtsB1\nXBJqEjnH8y89hJWsrrO0fy/OwPrg7ji1XYaPymZMNQX95QShKChZ82f4EtLT\nPMlHsSwno4jDH4CPDHlWscxuJ3JaUtlRb0rTnXeNN8yFmoz7dZZP/MtS4z9X\nE14L2QQo8HosaiCfqNzMiEkGiUPWgdCyxv8cYFeKZZmiT73xWI1NvPSqWVYm\nHuWu\r\n=n6+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/touch-target":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.b2f3d311e.0_1581630234993_0.25878418439285067","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/checkbox","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c51961e97e20b89a8a82eb078d71ed2b3db2161d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0-canary.4f488d0ee.0.tgz","fileCount":38,"integrity":"sha512-7o88dDAgb26oLW6lZ/Llnf6w7RJSYNFo7ZSB5kvUcxfigDKjSmMzU2llhmQOcrqFuenGah8FaAxpGyb/FCfwxw==","signatures":[{"sig":"MEUCIQDH7gf0MhtxmL4LiLq2xKnM9Y+bZWuxsoO0eu0hBNnM0QIgQ9bR6S91vGO8KWqA/xzEKcUpKvX/73jpYFiN2CQZTEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZuCRA9TVsSAnZWagAAneUP/jiDZwEmYaoVVG9j7aiV\n4k47aJ/pT/J4k2lw9/OCy+UOC/IS37b5F21bAgjhWjWrQBallHAt+FZrgmpc\nHWzxQmzFtjhGXy+TXLWYCsizIn5RGCa/utO2hgACbYMna+Pl2aV9ZETB7GJn\npAVygy0DJo+8wAQCwP7S4yb/efCiKCu2vwHUVbnwNthzBzwzS0kvVIDR0EwO\nYbt5UaSO4xhemDaPzwonGrR8gUSMJZ1N4JsU7CT9v3pqvvJHNeonbNZ0mdL3\nNZ327ZTGM/q8dE4qKFm3HVUtj8hgQ0dGqfZLAakdsys0WCnTdLQdKJon1aF0\naVd4oWgV6t5bzpbdKHPQsJV8VQuQl7B/hSS5gS2c2Chbnti0WcLw5zUrDxM1\nnD+15vTnwA80lrEJ9mL5iqGXW3Xs3VI19qbysegCt/wCyYmvY+82Qt97TliN\n7Z9zFM04nAhMItUSSYX1XMDABsWx1m7LcWM3ykkRyM6CV8M6b7f7pj56M+Rr\nrNzEUgkH9ghRLQgFXHy6irKtLIuCnBdliSvDOuRsZRU/DAv4SEyixBPVMD1I\nq3YP40PZKRbl/KEGu0fVvKtTJdciLtSS14hCaASsP3iEuCI7QixV/C61tDsm\nkthnFRCjzHSpgvanzmYQ34ITB5yimU8mnVsTFd2DolxAXLkF250IJCIwYxd4\nEztG\r\n=93vn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/touch-target":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0-canary.4f488d0ee.0_1581635181920_0.8237167975990303","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/checkbox","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f4c578f7c946ece37e48bd51a024e2c3985257a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.fe79de07d.0.tgz","fileCount":38,"integrity":"sha512-0NdZJEhHH+6NEu/VVXz7R8hHzpBqxsmZInpf/IFJbef/vWekGf+mnQ/QOy6aaG0kLpzkfBe3Q+xSx0lcZlt8tA==","signatures":[{"sig":"MEUCIQDYYS6deYdOQrWZrE/MtjX+5B12uJp5vMm12oNNZNwXkgIgZwmk2LBLK5tHXalbmbqv+04Q+vHVxntakfbWdWqlIi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqBCRA9TVsSAnZWagAAOREQAIO+6kNAhxIPPgwcDKno\nAfoooHmkSkVPUoJr/QJbG31YwDA7zGjoLxC7pkZ4kPaI7yjPijzOVetySFGb\nDJvXmMJaSoUVwYQw17e4iIS+L8PLOgr81BhXlTUMrjJAtIGcx4yBzE53HDOS\n49OZK6K2riW25+aKLpnn2lZ+9Z7GMEgMeT7RDvxyHFtjafaiHKe/LA3KDjnb\nPifsp14QSLzrBVhuYF5gv3DGR1slzGkCPyOWNBVUxGK9R6oQobVgfwTWGHHK\nwONk/54eLeuM2otbRIano1Wb8J1mwjbyP9GRmDZ72Gw/YBQhOwcN8GYYi5uy\ntqJvVeAoARc4Yf/EUfPogHC/yLIpXMVxVQz0+jpeSV1KFVAB6fx1nJC+3gQ+\nDzbcXUbB50IVs2ft02F60sWl6Jl2v46rIJe1jtX1/p48R4t7Scp5sbFE1HPb\n4G5vKG2twe/UiJ5+nR8oLsHYpV2yJqTe9p5Pbigx9+3FlNQBo18sM0Uw6njV\nroxhrP5Jdv62Uve0ZsbV4REGnYK4q2RAUlFNaG5EO4ApStv5regx0RsFKFnz\nQAGBjkzTiZVq1m69A5WzZKsgexpG8LNvApHecAEBe51qiJ8YF7USUdjjj90+\nMAsfzcwE4GZrEITdwynIklQ7iulXVg5v8sKk91Rt5eiW1EHzTSyZiRHSyfWu\nntAr\r\n=/883\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/touch-target":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.fe79de07d.0_1581636225037_0.861752242878211","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/checkbox","version":"5.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c84012e91dbd52631fc422eca48fa54c0dc38d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.0.0.tgz","fileCount":37,"integrity":"sha512-tCjLYo59Dyjh9Ai/DNPmC/+QbCBNvhquhv4YKKUj1rUrY+Y+OKJxUVeh4trCMBSOgizKqdAOTEqM4tEm4K2GYQ==","signatures":[{"sig":"MEYCIQDXn6k2wEwCn49AtB3DYUi0PWMA1wmEDZUhN8inVQ21/wIhAMl60IhZQrNX3H+s0ukOkreCqBln2mcKExgDgHb96PA/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUeCRA9TVsSAnZWagAAeiIP/j0s6ETdYxeWlTLjnurV\nKstl9pi2x9ITqSesfaSHiuhkDqXv7aSZVABLbVcQWqgX7H00S+Q7vRDV328n\nUJSgN2lcaIisHoDvR/jcj3lOCEu1lrtA+fpxROvkAE8OQtKzJFabtbmFKJAi\nXCruac4rU+ja4zxd3OexVHRapvenNbDvfBqv07jHc7MRkJqZW1ibV1KySVG7\nHWpEoESw5ZehxbQ8vIv6TbMhMxyPqY+6FFQa0cYzAKhkh4Z0VkD7lc0lhdiR\noDIXBmpqOxvmBgpM5mw4wJJZ12Axv7Cl69xIHE/Q+eb66IMs3+h+y3XIKd6O\nKmLM3lHJLK0NZ1FmlN9WLHr3MOcMJVPNTO7XLIOdOwAWOIwPNk/OviUPt/sZ\nLAm5nJ0PlERqUZXAoQI1fCpMRvL0r2FGMCPqLWfWP+6PQ8wm+2TJHVXuRD4/\n6eeQXPC9npbD8497hxeS/Ouwus0goi6ltNYY0nbPirhkQKduiC9HWa12qbWU\nLtIJmSDiA84579XilphAT1Dv2Q+nkhu24sdpoyXBpUJMAn4TolkKOnNtWH4Q\nezahjtranFBEuwtRXRSHXhB676prh/1vz21l3nFZH8GXu8Go5DGZ0w64/iOC\nLFxa/k+QB4X8aXCf4HkOGed4q/8hrwFfLzUJyi8Ug0xuaXbBx4AOAc4FWbl7\nLicS\r\n=07AV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/density":"^5.0.0","@material/animation":"^5.0.0","@material/touch-target":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_5.0.0_1581638941944_0.519283859031447","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/checkbox","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdd0e718ecfed37a08606c18f62cabd71af124c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.5e313b1f2.0.tgz","fileCount":38,"integrity":"sha512-2tuQYL1kq8c9jBBbFLnrZhbEPYZzhFCWpvP0aDL76O14+rS0K/Qm6HGzqidguXEpOmGUqWSieyYfHQ2zJZoB6g==","signatures":[{"sig":"MEUCIEEGEyKrh9me9unUbuLuJ1UlXd2WwBpKiVCOdgKmgjvZAiEA8SX7T2A0WPzzYsweDv+DtlicmZWRJdWxAuKM7uKZM3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHFCRA9TVsSAnZWagAAyK8QAJqCeN9kqE/sh5nO5YvR\nUxYKSxMCwv22FBeY9aB6Q21Z0CXfq0JUg+v5RLj3LNJGXMcuwe7nApp4z1lM\nGofzAF34Zo3NgTc8AjJYPfQE0VABm8DpB9p15SBiaphV1RCnFKcyfCAxnauF\n37Xj6z88PVoYpoeXqr13+pAfX+WyzFIbWxxRS5rK39jG0TJnO9MkO94Jf1pC\n5XdbgA2ItAZlkfGok3CcdmIEXNYgBZmODHWNp9bcV/ThwWCAUUqdbMH17I2I\nm6wZp0nmfskUyXFBTzILp+tg8M1YyiTM8ABTU5ADl23ztpf/fn8eddqkM19w\na0BxKr+X8hifhsHpUb5tvwTUC8NV8+9Uh59wFgAr8BSYtUNOH/Gyl6SBW5Zo\nQtnfH25FLQYJhlyCY1lse8/40XFMIRNfmzzlEPlpl8zVxmWbMTZNh6cgLQw7\nWZQXUeh3M0YWHwtXld7SdX2Wvh+P3UTfp47ygMtl3BIzpiB1nOhDHC17FO6T\nhuvGotVhUC+MYDnGpwYc8YES41fyFnL3BGg+mm+JiUkn3jdk/nH7e54DRYD5\nrpk1bRrn/RG4qXq6x0EutZNiWyypZ8XgBVgsLeLnRqlTbqwkv2iQ72q0OHHQ\nQICPjHQQBJt0iY8iI5qVSuOOb5qjmT0rmuM4M/icC+MVliV/+KhSxvg9WIOU\n8uQm\r\n=miOc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/touch-target":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.5e313b1f2.0_1581724100880_0.2522854337134852","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/checkbox","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f4857dcfb19e68cafe44396ced0f522b22b312e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.6a56f387c.0.tgz","fileCount":38,"integrity":"sha512-S8mDVo3pr0wK1IDczuQQtHOOirnjf/bcIwdKKw8uGBnlNJMcPpPGHkRlj4r2BMAhcfIcUMIyZP8rzKpbMjqMZw==","signatures":[{"sig":"MEYCIQDmsQ3l70fb9sna3ABKuL4uE4NYmSrGCkzkPzwu+v2RLwIhAKMP6l6OrDy3XM0lyb2KFfh9Ua2z+a4bJNinYzt+Kclc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5tCRA9TVsSAnZWagAAbrsQAI5YPMSGgYNcja18H9zQ\nGGujwGQz1f4tKLniHqlg3kE35s4tq2aRH4V4o9tMrcfGG55C+0g2SVCUm4Hd\nLOEKqKsbPyxZ1HrSZdYsacnRVrWdFZKM1/jpl2OZyCBgTl8XxR1q4vx4cRjz\n2Mly/LXhNxx1yFNsA5uMSPwGvc9CrFv4f+q2kgene8sPU6oywVXsjwBbH5NF\nMGCfeeQ+mOl+5YIDl660BTqmCLXswlH7FaCI2OYiZTRl6TVgOlcvLn2rJsx0\n4FRwoambj1gpRrS858Aii1lvvN0/Fdn24f6CH8+p6tdCsrUndaYsocx+7cRA\nUpQtqZeR5ILgU7ddTbmDWBjG3RpPYuh1Ag8cYGYy8zQ9Hv49MzThtnEZSQ2D\n4bLATlY1lCc4w98EltVvu5zJVNH76Hd1LNoxX3JarKRBMI+1VqyDLxlyFISC\n0zI7ETdENiuroelv1qGSxiLFbuj2CeEa6sKJNaQfL11MT8p/BrLt6BNzrGBW\n2lPS2dH0ou8CL2EY4IF6lz/N4TnGvEdxq7r/Xd/evm35xoGEdi3GStI7pSvz\nhCyTx5aG6eDZrlupN986dK7GAjImbKXEjL4Q/cLAQfvsBuwu59PmaL3K3KGM\nnw3YH+Ui0D1ZF5mIXkz2Kld4ssWw0P0u4KVSjCn7CaKNnfWdqcoSmhiH+Nrh\nt/Fo\r\n=/E7v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/touch-target":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.6a56f387c.0_1582055021274_0.8944352356706455","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/checkbox","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ecd79f38910c9cb492675c2debf4a0c6b015f2f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.bdfd52632.0.tgz","fileCount":38,"integrity":"sha512-Iiw7y5tXwQHpPEc06mQB1kWAioN2K6uGwtvXjk1I/IWSUtJhJXtdLgyhBAfMYX2Sz3osbkHBVb5kPTStVeEg+w==","signatures":[{"sig":"MEUCIQC7CzEjpogczg85o1xGqKtSEkewDZUN5NXFZL9pnQv71gIgO+VYfzUqKWc8pU/hrhd5URqA05skHRO+MhOsg+wB2BA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkICRA9TVsSAnZWagAAGrkP/3vVY9pj7OA1OnoNrEbf\ncljEQrX2lX2srW/JdXTlC94jF/JMOP1aiqfNVLQAPmwa4qM/5FZGLZVztj4h\nqIggfTZ04Ge8dZkNGEP/vVHBoPBd9ua9QElswVgqMsV59y0anQ3pDShOk+c+\njIPqoOIkOjNkswLSpLOryCp3cdgHb4ITboZh+uxnsfhVjX5epMvcJs+znISu\n7cZldnI+JmQIyHntSwi9JZR+/bQMjrOBC+QAFFgEGcqgPYmN+ERHn92bdIM9\nG81lxTGsa2gClAR3gJTEvAXoAJ1nTHS6si7K+Rwwxpj3L13gYDxBM189I2Mo\nz/4i9SUVHpkSxY5Pm4MenJatXWvd3MR6Sjonrnkm+IQKIyEy9hh+uEg8klj6\nqFOxt5XGrgQqU9lHV5Ts7xnQ05/JuL+zQB7+edI48EHUy6QbfQgsxGTc0Vhu\n6wBoHqsYR0MlIM6937sgL5lbVhHYzHw/WV3xT4ZnM0YVWmEQtpqXwiB4cHFd\nDNzTqZOrLsODeKnGXXKjTChBhy7XE5lF5CrN5YGf9rSRnYKJuPYZliJdthnR\nqDns7r8eHEqgeB2+R6MvGHnYRcBsRnKVmyHk3WSKOS7qp3nZQlE5nqO8O0Cm\n1GBnlNVR7sjqWgJRB8kaAGExTGIkkVv6INdBVvzzrajyDJRNubLOLKl1mYkJ\nkAFe\r\n=hv2h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/touch-target":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.bdfd52632.0_1582143752229_0.06271957023273833","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/checkbox","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77e827fa2d074814549787a8cc62b0e26e7563e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.ad2e4376a.0.tgz","fileCount":38,"integrity":"sha512-PyvkpgN/h6lhUiSYVKV+TTPT5IIOU1S09EA4pZ5K8jpPvM/ogneuEGUAQXSErKaRN1fzzIDuLTrN+xQKilF09g==","signatures":[{"sig":"MEUCIBrXwPU1AYHShFGqia5vcHvcS7d66bu7GJ8hqFIHK1SZAiEA5/adwJRvGFH2+UC293I2D6GcoUDBTtYqt7oDTMlVlr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxM3CRA9TVsSAnZWagAAduUP/0j46DO9cwklwBA5OHR0\n1TXvkiKwQKYxOBk4IS++Ks9jkuNwTb9I9NxkdmpIgBqihPbbtSXZ4BCSRcoS\nvWmgDMCVqSWEctT88YfKwJvPpyghqVhc38MYjZ1pHynzaGLFdPFYR+ZtgIzj\nqPSdHNHfOnnHSuQWz8HP5qMMbuRMjOnXphGr4N34m1F+fKNLA+EXBScpxKBS\n9CjbG8cbgFz3u97xR132Ek3AB0QSfNVhfur9idN3vXj3BwvxPO19fXK9RLRt\nS6ipy9Bg6+WE2ZeBQ3MqH2V+U57yyEsERcpB9d6zl8etUXXqB8Wehvvwlh71\neoGfu6dEpfOId56gyapwyAmY0KJMl2khcP/VgwWUHHLI9ee7ROuGu/XyXSVj\n7C5MGW0lyPkcyOdQkyaFbhGMG6UFiNb8igK38ulLK1335zMz/czbQqsHeqH0\nOgog/lYfP+ZxH/nR6aDC3f+G3akosT3g/woQGrpJGiUM7bkbM4QE2gPmwsUG\nrsFLyDhQJ/CelrF1vSJMhzvDHEpdAVzOcxJO4SNIHnfuUArjNI8cdLl32bg0\n12ExfW0KA98w8ljS4uzoIoBjY1m+7kalj6abbeuSYFDMI/Kgmw8+jMCHMa1J\nxW1pBj/4LW+uzeq8r5A6ffHIxigSHqTGGA1Nqw5xmiL/xIQfTGtq4bAUwvg8\nsufA\r\n=caK6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/touch-target":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.ad2e4376a.0_1582240567420_0.05369629328685144","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/checkbox","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.765caef18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"387ddbaedca747b42f25a7391eb688aeb776488b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.765caef18.0.tgz","fileCount":38,"integrity":"sha512-1V/etcQoJAKuRhpH6KMTlHq6y0g4SSHBDclNq9EsN3L/SnCYi3786Rq/kwxlIdZaufPr/ArRgutUfhBaNUFTRQ==","signatures":[{"sig":"MEUCIFS8N6crKGRi7VtdQIeMuSjkMYD84NNkVc0y+DbkAqIWAiEA28WuziLtbtCi+2g3BB/S65qA08tT7eHsbsGUhEXuk8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRGCRA9TVsSAnZWagAAlIsP/2TgUlEjO0q/UV0mjRL3\nWxNmPsK1LMQP4kCj01tUNBFbXj5V3dHkGHJwHV0/R0dM3Wwdjj1FWOTYTd2P\nUXr46EzQdYZrYEYcHCnyff9BhygVqSkhCa4kb1/mXWMt1xcLyGC2VNL2sESR\nKfBnfm7YkAfwffK5kwP8VQSb9KP0lCfFBoi6yd+0al5yiiqyD2VjbiX6svbd\nBr74nkRXF6xw3viGguX2lPUFvU3t7zHd61RxjWZWP/5hc+nEyIdKRpw7fZna\nMSBIEQr1Y5ERFpXy2X+12hDUKKMsisi9fJN5ESe4Ht3vJ5BSIgY6oOu9j99/\n94AkD4JSjx1LLMS+hrzLYc6KHEwfe7YjWQt31bj2wGUqN9wsri5DIGtyIa42\nRiKOTw3QvsAWVeQnYCvCD7keS81llMslQNx7XmtbL9kkTq8YndxyUpJ8Gfrk\naJvtVjM7TKVSLrlEY8VLGMwqRyKoEfLqXcN0CTBuzvOciXCDSunx4vzQj40n\n0kWlLyVyANOwxhmrCtk5umShWVscXn40RDMCVHOWD5XihlWCev6PKWP/AUIG\n1+DgFgNSKxwcYvovUQDZe5YsrmIOGY+9CWaFJ10HEMf1dEqCMe/69QfIVdmw\nVt3xZch83WleNo6+o71awo4UpnFjzkB3va8CJrHptgr/zdU4YABNy63MW6S7\n728Z\r\n=+4n2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/touch-target":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.765caef18.0_1582306373787_0.831698844591042","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/checkbox","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.949562303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63f12a944a07984652535f86ef01cf07aa5f1325","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.949562303.0.tgz","fileCount":38,"integrity":"sha512-N5lOZ1YA0RvYzEHUyyW6HZlWtaN+2cAJt+qQt0C08UxJkXJd4SbapfRvbLvYJ8Kqkryg2bjgS2T7OD9ic5nVcw==","signatures":[{"sig":"MEUCIGK0/hLHa48Uh7yKrU1mRHa3zrZnOskYiYesCJ7/Q3XRAiEAzQgTRcQ+UeV/CEBfZlG4/nNFBPflm7ujEfecTZCMRJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+WCRA9TVsSAnZWagAAyOoQAKPIPr4z0q0se8wUA4/u\nQSOST5IP9HrJ7DIYBBNxydMJNz2KzqFE4D7y+QaSr+Hsxq7IL3FAoTp4vAHU\ng7uRyopxW78nmMsPL9nDa9siUkNr0/1j44Rf/nwBv1FjIIKgIpo5GzoZfjFV\n5Os9ln/NyQ4W0y1OFXUhjDGd6b8HKqE0hOSxcgnVaWP2EZckogTjgJ6EQ+qw\n0jDPeY2Ar19OzC8LxVEFqubXaT6naQu5Q3ykWlUH8CPbx3WsRzPhKFraCk30\nokLqMA3clIhMKGqOHQxXQhvewam9XnLGceRyhSJJK96SfhebSkPHkQlm412F\nb3+yDvb8B/8CSiy+4SQt4vNOkjyT7LYqMrNCNuqFq2xqhAyH5jZSeXNKZ+ie\neVU1J6YqqjTU5397e4ozw6aucmBeFfn2U8PDNpf/e8Lsw5IHJwWkgnwcNHOx\nn6pfWbhIeimAG0DBQJeYeQn8Xj5tzq5Nz/nV9HC3KjE2Y23BA7rrL1me198B\n+7tKQHyr88piZE+8KA3eEoBKRAGiseRKv5ieAhabl0ogCy8eDe/suuxcOcof\nYBcko6712l5bjh5nKPmxRGcLwOttgZ5KA29ufWux3mqpLVOGv/WIXexnniDw\n7zwoEaZmWaKtioescaZqcDbrYdiXZgrukMkbOS9KOURlMB20TYigY4m+dM5C\nw8cB\r\n=0ib7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/touch-target":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.949562303.0_1582317462193_0.14092962745131565","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/checkbox","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de1e2664bb11c4c7bf8eb600111d5ac56f0510d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.7ec96974e.0.tgz","fileCount":38,"integrity":"sha512-pOm06ZZYzvE6Q09jZbwImNZqeJ9d9sDFg+D0+nAug9ptF7V5dxcs3ipL/fneUIk70ngSX0UviFtFRaNulleYVw==","signatures":[{"sig":"MEUCIQDsQmJcTdY3yG9CmBaCwj8AkxVt+3j+Gr2F2d49QrJSGwIgUrdcgyCxqdvGXMXM3j6Gd3wU5ZKPH8cN/z6YiiIY7YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBy8CRA9TVsSAnZWagAAuQsQAJVob6/IUD21rYFB7a9Q\nuKrZB4uSS8lHjGap/NX1yUYnVHB93WF2bkIZMsDg1Hl0v+2o15rMfjK3FezX\nygZZ3ofdAmZx0hcILdVgnAt1LUdqClxjGdrcquzdZKVdn2cnwqXAGsycEjy0\nfXp5oqi1Ftzd2nixnJg8/kxK936CJOKNghAm2n4GLphpYDjlgGqc8ctaTV3Z\nTvehNr6x34hRyoBIni9gpifWC13svYwLrRk32i8LQYihZQXKfSi8hYKvcaGp\n43sW8hsF8RCHk3bz6t3ZCmfpPORUgM56vUG6Zxp9MMMcFNyB3wXJWQuEfn3i\nXpPxYHXAwrh07e7UBzwWP5CS+SQO6NWyeX8hYKDX+sm/a5tF3uxv/necRTzb\noyp2Fo5Z1nFxuU8YDQSnZ5rTKMDwepDdpUKb4yjdAitHDZisTLYCj7PYHFCe\nj7pcUkaHAK1YQizDjMecZ9hHDnIgdwR/FhWcHV97Hu8zxBygdwRdz+Xzp5bP\nHTGxBpqLlKBpCyJJs7Zr9mg/BaWovmzXOoRh3M1I7ngjj6bBAFz3Ek29RZzz\n7LFVmT5L6JUjiPczavp67GOCGPASJqkD2qhIyLG6cqOriE2ykwFmodRzu6S7\n5zQVogEO7u45HGqFDTLjjbIABGqbV/8LxbNagb65OMEyFVcanYE5CxOqYECK\nIKS8\r\n=uDAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/touch-target":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.7ec96974e.0_1582570684333_0.708942076089496","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/checkbox","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3299662685aded07bd835785166c2895c855e790","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.265ecbad5.0.tgz","fileCount":38,"integrity":"sha512-EguTbgJLFppz7Mrf2O374x0NLQJiyOkjBXFgsnewD5iFNIgCGgKEudAtFGEY4pFoaeVvTtqqUywYNlY568q2oQ==","signatures":[{"sig":"MEYCIQCsZaisbB+9SKEdtBIDnnU0RGR1wjcqJLoRmvWbmrfKTQIhALaLXJGfYkWeBEdhA/p4r0Puq1EFj33cwfYESCodW8XQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYr8CRA9TVsSAnZWagAAwzkQAJlhKQQ92rDyPuwKij/f\ngvnecpk6u+LJ9f5G9J5R4210oUvXvA7DUrV17HCX70/2Hn8UCGIkFHJDSB0c\ntCXRlpPw14vUUGRqcAtrWqhckGx/c7DNQYznhIkFZiqKI6Qa26GaHkVUiGUT\nbrVXvoQWyIY7SjljvlVD/Uw4WNvMCjjcs7brED5xvyIVVVMFcfss7fc8UEZd\nVoFLMU6ISJoZlky7y5dUm0rbU8vlyPC99/PwvDr7wAW8nJ5aStfLg3HAP4kU\n9EQuBXd0zgTxKosrQffUoUyeraHDtafLSTkZ751M9KBI7ViXq+F5+Uz0mtPH\nKbywtJH+Hj1pIxvBHsOruEXDKOQyJyDry0fomDdq2amzTqdIPq9ZfxFvZuqc\nH2kfLj0198nk+jifHoH31zVW4m0XYFPGUA0mjwLJVE4lSvSJqoPR7Bj+q7rH\nd9wPBvxCYtem2rtVGHGHN6iynixulieFiSSEoO5Oj3+5tyL0dn7oIWnLR8Fb\nlrBzFRIULRJQ9zPuHIJ3SEK6wFJ+dIxXQ50bzTjPvVgsVZxXlYCn9FAJh2uG\nf8ycQRouOcv+jqcwWIX36t1143BGXFjQnYbRjrDgm/2lji/gMcBlef2IFFr6\nrGycA3lGxmdWLI6gyq32LzbaiwqSL4KUeasu1iOvnaPSZQdC6WaNtPHNe4sG\n2GVs\r\n=K4ck\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/touch-target":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.265ecbad5.0_1582664443811_0.15727726074904402","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/checkbox","version":"5.1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@5.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f689f6a409f0ed906a0d73bcd0078a768eaf9d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-5.1.0.tgz","fileCount":37,"integrity":"sha512-NwpWxFdWrZNlSjcSEEcGz8UN7ZQ5k8VthExclJnawpYGPUnCPLTXWogREnA2Tyl22PJ6jOy8Ejb8tnpu2rSiaw==","signatures":[{"sig":"MEUCIC98psgXdCXvuMkpb4oSDkembtDGG98F/drINNGAgSVJAiEAnSqPo7R9zxEqAmbeAwLDvaY/6IfjDdGs2MqGB+nEjtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZO6CRA9TVsSAnZWagAA88oP+QHO+LZGDW1oaV8qiO4M\nlw40upJ4MwwyVGd54aENRvjxaofkdqXuQLlkJapWCfV/kRyUhJFV9dgTdrhp\n4kuJS2eyI2OEEZ11l547ENJcza65DJ7D5JMhky4Kr6xf9rtJ5uXUYqkGlg7J\n+pBk+QEZmzp6FX+/wd+GJtmyp8Adc1xlKPxHaDgMW1fljCvIaXU/4wBKa2fK\nsfaP51LvDtf87Q24EV6zs21f2e0e5PfMF+IBUR7rblkNG9Y/PGUhWXHiLBF7\niLlwKHxJ5Ks3Bpaw09V6lw2171su1Wo0Gj22OZz4w+kcDE68G71sCHF7wRqi\nzPqpKbUM6NsMmEzgTlg0YAENcHPhe+m7QBgWfQ8MvrFuDBR+T946fufdihDF\nDb5G1nV62E2DZ1XojThfQ//hI2qbkER5EjCnvXDu1OhU1+uWRTIEBINPYnx3\nf8Oqrjp40GWgwJSrrce4UdjUYhXccBbl4rXqNJjzY9H8l8wQ4yQG1H8IbwkG\nQ597TpsuNnB0VjJajcgIuJrw2dJhnUa6XgfA0YlaYdzxd8m6I7hBsqyiyyMG\nkjkCMxzGyoRhtV8KqfODA9lGywxQAzs0LpDeYcMi0bl0KEJ41rgyRvj2exY3\nUQ1mW7BCRh17KSmrVs7lZGwOc57rdW5bxeLGrEbuzZ4M/0UnbTRVgFrMkOwR\nNH6a\r\n=czeY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/density":"^5.1.0","@material/animation":"^5.1.0","@material/touch-target":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_5.1.0_1582666681733_0.37209477687742454","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/checkbox","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a96f733729cf8126918569ee96422a331c5d3b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.2cf87456f.0.tgz","fileCount":38,"integrity":"sha512-54YtBmkuAhAS7qfMCUL6lJ3WhNcQcaW8fNG8wwcYM+CZ3Qy8muGmDx6xvG4MKjrQc4Hb2IGbbePA/OUJwNqw/A==","signatures":[{"sig":"MEQCIAWA7QVCUQZzLuuaLNBZHXZpwMSGb025qrzK9cLFXFjqAiA7BiyXtYcmebH9hGC+dnv1wuNaUPg2o8bIKTgB/JMdhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPeCRA9TVsSAnZWagAAyioP/ivgb8OTbyzevEdQ9IIY\nQ2IWLblAo7cG9M0cHZoGXN4h9LvV1itL0Q3KWF0vEQnwjCJpyiOltTN83clN\n7vnzJKNxSU+gFYs1zcIyHo0bFLgH1ridQcT6BfR3biKb6wfqC6d8JKotH7L2\n+GBRooqc+rS0hzvYI0epbYwR+Gak3ZEMg0uSvPJ2Udi2rqpRn2u1nCbnZimg\n7Efj4VNGkLoQNR24FZcqzWeQHW5hfb/91rDL46uSDOZbyutZVXV6blA0cFbl\nNjJVJVOcipLJwf0INQpAbngEGTQc/A2ZCV3grB2ynz2RGCphs7dQpGCSuyig\nm0BhHG2se64YyaH3uOcXKEh8qRhD/+Bwe7+WxTzsjRpSs9tvtKGEhkMm91mL\n/Tt0fodzE+g7te+NmCkT5vJVrHjQQnkQh3FWb5ppDTBpdTs7AefBDzbBx0It\ndKDT85jeD7+JHvgCqiodh6Dz3+BPpVBfHZE8IVEu0ZwfDjYfoRDe+4S/0gbv\nWLrZg9nN1tPumoc0Uy6xTVTw2wRMOcqD0+UOZ/Sl41Hh/K2UBhJ5qIhWBDxh\njcI3yWLouixlumEMT0CadEjz2ql6y2xpZzxC2x9UC3w3GpTee05jwn3YgPAw\nfP68JbN6J/u+0JfPK90s35p6ZzHfsda2r1F7J1b8NvDguv7OBx5N4Gga00CI\n0p7I\r\n=4oD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/touch-target":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.2cf87456f.0_1582666718086_0.3194014150193558","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/checkbox","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.781434a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8da10f0f5c397d799d85fefe84ab6babcc3b4f7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.781434a92.0.tgz","fileCount":38,"integrity":"sha512-+zlR0Q52T0yjRSE510PLWe5fKgDdMQdxeICjD5wo1K8rp2lNQNunrpiZim2mN8+TuzmJVXj83xKmTnpbURxqog==","signatures":[{"sig":"MEUCIQCakpEbCcu7FcD4SQ2L8vtvrTiyLPw00gXBiYKjAK8fvQIgEoKW5Oxz45Awjri5KVNYRQKg0z6P9ILlQHTsseGoRsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa18CRA9TVsSAnZWagAA2hQP/iUqEK8+0Sv0nqnroZvK\nT9M7XgOBYQ3fkuZFC/+Wze97h8IRH72z7t0yiauaTsTdL5OMqwEpFGZTWaUo\nnUmczXCx7LqleW3sD4YpBoewGhf/N1TxBLizX1tPEoEzEYI6bKeoJampR6gK\npT93vXeqLvs0OWIcT9h+vQ0wPsF03kxxtCZL7gwEhUKx8wjRG07+gY/wO31k\n2IozMziVTw1k61/WIo6zHarSZ7V2afrNkhE55J7+o4y/X1EbugDzyzB83f9Z\nAh8YxPaU0sK+UXyrmVwrOA4X1JDFvyXXIGDb1roTDIm3bwHx7v1tvkpw5Q7b\nMvLWHWMYerDkwSpaja8m7zuCXmcV3vELnYXTF8rPBioEzVkdy+3d9zPB2Cfu\ndW/hb9qjPKL8R0w3yLT/V6R0npe9qsBSr7XeR5bgtoxh1+e4UgCM7Umg3vyD\nhQp/POqPZSLoTftvYe8agV7hGYu//M6IKrHiOMaHn/5pxkArC35+AMflT8Cm\nIhKHLi/8PfpoRkcO+oUYuk/FNfA0yJo6pA5QT+ZHLjSvskC9gBN5sAG58tY8\ni75RkwLDDAF+33D3/zKwfz2P3/LIj89kQaRKkJjiUkj3ljFDn/flBTlYFf3/\nGYPx+5xRmAGfSCVWGuJuv9Bg9zu/iYE9lK9kHSNWmkJnGjQ/DryrIoGQv5OE\njGPL\r\n=BTAi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/touch-target":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.781434a92.0_1582673276385_0.1960102580843246","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/checkbox","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b236dfcdfd01b414844a0d8409c5425b93fb2d5d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.d6f60c98b.0.tgz","fileCount":38,"integrity":"sha512-v4vsH9qRpk8LtcmX5nN9DCC/R0kGPxPjIdEI9K2Zz3oLECqHdiveaCgRIPnt02u0VKsEqUfws8cwmOPhFAkxbw==","signatures":[{"sig":"MEQCIBKO78FjNc3KYzpKRygiDmn9J/4D3xJlpfneN+dC6kXJAiACkLf6B2hq5nkAlslt2PRZgUQvJWk46KguFujEB18qDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4vCRA9TVsSAnZWagAAvMsP/070eWgheeQLJCMfb45N\nI+Uuc6vOfPeF/qqcDsYekABEpPQWMoVY3woo8Ylz8eJfLlj08hCfx9Y8iayy\n7CyPVBoOkXqD55LFYkasd9+7HhCciCmjm0biWJJnb3U/vdXLV+RIijg6D9zt\n5S1933zLg5/gOyxMiUHTt8mdcu+5c8/4f+Mt5becqZXF1IvYc4Zp0tYh5Dq0\nELcHnZpK3bZholFf2A7eZnvwH2aPHYQ+XHOCphbA03GU5vUUjdkK9fWkY4pw\nNobcR84o7+LlKvSlN9wByn/yLgkuPOqc9cFYuPTRCN7YnirpMuKoC3+nMbBX\nu8ybrKqnrSZZ1aQlslre9lNQ1pViQKEJzAzTUqaaVeuAv4HcZY9/UJM1hGo1\nk7appo/rBdgMlw6NXUhO5UJRQc10SFdA/ngpV0ZiphHSdaCY3aZUSL032dYy\nP9FL/+LQwJD8o7H8r2dl/VLg2N7m4mbmKo+OJwA9VUDbgOTyQv/xNIoElCOF\nP9bZcktUz65OyYiEYQu1TrKz8Jv4dTu46RHZG+zkCtZ3mAENvtk+yzfk/w0w\ng0TbL17o5gtHnnIbIYaTqk6llTFXbbQZDtlHZ0NduxLef+ObiLzZagQn6EHB\nzA5efCKphHa6QN37iKGrqyAsCIISJvEY0tkDk5dYUJc8SbLwE/Cl+ytGF1vk\nfAEO\r\n=bhTZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/touch-target":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.d6f60c98b.0_1582927407265_0.06500527227774189","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/checkbox","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d76f1b99aa8f597dd90daea4b7efbcad36109cbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.69edc6e28.0.tgz","fileCount":38,"integrity":"sha512-qRC/2L43O+JaPdAl1IeEQgXcXzDGSaEF0B1f/A98LXBfKWdCYo8lpuxHM3goa6snUzqpEvz8NNUOutdCXejjsg==","signatures":[{"sig":"MEYCIQDnhPxJgq1GRxFIiFCEqLjkjdwohEbv9ElAjgx2fchx2QIhAKh+Oqrg2PBmmh+ZbdXRmuNcaUPyRw4QqlMCTVWXrQQZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZA0CRA9TVsSAnZWagAAUG4P/29kUo9f2NXFVep7Zs6P\nGnEuHvE2iWbDtj63iztamTqRWPbq/gjsraOa1j/uUyV13+yXREW6Q/n2oeMK\nl6zX4HK86GAznc9bes6G7lEMw0nz3yofDjclh7nJeKQevbMA3MpXpNt0R1Ts\nrH8GDXdct7uVBRszyfj/KMHgC2LLOcW09DMgOGWi7shaPx/mPuhoVowJYWex\nhrqK/Bt0gTTYHdwnKbydhtRtVLYWf0L4QKTTrLMB6UMINk/3jVs/nisz4uWH\nYOQGBJDDiSHzG6s1HN8Bxj0ofd91PBW570hIWyfnNx+FYhTcBHA/Xa/p1h9g\nw05Whqa1Er1LB77fVRqtfF5F00EYUjvRoO12gSgiEUjXmWtzGe+VGqAjUDp4\ncOH/U4SBMUE/iwo+aTEsC1nOul226cTarjqb2VoLN5hYEMv0Hh/sl2SQ1K7/\nC0mG6OcwkmL0VZzsRcPpTMIQGrWA7PVTT0z71XChsu4+2Xdxsh8PpkwaFH3j\nfoHyBe+JSU6fVojoroSN6bOR4bbx9tmGdm2RalioCeNsqiqlKRL+q7Tk6ZxW\np7lWbE9e4IOTzakXzN589EqyhrS7DV0Pf5Iqf2k68tPPzJxHifiT7wSb/wwq\nXmw6G+n/ox7PyjHR6sbUPLn3PBl+wbZu0PU0VeQZMnGntrBB3MP2lpYL2+MD\nnbq8\r\n=UFSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/touch-target":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.69edc6e28.0_1582927923762_0.13131059511678078","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/checkbox","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.9372e4939.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0873560df427e258f701f184c05fdaadc197d35","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.9372e4939.0.tgz","fileCount":38,"integrity":"sha512-goT3h8NguFbZ/45L8A3HlHJk9Ghb8qpJVmPpLyf5oJXlb73hSeHym1CO1gXbJyGwtGrWrtx5FyyxCH94HldLow==","signatures":[{"sig":"MEQCICAVcTfEhjC+juI9IJMPLcw1yRb2bl3O1NKfvP4C5UaMAiBXycFxac4cCrEZMmoK9UvRKraOaF3h2BkDUi8a34s8hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXquICRA9TVsSAnZWagAASj0P/iV8/3/1+zmsSPQE8da1\nshHOFe1GiXusAKHpMdtnIqWGseDPXnbGdC63M3QUs6k39HZXrMVXT8w3m9LA\nbuxxccR+Gj1XO2diYQSdRN0FAdh5RJ7VB+zB3uKej3puKmYpcmtJ4fJ7cw8a\n8BZN97i/kRYjYMUN6T4NXP4UiCpDpxNdEE/BB2JUXk071KN/nhs6+U6bCN5v\nL9EN1CsAIDHKTTZ2Fu2XPr8BjmaMYLtEr3/ISy6jyNw45Dygq9pDGP1bPkeD\n4R4nUYXR4wWg8xqSIG7qrSeSjvWmlI2OhUZwJiizWRW9bPdJoSom3zLyxvap\nfYNArnPEBmCk+p/XgGeBAay8UPfEAIhMDkfUh1noFYE7wDRc/ovWDIZxbSsJ\nTtea1p1WAjlA+fv2AYVDd9Zg/OUZMHv2CP5StF4rZ9v3IRsFphNUFmMwXrTG\nTnIwCPKK0WHE3nUWItNJModL8YU7XCKNGJBLshIf8v9Na7wpFz/4uxO/bwyc\nxz82nNdxZqd7G87V7ds6GSKTMkrOZl/GcT4qheVWUEcWtLu4UaPJ5vBBxuow\nl98jNi8NOUWq9MzGL1QL5QACqdWQyxAdyS28QF0I2Dz3vrTgaDptJqL2x0pE\ninzn3CFiLlpSKFtMzYgJGlDVB+YYoiFDdWwq8vup9nzIwDbkg4uWz1KTZqDd\n/zDj\r\n=0g03\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/touch-target":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.9372e4939.0_1583262599587_0.8804399918696133","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/checkbox","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57140b63d51f5dc6b88290d1da025e310caa3273","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.9cf5e9842.0.tgz","fileCount":38,"integrity":"sha512-xhkVlqaVDDX8rj12f1JO9leh1rMQvhsiDREmgFT8N7tQYZsofs+x1VgBR7IP8Op5AEl1O6heY7gtHESavXQ8qg==","signatures":[{"sig":"MEQCID6TYml+Z+co+385/Pj4FZ8cyvOIfERfd7g5Ce2CW1U9AiBf685ZeMIO0dXyMXgV8GOd1h8YAbgtNfJzOKFonIqCWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXud2CRA9TVsSAnZWagAAHMMP/2mxkSOlFNMSTce+OX83\nmpncuzKYvqdT0JS4OQIobon++NFSqLdm78Z4TcrZf1eBWVTUHUgOU3IH/n3U\nXdVbiXOlDgc13zL2sE/hObwnoNL1XwvPqqjRAob0JY0+z0pyFbOIya4e+pTI\n7Pol/b2qFTPD/zYOHPxAD/n5fzJ7pRMoZoxFH0b8eC0jRBrPoKGvJzshLqE7\nhZJuS8sSAmvYSl1ihDzXNVJr6kp9FoZB8zBe1BVOclYGE1d7mjEIGqQzipHZ\nRsrN3LpRdYotCfhuh99ngl433mTBIIxV/S/taykKaf85K0A1VtlKiypy5CPq\nvaLSw94m/5NiCKRZgeG+maJfj/G9y52wGOC2vYYzE3QY249Mtm6rDgjDkmz6\nljMtde6DHzF5aXnYUm+8WLhHiyjjM0flbHObiqEC+GyS8e2Krd8PoIDyI0O/\nmoncQAQCdaf9SDyITrSpxQMZmM4n8+dNn7InX1X2vMF2Dtr2tJ+PLsgYa6WO\nNtYzUv4SSKC0i68SQcTfZfeHYM2UZCk+BSDKWPLC5BTmT/e4E5f6yUWN5MXB\nOie8ln+oroTg27lardwplVM57RwEwh6Ys6JTmnTiQpVRybVdKvROjpYzHwrC\nRSFRDVqAp6kBJTRPYHfEIOGGns9aTlE+UC9inVyth7wyAgFJaWnPhRVgRnQK\nPHo9\r\n=E3v4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/touch-target":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.9cf5e9842.0_1583277942260_0.6349291480196839","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/checkbox","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.3657f8863.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fce906556fbbddff17ac59f7afb62b9d09e84b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.3657f8863.0.tgz","fileCount":38,"integrity":"sha512-mR6l+z6rOt0C6YYiHayHWtD6faptYPliYHS5JM9zHBE2vUgBRhBhY/wHG5q8pmQQdo1BxQcNhI4z2QBCBXER5g==","signatures":[{"sig":"MEYCIQDDeHiIx3g4OjJlJbfIS3G60yPjJFbe1iTm3Y/CxaDJRwIhAIvQL1GLNwPnkWsiusIrbgl0JnBQO2R1ZSaBnIu5chxI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jnCRA9TVsSAnZWagAAKRUP/3QgGjBoK1Z5xiZjpBsF\nGqPT9k/9ZEQqdWI56LVqTaM91yuhpA5VXN6v8g76w6/skrLhdNdKc74kE626\nlpKz0XYI3HLY5K8CxGt0qF3rk3kVkHIJMI0NKIp1D3xh4t+bijeGwtbYIC1i\n/+lJ+jvzPr1F+vaKsWuKlKu9tY0cPOkaSnIrw+PbssdmlnNXy3TQYbYGwsel\nPA6EjyWjBLJKIP/rToSSyTaRK+68qSB+kZCfLk0xg+S2kSVwOZxPNyc6+Cbv\nlOJXs2aAl3AmulFjoT9Ziax1LPYoeMicPhUlEfFkxXnnmvYsL0EFsZ7iy+f9\ntfZONzYP9wFc9rt8HK/xHwCQrdSUTqsLzQjxGY5ykcLyF4muFeVHcdEdRo89\nRGWHX6IHj3pglioFDMg/6HzyYNu7TLYlSssX3tNqCJejauQVxXYBm+l6fGGi\nwX8eJ+rr3otMvOibn3iKd3846BFtHy99ezB8oB0KuRgXfbHRz/V5QeF7kfqJ\n9346/A7T87Nu1zKEqLRm0zIpgbGUGHHzW5kFLnv1YcaUDUhXSZ8LRzPXQ9mk\nOKuXijAOlRXZsrcbKZo+UJ4Wy9cTHl96d6xGNdYXwn5um1ibAFgQvnxcQyv8\nn2x0roD+uwHOvRicdQaLHWiBmjqiIeE9Y7XTnzjYYdwEyChixTtM1kPBWwGS\nCddr\r\n=3jVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/touch-target":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.3657f8863.0_1583343847099_0.19723275927876371","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/checkbox","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.98b843417.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272cd70fb80aeef3d69c9077c47a9cbd1087ef75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.98b843417.0.tgz","fileCount":38,"integrity":"sha512-6iX/zCeqr//zHfwMlZRNVw0jmYkWCySef7iadCkfdFkXRyGdh5r2qoDZ4sRVN+Af9NGzRtZ+UItqW4rk5usZ4w==","signatures":[{"sig":"MEQCIG8SVQ64vhkf7pyscag9WzVrzQmrsFQ0x0LGDLwjLpZfAiBswxA6dkV7LoS5EcyflLmMZ1K1Y6spj5R02u3r5F3Yew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVlCRA9TVsSAnZWagAAbVQP/jqF/MbQfj9rl1QfG2pt\nGr6BUQOZXR0qL5eF+S4ahAk8v8Sdd2pkpKBV6lInQsDyEC44Muwsm355jpB2\n4i1rtFfHE3mb3XpLFeCXAVHMKyC8A0QQryHY2XpAmyJH6a+GLw5920zRVg19\n+JwpLxWK25byvOF10vCyzqgpOy7j9ApeQGZh7P3xyOUANyfBAjnQnt5D/cPl\no4e6JsXUJ02SzcjiJsp+F84mEslA15inQRwZtAy9HDOqZwWSOU8mCEeqxjfU\n6K3mkW/nVdSNFKVoAPla1qWlNtvrh3suAUk7Kinj7sPwKOm8anWYVtGICGrg\nbUUWZOhymZs2JRVPjdDVtg2dt6D6W4wJTu+VgyZKD/jUJ0mqC5JluyLMSHUa\nKrT8M5RcXTV6Dz8IR0OcCBPc6JqjbVsolyPjI/P0DFUSKXw5eGsTPD64TT3L\nOTu+dNu/2q76jdCh2+xvBFKOWKlU2J9b6plUlroX0DGO0laQs8WrkGEZ0NM6\nI8Xj/9nQkKk4sCRZsH08fIl06g2BztxkkoK4ut5wbym/GXu57Gk55rSd0GHo\niXgA+HQY3aG17rXYH/BdMDU+u6Pc7lSbdBKvtoHoH7EtUPI+drxjk+AApWKn\nXRckAZCiPfAXYvBQBBKPjfRX//QFhWvuKh4+I2s+nXJ8ZvKfbVY/AF5Igwvg\n7Hup\r\n=6OZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/touch-target":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.98b843417.0_1583433060578_0.6301272763297814","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/checkbox","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cec6ee3828b38b1530c7093f0cf2876fc6be5177","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.17b9699c4.0.tgz","fileCount":38,"integrity":"sha512-Ih97sDNGSk2V9qDHXq5IU0X82uXu3Xa64YHENCEZsm0TQiePofOq9+qMYf7ZPdjFb3Ws4U8LbvX9ISNmQM1Vjg==","signatures":[{"sig":"MEYCIQDtgoG6zSHF93WMUDE/vFDVQgb+KgUEkW8QP4VqMO9Q+wIhAJFpzp//CuVoK3cSdD4RqMhcmq1kMTNSYBOKykyFfvOk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFoCRA9TVsSAnZWagAAfWcQAJm3oE5VRfj+mIX+m+HB\nPO2WPctkzB+cZNQDGotQwTx12giM59+CapLVsfsk3FVOeWW18uV9BITMNPMR\nXQ6ou9m40yqZqRVp1zlWRup1m2+A5P1IX5oih9fdNKAIX9y9S2kIQBvojny+\neH1wFNXTB9QjmNuy2VLflnJoIvvw0YRxWOInuRXEeeM/abdqmCWGyNAWRwNA\neDbaWc0/OeWDg2qyjcwao2dWA7JL1U6wUjNvyYXMPQvtevv7J7BOISIWAWSS\nwTjYQAVbRZobs4kNIHIYJNjC3YPa+4Sd9U+lR85UnCMOx6T6m9eo6gTzrKwt\nqfJP540AUwVbzeXeZXqm/bfDKCbSJCF7oio/rs8TX4SdWL0n+I24qbVTqnTw\nc6eK8WQ4BVQz1iWFa4X88jsSnWBth0R1vzHFa47uON5/Q6Hb8A2asfIt2np+\nhLy+LM27eMGTGIUHDftk0piGSAPsXc2htqCK8NWRS5tIx4tcjwSXFdt15kjy\naYabEPBnuhcRpKyDPUZFF5lUqlnUG9bbVOtbbStPHL1jzeCZtWtnz4wZiHkW\nYMQaD3w0E1QAoybh7tIay9RvtNwFrwx/lzsksBfm2jKKVmksZUIPvTnp2cbG\nAii9c/0G8uKlEkewCVmKKVVU3XoTfwJZFYwZr57JgFHPBTzZn7q37LeRM9Nf\nMP7k\r\n=F31d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/touch-target":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.17b9699c4.0_1583436136436_0.9238334981189156","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/checkbox","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.6ee035572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b4778ebff19d8473c3a0f9b996cc76213edc786","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.6ee035572.0.tgz","fileCount":38,"integrity":"sha512-wQpzoaWfXZC0fEJl8le3juOS5iUyIPipdrjvc6lXBvEv6oupVQR0HHxi7R5SNcNGSEGZjW/RtemlEAuf5IZ5/w==","signatures":[{"sig":"MEUCIQDIWqOB7OkSzsGpC5YcQTE3xnM5tvv25u7zLzZARCUj6wIgCcNki43jyJBleJLuyhOwa/iWezB7v/ZvIVN7YAEpkzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLtCRA9TVsSAnZWagAABoEP+gKN4hhRSc30gpNOsZln\n6cdAQHXwSVWm8afMBYIXZ7KYjbWRW7yHUpjBBfHo9/Cs0HlyMr4ehQo8nuMo\n9oXV+aBtD1JklKYL36cW9v9OYiLUSiPntWTOFylvOTSLwxA/1KT1F2gOH16p\nvyZwUag7s3GRfvoDVRYyiA4IB6JdhlOzpxNl6utoxO5/ur8VHfsyz7zTFLlq\njzpMAWHLFiqApCFD/0+yCC/ir2n6yx3HPeZ185MQGd42RcdH3tX9gb9SC6qf\ndC8zihbgRePj1hcvNPHtkuQ3x5qmp83MTw/24TtLMCbAJflrAlNEwoG7vda7\n/FOFHEb2Hx/S2delRFw2zTVxJBqoNtJrPRiYYaoDrZF7BoiFJ4JaRoMEpLq6\nnC0j3fllJC5w/mpZlYoUW3ELH3rKmQNe7rzOJO0p3TivlLnLb//LUd9Hd7e5\nWsXcRW+Mzg4rnycus3EU9qloNPdNkcDi4U/ndKue6ZJKlC/Lpm3HYbAu0Svn\nafHa/6/NaJoTy+QYMP2g5lp3nQWJqey/bqootquKVEVRiKeG+BWoPhh4IFnZ\ntBab/YEXfYfPdmqdeEifB1Xk28ZCsDfSWV7n7rYbzlAnfUw2+fsK6Bzzg3YP\noTH4UIRUbbxV5WjytADCF+Tiw4MsiZk2V+SaE+amGC1UF0vMKpR5be2/Bp5A\nzNeq\r\n=JVaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/touch-target":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.6ee035572.0_1583772397499_0.13021213985270763","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/checkbox","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8709227ad9190efa8d815f8ccdbb41acb12dc7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.bd33cb56b.0.tgz","fileCount":38,"integrity":"sha512-AJFBDDQRNG5MpHeiH3607dkheSmLf8JqFLJeNwWVkgVLfAZBQQJzEFhS42F6qF6UX9rv1ldZTr2dnA3RLgJMUQ==","signatures":[{"sig":"MEYCIQCyqhaDxMvUV8MxjFb6jAMQ7oFLY1rCB4gTt2iBhdxjoAIhAJuA4ZWfuBik+PC0O2PKEXl7naBCkd1xNUZcv7SFKspW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZns2CRA9TVsSAnZWagAAzQoQAKG8fB7filyF6T/IYYpj\nhEMMkfd4LIawARChZvvpUsR3592pe9f/TwF3XQSo1NoQy3FouAmaXMoBtjTr\nlVb1RqWHhFNFr5TZ0qMDJsIM2DbckRexSAshPyQ1T8uGhwCWnel821kQXnVw\nqrm4q2gfJp632KOPiF/3Uhilz9N4Id6wuuInWyTEcCloTXkKu8uY7Tib7k16\njYuQqK/vX/jyGauy/b31C2pCGMnam6KIDtZAMizVfJdyP9yZOQmdgomJCwRz\npqQ6kx0vECQGbSSMZTLrSEew2XL2Q2S5NyBRRxAHrhTUxR6rXq/6RyumC2cu\nTmjAtY5J3foyepJ8GCs8gDzjLG1expazQfm2bKIXAZOZ0rmpER29yKbWwEfl\ncLsiFFrHFcMB79fOocw0RDIpFR3wg3THY9YU4krvvfS9HjjEMbSTdHk1xFX6\nurDr9LrWpFP1WyIt9x/O0P5ovWIugNiKrmUB7KFsWfjhA+cenBhcrIaRbtsx\nxtv498sXpAdROFzRZovtx1m1Cv+hrIDlIwAiKvWEyc47iVOtNaca/5wuGyHa\npkOi4gtfMykjAfZUVu/6JWOz/mTt7Ez4+vd2MXcVqgPwRyQ3jj9acDHOrVJM\n0HPhXI2ujpgAVZJU5MToXlYNw7ODiAQnb17xPbZXvBflvcpT0ubtX0/rJf9t\nGOJm\r\n=Xy0g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/touch-target":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.bd33cb56b.0_1583774518262_0.6471075353229845","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/checkbox","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.26c049afa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d35e834fdc07ca39e9695dceab87700ab3f7239a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.26c049afa.0.tgz","fileCount":38,"integrity":"sha512-0JiQ5l8a/agMaE/3GriBwSB2L4ueEkxR52PFWCtypGfk5MW50wtpAPNoQp9tgttdfD32P4DcR8WFdDi60nWl4w==","signatures":[{"sig":"MEYCIQDCF4ftxXK7yqaPOAkI0qdA22E+bI/fQNpn4HA6Q7JscQIhAL2IUvLoY+WLLX6FxkPk+mBnTCG5UYui3hdbUuuHxKN+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gdCRA9TVsSAnZWagAAP+4P/RnRkPrq8OyCx/QM/+CM\neD5VltecB54j4QKPWGvRd07+l0rKAlNLzHloIBQ/427NNBQK2/of5NktmfSp\nGT3rCL3Fd94gtlkBxxSydjHMl1GsqjJowTQWD3p/dPmsG4LMVdMorRYU3vvc\nfqtJSrgj8cyjIBnZ2Kfs7ZtzQiI2hnMga/fd6CElymNwwDhZdeE07VkHR6ZC\nMlrGF0Sb76VSZbPR2y2Ke9eGkABqETmOLz9ReYQ1P4AEUfKbULJfXU2+PwPH\nIxXW+17O2H99O3OYC9MsRnNWXeM2GASEo0MU1xzc2zp1dmupZSG5qOuZUAf0\noYUjfMbqLSWOM45GXW69/8bRQ0VSkBAOLzvLlaJe9mLIOhSBn4LOIZlcdIvA\nF1uWJY/NHFuzGgBFHAharOV7EZ5uc7hx+wp9sZtI64g0F1wh5UwJNTaTPf2I\nQtGqPIbahBUe+cDyflm8MF0DbHG6lknZMXx/ZtqOF/cVT+0GWmhIOdxpBgSI\nkLfxDC+g7r4wJwu3XdFMjUDdKybe5QtONoGQV2sTv0rnr4EBby5aomwz/Svl\nNGO5b9T1ktcbCwJ8w3Cl60IC85SuARnyAE+K8GyaMy4BDFrBJ3QFkbpKQ0PV\nfQYCXlLQH5kDrHFTCYNdDBKDu4WoJWaqch3kea/PguMIxqMv8lVoty3HFk4G\nqGh3\r\n=MxwC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/touch-target":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.26c049afa.0_1583859741210_0.7030441563801748","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/checkbox","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10cddf91d19cb5c992bf04a674fc051e35c65a00","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":38,"integrity":"sha512-cqzUUUuL9PSv+ZL5GGhQJMK9pAZxARZdpAFsLa6ZPTZGWOAQCr0z93eLRLUMfcm+7AGIajyG9WLWVvRCodvSFg==","signatures":[{"sig":"MEYCIQCnHcbbwlJRtfEAJzL9kXK3gB+c+zw6trG1y2v7N1ZFlwIhAN7bs5AGXWSnXYo8QWi2Dk84a+WJBB8ttds8m3eGUK/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/piCRA9TVsSAnZWagAAjLEP/iNqv0WnWcHv6gr47Uwg\nWtcxRxo8U4MOASSWn/gyym35/6x2EC7R/uZl28HEJk9zbsTOoClnSztNT/Si\nHsquCDPi4jSTGXMET+MZNnG5v4vCxjrEDvgi9+6fNQHVnz0MtRxEiq3bvxiz\n4aNQgHRWJRXL4CiNU1TAHNT098TOOBpN/NsiQ8eYjNA8HWloNGkptaYLPO4F\n9ILztudVQfulzZRLBNH9/xlyIanuYooIKIkB+8RKqxudfn6AVxrxkp/XmmEM\nI5F+eh5Mov+laRw1nmFrU7/AkjTIOM1WIQn4+/NuO7A4hhFf3wZA1QVl0ra4\nrFIKOFRpiyPsc/yCoyFyTz6J3K4BkeyfJKkO2h7AmlvCjYBOyrEiLBIWHDgb\nqA8zhhjzclD+PcApAzQ6wGcGD2Jtk9pxjcbT0eTMsAp1ycf348gFO3sw4vKy\nOhNjysnBWjzDrLwDnC5jV9hYKdXG3REbQ/BybfwJorSj/QBfpCMm+E18U6wk\nR+k4bm4+5deFaHEVRbfnynnTbt+JZhdFW4G2hQ8s4tqNyZU3+anQcTKLTg1q\n3DYhD3+tNbrhnt2V+pTo32MjXAtuQZClzT7ana/N34iyvXZkszdo6DI7arq0\n0hnnAulsOktB/2GgCTALOm9GbIA2S7R6XYi1o9CiVjjYTTcOjKxGF08x1lIc\n+OfX\r\n=Ypch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/touch-target":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.1db5c9fc8.0_1583872609250_0.18153670601173655","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/checkbox","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.4971637f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f670af52339bd1885a0ad5be40b963ce036916bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.4971637f4.0.tgz","fileCount":38,"integrity":"sha512-HYMs5l+F6fSGZmOfEVn9qWAazUyr9fEEa8Nt1kKfozYrzrSGn5jzmYMAknU1B7/4PBii1ElN/4ncfn683s/H1A==","signatures":[{"sig":"MEUCID1I1oXpUZtcQFCla8/n2WVYqwY0b3fN3Xpmz92xK/cmAiEApwumktJ9i90ywEyAMFKsqsvdbzSGtv9RRw5LOPGyTEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuNCRA9TVsSAnZWagAAx9sP/i4wJyNaZ5lZ/vMAbzYT\nVeVqJ6XrYL0dfPbEorGHMY5P6wfYsn6XgvvEeGaeuH9F3rU7qMD363bOLcnI\npBuW/LHyxjqRRlzunYam43jmXZQtQUPzTYvzcCYvP473q7q62muXzJ4rpUIN\nOlKIXbjCeDYrPyM0cixMva7/LLdkRFqGNpJ9fMHFiU99TW0TAqi0sIYsyi1S\n4FV/4zTDLnla6jx+BQJHkNm5QAA67mtpG1JYZ/0lfEaZYjHGzrHhhev1UFtc\n41/su5Nc9uGLN5V4jAajlAPcDC6GeYQYuCvxhOypWMSdRFh01Td4kv2yAdQB\nxTfQ6lDPgM/Wmv052QrhA1jnFVTXndZzmvxRfOVD85MAZ0dhJ2Ckq2aB8J/v\nh2bVmELfZ/QwdL8GxhGqyYumGFT4INC1S9AT4bXKK8HytVIqGkVq/Bs7xZvo\n8bnF88GCtak7gu8Vt7G+AaDwh0pq0/TDM7anPDqlkc110nFYUIiH29C+usEz\nAvljFGsd2+7P5svvYgqSo/+NZXZyCuFks/ngG0f6XM64a9vdpVEjWm5sO61V\nhvBGIVspSkHitieJG6vZZueAAHV+s+XChMdrkng8oFgls/CtcGrBeFkNdp5n\nEb160gPXWtVFbVfnLEARXTKu8oxQdqtI1sO+hw287fYWJ7VIbb9Vyi6F+u7K\n9jmH\r\n=FneI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/touch-target":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.4971637f4.0_1583881100753_0.7117032600633442","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/checkbox","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"590bac0e77368159587ed27ce42f2254d5a373b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.1ae8130ce.0.tgz","fileCount":38,"integrity":"sha512-rYoI6dPCmxnxpqbUTeOOWdbdBxbgZIIGH/xcD0xzQwG3h/xqLL23wSi2on9SVySu0DCPGz4F3QVwyNPTkT404g==","signatures":[{"sig":"MEUCIQCIgrhROIyf1VniBOueuvOa00ycgv/f1gPVWZ9S+LlXPQIgVQdkKyOhOdmIP9W4Qpq3T6tjkK22Vi/Fo64yB20aPj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB01CRA9TVsSAnZWagAALH0P/R7MmgYw7ihx4gyDQ6Nh\nXbFyqNtU5Nx0Uocs9ACMiDSu9/ErpCkpBKC/eCtgSmSzHXbCDCye4CFswUKr\neN0vxTwLzAQkkXxtrrcNzpRnoZyNapUpYDUAtuYSUTsREiZdipoAeOZbwWGM\n5OqmZnPp9bmW+n8dl/NFQty4MuqJD0PK4pWxjanuzhaKUojSr6mK/DS0DKSm\n/59gkPT2+GnEfhHeBmZZDck5jL054Yb/Dvse+GInaLyh8KIAXifCHzUbSIIt\nXGUSaPLLr2L98Gr9ng3u+/HCoEBRGR2sW5xLJaPHrlQWDIU/2ChkY4To40lD\n3Vgiz90wn50rt0clRAgzI+DBUxExZFAV7RnT/LRRF3oILcK1M/SkXmrzMTQ8\ndK79fKm0FSrqyXiYTJaFLhy0/9K3LZM3QZDhV0iQLBk195wdd3LnYF+NDJDz\nXmyQivUf1kuO7Z4/H5omMjUEZQRKdNGartiXIQitJhzBDuUw5cSnI3MQlRug\ndFHOPuURKK2u0gYAf/6zzf01isqeHKGQo6uCOpDhAIufRSSrc+PeSIofWG1W\nvTdk5IBWrAvlt5kHKHxvw6HnakXHbZpthtggotnXdvxF2gJcbu/2Obndz4++\nTIuRsgT/qWmKQ+Thvhmr3acsrqyxyTr8/AsTMuPscpoICAIc2k++yvGkrFC4\n82K3\r\n=w9yS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/touch-target":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.1ae8130ce.0_1583881524612_0.20206289155831025","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/checkbox","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.8639c2690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9946e112fe295a154dac4bdfc104ec4b182749","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.8639c2690.0.tgz","fileCount":38,"integrity":"sha512-WfL5DRxWI/APCALFoJehWV9BaxvS2XmmfX+gjaKZlbdgYj4MRKDvlcTp60MradaSuCLy0yM8J+7ej23zVqqEdA==","signatures":[{"sig":"MEUCIQDvHsVXV1YCvTbXNBLjBS0ms+eakX6oXElL0oM/FiGhogIgPsHHFXHT3aqIZs7XCZNhqQslol45XHbH7Uv47FzFN2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYrCRA9TVsSAnZWagAA5Y4QAIQm4IKQH7nh2XPIZWiV\nAvqsvt/W4Pm0pcQHewCNbbyhSEGbPxN3oZAGVQS1NUQbUOHbpXEAlohQjCfN\n3C6ouRKDiDVyqnlJFsEzTFKZxSSCktdpiw6sM5/rbo0cRcWVOQDjBfcfOLPq\n8XXptbFCzPX+ueQJqF+L2mB4pg/QXHwRoJgY9LeEqYj96HM1C4Z/hbHpoHZ+\nVwmsJxem9cppAM1JkJPCSsTj8zo2B/zHSWeYdf7PK5mtqfstVOx6FR0iCTna\nJZF7UamOwaIiOYrFnZqlBQKBCRFL+DitN4lUX+Nbq9ZI8UWGQTgoGRYcUP3V\noahpZ/ETsNvhCEc6cob7BIP8u6HvtcxMAIObKl05KHj0+9HGuXxEat3ccwnt\nt0E44IbxFpbVxHNrYby6yO/Aq1LijU32CxlkycL72AnqOV87tY04vexz1F7I\nnBYXsAc5rQZeXYv1rw+eVwMY2C2TDLQi9/LGpBsXRM627PbRy04Owe5IgX0I\nvyyJ62hSti01uP32/Exw2JcYLBLePd2a7pLMGJZ6qVzAAyPMbDh/73j31UMK\nT+6Hebuea7Kg/N/jTzC+fl1JOg6umKNziikmGFAwyVX9nNyzmtmevbsTfn5f\nekh5CeuOWVpfvuKJO6y0bCBnWnQUwdExWc6e8nRHBoIPRGiA2EebBuXhwMsF\nJbE/\r\n=lgKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/touch-target":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.8639c2690.0_1583908395316_0.6784537246410269","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/checkbox","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.d5808057f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3435c0a40773892eecae99a3105851ab881d84a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.d5808057f.0.tgz","fileCount":38,"integrity":"sha512-klYbmDZboyz4H94co8HMQwFyGZYcRtSKa9qPPPoHbBUrrR2sOupvi4qPaDlfOdq+42x8fgkzjD5TKSYDzFJo1A==","signatures":[{"sig":"MEYCIQCjc2W5eO14OujHpTOqoYtxTbAv1bpm5JI7KS5HpviHFwIhAK+N0eEwT7kzrEfR8d3aE7k451Cnt/xJSKlpFpWFBf7Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRD4CRA9TVsSAnZWagAA1rgP/RUANri/cHt4cTqoyzrh\nX8SfV7MCKUkuZ6Sqq4vFzAe5lnJXGchBCz5D7gxG6tstjVH57cFvJCL6A+TD\n0/KkIQJcBagbucOvvGkcOTlyZtlAnowSAO5dag867UYg3r4cOgZ18oVVqZKr\n077IXTFOBtYVoqymtgCrbGAWRxhYg3vow/8cz6bf5gjkIutupDxDeSEJIXYg\nG5yzzzqgFQQ+db7zovpNOdpHhleUjqrG+Rx3L0LWn3zScA5aw/T1LvfDrPeN\npTP8aXXP506K3xkzAahZGT8ExNmsm5N/Ouf9QJClp8OClJdROcKDXfTZcQb0\nFQkTQYbKN/X4tl2y+dAd6WbWpw9ppZXsx0Y5J+XhDECBjeP8Bsza6rCTdXlQ\nhtFXIPEwGTebQ3YgLU6JfiIkiw3SMI/uFtbz4azGpjlPK+RrJDMA1wEBU3Wz\n9P30LDfPpZJXtjjs7r4BDStPBR9K7fJe5zQ8eZ1n55S/qGOq3TqoJpROR0w2\n0Hdri6OTpX186369QH9MZGX+KyjiCSlWvAooFoKJceEABj5bCv7U4S7orkKx\n7zKelLYhfQe9/KgdFGfMxjVaJ8n/aVfq/euBXPVn4l2jX2VvQK7V19U79nr4\nKZsmALebmnvZxOERegYQ3OH//RETOjq6FBpvP1VHbgob+230yC8oaieFPVxZ\nqHou\r\n=6Jf0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/touch-target":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.d5808057f.0_1583943928414_0.6445581638722333","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/checkbox","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d04e75060ca0cbc5415098301f4d6c82d1d7b62","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.b3f58203d.0.tgz","fileCount":38,"integrity":"sha512-80Dt2NTTEv/doiPPptzyqUZpMyqzaHVJMEXn8E6+w6VIdsb7Ak9nzEgGotutQV2d9j+Ne7Cw1VJ+8j5S5y4rvA==","signatures":[{"sig":"MEUCIBuIFsNDXRKthwohCMVDE6Z2dKEbGtwV38Cnv64abJdEAiEA3IXg+yCNlLRSnjjpMsYDawprflcso/MykWNmmPDjuj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4aCRA9TVsSAnZWagAAxcQP/jHtQoikXM4Ruu5jM/yF\nce5iWGDFg/2LzJ9syvryB1KTQ6/wzTCw13BefF0/P5ZGAb2t5oA7QTi4r9CX\n+CLOguQ2zzjo1LoDWBHU39j2CCl/rQ55YH/OdGwcn0RI90tYyZ7GRmJpS/46\nfnyNz360Gx7tGbWg+sDM0xHNF9DNXNgy/HATeXWDtSJgr0VBDibrAWbBd1zt\njpybRJQFXsmEGmuRdagFzjbTVRdv7FYk1v5O/on9VMtvmWkBaSEWBmEGIbaD\ndnnHsUv6oAIvVXemdlnpkZ9+LJlknAvoXwPjkfK9CgOaxPlm0yg9xGnl1JHk\nr/w2yRVGTO327TsvJyvEisbgrKEcY9bsP3HJ7vyGNlOhZ6p8jAfNZXKoQQC2\ngcuBgp+TPl+PqlroU0QQBikOzy+qEVFB8/7mE9s0NxRaLg4bEhOyyPTaGKdw\noTE+onUlYnCVKM/7eQxXw3+ejSUFOEiHJGgR5oWGmEmC3SIFWmQTQab3jlHZ\n8wMUO8wq+cC2ItuGmMUWXX1qUWoJe6+RqE05JLxI5ys71zVEDiidNHgWKXu+\nCaxDpKlBAP7K9LbA/pLmdK+vJTpJlmq+nqKF8t7kjw0OvT/XURn9i/L/HGuK\n5ItamwJ1Wbj+iPxOV28QbyI2T+9GKUyNRbKxF4SRM9rx7E7GXLggEuKEMPDp\nf1dz\r\n=PsqG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/touch-target":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.b3f58203d.0_1583955482135_0.7251126621689543","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/checkbox","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.bec065920.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a842eda5db4cf27888dfdbc4bc4d5e6516001ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.bec065920.0.tgz","fileCount":38,"integrity":"sha512-mZegXET6Ezx+zlzI8OvGVrMuopDmrmSIGbTFAbBkv2W8z3Ay+27ZItp/bIHfZLOan+wuv74YI+CKuKF44RullA==","signatures":[{"sig":"MEUCIQCZSYTiygezvtIMvhf+pS93luDu2J8muVV1pawnREx10wIgNVXg4BY1ulyCrNk+W1NQKY7ODr5VzzcFPKGfNhrPJgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapl5CRA9TVsSAnZWagAAwDsP/2+ShKT3xm3DzYY0Na3z\nlc/70bGgktv+m5msyhfbqsnPkQUSdzciZAJ19U8VTEnxXETaaTyyBBB4k2Mt\nayxySaxH5qJKEwE2hGGYs6GavhtYcubcYnJU9nkx8Q5feo/oaDHxRXZJBOhU\nrPMBtoIREJw+bVeGdvXbf8zMMJgbNsz+2TbfQvjbt57Q4dxdpumWaVAeRPnE\nXhV/1IATU2eOWbXazbC0n6/i241NimlmdpslN6Ih19xbehL37JlRH4R39HCh\nk7EznSNKNPl07MMc08gwBVajEJYbLW6FU4w1yB30lFpoI/qkPpAtIhtPWonj\nJOU0MVwVqxLbg6nBp0qT7mfQZ7iMa2hEPNkVLmVSzSrVN3cHr4BjNtlTgzm6\nbpM9sPvgf6DFPjNXcVTJl9qOg0j/VQYW2cxXu3ZIeB2StgnLr4spSE8WbGGH\nCxVOCJ/it4KK1Szu1aK2OScXDlfdYYVpS4hU234PNcGb/uj2zXU7/vcvRwcR\n2HJFIi+mFj2+B0bjPsBWr2TUlsNx6ZYkr7CBHUxm1oIW6IKCtr6lLxcLb7dP\nOyOhHUlp2tQbGG96ciq0Hsv8h1Ft5BE4nRI8VffKjPoAZSGktJL9Gw8JAvTB\nvDlATMiS/ng2sawfv+7JiBNbxr1+IsIEj4JcoEYdYs2Q0mbVR8GULwRx5SMK\n7bK4\r\n=S3BT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/touch-target":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.bec065920.0_1584044409404_0.31495154527191094","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/checkbox","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.776291ef0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12a1168bc6f387661c0073fba334bcee87d00bde","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.776291ef0.0.tgz","fileCount":38,"integrity":"sha512-YSoEQoJaZ2kRGho3D2CwJ1Ojkya8McAMTOQJvef6ZaaddfMh4eyZ6ZWvXXhx6FPS08oqOaMXWXJcK1Xv9YxIdQ==","signatures":[{"sig":"MEYCIQDz6daPSp9Nu77cks/xHevWoUv92J5RJjaLsLL6yWkS3QIhAIm7GrxZwCYQwquJViEgZ7bq08J1fnp4K9PvbrTyRPyF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMbCRA9TVsSAnZWagAAHzMP/17p7/hWqndfwrR5EVMr\nHDP/60TjA1qTS35lgsAlCvJzcWWEDXwoqKcByPOQMuc1RL6ftBHqwmU90JNU\naES7NRMU72IVTzN9dVzh5VAZzYF8rLBNhGh1LeLmt6tkOqtTG33sQo/wqHf2\nFRq3DRKX5FWoMzFpcrzceBOIAvRKXvt42WoJN3Q8aLbx7bYbrZ0vCsmgzpLr\ndy61D8wkWNLvrzX3UFWp+HxX3Fq+QboWQEcJf30caNKdlyMYj7whCYq9WGmt\ngXv25h5Sr4LlEywpJHK+v1+wOur6SDTfWDJx/o28/fVhGhYA7xex+fRO8kRB\npXXlM863QTj2nXVhVNzIx16gz8h2UP7CI6vNeOlQaGF6vwvjrKI6yUx8Mq8b\n7gB+6UdE926LOkUKt4kQ0ZiHUDh2iXZhCX4v2li2gCv/oR9bTR+UlfSdcGAr\n1HnDAIjVbV2Sa06QnnRCrXg2mMOeMpDwuWnwy/ukfPABn+THF7+/obvFa9z2\n/Y2KfIU/kJtk0ZrLiFjPN0h7EAjbhcNfpuccUVtZ/zBvk4R5d5hp8tS1AkD1\nqpVVOJvnsQcAVK880AOziYTw1ifLjQVQiZUaiajVjuJK3bQwqTAP1GUzMWS4\nmWlnAbSh6FjHRsPXEbDQz3SNiILFMGqLnvfEng8oTrCoWPbX29u+0M/DNKJr\nalp8\r\n=lldT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/touch-target":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.776291ef0.0_1584472858411_0.45938123228212513","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/checkbox","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b74ddb8596a23b18f5a4f251e46fe5b3ff88e01c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.ece19f3dd.0.tgz","fileCount":38,"integrity":"sha512-n2T2RRRvmmfTKJU/8zWXYjfjbiCHUTSwGAcEAZRTeVjpO/X9DsvQE8w81h7joIEdw0e7zrYqJylxWEnGXNrYVg==","signatures":[{"sig":"MEQCIFv/ErZeH5JFSd5nQgjHX4moT9JTgmcnixopuJEhTKRSAiBIs4Tmmnp1LdIsYYyZqd1Zxe0K0fPATluZvGAakZzffA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiqCRA9TVsSAnZWagAAB6YP/iWQstyqnTeyqtvjH5hv\n7qsT0T0CNEs67BRLHNQ3pLDHSRm9cCzyCofm/silM6S2SY1qQ3cLwkcx4v49\nUebiocc0RyuvjC8a9b6tYwdU8uK3xPEQ8E5zLRqysj4n9fCr3pycO7iLHIyv\nEisC2xLTyhOfK2upM3qh9/lgRubhhL0Q8D5OXlK06aCzdH0kYP5cqTuM2NVe\nTHCUpPyi51+KiTUl48fmjNWbwUgu8BDCAsXhTWGwcw82nCcvEM+aQqdAgy+x\nVvzaWeNH8mWqEEDfzjVXIm/z9lKmjF0zvAXaMci57Jhs9CrkfTsc70+Vj5rY\nbUOiYWZ13zmQ1KGpoW1NBYixLD11WPr6gTX+gSxZKHQFdZE720YjY90/On4H\nO+qFRCvxRv2zrgs0DoIMLYhsSgb4pwisvkg8VJ6WPt2ntoOBzBYsDROCMhyu\nwe8yDX+dnBA79FiWX0iVT88xRq/ydXSLrOw0HtC8zEAKezbHc6+RNVQ+Qr84\nTNHYFGhI+v6av5aBK7H/mVCwwTOXatQcPw9YK3DCQjrMTkMixGz2CIIWRWUI\ndJwNTjgiA+h62cOepmF8Mpknc/6PGattk7gSVmOAfKuIfmecB8RP6uHzsery\nRbvRa4e+jny8qKnKw871TmfC6xMgfbmRIGhxHEoRJML2SGAw4XgP7MRiGrbL\nVF80\r\n=LZCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/touch-target":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.ece19f3dd.0_1584482473587_0.8858516685286271","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/checkbox","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae53590efdaad69b1e5492d43182752b62cd8833","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.4dc45af6c.0.tgz","fileCount":38,"integrity":"sha512-SBRZ+EuC5QQL2o9sIjj7P5jrKTQRIhmfrlReAKrNpZ8QSYmUal1yFxbWGinRH5NyhpZpW558egzmZbkKYZxEOA==","signatures":[{"sig":"MEUCIE625U/Z+P2VSqn89Uch45iBJ3EBzHtrVO43Gb5vwxTNAiEAws3GAFFii1PD4tc4ZYDClmEVWeWSihVMmnDSNMRycmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3MCRA9TVsSAnZWagAA6usP/1eWAH8oHqYUyaMlZ2IQ\nqpEhbZm6ddsgUcGNbG+jMUi9qiLoAUy6wrk3Pzh0kqt+Hl+mz7Nluok7R3zs\nQ8nAxlgjlTAbuJ8co7jYo2OE2EaBtEr/eezsUTH/kRm0/TDbHdpCE2WbF/10\nVCnHYgBYM0K680UwoBiTdKgdjH2rGG9P6yaUDKn1qZW51SEy1POBVtXL3XVL\ngm3It9OoKRAcTJQow6Pna48ywBTVKPGAtF6/YMLnEm3hljFlrn4G/d0mmtJQ\nrsFR/fh4W2BhdpdDTg9PHOO/V/NSCcI0BQ//tTI0oCKiMPu8gQRoopD4JgkS\nTHOIB39BhIo0uoiM2QO9mz02viIKCmMh/0V7fYTuW19modboBM8B6M4ieehf\nAG6wUBUb4MxH3HyEbO6esVFiPl7Jfp3wZmzuSh2oD1x4E6pWINQpkJb9RZWj\nnua4SuKW/grqOve8rWHQwX6QZa1020IqKipUtDQxknCEVZ0NPUaVbN2m3nY0\nxS661tq5LPvEu6iCic4aArKvfqQGzTc/AWokgQ3aRbD1Ob2YN/WyLsC79eh+\nqlnT99U7o4ZhFN795lDGX9VrMyv2nvsftX/hwlNphDNEyv/CIdtl1lvqPqgJ\nS4aOlyRoDTz8bY5k3Hd2nL5GSmb0Gyhk+CnqhOzkcBL6CTSJCTihzobyt269\nXGLb\r\n=cXq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/touch-target":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.4dc45af6c.0_1584496076275_0.4251540981272459","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/checkbox","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c97ce0d6990d4b47503480bb1b62ebf0837a4c58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.6b48781bf.0.tgz","fileCount":38,"integrity":"sha512-a+DORt8GgHDBiI/mDQ5vm3z0jTMDldEKr6bjYi94N41TLykcdKY5AVQ1C05cdLc1wrALRDjDNmK2qKjaRBv1ug==","signatures":[{"sig":"MEQCIBpxlwaBN9S7OK5FM7Fc16NJf+EMfiRslcd/dz535ilzAiAcGqeMlyzU8YaGZtV4x/b/uMMgLDH5kdO+RfUMDdMsPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+VCRA9TVsSAnZWagAAS4cP/3ywYCCUf6Y3IhL/lMvQ\nh+SHf93YxvyISQXB1h4VVUIHAbE0eE/RM7YjIKhuzDOwD0Nqg/WtWPkRLRco\nGhM+1QmKDuWI3lQIDCQ0vkWaHh9Gp9a48WXa9mOfOxUKFVDPmEniVBb2NmmD\n3ntpCBWt2iYKog7e8MfXSKLK1PMjJ/VhZOjy1tYSuu/3lF8OFqW1FyRca8UZ\nQKuUkXh5xH0XvYdrBIutQl78oGwO6NaR0lUGOA5qZ8Vx1bc1Ub2zTNyQJJJ+\n1+v9C4QG/rpsCNhZ5NtJhNCZhioM/qA/qGpXmBO+7JfMOiQLI5m6vc7u6N5j\nQoRyG+ZCLCyXSm4AQeZ0iS88OB5Rkk8cXN2mWPe+RPSOQnh8V2sxLPshpoiH\ncbu7aAQJNOC0LHzC2HKgGIouDli1e/nZMxb9qw73Ov+XUp6j7tYEqu2k0mcG\n1uVx4glURjcFmlUPUKDcULJrlIRxFbzrag1D1YgLuCBfPGQGWZK3QhMPnx/j\nJBn2og11xyzGf5lfRAR7pd6LMjOzBHfWvJOKaC7r1pUZwepctJKCfDaile5w\n79rqlBtBPxDJdG95xFeeVW9VpxPiAmfJCB2TA8KGjikDpTPeoQzFCWbQH0vq\n91E1DjrovNk2JqELysy1jd0g8R0eAf1cyOSxzsZAdvqHL+DFAZ+ce2DF9rMG\nPX3R\r\n=lkWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/touch-target":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.6b48781bf.0_1584545685242_0.04843523499487512","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/checkbox","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b27b35dc35aaaf87a811c194a0ad94070ec3a3b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":38,"integrity":"sha512-fIV0XM3MJTvUb62SCCfRyodkHYTtpdYCszXg+zoFMQG5Rx+5hz9ix+YPaWIJkYKyejMJfuEENOAqDoz5wrreOA==","signatures":[{"sig":"MEYCIQDEH6grHQHLMA/+1xkrSLSPluHmca235D/yRj+1XstmmAIhAL8fNcmtza11/igRuaVOD5es1ByCVZlVXuIG1VYJ9KFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec614CRA9TVsSAnZWagAAGLkQAJoyV/53wJVGZc4+utTc\nIw17G7lwPMk82wW4AAh7tKCHHDkLKtvm+umEwTv/s1rqmiKmtRvesN8NktYx\nK79CS7d9v2ja2euVTPw66WxhNvC5CBZMCGNGhHxxTfVTv9WoOQwOIOhYXZbF\nh8iYT8qpJWKPbYqN+h/4dSd5WkUnQLQcj/hPY+KsO6ZkMQ0aAoiQcTZ1q+ap\nzUeLjI9auC+DXnwi+c9vSorZErPuf4HHAQkjee0Kh/ywNaBGcxBcgXV9y/Vc\npPrTR7whVUNrUlU7/BWaFVWQDKjVUfSKHYZ+VX9icsn9y090W4NhEWrldIjv\n2t5WjNRM4lypa8QHhNaqkkiMfPV07/fXPuJEL1lrwNkA8NK5Bu1/aEXZ/n5j\nuvTB31y3/k79pXKkLEP2tUVUh9PLsapzXwla7+rU6EnrwZDl0NYkDUP+V7fs\nZyYBu3th6gT0UnK4/toTjM6qj/uaRKk9v9/chX0F6QCO4PYqsaomsVkcY7pf\nODoAJ1wUBAhLkn6iIHmV9vkz9AcuJJOgXbS1MfE6abAjnt0o4uoSN5iT+eQL\nuMDzch1I1SPpXL/BQavDjYnb/Blj6XXef/SZwV0BwNS+il9Z6URgCGHEibtf\nVQE1WYlJTGtrE2ztpn7VPQeKgh063SOTXKEDLiEiIPumfhV+qNSmwEl5V6tV\nxswG\r\n=U0ER\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/touch-target":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.a88c8e4dc.0_1584639352204_0.8879692857556578","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/checkbox","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.cafe18860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c44fe69f62e51ed74a083f994259804e8770ceb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.cafe18860.0.tgz","fileCount":38,"integrity":"sha512-E6FFhvTDX4jgaHqzw0mc2TZ0/ybCDwJ0IU3o5E/rsiLORMOcodEFFdLIE4nvGKsbqD3lQWIwxMNfBtZ086qL6w==","signatures":[{"sig":"MEQCIBfEZwTJ/pj+UEWWC/o88q7bkJ/mXZdvMekwMN2ZWDFnAiAjqCgeNEkewURw+4DvPPiHkMuZdczSocwWzCmxlyGDew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjqCRA9TVsSAnZWagAAGvgP/i+adhPCEZlRALJX17iE\nY5aEkY+eKRh7pPti+UD0T+tzZvtsohHY5EuDx6YkJiNZSDgNn4Y9h4MGFIuV\nN5pn4A1ahUb9v9enWDcFeIEVab0RikdyNQBfyxBvw0bM6dnMKFmuVqSZVzTP\ndTgTic8hfsYCtzhFkAzSySHuPWkl8R+rbgF0YlzloTg7PnXPAl/kUNUgQB6o\ng9KYhY3PXybgWr/r2EqNz+QwMF8UZGBcHa5wUr015j0JpYvR7ELAqkvuBHa5\nePFZKpS/InRGO5PW9srX5U/tuUz4ztMwsL6xNiv6V2tuibzhnaeqjmzio1l+\nkeAEwNIPX2QLgmDwXmMcMElm+LwiMNyJQ/hoI9z2FKqEiUiHEYTWTUOUlw8n\nclnQAufmPVrVMCTaBCZGxI+ZAT+C/A0xAyPqMMwhWGjvMuczFs03+0atKI5z\n2UJtctv3DqvHcTJw8WwqfZuCrk4Z/4H6Wm4j9UPkjgQuTNPC1HyEEFGph0+4\nLP61TyaFet6qU0K5QJmoyu3LuEcA4lpBJjszk+c+LlpFAqy1lEmKi20asuaJ\nSMae5sKkGTsW/eqyWqYbPjSc/eyspF3LbYyAUlPy0AloWHUF+0v841oe5ERI\nBeFQgtk8xRT6BFKNH7oc3a9AAtTu5ouwJ5Ii0OArcB4acmWGjkujFi4EQUXR\nfvoj\r\n=LmN/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/touch-target":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.cafe18860.0_1584716009907_0.8103772017206852","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/checkbox","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a18fd6ace565ab78464434b22516fd5564b0a82e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.35a32aaea.0.tgz","fileCount":38,"integrity":"sha512-gIM33lQFcw2gzy4C4mJIQUauc+ss9fP5deBLU4CF+LfjIiqFAKdCxlTU3RFL6VC/j61jaoscE9V3/dWvrYRpqA==","signatures":[{"sig":"MEUCIQDUko3bMHuVZWqZLNSWEzHFPwQrGI4Zk09fojSj9s0GawIgcydAagO4dfJKx/cJ5klaG4o+r+DX8uwoK/f06wAgt0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCPCRA9TVsSAnZWagAAavUP/3hROC59TY8MwHaRXmHF\nIzUDSkMYc8avI9/3VcR2F9R28vAb9uuLWfQMP3GnlC938nvQC5ajF1FqcXSQ\nnTcnldC3nedU4v59SMGqlHiGVtj4l4Xi/Hm6nNxBG3nWkWpEXgzKXqqM09Js\n1+jotU4w6aXX7Sgkb3cw+CARWl789s94DlmngtFBEQuFSW2EzW8XhBS7rVHF\nPyV7OyTKJzlSIJjFW0cjfeKGEDQ7N/LKqTerotOawkCNI4F2Fazp3X5VWF8v\ncyQGMY1cBRHjrRuKE4TY2supjL2Bp4VrTH2a3IQG9TpWwVlFo0bqfprAJXT4\ndOxz4O1wbwclc+EDhgpawxVqkAuFvwXtkya+A6kdLPVjnGM1fi4Wr7joeN1n\n+qlQRecKIEKBc/9RnDvEfHstxQfaVE1yDReIbdF+kX/r2QlAoHu2mm5T3c1g\nEd8wd4vj5h5CChs9UWsZCkSbwEUyVoRvWy1uTNwpRR0/+ASRlPKMb7/h7YSg\nSnxLs+gC0py5ka4IpR7WTLL5qmgL7pWFGUfkUqd03Xl+0/PiaEZ5UHRxJftd\nVO6BEhIJYJ9aGuDw1HZ801Qg+/4SZgMS6ejOBlw75TwoaJJ9Bb4i3t3rGGQg\n/wkN0TiUNUbX9FgUJ5v2AhDZp5DZDaTg7HaxP5CFSTvDWrAWzdlGToHLuk6K\nQFWc\r\n=Dz5C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/touch-target":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.35a32aaea.0_1584734351209_0.3968144116953376","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/checkbox","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.e75deb854.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"730d598b1e3675b03cb1bf42788166f5d0216444","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.e75deb854.0.tgz","fileCount":38,"integrity":"sha512-asqwVb4L4hPCS/zl1IqXO+QeFdZjnPTqgOx+C91KwwFfs81MwcAGvzXryMhr2eSGzqGXC6oC2EUcUTDvB37mRQ==","signatures":[{"sig":"MEUCIQDfiQha3cAQSrJhtpeGqTF3xKxYHDFPTjNq3bDl0dxG/wIgaP0OB2Mq17iIqcVwSHzATc04m5I16sUJksM2oCOAwWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBzCRA9TVsSAnZWagAAbfEQAIBAA7XtTz1cYFg5kKDF\n2gC6BSlIx4XuiZoFFfDWH+LZge6u6Ir0A/7NNKkM0fG561OmYPmnThWXsT67\nhK7r0bArOfA+ZXQ/CaU5tSCe8QUh8eND8pdAAfphIf/zSL7augLU4VVeZu6o\nhLHwCWU0aGEXp5DiAmyOL/fk2HJmpw85Bgkxa1liplu+H5sA58s4sjn9Mn8J\nmB+i/X73aELHMj2WQkeTQuIeADBQeJni9f3KgX0Cg5hnYW3Zq2f+0EFV6VtO\nwwV2tpw4ePlCGp13Ix2kbDNsXbUj0gn9JgSAqTH8hyZ2fGysMcd7oZ1eAG+d\njlCV1xTrg64+DH7QiCiAoKu+/t7ugSMpqkrtk1ZDHUPcfNOWctMwZ7Cp35lx\n4N9clOZ5qu6bBkU3hlPeeBxQ06+aXpmjUiCbi43U5XR31crPnn7fayDvWd4F\nWI1o771Qi2yDt1y3NTF/Cys5AtPxG204pXEw89GC13MXlWPdF5J3M2HNzfvx\nrVa6WNuiMrXs4S2mS/ZjSaoZpXaXszK3bDMZQU3t6TDCQqyjOErNfKJLLG1L\nVzaCdn3TJsgsuilQYzxfi8bdvBAlOd1AlyzNWJtqEjyG2zoTvpT60TBRBTxB\nlFA9PKyJYZ2ozR03ZWy+z6SxkahlzklbbXVt7U8ePqTKZf1z5kNq90PlAh9N\nREce\r\n=9a2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/touch-target":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.e75deb854.0_1584742515369_0.2781256839462325","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/checkbox","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b40b404ec1bd22b63fe7acebaae5f83584f3be73","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.2cc6966f6.0.tgz","fileCount":38,"integrity":"sha512-ttWhC6bv6I5FVYlpBfTUQFM7wXetSFHgqZbktXuGxltdaPk7UETIjspMp5qa5UKcoFpsvsAV9bHYsimAjqrhow==","signatures":[{"sig":"MEYCIQDjUwlrAa1+vYrtXqV3EEuYIGf0Md3ZgzalAex119sdUgIhAPLWah/MDC5dQXb47GUgO8sFfnCqmsUi7o+VvGKW9oCp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTOCRA9TVsSAnZWagAAsHEP/38iHvbdUG7Ib/nHPew3\neLUXKg6pg46cG8NISPXtM0BhGp+kskh3bilyAVeoWPCnIThhLdCpzODFUbuV\ndapuHQzwlPyBWmprboiAf8rJyHDHBjXWs62C4azW9etYgKJtgNJwgIemsydd\n9will92y+MaOmD1EcWo0Y1MWg7Tjo6i5MSpWgmiDC9Q1gGQx5MtATVH1K1TS\nGQtMElKq7pI9xedOsEV6vEIF8QoWRQe/mfTti0WbcOYt3yWHfJX7u9mEr+X/\nLD3gYbdYAb8pur7hiwUGvGlj9ib6CsGdWzMIS63SkfnOrWBgbJxk6E+CbnPB\nohDQfUZgxHOKU2wz1dkddKgVhntxK9lvTbZcGqfmTcmphgg0z+hCdW8mrfG6\nwAygV3hMy9FaB1+V9GM+jGYWCGRuWSrQ6CEbZ5nLcOjXtDeSoK28dgBdd+gg\nMT/0AIg9r3TWyEiWu6QcCGukbMz2ottzXQFZAssCrQyxrtP/c0NPsDv4E7uc\ntNQmJ6sCgA9opqScOfp0AlS+kb33vIhSZGlg0oe/kMTWSk2Rr05YM3SLG4XX\nB/oBxBVZPoFN5c9bJTmYGTJk1uVK96cUgHgJOYC5lXx04cOiPeekIwQq3eUt\n8TAZXIy50RFLbUNsk8v0wOmw3NiDZSDUZZo4AwLHpydp6TXKrFLHaU21/1ag\nRxev\r\n=tKUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/touch-target":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.2cc6966f6.0_1585075405914_0.9559572482811214","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/checkbox","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.8707953b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99746eba51a6eed15e313380f02a50839abaf601","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.8707953b6.0.tgz","fileCount":38,"integrity":"sha512-4cpq3AjLFA0Tjux+8PfEH0NwmnRPnzC+alGl8x6OvMKz8zrva0ncQNLtKKHhx7tvD8bjh7BlkgkKTpNITVhL3Q==","signatures":[{"sig":"MEYCIQDIaeCTn6MV6R9r11wHMYXvXcIE9MPU11k9+yFPK7XIjwIhAPY5zJ7YMkhACeQuJbkB92R9btV8vTksagjQMQ6YjCjy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWoCRA9TVsSAnZWagAAPyoP/RGe15enopNqKWueROd4\nmJ2vtBWILEzW+nd+HXqpHe+Q14GeLacBC/O7nHRn8uh1NfFsaqGE+RkUtABx\n0oQUcC6XCW9Xfn41OKdS35x8+XNrkylShF6BmHq3xaXXnle70XzSyjQ6za/7\nMK1gQdMfOkmQx+YmyGswx1tqSPoYIkZIpn0u4i2TglY6eIKgiHTH3hlXwmqU\nzEhQYCNdA2ATLz0APEXxoFiCrIgb3s3lyhe7fCJDM3Gfc0aNb9lrKND3zgpx\nnyMaRw4wxka6r5ukMPaTSWXaM9LwIGPjCQhJ9w7noWu4f9LgZzNXZlo//MKF\ns3TrpAl327lR8a1FiuPwtC8J+CNnh2Zcz217cI/kVNoI0tW0cBMCkuHJifDE\nu+5XnG5lWqgqGj6Auc5/HTx3hhZcq0PTdhS+RP9gOYGPNee9BLtB1aGkr/Sv\nvSZ1WY8yRB/3cH9yG0yAkzzUIOKmmFiouWKg9PAYHm8GwnRr6BBhv9p70eau\n8kgj8b9oNDNWmkWuveibK4TU1yc6Bx5P24oYOLNSG2u/vy/S209DW4UjC4gt\nZ1QHB5PUY4dCmKsWDOxHFowcVoLU69u43fXb3VjydV3drHfnq3n2xmgoGY9v\nRCp2pk4SCuqxwjOlpbh2F4GweVVBk77r/s7Gu9Id/oK6IESz4wNVLNqa1i0u\nQIbx\r\n=HBaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/touch-target":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.8707953b6.0_1585075623817_0.0005188927057657722","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/checkbox","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89ae70c76df11ef8f917e88ea8fee8bf4059114f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.10af6cf39.0.tgz","fileCount":38,"integrity":"sha512-WX2XMoMPDfutmoSSoHKbU7zMuxSwci8QsrHNeOpGMy2plPLAZphB57VyuxJb/en0+xZOK9x6hwZgiD+mzRqiWQ==","signatures":[{"sig":"MEUCIQDXf1n9FNtwuVsVmq/YkQR4Ilh7UXfZ8uj8ZGX7OtclygIgdS1H53WsRi0xLuGz5DkE2Npi4Oh1wQvU7In96kmzpSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BxCRA9TVsSAnZWagAAp2gQAKIQKP95ag+DlFTT7UsT\nkBZmTFg9i8dTYh45Vln+hM9KrIFWuJd37/LhoMXhDCSLfyLFqUPtkA5SM3f+\nikts5u33CC+KuHpoYNYZovMPdacwUtprj1sTN4vaLj/jNAZvpE9+9YZYrORM\nda2OJ8DuSaRmTrM9mNBTZDzkw8OnHk+NLNU6DTLnliftoPk5WTQ1lpTBUs0f\nI6kWGkegbVVLsFeraoHISrQ2jnp/+Hc7UNvD1TWYJbMwvXwf8+XQAvsCrjXl\n3m2D+rSvxkQABUcg8bgjDW5jd5b/rIUeVAVesJ1837pkmEqM2kMGiFX/R0SX\nTMvG4IPb//bAXiVd2GL3wgm6FU7xuP8dpe/Tg90c+kXxSLEFCigJI1VrIrlX\n6cUOM3EbT1OQmCstZpXeRKL1KvaZpAt/7zd8fTPfCoePbLUPntERriieJbmD\n9nieFOM6naGGqCY6F5knKAH+gpWDLVK5rpKK4rGzKEnVHADyZg11AtTLI0X6\nnb1q1tsRe1QJUTlNASbZbhcJsN+HiW6mr8LD2uCG6moH2BCFN/yxl2p9phTL\njgkj4cA721oPIK/ytloAdecgkztwFMT2V3U32ptNA+6BbmsL9E5sg44/mGm4\nqJ50lw7nrWKbV3b1ISO7Ahgjdvxb6gSAOOwRJ8JdQaIvGg/bUR01JXTmJz+R\noTTF\r\n=csnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/touch-target":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.10af6cf39.0_1585160305002_0.9882134714055542","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/checkbox","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13001b86cfa7db0727a9449c712ebae95f4f1f28","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":38,"integrity":"sha512-bw77KRen0+xQgCndoUFjmUIYhz4+eKQpasiHCDpvVTEMWOtR9Vhh72OZUhSAl5Fq8bTshAn7rAirzJEwYYeRjA==","signatures":[{"sig":"MEUCIFuPGRjElC3C/F9Pxxhve0spau5TMV7K7cso79PFTqc3AiEA5OgoaMcAI59IunQFrKOkBiknRmDBluNc1MQwnLgbstA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBJCRA9TVsSAnZWagAAX6IP/1OA/Nt3FtTd5lRXMcIp\n043g2HxYXpa1MPyjoc8A3KS6Nc5hFuCyW6fOh1OQE5byk8FRaf0RyvbmzmsO\n6SV1LCCrcs+90nqDEiQuUPlP72K/U6rpZeeGchaL8tA1sRSfAAoPZCNcVQws\nKYXeqBGNR+nyyStVL1AX1BAaVkxze50vYCLjuiucblDxPyo4mFFvxUJxGZKw\nB35nkznns5XlnTFioYRXYwQjc/YaguUQXFzWZGtWR15VcnBVTF/Oe1xWxHbr\neEoe2VdFRFrTW7kBd1tfvYQtsxl4oezK90wDyOh30GTzUYrdyZUqkSUWMOwW\n3bsNqZS4P3TOUa1omUlAmFGSOXVbSPWH65ooKzfq5YsuXVC6UTs2jbAQY9Kk\nNwF6hD81JPC4u2bU9/BmWrOydDGlrJVr00ZGYNaoLHRCPR8xWiAPNAQMYtvQ\neOWnYM61+Z2cmGTp1t30pe7nkpQMpfFr1MjloVfYximE5gKU7pv2IySirafc\n+bBKh9PEkO7kGgSzWD9T6srlrxFgbSytEOQOTpWZEJlIyZrGZQnr6mrdExmD\nWEyz7C4gXdn481u1Gaesi8pGs35kwmfcngSyebRYBLH+HhwjoPRWJ9/4QlVd\nCH3uW+IC3tnFRUJPvdkfQ3wBSmvEJc3v0YumEFlrg2EjD8hAx6ZkXIsf+FxY\nXjNT\r\n=gqKF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/touch-target":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.7d8f9c8d7.0_1585332297459_0.5877072156098924","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/checkbox","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61db19ea0c1270bfc5ce1a4c5a93bea82905d159","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.d6315efe2.0.tgz","fileCount":38,"integrity":"sha512-FxuvBIjuYWZ8Ah6bvCfQriE8Wx9kYnA7SeZOB7jl+Qa79rYu67sJZP7lKuZRmT2q6QCuXrI+GUViZl/qBsKFFA==","signatures":[{"sig":"MEYCIQDOq1yPw4kKfVdAR8zNAc+t67yL8dRDW3xI/2UTNB8GswIhANzBxyeUSMA/fOqu0FN4XSSmivuxSeSNhl30/VpuPIqe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflptCRA9TVsSAnZWagAAEnYP/i7o3RqKeH4VrNNVQlcb\nxHTDT/q9pNhJ2MmVPY2HtLNF8S5ud6TdmO+uSSNqQ7t4v7BOR9979rw6JSbV\nScrkaZn5+bN1bWcVMNlZ+1JaEvKrsqrtj0ZQpIhpzEXGEgXy6QLQdptxdiI6\ni8UV7eT7G8fogh6byb1lkG1J8+cvMsFPdhe8YWOTTMmD+gsVGjcyIJ/m6FiS\nGsoWrSZ5/IybgZkei7+f0dkUyXtmb5kQ2YiKaUlDphj22AWuqqgKrsER+1Dp\nOYTO23av/c44LzQIxDxny5lFaoKyWwAWtBBkHm2nMX+SwS3Gax6BGrLRnmCd\nIIGE/hXuoYWmqSztx4aUC0KWuHod5/etXdk9oxjewEzm8vTbxeEtxdxyT6dP\ncmlqDqk2eV3jbzmGkztRC+ZRU/Nkhg9x2YpRoXY8b3EfnVL5B9bI9FVRr3/3\nxEPp0LuLm/ff+PgTrNpLhH3ybHK9AI9u2v8cSaJ0JYpDHfbU2hl5PDM4qXVM\nikJybJt+N8vM334DsIuc8ZkKGXcAwPcusN3xLOl8mLwp8/pKZSWNHrYE4OHc\nsr+4AFU2aHovTjsqdSgh8/fe2kUM1crffJn0e8skq0Z0yx93dOVdzeRWCQ4+\nMwt6192KMkh6LxgHBKtijcVYB4C0E6duUcLYtSORF9TYLLedeCAN2FZR/h05\n6QW4\r\n=JWkN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/touch-target":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.d6315efe2.0_1585338988777_0.23515100285579527","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/checkbox","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.a3016368d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"717fc15d080bd6ac402956895d6ec527cf64a644","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.a3016368d.0.tgz","fileCount":38,"integrity":"sha512-F2H1R3O0td/DgvCZ0ds6dvCdnLwlgR7w/JhbY3Y8kxOZo98Xw3dLtzbIua0Cv54RrHqIPL0Md4MkDd+Ircpf4A==","signatures":[{"sig":"MEUCIQCJYn2361pvSQTwFkiOpVT643lw7HucPo2jCx4INnvU2AIgGaq6qiLDX6hGSmp+smUohh4q4y5O+Ev9iOR88UyKQxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3nCRA9TVsSAnZWagAAP/MP/jd/7ZH0xbf6lvQZqRqT\nMC9QxtSTid+JJMvES4HDu2OyEIdNr2AuhbdKVRzVT0vmIEtL1LKCLCiWL88g\nZesXitMFr/SXPRnlYmOCOhOXX9c8ayyEjBJDicEgpz90QTD4YPjXC4DhaMVb\nndp0KIaMXx+7wQ4s5++o1EOgQO8h0FG/u5DItSOPlX9jph7Zp0dxwLkbtqX3\nhnKV0wtna5BJ1ORLLdasPgEiuwgAByHJmIOmo8WBbG0RB7zDZ4KtRP3LC8P0\n0ZW8pWcAKU95o+o6oySjdqAPiEtowG934K/KYXxJP8c4zMASGe/wawYB44RM\niU22XBfrXxDI1bg7ORGnIzuPTeVqPecv3BWLkKu+6K4og5MaLLQTTuLP+b4C\nNtDfBq+G/PPgFcp5CWJfE+uBLoOlN3JDaIw2Ad/xRLlVnsH4RXFG6UnR/j8m\n9WSSIpyEXxPBo90NAa/scMr9zLNib0EfMnEAFRv5gbsQzvCsbVu0F/G4YayB\n2Ok92aHN03YGgpechWSU4SHLVtSAk41Kjv7SKWNDfAdH3KobKMSlXzUfqWI/\n3rzmCH++iwGO9x6hhaYiMslxR+dji+iMAvlhtjKkW2VG7A1KbHBmyZQe5Amx\nk+kbqao4+DpqzLELY7b6bd201JX1TX7IP9W9YgLui2LhiUD7gFkAJXImN0iC\nlgSr\r\n=Ox10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/touch-target":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.a3016368d.0_1585343974766_0.07086018369052449","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/checkbox","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ebf9acd91047e7ae53870e690ed43a5799a7ea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.4b45b6620.0.tgz","fileCount":38,"integrity":"sha512-NzeCgeCIuDVg4+qkrg24uro4UrXgNwh3U+ld8rBtsulGkbNEq8Y9PcdZ6VI+Xaa0AafSLLTHkXdFQh/S58j2GA==","signatures":[{"sig":"MEUCIHbR4+uykFZintbrIH4L2zOPGvV7c99GFNHQ24S4Dv38AiEA2nylKyfmxoFOZsrMW8ML/69Jmsc7Bqd7pI85khwa7XU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2glCRA9TVsSAnZWagAAosAP/j0bzYBWKOhxK9p89UjG\nDHsV4OZFQMvd2YtLdggHB7b1hTSoBTBsyenHTOPGFa7qLGFFgVBlbAhNijVv\na4oLH9LBYhv5BT2shZsITX4krEoWvBEtES6tUJkJKVYqIItoPyAScNp9HW94\nTK7wle7vSSzDhRbTq2fITq6UD60a8DgJbRTkYJEp+KMBylyQLEp/Mobo0Y/n\nrg18aYUJ7tDNWtX/2aQ/MVYaUprsj0Q1MU2Z7JjLgonVR7wWeQAStYYWCha9\nHNjJdaELgJhM8PiStC772P0/gsYF+EGpgxb4BOT1uV1nkYqx+fTrE8W0VjVQ\nYSBxiADdKR/kCl2iiVwdOmDkCzT02PBrorwp0RScx6mK73+fZDu8Cw4lYCZs\nFgXTY+mr2K2dwBlNcW/UYMIt+Y8BaMlHD5YDCYV0z4QJEE2LEtFpIzsC1981\nZDntI3uryozz12lVtg4tJjl3joccT3QuT09uGsSCVy56v0F8+8rNmNC3ATWR\nSv3RNxv8gVXTbigL5TQ5fFC9T6urrIXAGyke954sPDpmA+Mn3NnkvPE1jJW3\n8bqAgFd6mNedjj9CG+Ac7aPcO7VJ+ZdtDwKxPRH0akh5B9hfO4JYb9ZlpPPH\nxnx465yYMESmTZdawNYPETGR3DNqcdkrJipJ3FHLXGHOFoEEoQim+e8CGLWk\nDnIK\r\n=ia8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/touch-target":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.4b45b6620.0_1585670181321_0.8841964470663806","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/checkbox","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b2b04743babec6c5d708295c3c539b15deb9a9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.e84b9c8.0.tgz","fileCount":38,"integrity":"sha512-bmtfJySqY7nnHDhnf3eD27k6HsHOMODgAdjZe+sFUGpKq27gQ09XMa3gBm5xpMRejoz1yQW2r/+V9SxDRnoKsQ==","signatures":[{"sig":"MEUCIQDbD8KQrCty4hfwb8EeB5bHVivcEXPPXZOlcNl4tJRR3gIgXUmx2SPTJT//CEHsBtUoAfSxYWpl8i7uEsGtQIR/QVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeeCRA9TVsSAnZWagAAu88P+gM8lWVxj2jWzdQWyMGW\nq29ag5yhm8riwIWPtLFFPa/Oc71g63XKE8DvoIV9GxnQTEbXpdceoBOzEudQ\nSEAhBj50gp1oiptl/Q5q7UKgsnaz5Tu2TtNdI/bTJBuC1LuSKacMSo9dbEtP\n1kbyoe6I7Hs0N2ATg/6Ork7jU8xKVSW6k1dfkVfYmNbCymWdg0x5g5Wi8F3S\n1kHy4z6cPr//JyEfdl65/9KdSMLSz/bnfCaEZfBmcg9KxB/BGL9gNJ+x0i+V\nn+duTLJWJxHnxbmhAJl9y1YlmDuWcEXNYkCMVHnwF6chMTQKxiVoPWHFcghc\nd0EzYdq0vTYtaRJimEKW8FG/E7kFE57WBc12IOWxzgaaD1Q9cno3oqTO370b\nDE7ZnLluD4g6E9fdNEIqTjEpPZYPVo9AuqkmLfMR8jG5LX7ks2SS7rNF5383\niRF/18uo6MoI13juDrz4ayu1lndcJjMGZqLDxBy6LGoe6af0VyhYWNjzDB7s\nGfUm5gr+8TstSr+PFdxJrGxctE9N79U4ZphDNt0/XBxYyUkjKgQl1dgorahG\ngl98qFv4PRIistosLZeXOmSt76FMh+7AymFaJKKEcn4F9w20qNhXya+9gX+f\nRDZ3Y/PBmBZO2AyFPUImo1O9NXrN0CcXIh9bWd+vorjpM0KKqBlm3jbNvmjo\nZ/wo\r\n=YmR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/touch-target":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.e84b9c8.0_1585760157569_0.5865649035743792","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/checkbox","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.e33c49e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fbb9905aadd5a3a1651e25df1edac0a1ad5766f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.e33c49e.0.tgz","fileCount":38,"integrity":"sha512-yw40KYOm9QmeIkEpxlS7trZh3JMaWOeXt0vhOddUoj6I6fAHI/Q5nP+pxwc+qjQ9NVvjoqeJKINF3CvZknehRA==","signatures":[{"sig":"MEQCIC2GjJVO7wR+TFcsvrS75Yalew5xpKODgJSf3IJsCfLYAiBYCqtB24xKsT13MidNb/qJ4vZrJHx9TFOOqquc3/9Pnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS02CRA9TVsSAnZWagAAVhwP/2Zf8sUU4rGGxgKIXQVZ\nzRfEFPaLD+9ghODUWJzYtqPw4L+ndKgUuC8JJrMO3HLuiDElFSL7ZZvWZ9PK\nFRhFWUCro8Lussaj9lMoLVul2SM0UE6Fgpj2Qg17s0A20UlkWVm+boVcfQCV\n7sSJexYtMaeiwU+yk+hv9khJfQolC6zngGM+wpHmeVA0P5f75AWZn/X3h76K\nWfisWA0NtqDjiiKyJFiWIb59d7Y8ht9Wei2B/PJsu7pTcBOSlIeY1u/irGsk\nkBrXaSVoTL4UxI5ph6CwCglus4DhdIkyhPpuJzyFuv4+b06mdbVocmyrvRcQ\n4S8QHjDPguyBGSK2GsGg65TN4CC8QkCMSSPg0jiP/ooVJZUYOPMJu/kRyYqE\n403VSzK5aI5SU6D7vMuOniwOY58n2oS/SukOUWyO28YdJA6ZkBbwsnwrje8Q\ntn2hsEDfTCMXnOJZiHzeELWuTmhL/iqs/X/R5Fztl8DsIzhL5Is5EvJZ2SWM\nv26HdtP0KqpeTj2qxTa2fJJ9ILL5tG3aKMYrl9MiQbO0Leqf8oKslUkE8VhC\nfXXbHLtYokzfNQDOJUITWtjfr+FHYamyigDE3JidSSbyL7iVvnBVnk/0UL0v\nU97eRuFx+leUi0mzo3KN9lypALmyUOZ23YhkEdEH5d1uqk9G6D0IfQ6OCgmc\nJUHL\r\n=9SV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/touch-target":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.e33c49e.0_1585786165836_0.4464847561755769","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/checkbox","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a997481cfa4ad5a8c5175932e36265f18f5389f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.f1f8e60.0.tgz","fileCount":38,"integrity":"sha512-n149dDO3W4GUY8o7VGQrzs/PGOY95GFLlz9PIz3+lgI1wBERuA4UVjnRSKiQkQN+51/9Guoa6GWD2lPE5jiscw==","signatures":[{"sig":"MEYCIQD+x8mN+YDB1WvkcCE6TRA5XIVU51ttfMsmQ2pPO3fUAQIhALXaashH0rWZbSnIU9lMXvOCY0opqC1J3g6iWDgE3Ezn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlwCRA9TVsSAnZWagAAx4wP/2P2Tk51vMgHXVK97IXH\ncwKOO1cQ/pd1gazssjxoH99h7fF0NqCBcfiuAr6SJoOOr+xhkbQvIfTaxsTu\n4lbo68it6Noz9sA8sefxM52ditlH5UBPGLlIGL74Int2vR/xwM8QludvAY7Z\nDsObfYh5DMaLrxjXzCgI0bd9kqJHyaV3a7BV0GYlu476ecAbtU1+YGx8g9XH\nQxJrtv8cZRvdtjxR6ua7CUksQNklODfbePim0yM1WMO6zC9Iz3qWU3FbwP8H\nDW73SErFzO8jTkwWagn/nF/ylYsSRbjtKdBJZCSyX5oTKwuWvWA1tjPhU5uO\nvu0+l502QfbTLzRJF7PqledTo+J2p0cDhtAK7AIirBi/Fiq+hOb6ugJmE/4f\nZO8HbytaGARTQM09fpCAKLooOJ9k1hbzavdlwt6flNl0OyVs8dAhbF5S3lJ6\n9UEzdeLgeyfZwUrqlM4KY+YW4f5pfx9Imqp6RR1P1LRSGejJDyjuC+Ju4FI6\nBDUcwgslqwREfd0TTR+M+eT+4FASdbdoE+WPSdq9kxgsLl9jtLItJPeNdoya\nDleV0PGofncnXDko13Ud4b96Cv9Lkz1pRjqIdUMqfOXx9nq/9esoqXLbIhF0\nmY5CCIwbgc2V9D/aKcQhSeWd49/TB7Fc7NWXOGcEtBqBRT9RK/UT4HOynPO7\nrlHX\r\n=00e+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/touch-target":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.f1f8e60.0_1585854831689_0.0696874490176862","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/checkbox","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34edc1550466aaac4ed8b88734cc15c5b05e3054","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.1e17c49b3.0.tgz","fileCount":38,"integrity":"sha512-U+F03uSrxFuX/Pl097UNa07+9hpQsjSUyYsQIDhw7hWCsbpRVmFNq9khFRTrYxyDD53oRQSAMWzuxVAHyh1L4Q==","signatures":[{"sig":"MEUCIFiOMzQvNtyda1+vSsl8KEQRMA1ZZf0Ce+bGk/H7Dbj/AiEAgm75eUxuzfhkkOToJz5bNC77NnvWtAtMoMRkmMb/X7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qMCRA9TVsSAnZWagAAlAwP/igfyPuoRV7npW+Pi6iT\nVFkYcRG33rCiWyOJLNx8v1aPYYKsADHp4LLf47gINs9jlyZK9T2UxcZlo47y\nxDTvkylqqiyCvlvYrIIrvsUgtU++ejvpZlFB0p33AKjJZ4ZfrPqeJxYrSL+H\naeKK8NpF/FJ/CyN3Q86a0cTGLFSUEYZ98DeSFVsvzGDy/he3bJge/sPndxAT\nMqUAuExthApYsbf235POQ0HDgMfdoLej94oiNRX6QCx2AVlOpgsrICoRmAzH\nO9iAwkV1RtUKo9S/zI1VCbLpCkBblW30VCm1j/jdrGHpUwgqsJAcaLI1q/Qo\nPX1lHyvXzGfopaGU3g82p1usTmsw/EWVljoUpf/AB78KoJQhdxkOYF2R+uA4\nXKNL2KBJQzwDut/9zt6E8Pyjdnp8FByOoHdQ5k8i702hx61GZHu4hFYZw7kK\n33kssd4ld+2eh3RW8RJw8CrZYAgWFHYOJzfEPMCLCRBVs/i0+7t/t36TqDYz\nmeBbX5Qa8zGeCZUTnDhClfNwOwhfQiJtCNwzory1umd07xJGiQD2aRXTazXK\nyPpaPttezuHJ9MAp9lGiIpNlib9VlPCOX6lLMox3I/CmO82W2lfttXVmajdI\noOobwiYa5COGh22i3BZnnj+qxxsoFMuDaoZjBB4plxK/HG4Jk5kZ27exvQs8\nnLWO\r\n=0Ag2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/touch-target":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.1e17c49b3.0_1585937035757_0.8278158518173195","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/checkbox","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b4a020008c4268ed3116810c1e6aaf57e41ea0f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.6a40ef217.0.tgz","fileCount":38,"integrity":"sha512-bqiUNdTZGrK/Q/TiB587ScO6WVOREqQv0j5sHQwyJtU5Sw81OmP5fetL5wikyjFSQkopBemK4Im7zwaBS0rlxg==","signatures":[{"sig":"MEQCIGe1GZFU/oFF1lXgJI18VtpnImi9PZtkkJ8BTJjjSpwAAiAFFgawekFo67E9/vSZwrSxJ8SJ0sAD6plmOrM0Ucz1xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh417CRA9TVsSAnZWagAAbVgP/jSWafRCcdH6uKGGTZ+D\n0wWDNtUVFFSfc59N16DgIxjVabyudtcejM55kP5AQ3iQlqHZXaIoi828rE5q\n9sSmgLUaWXBuaG5dR205wruvKho8MVTr1SvhUvS4oNyu11zcYCbhfk7FHyoz\nv07NNl8f9MQGjUrgBLCiWEcPgfL7pDWjXShy4bd5MBTnuC3MNwruRi0iXoWK\nNPGoR0xSMlvmK7gU6EyZDWLS1aMYcWNGjExXz0cb+7D+mdis7UPIeNLvZbqM\nO73gQZn4ZRGD4+TEhOb+XdxLA9DaprQ9807kcvUsB2MbjoaSusGYGd+nGL/R\nFJ8F6EEOUMuEqfJUYuvVeJDz77mF910o+aEIhBx8GLgw8ao23vOeWf3rOnAY\npl2SjZQLGVhl3L7+/Lq4/xyyjjl5thtD9eiBaE9XlWVja1dRivJjySgbTB7J\ny95RtHT2RTIV6Ljex6+zlGuWUJIcoq7xJBt3kUU6PpYGQOQ8t6ma4XY/uOxA\n53JaXs6qC9EYFkN3YMdwnYZYtZJro8/YU2iNisqpRAVyc681iVKogpImllfh\n6QNIeKYqg/FoGgDcJIcjdUfbYeYPFam3S3bVpgERmw77xLAmVMuhz5mqRhzj\njT9zngo74EE3vU3Vgh6SQA9qoxEturJQ5Usl5rMjCJj0Wd6NEF8tb0is3MZy\n/ATi\r\n=beh/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/touch-target":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.6a40ef217.0_1585941882412_0.633336525657874","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/checkbox","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c6cdc997334a2d537d7a4752e5bd096ea6a2230","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.5f24faacb.0.tgz","fileCount":38,"integrity":"sha512-oBHizDlQ5hTVYEn8bOnncZp2/y+qQfiOHaSphkEtnB67AtBHe5JNiBKSQ7c9kqJXT01NM6nFEzoZ2ANZaWHe/Q==","signatures":[{"sig":"MEQCIBtWsqjxwIN+bW+EhCGzMcmGKJHgNxUPPnmtck81hzFCAiBQomneGhI6Onq/SpbsM/KeOJwbLMl8LqVr1ioBk6z9RQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje92CRA9TVsSAnZWagAAi6YQAJSuUQejR1hmxcI37QeR\nNJNAAaR1sr+k4oi3F/IrYD1+TBHD5Rcg7v0oUyXnS1mU9mWfXk3H1pxAR4Sd\ncg2wg4vgmLDDII2wZ00K6oLu1H8lBlCEOFfXJwF3+gk08Hjj6BK4kcVO7d+X\nKAFy4shG1QJVrFQT4iw+VBl2ZQ9KLa4hPS4GhdgEqcPOwQTnNxBr6kCnnk7S\nl6XkpFQh/BjbJtEIP66huYevsm3vlUhjjOrgosZG1Uf75lm711DPkgCzv/Zj\nTXCRd1Ny6SQ8w3z5HTXIJuBZFrC7wYLIABlhrPmRCtbUr9Dha8BKmb5PcTeI\n6opE4/+JWM+NvKsB8PjxsxPscFo6dzmJj0ugvSlPj4fbuFP1cknpRVdBirSU\nRKnoOzuCYrOA3C6jwNXXT/Qzg7NtTmohuyEdNFGF/cZMIakpudMi43Oi0q1s\n+eR+zDfrinYbnn8RNhVGblmfpok2vblWG2ngumEuXQiroj3/QxvBS3ViQ2DP\nRXvXUUM4vbLH+UaOqlNdN6Qzk9EY7bmfKJ7yVyYg7AN5OLJokSY/+IhC2jGS\nVReuJhcWPWVRyvfb6Q8DU1bBak7TEzSUxyvOBMlZ5Plz2WXLJFZiATS43G5t\nopBuoR/s1e/PTzKQL4BLk9eYJx+dNZIIbjRM5xrgVJvB8jgPwaogdf1ouQDw\nwfKV\r\n=xFjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/touch-target":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.5f24faacb.0_1586360181791_0.5581677364980582","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/checkbox","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"303785539c7b56d2cee01f8b1d8d7fef7126363d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.82fa986b9.0.tgz","fileCount":38,"integrity":"sha512-kKTLXOBHoSyodJv2+cGRQD76SFXNoOIyt0dUPSv37fhViow0xZulednMSdSfPhrXU5GUKvPGuYi8DcwIwJ/bmg==","signatures":[{"sig":"MEYCIQD8La7yh0bKTgs4kgWrOnFpXZt2pnOmXHYuSHVqGrZ7gQIhAKqoctsWcJws1bZyJMXt1n3JGyV4cqNzPNh/v18nk5pL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfC3CRA9TVsSAnZWagAAcEEP/1n5Wx7yBLcNdhrt6p2E\n69LWtTwBy2OJk8xdN1miYEWRb9da7nDT5Fro4fu5vpYdTg7IGA8J7XH5gR/t\n5IhlJ6rthUy7zDFIgJh+LigNn1KDqyEoRuS5IF9RqCeXCXhCzUamxkMSzcQi\nSwYv2hWSyRc57P/9sraBDgWrS2hnDFMvdDjR3beB0lV6JLJ7qpfOOgXXHyKH\n8vuphIYr9ozZ7qICOzZXtTSdMtuXwkuBKr4ZENErqR77GEdO1O1598XGQdGH\nY4Nibg1DYekkg1x/AAu1F+hwPATXq/k18h09fyMFHvfhi8fnpXcQD1l8lkNE\nqy645jpR7CRxvInd2bWVsn2lbWJPaR282wfUjjNhtSwUyf288SSR15w55h52\nYag4sKfA3WF8SL7fFt7+WSfC/cnf4ASSmwI5GdHL92oBPOCxg2cD/2HNZguS\nv5LmJO4F2yDj+7q2bOBExfTif4jKDiBM8qEUVexf1sQCxhLNY6PV6Qle3sUw\n6PRABVkBlxhhUIlSlPvCMhxxzvxWB6zlS8krp+FmYEl4LYM41HrRvd+t7mgE\nR43OTR35aBTgFzBteGsMD1LuDGMWIgqyQXiYF0hn6/9KoU9aixUPTzJQf2ZK\ni52AzJF3FURjm9jeq/yCuwHTxlHsQzwC+IfvhWJnJkQAlFFiHyihqti0/yvP\nmUH6\r\n=jA4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/touch-target":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.82fa986b9.0_1586360502823_0.9078069911919693","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/checkbox","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b98a8d6facfcaa7f048f8cf78090831dee100ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.9930d9cc5.0.tgz","fileCount":38,"integrity":"sha512-l40UFG+mzHsvrerFF+wprXpMZMBPxWuwq+DMaBSJrrY6SkPL9MRIPy0+z5O4bgMB8X91TVvAVI1VuIRiFtWg/g==","signatures":[{"sig":"MEYCIQD/LSefypI7Jm9gBMHFgmm0jePVlHchPPRvOJH3vAa00QIhAK2bQjrWXE4o41e9I+Y267/pQwecv61O+uY7rZx4eonT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibOCRA9TVsSAnZWagAAPQAQAIIqan/EXCakQ6fozvwS\nULWzaDOwaZjBz3XrF2Kemr5emRAYHhOI3NiouOcVZ3PnHyiBnH/dZHn3NIW2\nFinxxLE231CxwwOKTeIEAKBNIqHPCXtnD3ZkkuXAhHKJAjMxDiCKe99jbgiQ\nG90A8wQFtI2UbbvzM3SiW+enSXZOeKQ6Az6wQYEkOkLvmoUCwiQGAOvLgNOh\nnnytiNC/woxSsxe4I3dSXwwurFBQo8HGQtgj/np0HRTZLeh/gTS5PCpi/mp6\nFwZQP1l0sf/8sjTVyE5ziuN+6kZBlnNpIT9nqwQ4SbjRe+u15awnkXA9ce8W\nn7pLFip1CmxsMCQsuGNrqXBhFd7eywIL2rswR4qeZ8NcRezGA0UDwQw3fhdp\nW4txO8IJJX8iBCPfF/4orMZ524i06NlD0hCMWxjcIInWgaeag9Q/xpHK+eql\nBGW9dn31wj66a7ZkQxEwCd6zdCSx2afTjOwdzeVigk4y1di4K2oDbOMsf5Wa\nA5l/k5q5qLO4uaBU+RhNlxc7FzItcaQaU4OAQN0pxwWLu7Z5R1YwOLxiAt4L\nXYGe6fYTd0rehesRF72U/EJdQAdwxl3GPy5Mekqe4HM7TG6r0CL8vNrB2t6s\ndpOxyUUhcC6Gpps0HbBzND11jQyQzqQcGMvJniuf0JreTMMEZOUAiMK9qwvb\ncy9z\r\n=M30b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/touch-target":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.9930d9cc5.0_1586374350352_0.5188259424169197","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/checkbox","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.6601d24af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e1a91a3f368ce4d0a12569b4799d8936c33fb34","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.6601d24af.0.tgz","fileCount":38,"integrity":"sha512-5z/DfyTPGVdwuOIpfTWbuL4ib9qtZTsbM2rauHJ64L3M0UrQ7OLF94rET+TY4x5SGooKKpqAqNAa2YjhktywLg==","signatures":[{"sig":"MEUCIQClJ3dZtqtn+H5EIjl04tjVMmXSG+X3FTdyVLvENE325wIgBKcj1wWB/+kMd52unTkObXBqgJu8r34sIMQY+Edn4EA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyFCRA9TVsSAnZWagAAClEP/34D/ZgOoKsArYtkNgxN\nAz2Q5o7isaarap0i6HYlz5JUDAPNRLtPca8QffNUtBuUyd84lXJiwCqoZBbi\nXyASn79h5BRcm/3W9FN48jQulx+NoY9vp9tlBujTPR2+fqqpR8RyxX6eiDcM\nP4W5d5zmsuDL4Yb7ob1F94dbqPLHsyXE+fUpCDoUzQUHMnpDXsrixU4rjs7R\nMlUnqrKIlm3zw9E09Obpsg2TYY3hcFlQujhh4SIn/atXG7Fi1yU4csXhiZqF\noyVnTFsE28lhJqPsxh9mbZJh6HlTyJ38ckJC2I/GQyRt9nC0UGJuiDdwuEwp\nKcvFlHGXaK3LNPUpDm2SKZkrPoFRlbEuJgkjuqMCBFdfK6tSkgVgSQfvrh9s\nqBH2BgwjnUj7ZsQ72hREO8Dsr0TgAxR3Id7RK6E+yjZ2U/x0mwTzSwbR0EXa\nChSdfQvO6sZC0twv4fVOG7UkZlgdyy5EqZTDeqU+Mfi3+gZxZn9CU+H6g6Bs\nzNANhOPlHvXbdwAhXYNsZGoIWGr23mRc1C2d/6hwCKXA/Wwug0xa56x/aGiq\nH8srtyZo/2KAeGFjCBpo4ZMD8apPm79PK2DA0VYVfvzGuit/sviouqwU+Ndg\nJs/K0C9bayojzkXDvUFU2AXxjv4fgMh5TbxMXiVcs0JvdfBH1Cf0yTOzlCYr\n6HpD\r\n=uG/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/touch-target":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.6601d24af.0_1586392197252_0.7341563688699593","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/checkbox","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eee8172f55d775682cff08ecd2a5411538935ea5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.05f5e1583.0.tgz","fileCount":38,"integrity":"sha512-zDmPdh6U7u3I6Z2VetPLHzQ0WkvhdfzfpQdfl7yhAhc3Xauwu7RmKaKaTNPvBPDcM7uLJboWvs2FSah6e/CknA==","signatures":[{"sig":"MEUCIDXh6BEwRmMh3gvrSrFwWf/v3iiVTdCd/DqSEsJlhx3GAiEAsAEH2bcK84+MkTH0NnTGaO6VQ7dhlIujO5fbiAhUOtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCaCRA9TVsSAnZWagAAIjkP/1RHBwQy7YXWD1qgNnpr\nREaqQs1d67riFRX1zamCL3KL6FNkPb2bt1CHHXkejcmF3V0jud/ohoSIPrcV\n49TqHKKx69124Gq/cf0D6PvG77x6coA+fUBVzK5G4No7FaN/gVg29UymSI2l\nmCnUGrrgfIs7mT1bDAuzuStmRAt+tJ25j3jftlWjKAQOT908OjR7a0Mk9Wb+\ngahnrJJxG+RFR7A/Af+7tFcRAaz+vRycYvrgzkkwBib/HtvqQbh7ezZ9gPWW\nHVZeK09Y8VFpe0LyA67lZe4XCha/u5dayv74N/d3RtRfdJyhGBqnHrv5vly/\nuxgu3li33uJnCPeM4uzHz5BqTG/dByAcUVFZ8zVx6aVwzvG4mc6x32afPi1w\nsNm+nEx20qzXipvA/Ey7q6qzsVJlwao71IYkYIgi8EMTXL7kT/cQDuAgk+LQ\nSBBpi5ULElYb9tY6uotHMfgTkNAb+no/XmX764RtymXyXZ+E6JpdQTdGq5VD\nhjQUvnuM8eNBVYVNz97MxnHsFmfhXcI1spU2FheerzfWLevMPB02xBSRG5aS\n/tnQBALcUK2x31kKKbuj63uAiFtcrnBScWlSX95DrgMZyTRJdrKtSBjuLS+/\njYVYHQ9asYqrgKOJnpi1DAJBiOX2zFjILUYtvWmrAwU89pjyo2XkPKUlRLMn\naqMI\r\n=I6d8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/touch-target":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.05f5e1583.0_1586393242163_0.41497229145024006","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/checkbox","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.bce00e186.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bad2df1a6f60d7404240536fcacb3a1f3821e801","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.bce00e186.0.tgz","fileCount":38,"integrity":"sha512-bDXYYisK0Sp+GpexQ/NvfhE7YOu8Q2PHIkIk/iGqbg4ZkC6pvO3IBermTNwRZ8CEI979bZ/R8Oxk1oWvWoj0Mg==","signatures":[{"sig":"MEUCIQDO0ynzaXiyRors+plrD299A3mIR9zJMQTHJE3PWYU3kgIgHmSo3eM5bTZx90bFhGCaLx5Xxir4K+dUCxIqfgXlKgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3JCRA9TVsSAnZWagAAT3sP/2Fzo5UyjnfwOuaegZoK\nD1ro9z0XTj/UNxrr99HN99Ih/8stkH/ThghmQDv47SG9QohJ+yCvaEmD+0Rf\nkVmYdgqN0IrXRUTF7r5y6U7ICE0PLaGgYNYP7bWEn5GlykzTfptKU1zeNYS5\n+pSqfYWBId1w/BOBl9wTlnq/w5DRbCbBkLq9Sz8sJYeUclNFw2oyJzgBPk7O\nbFL0RdoxhWp7u921nSDt6FSghgOH3r6GMKD6yjwH6uzGWO7O7mG+01djceqG\nnCDW7eJo9V5GVIITmsEYCLF3m9NuMDKqKGgktlUdaeVRad//e1AMpLBrKu+1\nK+IfWU6ohToTdkz258A8zJqnnzzdJPgj/aBdAMQt+NknREnrsu9e62V/Xhv2\nrD94mlT8qiw00SUFoOAu62BaITXE8hwARKBDroReZ4qrRH//Xbge+TlmG9tG\nZvTPpqGJnii/L8H45rVZS8qLeUVLaG5han2XGhcKYq5AkEs8e29VTh4Jw5qu\nFakfP+oPQIBMefMkmflti4b/5Iw9GMcvo5T425a7VnghW78IIBWWy93WIVzd\nHgev80iXqwuWRRaqJMYOJ0Zfp1wwH5Do5WJgbZXm9RwnN01+cCUxOeTy6mRS\nBRxJCYihEZR4C9pMO0OQUpOrcrQW19ScKqUOEnXEh6IdhB1jyeT+ZEKli+1w\nEyeo\r\n=qV6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/touch-target":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.bce00e186.0_1586445768448_0.10441570901194686","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/checkbox","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.927fa902c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00e4fa4d2a22f97906b03ad895aeed561458e91f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.927fa902c.0.tgz","fileCount":38,"integrity":"sha512-IiLzKqV6AH1VUGy77/XBGR+RSCMbXPL/vr/KRY1o3BX8UUuvGDnbalVp9pYBSLKZqPL4Y73m3sJe6KywUlcS1w==","signatures":[{"sig":"MEQCIFL3/Tyw/RAkP4LVKmW4yEWCtVpicpv7amUfyHUsU+VfAiAutQCFeBnl/fiZ1HwurrcX65nCBgGofZ+7Y6QFrzf71A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22HCRA9TVsSAnZWagAAbcsP/Asw5bcgaY6s26OEeMIM\nE9njzxN/OoSv91xoLN7ij5ZC3zRdrhjbpJ0L86tn5J+KzdyIJkwJAZ7br8yb\nApbFkm8Mk+JwSLtps20IqQ49kUM62JQOo+/DCFU9huJmFvrwsHQlUs8a8dwm\nazhzSv8BdD2G9ZE/A5KAxvn3tVGOeAcf6gHfH6CSPuyFtfner7/uBF0qOjzW\n0iSjKnaEEeJIDd7xHiUf2GEHjEVsapGlM+sfj+kjCwo6/wPVcR+xxjndqYd0\n/6fJb+JxY8NfH3cVKgSF9ZzHmT/ynXd9hrsRULln8je7bRlBvKtTBJzxKJQL\nHV8Fsq8GzG66Q1E3ftoigTngVz29b/zfso+FpMt1MdsECjEGeVH7SotyoBv2\nDK4KBZ3YIeLmD1MiYb7m5mD+aJIntPHwZpjFpltSqYaXKK5w71p+nm3ZnmrN\nI2wiuiQeFEx61rYmdY+z04wQ5Xi4bkuX72rygq27j3khrs/JtJnglRk2SGM9\nf9MjeHvcPbxLtuRfWlZ+Pd9rJmz/PRBIni0wRx1FmnyQrQ2DJ8gWIZQypnYl\nVbq/n5ixZLPIZa1f50gkEazj07e4jZnUo1qD/fNpZKjXrwDShb+3yw8gBxMa\nXWvZq8YNPZHOWrvaXLc2YGoSqU7uyapohAWQ8/YFM/34pJOc9tzhtp6KDE28\nhq4f\r\n=v984\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/touch-target":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.927fa902c.0_1586457991411_0.923269231974521","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/checkbox","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9c7fb354041ea4049809de7f5772c68f80b5fab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":38,"integrity":"sha512-86HYDib+6bOmqTDz+sc0ibVWgfrRgGHjDWixh5Rl4WugBGeEQOYgmtchF9WAmmoGGOAI2hYsZeONSBJ7mbxJ9g==","signatures":[{"sig":"MEQCIBAH6eONHe7X/8J8ijQaByteOltqtgGqpCItLUpgqATFAiBbwIWsmPZXsw3DqNrOu8dycGsNuVQtMODMMuVisRgMNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMl2CRA9TVsSAnZWagAA4/gP/0EW5psprXtNHtsmTWGl\n/dMyT59xioZTMBYczEJsGuYFL2ioD+fCv2a6bZTeVFR3fK5nSElKPFunaVTP\nR6yA1OTDTzRzThoefZuDZDS14tnlztfwUSOsr32RCx6xa+vzcnLDKgmK10Zz\nsDgRAJOztwDT7VjIQeuuhj5ugS4goI3nOzjTTPzunTVYXilnijlyc/sATHrp\nqVnZTuhMzOK1GlIFLqe+mDCm2QHBMs0O4llMRHytheuXF+6Kei2CEJIYgHI2\nCPFhxrr7PTQRDj3XwsX8qRmW7QroqQH7A2AoDKA5WTyBjBirjgixaWsEQPf2\nzFmJDqZrH9SNZw4hqBiC+g/w1tRyNSdx+qMh6zRVr3puhdi5n2gDzLQDD5H5\nSzZFxw/2rTzN02MB4U9kGfJdi+C4+k7tZ2C1OSz3UlLS+2+DQvnfLlwopfb5\ngRwJ86Qe0S9v0dAUKE0nDnOW9cgSRyG1lzMF6CQJm2gwpDnuv5yDovEbHra/\narJ4XVQ/w3j8zYv3jxR4OZsgCFO9lCBecJdm5g907AohzPOVwqU77M+q1Qrg\nxV/+0S3xO2EXM1EcNTA4mW63ct2hjAikBicDk2dJzmiBQHdOUp8ppw47AMXF\n9fBhZwE8pRTKt2A44H/ZjwPfCnD8jwzpoCZPt50OvV/Br1NFkxZRtcf8IyEd\nSJA2\r\n=klIR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/touch-target":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.eb28b6ecc.0_1586547061837_0.5280826366169","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/checkbox","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.816a43b42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c05069f1f58cedfc5f974f2820a8def882448777","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.816a43b42.0.tgz","fileCount":38,"integrity":"sha512-fpQ/j6LQyl6XdnmD9kWcl9yWQiqPXwjS5c82d5QWb0HTtmXaHKmUkWTAwhxmOFZoGmVaXE62FRH6z5yOIGLkwA==","signatures":[{"sig":"MEUCIQC2UHZYMlbtHBrKf4g65aRrSuyR7wOFKrIip6bJbHztpwIgFZRevRaCGpUiVOgXFFgWfOprfhpDHh8R8PUyV6NjAYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyeCRA9TVsSAnZWagAAqZUP/3tAg4EPTdJpZ/kKqLwX\n9DfPeq2QN71lj8xb0XdMd9cVJt9SDlryuLllwa/q77bgghGxcwNGNoqBVV4D\nmUwr73m6e2FMGwnlUR26QdNbxjCOqxykn7Dv96UjYrGedP17kyezyrOltdqR\nwxFRhMkBgzLVQcVPJKAqWiwK0RoOXhyjuYSgSqmjOUfBLIf0vzr7JlFBMmHe\nkYlpeMbYyC8JyoN+wIJkXGK+kbI5/IHUknlO5QoE9lF/zpUabL1KVn3Wh3rC\nrRtttVCk5cFjWejTNM/bUesn6bUy+UdEo+zsWHoG1rDCc/h418rttPdl4xnN\nx45mkiqaR+mRIXi2/dD3ckCFWV9bZ8Oqj/wGa5xmruAWYrEmr+m/mgiXsuA6\nGpxSV+UzUwGCF3sVJ5ArJyrgekvzNebrQU+BGk2iQpi0YiXQsTZX66Pu927H\n2KggV48byoMJpI7p6NOlMe1bjkALEq+tMHC6gIhpjZqHh8LMDoWxNGcXR9cZ\nlJscdxhXAX4N/v7+eh9BfsC6ctC2vfuh1imssQtdOolb06CUs2l/TJXpEkEQ\npE4DjremPtDwDhYwNL98xqec0pfOiC69qJDSLzqKahej3KHCGEug1bUX6s9H\n+5Q6+9KaC4h8+02T7Ahy9sKf2xF94EOnk9hLtxlnHQl/MuWxPedlAlJuQAqD\nUBBm\r\n=lFrB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/touch-target":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.816a43b42.0_1586551965440_0.9069907802286044","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/checkbox","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.008c4d319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7184c5e1e540e45edc7c016f79902c883db1155d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.008c4d319.0.tgz","fileCount":38,"integrity":"sha512-B71uAhStM0UVFqmbDjUCg/MUarJxHUszCoD27/bz3ppykN72k6AZDy6kAYWk/5u3eJ4XwYCTRQ7JbvkF/X0h9w==","signatures":[{"sig":"MEYCIQCbOcBt1QRa1YNjEBHpWk4yV6O837dVfGTl9veSY7oZsAIhAIahzHSpFfH52peUJoYGViN+YlxjukEhM62SFANDIzkq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJR4CRA9TVsSAnZWagAAEmMP/1vTSwx9PRWAkZzRpnKZ\nEK5XBp3RO+OzdvqlQa9gHcRFarNgVG1g5AZGqKBgF3cu+4Djjeg9R4Jes26/\npvlL1y/J3SSfsHwiWheC5ydyCKgfw3oTNlDVQQK4BSbWW8kdNrAaVbgCaXUG\n4SqDaRJIOvwz7bqbq/6KTM/8PJo7iH2lZXpuLnTF20/ySH1k2gb6H6VZaYlF\nVACUoYHyjsW2yCrXypDso3B5+xCvjlBQfw8o8MMrv8mOJMegYKGFNEjG92EO\nDfUhm28Za9uQQPBRXmKMnEFGjS0koJi5Il6fAI0RzhuHM1Lz413ySiT7SfSe\nVE+n4mCgj6o0KGVqpEL5T9onhk//Y88/PRrdWOHTahJOTFROWK96ifta7S0g\n/dGN5LBdlq2ffyHyNQlvMn+HaQmQbVVL/ne23gHlitiQq0ICM2RFMlrL/IxM\njv6SvtP2QHM1NgIHUeXnOwZZi2D/xfxMQ8mav/5qxnnLS/4XR7pk/obD5YJv\nWRpfYyru2O7M4hW+HH2TqwzJlhrYGrp0BR8Q0FyvZx/crR+MeWbEubpDNmOq\n0GMdwz/R/gc4IEk/rq4jr1+V+T/bS8tMoSDkpq60QxTQRsxXb1g4BUjIMs4L\nYVpyPS7IUpfqRUEkrVy++bleOvWRIDqOFgB28AAjQmW0By5+p8LlopYGHw/W\n1Anv\r\n=zIFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/touch-target":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.008c4d319.0_1586795640506_0.2793837186746033","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/checkbox","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ca6b91d7ed288e378cff46ebb0609e2bb57992f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":38,"integrity":"sha512-mKBAzW+3IR+yhVqE51eMhd2FjOmf3Py3MECQWMUlxhO/EV8xlE8SDdvoLYzfFGYpm7B0Zi/r9Eb5ugzwKcgK6Q==","signatures":[{"sig":"MEUCIQC+GzzKq0qvDnMo1MchFN7+0Tl4bwSAwvIAAuD+skIDUgIgdJl9jt2bHno0SyoaoHRfXlcfFUIH0xo8zAz2PYQS0ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUS6CRA9TVsSAnZWagAAejQP/1jlgAo0YaFVLntu2XbV\nRX2T9In2jn5M4DkftaUBwK575tZ779vdKQc80Efz9EMFOoW/qNft/5uqyIzl\nJk4QQsKLtbrVPnajQY5IuD9rwbSXuyynHxG59m55bIvN/MXFWDSL42tGN0YI\nac7T9TMUiFHqPVs0lbs4/FR/VXSt2OUcd0hGkZ+UZcVuHYAcyXzbmpIM5t0C\nXHnYcIWvUeADNGO3lKpKGD62UObd+6w4AC5YILdfEBYqRUt6kRqfwhjdwfdL\nEdfytFd5xolc+e6S9Z2nF8DhkQt8eNVt7/s8Dv2OO8xvJCVfG0ro62Z12qlz\nKypISCYI2QlJFJIS1uTRcUz4AcjkUhJHso298eQCE6qk4AUjRL0kvkuikAa4\n3iSoerBt7NFerF/h6KJwOCiuNeGjquYkzhc0OUK/5i4LSxV52FRvh1b7Xch3\nJd+wYSqsSSeH0aX2ueX+xHMZrOaoCPmG/AipL6ScCSZF20Rh4uA9hriFRU9R\nAT5ZiCKURnClKfpiPFM2J7BftnWEiGhjA3EFulZX8xq4QI+mCEXoTXk25DLe\nsB5CLCa/6MbAAkLKk+3i8Ros4lYIFFClBZZaQLQWwX6wNFqcqULHdTogEk3M\n+MCY7gK5refp3nzfMkV3ULmTJE6U86kpOnbiypGqoRKceDPwNG8ibXMbKSo9\nnNpP\r\n=DIY9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/touch-target":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.cbb3f28ca.0_1586840761904_0.10612901271994857","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/checkbox","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bfafb071c5c21e5da53dcab4057b5fe12d75abd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.f172b0f90.0.tgz","fileCount":38,"integrity":"sha512-qhj+EutDmtRU7bGaZqdQ7QG1zzdbLFpWm6noEpVv9ZTr5KF9vSGxpHT+uZJrA6VsCHT/l/YiKcJ2jHyux967Sw==","signatures":[{"sig":"MEQCIFQOUtmswIhqKp4uLd2gqK9/8J9EPlIxP+VNAIucVpxfAiBTBeNIaziswD7a8q6k5X2yC5QGuNsx6jJjx9oOUbT5oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLkCRA9TVsSAnZWagAAu04P/0UxY8WFZRVyLb8mr3iZ\n5EoiDfps6pXaqCJp0ThMsnnCYNqPxppOgJBSggpnVpzvove9gNQNHnuqcmsM\nECauwFsy3pS7y0oP8umtebvIsbtdAv0E75OBwGnpoTdMqKeoFdcp8a9uqSgU\n4MgbCwUlx0prsadjXKaIdYpNONFHBe1VuGKah96LcA8omvNONcVcAaRDK8zG\nPT4O1zabwTb447TQuqWE9tnA2VTo3JtMprPgu4A2seabs1n6EkFd5CpApY67\nJUsy8iWK+zeDWM0LHtJAcLuiLhMVNlf8OG76T2cjxj28OHwvvjDFOowd9biu\n3nu2E2mjZ9aiMrbPW9CAocSdFhZEljOqt8wt89IDCmwiKAj2YgnxRvpCEQeg\n302IRS+wEaQJ+/M2AUR9JOIumJGrkfYyL6NtCNN2BG9EkAx/JooiYjk3loTY\nTkrOJ3TaPkY81PsKjuObq+eAW5OgEBvtz5u5yDe8OMYsgsTXzZIkvXx0/z2G\n02dGEaQ2uiAEPx+w+e/lvEzMM8ITY3bYnYxD2m70bXYvpuSyf8dCEVeNtMmM\nYTp9z8YIm+u21lXhbdSvv8VEQMRiN8RAcTaEB/W0YmjZI3RYmMYKotOD/s+5\nM0TH9H+z/k4MtiSMqrDycG7eSSRgLC9K3RmOxBPmCbrDZYw3o/sPkHXoPIBr\nilpX\r\n=MaXa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/touch-target":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.f172b0f90.0_1586905827786_0.49621841812697753","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/checkbox","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.c02642273.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f2a91f38db5a34537560e8983000b99d6f24b1c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.c02642273.0.tgz","fileCount":38,"integrity":"sha512-UaDDGdMBSfEJiw0f7SGhta0a1Dqr2a5yvIgCC25UM+wbsEZLCjzAUV1rzvIBQPsgZkOXZvz4ueuZwpJOx0eS/g==","signatures":[{"sig":"MEYCIQCTDsGgsEOmyMTVK8waVhpGX4HnfS9QK4sXzH7rBLGjTAIhAJfkmDLh7caga4ovllwDiJLkeOK0OTE4HCiE8Ee4E6fB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOXCRA9TVsSAnZWagAADRkP/1dqA11bcNjJoYObSUst\nLd0zmzlyqrbNUb5j2snosa64XFeG8vUphLId+V+DkR4lqBmnchOo1SMbt+Wl\n6YKa73D9QX1HhleKDM0gQ+PcE1sjdx+630tdamYddO5mKhW9E/Crt6oA8Em/\nyOt4bgM1aLYTzeeInF7vlwqp0ISKxOJmK+9LnIZHO0iwCy5ucOisi5OQQ9vv\nas1rNye9gNaXNf9UKEKslo607bDO5oTqPsCIpaTNltAxPYUC626s1AtN23Br\nZfIFLFrqcvpxgF+nj3vMyWzu4acjIHRtVOUVW4rbdqMvOypDADcX7a5lyoFD\nGSXyssv3P0GUjQUAM9qrDh/D1Cc2Z6oe2YkNOrMJcu9FsvlaaVhcie2m+4Qi\nnrVTqf8t3WUVlWvT7fUyVlEQVldiptkAuxtf/VU2yiy84quIL56CRmf2i/Qq\nfRiQEveDhjSYBnjoOwqJM4Xvs//2yv4Q4HbLnFgRpxhzo5LXX/eBEYa0WUFS\nKwoGuZLIQQ7KCarA3zHo5KYCa91d9ReeYsv+jXftOmizF3xlWOaxpHkc9Vpf\neCBv+3iztn2BtPIgVXQXi5MnhUcI+SRUXa9Kcdgh9xQfYBLeBujP5QpuTtTk\nIbXYTbJyqsNeBkDszB/be7BQkntQ0Wq5xkmFgrBYCCVI3dJ0olYrgZrvLBQd\nPMoT\r\n=M7KV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/touch-target":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.c02642273.0_1586967446976_0.5425006480116887","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/checkbox","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.8a299b568.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07df0e457f9668cc2f4a01746a3acb14e926d4c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.8a299b568.0.tgz","fileCount":38,"integrity":"sha512-/QFUhgwRsdAkUZBjIB1SbrJnnoTAOx3VBAwBQLtMCAtgmFQsVUnz9kdaichgcCBenwWUsSVJvSo4wESxPw18hQ==","signatures":[{"sig":"MEQCIHF6iYy8zveHP3EGmtUo53SUMcXiiaUaLuu7Lv0tw28jAiAxBVrO/4xctTzXac/WhVKp/LWCUZEZhLwzJE7/ZQYA6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44LCRA9TVsSAnZWagAAg6AP/2pcQRq9iSZWhk8kNrrH\nzsR+sx3FvweDc4jIkF4d95EozMSHrnL+dqDELFhpvZKwS2/02qtGaN/8XniV\nxYcMSSAU6/vsbcPpb+kGVEvBm2YDwuVE20f0yR16Sq7yH24Oj3mTlZsOESbz\nEzVzTXappyage7mOkYw4A6rrCuDcvgrYqsrPBkkWfzVNgngbV4LtFsMlZdm5\nVjYhPZAv6kdueCk7k84N41Qbh0RFOdUhcHmqy3R2PHvJGHy4pYmrfI/Dac/K\nb5m8krf1/AUIRIYYU5Cq9/TAdgzV9lpJvzfgsVU3P3jXBNOIJE7aXbOO7tDQ\n/0qy7g7ZQqeuijAMtIQTbVkj3gjyZGumXttUsLR+i1JpOz3/lMTDHYZzGJrx\nt4tR/gDE3xYQcaC7v5vxXuNiWOON0fHnoJ2DnYKIQYCXjjRO5PQQFgrgtiqb\nudvj0CvBfK7vV5oa/rbRIshPBWXGrafYXvvdOil5yTaoI9jeVnmDsQc+n1uh\nYjWRoXSKDdByy0DQpq2v4bmwo1Ipl1VPt/hw/qP8rlYWTBPRjMG9oZ0lvKNf\nHahkB3vHkZ7woVsviPOcsquBCIt4cGL90pZWX8ffVUOy6gmhmTt7BTj0zGn4\n6c0LZWJI/sniLHlbUt2sLP5piWLMXZdGJiBqPisFEMuY258pmnQkGQ5gfj7O\nfVmB\r\n=7SLX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/touch-target":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.8a299b568.0_1586990602607_0.9728487202778209","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/checkbox","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a63723ebc87ee66a0fb5cc0dd5d57f85763ce32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.490fbdc09.0.tgz","fileCount":38,"integrity":"sha512-tr9g3+R7AxrL14JN99LaWKBVDzkv3g8hrWNOnub9A4doAm9bDowiY61s025FwRAAKuEc6MaMUMNVO5tSuQI56A==","signatures":[{"sig":"MEQCIAvG7Xmw3gE5aMAyhh0262XZJogBlDDZjDssQpDuhNJpAiAoh0Ouh/xJ4UuPNkxGI+nppJJWeb7JjigtIbyzXFOT1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RUCRA9TVsSAnZWagAALqwP/3PudFWYI0805kSM5fgD\n5taNm/SElB6CwPzNSu60c4BlGY5/3kezx8VlTZUTi6kx6WHvNPKLh3VbKSHf\nb3mQbg9nvo5X/Gl21g88tbaXesJZslh2hGtefhSM4+wVKYop2A1meVpCkMQW\n+dd2wYb39mQd4kDlTMQpxJUjWB1VKr2b+smK7/9gb0AOtHG2Q/nh26Me5coG\nBARqC/ukamUk8x1e5Do3RgbBY3Z56Modm27AsGkWwNV1+QLft20ZLmMxOekQ\nBR4HvL8l7QAiIMzZzawnn8p2H2+Lm0aqe84jDsXWVgh3q9coTPi9rHUTcBPX\nFvLyK4Wevm9Hhx9Vw8eiLXO/KuJ/TZ+u+XISkdUu7bp2bWdCBIwaJsB1IbGf\nNG2Kz17MVXRy4Yw/l4kJDKY9dy/ygINbJsk4SZruzKgCvFXNdD8aIPouWgO6\noAaG7xNMUy0pucmpk4ZXVqSLFaxyeQClTD7fqaWwaLyK/PNDefMfvmY8r867\n0TwO0gj1s1VjIxzRxHCCtkzk8DJl3mJ+OtYaKr3JuVUF7Gt5h+RshrUe/4pV\nHDeb7qS+4lnQI9GSUe+v6oXk2Zq2IKCsp931Zsq6LUnBGxhGV4O7KkLr7jJZ\nEMLzw0U2icV0E6p2K7cDgzROLrv94Keu9FxKnlgvLr8CdMokHkRR3jOdej3Z\nldmC\r\n=es+E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/touch-target":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.490fbdc09.0_1587016788170_0.11162102029973542","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/checkbox","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"983378129714fe46341fe3df6d0b2e35d4fc6bd7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.f838c6e55.0.tgz","fileCount":38,"integrity":"sha512-+cpwW/+TUFwZ0q1cJxwICj8Sv/OsfEEQ9AqCPSVdU59OTdGwnR4ctBXIieOkRnehvn6DJ33w+R8cD/w6EGJ71w==","signatures":[{"sig":"MEUCIEbU+N7js+aGsbHZ46QCkN+w1zNIh2KOwxyO4nCGHIp4AiEAjSr1ybCNjXzOqw0A87iKseGfT2GbP9OiHsu8ElK6aXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGslCRA9TVsSAnZWagAAsQwP/103mW4PB+p/MkvZSSz8\n5XhPAfEF3BV0HQKnvkquf0etXZEWiYrfTRfzltaQ3Bj8ywlJaHBSHc7qKZSZ\nrKRMrJh9TgmcRQrh5elU3gsDR6yvZ0r0jukAlgs8jI9UTxcKC1bEk6SLfA/N\nlPe+atWcSqAF2bgPsx74vtmF+ymSySbg0xlT42Jt4MWCQ7UZ8JsLAHMFxbCj\nBVwrsRukPQemMdNU/5lRLocGYqRkPyK0aktb25kNETMZ8H4NanpYEiHL0TuW\n/uVV1fdBaHkNOGu7LrxoZbniDJeiU9My7/00SgeMctnZ1Nt66lmRcRcE5hY6\nstZSIo4A2vaujdCkTHuXnd0EAhP+xNl5zbHY21iLwsnxQJQjZ/YRc8VNJTbf\nlPqhIA9fcPWv4o6VtHGsIbtrMu/Euf7U2EPe/pq97x65nQvGvewpc8A692cw\nj2pMVSpKMNysVMgAXCvaXz7reoHG3Qr0qpQWKioX2pyhC0GKnm5BNIGxtqOv\ndM6P6tPjzfB3v9Ucbb5TjTg3Uumt2vx6b6oqK5Hi+cklD8Ux/YgwZzcRQeui\nVCHh31GZZdPxHzXJik3jMns7Z7VIk5zjZJGrlD1hhoyOHfYLsQ43+K1S+6dj\nqYwJb5r99DRhZ0VYAmPnHDFYOPhgSCjnjhn4FSKwB/DhSPHe0wvB+srB/hZ1\nHVW9\r\n=rilR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/touch-target":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.f838c6e55.0_1587047204866_0.23438084943632997","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/checkbox","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c42ae4b413d7c0e3e4877389f72ad479a8edb26c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.ce6cb7024.0.tgz","fileCount":38,"integrity":"sha512-OcJu9j6eE0WRFJcepda/peB4KODWH4pRYiiO8WLQsdabBdslwFHjn8r8UpkRmncVLopFgNT2mk46ZCM0DiFG+A==","signatures":[{"sig":"MEUCIQDzAr4QfmCyt0Y0E+ImzLuxUkC4bW3j4qsrfGHlrYWUlgIgS6iwAYNBGVKPxTjtT55NJZ9BuaxrDwr/dN1AVMFxXYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOSCRA9TVsSAnZWagAAm7YP/jbIddTLXPEDRHvV2Dbu\nYM7FAcuj70qZtQacE8OmPcaLZ8AdSAxCaqbF4Mj8jLsoe5L45LiIX2YJN8gt\nWd7a4c8qabcSX8T+dykxmLClfcgT8Q+jBpv89Uu7+aqHOY1FmT15RfrYi/UG\nejUE++s8lNnNhBmZG8gZr8/umRpjYVMx4tU4nd644mX1a+2jm9RO0DrcmIzS\nqncxDBUVpv6wZMo76xVEOdS5d/+KlzSjYN13fADAA0AAg0vPsDTyzQgT/7jv\nEyp5+TofCrbZ3b1fXHFEKVhBwfKAZktvGqt3EasjieC5pMDh4MlSYWX+Lbww\njhyAgvkxvlAmfSISgtL5iXPIwOUxkpTsmtLgezXsuRkl7rI7bkmacvQERdVY\nIyMKTNP1tm23SIn2uG7X8rJEovRmrGHW6mkllEaYcQvdNq8ERqxb7Q5WWl06\n9+whe0R/6Pn7njNv4rWCRrWFZsUzupijs5aVqXrXOcTpCdj8opZH1j6+qlHZ\nBKxsCkDFQHjgmX9USKZS0O69y/sW6G9StNooaTnlwAojqZI2nMndL/XwHmkP\nSMn87RTLmSXTOYpL6kcUzPjuKmz13IkcCJkwV9eQGdLz6dKjDf+p/ly+hGsC\n96FmOj/M1o5z6h4adKGJLL9Q+fffcWx7kLKRZSlRodko1dHJzI3M/9sq2+ZQ\nMWm9\r\n=9Wc7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/touch-target":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.ce6cb7024.0_1587057553508_0.8660851162332761","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/checkbox","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b4e5dc43fbe8fa402106b380a91d4fc0bd85dab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.0ab62a65b.0.tgz","fileCount":38,"integrity":"sha512-144eUTnhBI/ZMhqC/MF0b93MVHQD1csXQDgV7j90/qP8jpBeEL1NKXYmd1fzgdltNEMf99sgSan3E8HR+gawqw==","signatures":[{"sig":"MEUCIQC50i8/kuhv5Zw9LtYG4Y9qa4ab7CpmTGD8YzrqLVb2WQIgLA5FNbdPfkSP44nxcAME7pZJsDVmbvDTTCU7tfQ6/+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnmCRA9TVsSAnZWagAAJ5sP/RlJTIo0tQDUGrqjTHuj\nCcxZysekfczgCvg0+X1PWUeCzSQyWWFD7hqHIPgvMTigdAlY549846YQiiUf\nzvluGHoMsQQ2shfnXyxmEWphxAc61OrcC2QC426amFVV7azZe+paHsUy4xv/\nvb6tcGHOICHy30IDtQAOecFn0kPVkiRyA2C5txSv/5Zaau8KIr4sjLFROc+B\nemAka7RRt6WOxT1RAXznZ6xHt7J5IaQ4H5odeCQuXolxWL9YEsSpvaCiwhiQ\n3dtK4BVjn/K05G9X1f4GPWiSP/umBGyRuzdjU/JQm9WIVp9L3lBzPhceSkBP\nd/s+BcFCTpwiVlJJTgjO71OjVR5SQ/wWw23OVvhWWl4/NHFoXv3usRHZuv4b\nzrf11deitTBDvcWyDxQO6HqAAYTdBNyXlwdIPDj9FB22Hn5Wy1wPsN73A577\nc2qL2TkKeeWFoe+TUNiba+jlQ0GmI6AmhsbnsS59UUmgo4LDydlvO/kR6WXc\nS3Jh5Aa8FxtO4HuULtt/2E9CiGMg6vLMZXstnO2k4cwE/fbodcw8yH7LA9OT\n/cHqce13zL4ZL158Ix0zZKMBzDLGaby6GXkAAvKOD53mYKFhCK/ELuopv/pD\nmfSOr5rTR1pck2Shz5Qv8Ilbq5jfNDmO+JqjJAcol4NWN4TG0oV7AhAH3TvG\nZII3\r\n=dUE3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/touch-target":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.0ab62a65b.0_1587063269754_0.013399355189849027","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/checkbox","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95a8c3898d9bd92e36e919bda600518b9d452383","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.ca61b656f.0.tgz","fileCount":38,"integrity":"sha512-gSA2hvoX1OhpDaq43K+CNcc4djdpTG6k/nZQ1sx8pY6E0Vn1b+GIdDiL1U+BwzrwhvjFfKfnhSfPWd6MZ4Rh8A==","signatures":[{"sig":"MEUCIAnxEeqevKOjCeM+PDKApdsDdfZxm6nsbftlfmVYbLhuAiEA2QDATOEHvymB059p9/dSEx6G6CoVFG8ydiPY/DU5jLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlDCRA9TVsSAnZWagAAxIUQAJF6BdlJc/CdSbAhN4oX\n7e2q81ahTCJKoBMVPAYLlW2I/jK4haoNnPdUp1Q5p9uOwzsreIjFjCxwNjmJ\ncr8fym2b3V6c4YE328Bom46PNeAtnWMU2Zpwdp3Jru76nUxYbQ5LJ1kROJ/A\nfFdUEIG/DrPaTb9qvkSUnOGYkzyEK9Zn8DZMtZqZNZXz1rVrsTrfJ5/XpeKg\nY12hSmygfwPI7BdZFn6oLSioVzKAarXohqGPtC1ZNUNlTF7omkel+cQnUoHw\nhFjyc/Sqxi6MVksuVaprDgj3PeUeGPibirWply9fPGJaBE/M2PyXNLtGH6F9\nmsb2x8cctb8oxiKZXgah7cuS1g4LwpT8vG6zV0yLuEmBoy2M4tcWjt04wGcD\n2pG1Tl3NOgjQJQh5xK2VYEFXEmbMqfu7UCvgwvonc6wJHTJu/aLMqbuBUXaX\nPAe0haxk12xOIom3zS9Ky2+IrRJT6Ry1kW/T82LJh6YexP9eq5pqJ1r9o3PJ\nGjGXfthK6I8RkQtnOPNRiyfJQjeJGc8EYplNa6q1+3aBtVmVFt+4xg9ouGQn\nuaQ+PczRayT3ztrLuuUUEmOdYzp7jAS58Cbl1WxxOWLy3NBuTLrV2kmHdMaL\nUHvu4gWuWBDUHdtOej03rkH9xf2UpE2uC8DuBUkF3zERkZdCjZBUccQfy/DC\n5nn9\r\n=Dknz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/touch-target":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.ca61b656f.0_1587067203286_0.9380080385744995","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/checkbox","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feab5e750fa284890de4b88dd2da1d057fe906b1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.45a6615e3.0.tgz","fileCount":38,"integrity":"sha512-yM8KmpqCn41M4zMgDBr4zcKERNhOJLK5/I5u6tZxk3p16D3mnK2hf30ByeQgsFiHu3sEJ3WGC0l0mJvIVxRLPA==","signatures":[{"sig":"MEQCIEidI4fg4RS4w1Zaa+pvZ9VcJYtUiwAkVWGP6VKDV8pqAiBft926eXMHIOl1cZetOrE8NbNn3Xxhuy5qPuHkwVJJ3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMD7CRA9TVsSAnZWagAAYCgP/0VcmxycPagPZGt+Qene\nudDXYvOTA5dPm0XEPA7FVRYqm6yNU5fFyA5KY93GJUBuMwmvWUoRSz7pXIbO\nQ0LwOGZByXDVBuxu3j7luoL4AavjI3Venh40ekiBpNfPIzRvG9hhHkPh3gGf\nzxGvKK887KlxoKPpvU9BM0+/qzIN1/1MLPBeHCAldRuVdyJSYFo26AAdavqY\n/LAH4ErBBJRGxJ3zVcawVEBosro2sKk7rzGCi9hEOQP/sfzd9v1gSvwcrcfj\nnfUUf2AaJVJ/4K6BSYaKdCsOY+hsE4Fdb3Gp56LEOyrdpP+qGVJDcGz4WUfh\nQ34DZRTJK55rbrcFzofTqgwN6hqP9hTphx+QOmCOPffmom9mdW9Te9TuuIod\nXuoo21lpz1niFRfrV2vx5H8scpceB7Q0UW8rwm0iNQbMUQC2vo5Knsoa580i\nP0ECkE2p0KY7gBY6iH5Wb7xQuNoOKBG9OKGtq7Ua+MIpl2DfRIyw5G9Te5bI\neFAu3QTn6QUEO9TwDIjYegI26MpVf88lFyK1/slX/I3EnqRcXg1ArtaASg+M\nJ0uZv9MY2kcvg8So0/pEFZFjQERsnFE86v+X/37XX+hF2Sqn+GBJ2+8AKPOk\npVHMSKLIjB0Id3CqrvU/LzfggbdC0ZRgfxTVfvo3HU6wIxdTV6n5weMTSY7f\npW8T\r\n=UswH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/touch-target":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.45a6615e3.0_1587069179184_0.930656677342889","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/checkbox","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e48843ef7ede0266c1923083dab2f3ad507588","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":38,"integrity":"sha512-Wzdl6JBqQMfTTrtf73g3IOuXzvWEOo9TIN4TNgmRaD8AgXWITg+bOfO6xIu4XKqLLIM3FhNrk2umH4z21E9EjQ==","signatures":[{"sig":"MEYCIQCovTnUUvUQ6BocjqB2gxeyQWty6x33iJ4iCQnKC4TTswIhAKL+Mrit6tSmu7Lcj2sNIoMYXOaYHedVBwfCp3QWmVzm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":543312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeo1CRA9TVsSAnZWagAAcJIP/jZUZPyQLtGbfqHiLpei\nlXNDnYB8QmZA/uV3HDEA7brCKguM9xlslsCs0vm1qOv+smdCi3218mjPEnUD\nkA0z87MK0rTtZytcTX6/k6YnJnQu5Ch4a8smy3lTWQqKndjkKSDDZBIPbFLJ\n8ewIPHLtLYyBalGyqkjiUTOa8gmG4AmjTwWIehyF1hjfDwWzk0RPj6qEwKM9\n2bEadvjweaadqUhTugauT5m2S3kTd6P5u75DFgwfcWHXIALH1vYSdCJ0T/Of\neDYCeJ2yPcvTc0HiVptDBdgc05Qu0jjTSL9ssq0WPbqjtbFMpVqNaCg+Clu2\nTI/4h6LHqjMyf46ZQS98u1Qh6k37KLpJm7KMCjIzBNVr1ZuVV4jYXGo4pMFh\nRS3w4tpJERshiByNWUhZqYkvNLuL0h8xygknUCMbTMSpiyd77gPdzJ7EbVpR\nQ6J6qybTjDN00ZbuPxXfceE5UDanh85kz0fb2qZ4qCCZF5O2Gc11PEkL3iRw\nbKj7OvkvcZKSeotIgZ37dMpZQ6qSznPZqkdu42VlOrIMvaAB5aGiQeWcS/jU\nOweEtHlyYUZtUkP5/1QCOdXKKU4qzzSiVRN/2hm0CxxUrg5jrB2kDbWEGy9e\nKU1IigbpvrliBFi6iIykp+fBw1InDvr/nDDn0vOH6fWZaJaOy998kEoZCt31\nAuox\r\n=pSOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/touch-target":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.4b04cdb0f.0_1587145269161_0.3382850401586597","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/checkbox","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.b273afa93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a108b731afa698401fafa64ad644f83c8dba444e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.b273afa93.0.tgz","fileCount":38,"integrity":"sha512-8T5JXAg+pegtUMeIPGAnDemQARRvfig7IuYF0/X7/Td6P9lytoRpH743xaxENNwDaiwRu5eL/euSx5HeFP/t2A==","signatures":[{"sig":"MEUCIQDb61L0iFcGNHPlFkQjh/m5ShTESw4fyNARxUCld784rAIgMgesWC3ZNOwAMorjJKSWEDYIs0RfH8sGRpfV5KpZc0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWkCRA9TVsSAnZWagAAkcgQAIKcsjDlH7Y0YF75aFui\njEFGGGVsGkn9G9LXd9I4carfpaxD5XMcREwsL0xtI7rGJb3lNPONPnk1cRE+\nTjh6iLaW8RewZBzXYwNbySmPlxOs1mfsFgC7qXifHS0YTQIpp5EGH/W1epNs\n8U/ICbQmVRkVi9CapV19uUWTZDIKXJZ8o/8mCTJ8OudLy9hz7W8JgwlJ0dX1\nyuYwIaPKEN6vyR7sRZABHB9QBsJTcFuMUrzoYydXkG4xLL4l5qZbG/o0fKz3\nHqJI8zJp6DCuoj4QPu4bTevSoZzdRodesq1oaVI4sEtiMFy/d3I4dmQdoBKj\nKf5lpRFaofUbU6mon0fU5xcfAZMDGshOadeQrq45ZDta+pCvimmVihrU2L+B\nw/1auEYys4SZjVgFYaaDf6EwAe6q+ycOaTwsTGRc4Fu6xvk4J8J2dOOJNvl0\n4Nw/10KBHXRLJLRAWT1NGexQ7wUA1TUmbpuNIYD9kYnBqhV4ipNqyXWX8TiF\nQtKeAHTBIWg3nLQOCeHjnZjjnzFrXAs215KNZHdc/lKNcXIhv82jAE30TdKR\nLFXnqwUg+9D/PZO6XTOlto92Wx2xKYtLWZtFxlVx+1XGh+kegVezebO0DZKX\n7RTzyswb/Qhp3VB0tWNeJBEi8nq6m660siAK2rGTlUhiANHgq8kgGq4/sWpq\nuPRg\r\n=8By7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/touch-target":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.b273afa93.0_1587164580317_0.5213757811187485","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/checkbox","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06c5cfa2e7194e5e9d4ee5a1e28209e5e05a070a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.b70bc601e.0.tgz","fileCount":38,"integrity":"sha512-5H5yKNbP0jQxASNxGZx5OaZvVbXOzGOs7yL4JWZtdov5x4y2Cl+ucC//9w6fs0OCo8mbde2WDGbB+Wfp5yjuYQ==","signatures":[{"sig":"MEQCIGTLQRw+Cw80lP6m7jrV5fuXayGUL6YFsscs5CwRQduQAiAM89/3+KyM7p7JYs29rr6jmuluibUX+T3t449qqCTtJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjn/CRA9TVsSAnZWagAAIeUP+wYdvCzen6ojQKz3YdIb\nMBBk25D9Jne5veR9kpBB98sCBvrf5RL6lS1cMdmK4L45IrCwcyjwy8OGsLsL\nRKcNFSkM7FI57e822+IHoK6U6wkFuh559bTpStIPMVMrSYL9ephxquAIJCs7\nKz8iHVR70nOXgEJ43O3fKB/eJkzKuXmSH2P8o4b9W22WuYqT/IdtuWvbc1iv\nMsDsRgAPNTcmZhIx+tLpWRTF3+nOTgWDMQ8b+Z6s3RvKaI0FLDefJiQcVgJt\nztqVGh1GoPD/iYn9j6XQ0zsCoLZMNtXUeMVcG9oaPBoohT2e5X87LY7US+vR\nHmahJQVJlF+MHZgbc/cwb53aqE/XJu/TegxIYwrIwifXBfBtEumqdxAob4Lz\nRYlFFViw1MLmDSY/K2NG33aopQBYouER/HOYEFr5RHj/i0vajemR25bzz6rQ\nPqwhM7rHwuS3sRHBTPIKXcP2buR1tNqgrx1bAIVLBA214WGTc9ogl3wQGsQG\ncsmBUGi1EvXsF5gK2Av1z6LxCk45eATZUoAhF5+qBBeSdqUbJ+NmxQGI8KbV\n8PqO635I3BvTjtqX5XT4gSiZYsFwBL0YqqK8QekVsV6N99rWME+f2WvMwMBn\n42zCs9vNFxhIrhtnvTvoEOtrVioK08XiULnSjGMRzn3LmGRVLt5mVgRSxVyH\ninTj\r\n=jp5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/touch-target":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.b70bc601e.0_1587165695068_0.3135198430660613","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/checkbox","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"879c8f014a92a598cf7afaa09d64d170781102b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.c4b4bba96.0.tgz","fileCount":38,"integrity":"sha512-fmeueWTjKKzMQ+Ynae0E8ekTwAzyiJd+O44wa1GYSDioc8HCwSJlA8/xCvqMLaATcq8C5k1bqlA6fKAZn69csw==","signatures":[{"sig":"MEYCIQD4oahp3txjzwGpFO1oykoBZYnvaVELaUMLI2/Uxjb0gQIhAIERmoXYfLgICq+tnXgwFz2MoIdfUS8go+6QR7jW1TWS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkc6CRA9TVsSAnZWagAAPTgP/iLoQ1h/vA/pYdP3Vo4L\nrcgOt+a3CudQNBYwV51ydC6tHgZRaK5KC6Li4bvmuZXVIXF4DajcGxRVBcOp\ngYOAsHJwH+EeL/Q4GFMK9URjUHRAvh2L9RIk1HR3JKlMnMlTFWaifk5UzntI\niaLkTHLz4qaVA0cvQpDUd2UoopWhsxaKUZrGpq6HrVnk0YtMRHvKWkFKnQoL\nucrPpFngvKBzjzU3SId7OsDnaR8O/dDc19VM9MLip9+x5v4f86jfprTjMvTW\nB7D5WErj5f8E+8XepNKpEjCKjIQbCtw4GH2G5AjfZj/bq98cvsmL/QkyA7gK\nbWccHaBbHwrbT4Ch4iB5Fc3ottXR1lP0J1Wwr5RMEBXGXYLK78YOLpzLqoEa\nH2vxIiT9pmdXquHRSXh7P6NX34S4OGNacn1JLWjoJ1IIZf6QOdLUceb3o/Wu\n+DauxX4KWtXBnP6iT7kF6PZYzPFzCoEvnEh2BkIP+DXXggERcwWHgtrrwccL\nfGU0OLoIQHdimMtazR5OHPQKis9G2umYejc7TnXGjbXOuRKWeXiNPDQ9D8c2\nHVcF6MQHDJm4khi0saI4hy04IkEoKdmlK6yFNw2Trt8+VhSkDMZZfQv1Nfa0\nnHHpL2/YM1gDKH1XsSa6PL78GXvEiwerY5/xGWbq9shlRehOipQG+D8rzJSG\novg0\r\n=ovVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/touch-target":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.c4b4bba96.0_1587169082226_0.08055790355241776","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/checkbox","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b05aa864bf04795017ffddb04e6def20a16ac94","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.6c1ebc721.0.tgz","fileCount":38,"integrity":"sha512-mK2oJUWfB/f2wo2G2Jc6r7uvggDD1U9YVjokFaiQmJ1L1raSzG4k4kd9VGCBakFIicBpjhdH0kRUYj7w6g0sUQ==","signatures":[{"sig":"MEUCIG3YQErknA6OGjbCe+E5i0ZqlUvOUn9wGJ2q/SP1m9u5AiEApT4SqQG+oXIMKZ2k4C1J5Oymk9Y2uIIXLE4fr9SoZXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7hCRA9TVsSAnZWagAANPoP/08rVlR2Za+r6Eg4DFtO\nLiWEzm1SlkSd1cMEfHTrk4Dyy/YqSjUyQC5WZRvMbkY63h2qKiPLUwSYs/Qm\nz++i0AEibE36rMpDMk7rpnEVhj9w37AwtlGAQKwhYaYOa3tgEgcWccRMH58U\nW8MFUouYBwPNa5B2nMroJrAZO7reDvywYT4HeLF45qSDDEnhyFDWT1M6qytn\nI7uZNnN5FJONcCv6DA4ftGZnHjt65aFGCpavWlx/VHPiNM6exvHRycNDsBgV\nZO9ENboRek6VsVDniYTI0P+Dqq4wkKWI2wjhW3sswYWCXj3oa4n6zMq7knKP\nUBIppHPL6Er1zantwVQPDuwyFuQfKGTxGlkpxF1p/vQnIk9FtGqD4wJamaTd\nw0ltnzCaFZmEbnAAuMcXBmVAYgE1riI78dobn/D1R5HZKrD293kL8ztFFIye\n2UquqfbcuZuZ2tUKUnNVw8hKgYvRzUzqBT1mpzvdxb7Q/eUYKYeo46x6mcC7\nMabtBZFP2Ta0OZm5e+qJrR75mkPNRkBhZamv7Nkb/cHjhlTq7/rfQ8n/4yZq\nt8VtoPLKEG+hkXa85N2gl+BSHd9ic0c8/qwJ7QODBwxHLJZlawr3FED4nTo7\nNWsPzBRewdSa6WsnNEoLEtETvJmqxAbq2CzEQVquUF7Z3ctFo3+HUSZzJDUi\nmWDM\r\n=ahJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/touch-target":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.6c1ebc721.0_1587412705308_0.5262331383961194","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/checkbox","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3688c9dcccc7c97c1fe29ead011c932704fb53db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.9cff4318f.0.tgz","fileCount":38,"integrity":"sha512-tXarWrWKSjyVejv9D1UIx93Rreh701jhaehmykRd29/pEefFawE0WHgkF3iB2W+KlF5g+0aCbw97JVeIpI/eDA==","signatures":[{"sig":"MEUCIEyvj554yNzNDjfrNtlieLnLY/+WjIxR31qVt0ahwoM3AiEA2Q6tq5GurBqXB50ql+dnZ04ad0LgH1ENezMhCP3cU/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxeCRA9TVsSAnZWagAAJ8kQAIwW37hhLkIWcZ2yNvqP\nBxLUvt4rCFWjdAIhi4yBMozEp79I3HwZ2zeo9UD1bu2EQbYAHZfIOBgjduhR\nKL+hQ/oQUGtrdSdW7CZyC0Sltav/iRi7NyqoyDBqRJrJ0C7H8usxYzLN3AJM\nddQDwwfM3Pl6YqYuCUeSzGlA04rrMF1sLzQ4FEIjHuuMChS2VtomaqBvACMH\nmjA5xD7HdBU/K7IsxtacK1ogjBrBFfmPHKz+rnPP7SzSSrG7TGK/oh4xQVn5\nRc/yTWKuFIxALOIIQudaYVgafAbkmpcSpi0yF8+Ze8Jq+KEeu0M1+5ihu+K2\npYHSjTdNDRr7sr5I/iLNGpnQxfDW4sosX8CpI7Ml5mc2SuKOolVFE3bRji0I\nsqaY6wbtiRJaWsdZGFfVpSk6gRIwE7CN97RrrUUT0+13qMHpo8JhSQNEfTd9\nuAo6jcY4YirAfxY6GqtqjTCivnqftQ1oCTzAN5NEc6nJldfe1qFJYRQEcPLj\nkvyHcNUh1aeGhmGhatGqQxMwItiwfF0eCQ3NiDFiS6GLvCci/cB3ndKtOVVB\na1Rc90U6imsSdcRlumZ9TZA2RrRiQ57IabywBn3crrRsHGqPGtrbpB7CNhPn\nQkU/Dk73GOQ2Opu7bS2nAnTPGOfD/pZKRSV2BCTa64ijOyZ+FomJEHTINzy+\nbzGR\r\n=Md9q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/touch-target":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.9cff4318f.0_1587416158350_0.22825621635272664","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/checkbox","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.7b4482402.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58cb7376f1c39774920d4787a4635e1e19d6c368","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.7b4482402.0.tgz","fileCount":38,"integrity":"sha512-FjfGFc4dUDZE2fsmoP3g6ytMrZgqYx30Hk36Ziz9WpFeiNs1NFHDznlfZNUW14FTWzAbbambh6kG1qeG4yeDkA==","signatures":[{"sig":"MEUCICbYdaFou6J7UGQ7+A9JZn2aXMpaAikYcro6zBkroQzUAiEA7A9YYrAQNlXbb1GannOI0W/JiPpPA5oo1DTIJR5PIhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAlCRA9TVsSAnZWagAALL0P/Rtt0q7Xz98KC6+s59oC\n5LlP8qOzhp7JxV59iIL4LTk0Y8O8upbcrMbQWsH/aznEp4Jz2yV5kYXTZYFV\nFnwU9iagiF2y0WK7Tv0NzhiXgDPOrvAqilCmF8xqs2jKmt+lFpw5wtbDFbRn\nVMKFJFSq+aKqya8/3JOwLO2rc0igJXrevAiWzf2LSOg4GY1Kmc/5JCfaA3M0\nf5meXnHiHqi0UCNclaWs5R+SCJw1gzNJrOM+mUqN+T+W88NO6oe3qpOAyw+L\nxq8fIiaOeFtwrz7UQVJJuqvbz9zAReRA4V+sUCnDhhdXpX6hZEyUm82ARNgH\nigWmKUFr1Zq1gl9pvKOC6D566izmoT7CHLXsz3S1Qqe9m/DUVxXQ5K4j6MWY\n8Jb1RMA6sQ+5LUT38DgXeOw/mpXqCea8dIzTG9Rjren51WzgMhNJhJmho4HP\neHF0dGjG5FddLbfrQQjJlF5hIzjWJkvqQNv3hCML+2MyUofmYbp0+rS+2qX3\npc7qLlAyBUJNrtYFW6T22guRuQV5YA0gAc6ZCHmpPmXDvSfKe0gLFgvNODk3\nHvODah6GJTB9uhU1tL4xbl7XGW2QJSBVJBDQkXZR0/I7dmYe25TMfVeWcUp9\ngrg2lNXg8Zsqj1OEBBtQcwQhbTl39x4XTyG3bPkfCE2G2IfAJtrWid6RfdeB\np3WU\r\n=8AwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/touch-target":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.7b4482402.0_1587421220616_0.955380081584172","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/checkbox","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eed7f328293f1a0ef4d2c738fe56a7b7f697996e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.deda86d8c.0.tgz","fileCount":38,"integrity":"sha512-6yhy0LWu4jKDSewMj9y3D2hAC5kD/m9iDUx/bcAyYLscPQV33RfzS/40pWv+PylxvyxfI88FvCNb5MV2C3Oyiw==","signatures":[{"sig":"MEYCIQCKoK3hZs87NgenU25Ct0tT4UMB9m5uT0NPl6TUeeq5pQIhAKkglUqYUazBH7Ms6HdPTjr+vmgoPz69v02DUoP4gBP+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkSCRA9TVsSAnZWagAAQpsP/izqOYNezb+InLkKe3ER\nHZeenm2ul1ZXRh8gWiZU83qaXcoHFPLfYk4RGV6Eps6mml3vjtJPu+eVkqqX\nemZSnVyj1Rm48AAzAULfUGDmW8sPepI/vmTZukAfopZgBR10gCDEVb4LkEOU\nGeP3RlEP3+VfsC0rS7esGVhxE75c/THc1NN5CAh9RxIU/OOHhRAphjwjRd92\nY5gVn0DVEdilojsDK7ajaFBrVyfsj/xSyE+VvrbR4fCdSOIxjYpGyr4FQh1x\n4dsJNWqMNM9LkEvhY6A+x/5jNziT0oQYZgzBRLi/tGH4IH8kf2VDxhZVs1jD\nH07RfaHPVQsdZ5OyquGNfJJvvFAj6RW3JKvFLszcyQ7SLV4p44oNyyWze2XY\n6jt6gad3vl44rXjvNNMZYMoSY9nKHQ0yjJ6DIDarzLm9ntzXf6SztbePuIP0\n+B/iboLd7cRHeM4NgrsIqhwjKcBC3ztjP0DHSfa5n7yoOcWR7o6mWgipa0Zy\n/b9Fhkz1CTXpyRdYPhNoQQXuhoO5A8a4YcOTw5CBEGmkVXx3GrFvZZxtaxX6\ntCJR59aeeDEXDMN72eF4BwL/NlbRaZOjznI3jNZUICAUJdZ8d9am8mDKupUT\nzSD5++ypXIlVgjfQ2sa3hIRiB1vs5c2Yz98Pd38BFhdXCUQGm/AYlPe7DAQb\nmvNj\r\n=KWWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/touch-target":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.deda86d8c.0_1587431697856_0.5204631567184566","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/checkbox","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d750712e71e3a021c7a571122de04eba7bb5cfbb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.d10412cb2.0.tgz","fileCount":38,"integrity":"sha512-K1EUvqW+BNHJwm6SDBHZIzcWrzAmQJBd2PXMQNe5NHMqr7rUWfzvGd7MjS9l11YU6hJ8jtbLc+OuA/vh4ZGE8Q==","signatures":[{"sig":"MEUCICwfjys914dV6oKRAP9HRz9xYWz14cXashFqd/4+nWMcAiEAuhGyZLpM3lm2Uhjg7y2HEfRDSQw9cou1BHrbrc1YI+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzj4CRA9TVsSAnZWagAAiMYP/AmEmDR23gGV07ot4KPA\n/ZmtUKCmBPPt7DS3o7XBpS6U6N9A5HZkAqVwaXdbpUo+vFosJrX3Yxz8ufWJ\nKiqo4oHEFUHkzDI3eWMhOi+6OeUb5bX1ruzThueMqgLO+dU+oonEUaB29vQK\nvEoMtSFGwmSZEEjmMQs4itZHxsYeeYPtQDI2GrINknEB1cdm11PSJl18V09l\nlA0drIm/VWWrmsieTyRcwtnlgpOeL0iK6wqlO68G+YvmLBMHL8AL3w5n/EB9\nsJzjd5eAkxR3qoPqc2i9rAVQGPAdrPRnPlsVcdAiUArSaMK5JijsuClyqEIo\nQBDIzMbHW3uBluKXTAeYmEMVfDlikH3AqDjq/6Eju94nv5RyPDMhXAEt2BjX\nG88fmtyj/7nOSUcBYWF9DF+YwPIoHfgO+DV7tRE2LCnWZQ36Y5bmGYNTPDUF\nulzQ1gS4upCh1X0lSxGw0iYixf1VOMBoFG+ppD+cP9zy0tAoWLjEvu2x0DxV\nIpiPN9XbfXLJR9tUlzyjaeb9EtDctS9jmAb9fImrVgBoq9obcdKUFiFlRCXf\nWn8hbCjWnXFEgtvt2A3NSqO8iAlb5Qt5GA/IMacnevBqcDHs1kAS9F4b1xec\n5uFPCOifjl0IeCUWLgTsmqs2DjcK97aHjKmusIfRcqbJtRlbm9oS49tuHDpt\nwwgJ\r\n=paho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/touch-target":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.d10412cb2.0_1587493111943_0.8601563947370927","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/checkbox","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.c141801d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1a2ee7f543fd90bbd6497ce0cc99486cb03dbf1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.c141801d5.0.tgz","fileCount":38,"integrity":"sha512-WFxg/5BsdUQSO5CXnSQWQ50KYPrR+OwTVzE7W1kvSDiAIuLcbn13XjE3XQRxbNi+tz8TkvrZQdEdhbgqKV2QwQ==","signatures":[{"sig":"MEUCICWEmIFNowdoh3U39qBKO0guoH0o0Xo137JNy73A3TczAiEA1wFExA/BU2tiM4mV5kwuo0tmfd+ZHhEJW679mkNEg4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yLCRA9TVsSAnZWagAA2noP/AwAOlySbEe/eSJBbTZB\ngMA9FPQTQ5I4sfja/Pl5EhfB9YBWKTW+o49gUHY/Pch2kszPN97SA82zo9Xg\nv7pWDJ0B0Eozxw8O19AJ3hUVUS87+QNtgT2jja61t4Ibq98aNODHFAVmNu0k\no+0UlJvDr35Koh44H6ubBlTp2p5+wBLzCX43hb8+2ArCG1GKnQMP2KwCJ3Hw\nFPBDWwvODjv12svdrHkz7mVm59lMv2hSRKorJ5MuZoIT0i9KxSce8CRy3yoQ\nmrIsevTCt2XBQKQTC0DBDASPNLAXef+AvlAMrttccv/5xpsIS2Ow1aq+0KWA\nib7/WGB4i/M/L9ggIcxfnz46hsfP1i45J07L/dJl+po7NaI9sbd4QVUwUj+i\n3GHn1LqM184O3+7Prk2FmtklVAgIPCcYd8IuxennxVCk4JNCVZpRzb3cOkPA\nrPp8thbqZ6vxrRsAaajkEcr1gpPxNvZ32C62OLQ0kiJvfG4ceXj3CXJI0zs4\nlSDRHavYwSDLQ/ilR2WN4rBG8VvHMokiOQjehEZadNZl5YSJ5oC89nk9i2pi\nbHDvTfwrdhOLHscq/RUwAwOy4xVYIGvmphmNRt6UAzw/bSv/ar5Q4deQBETo\n/Ick4OguVTCRQ49GC/i0cHrBZg+6s9uMuLq/19VCMrWGCptvAdqbXY9T4z8y\n/z3x\r\n=hodw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/touch-target":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.c141801d5.0_1587498122695_0.7491002254476042","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/checkbox","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02ca6ff7c73001dc531479f7eb3be5d8436341d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0-canary.28d10a96e.0.tgz","fileCount":38,"integrity":"sha512-Kg4WpPMqwEG3iwvM9+6oR6kOTLLymsDFFB/qStr9C50nmagXt04+ydDNoCllALulpcnlfusnEtOsIfeloV/E4w==","signatures":[{"sig":"MEYCIQDJR28twJQoyEDi+2cG0stcsWZIFQUx2yRhyZX78idrTQIhALszFHgTWQEYcts7gHhCpOcE/jWVZPfeVaCMXW/xbQtb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAWCRA9TVsSAnZWagAAOGoP/Ag2BQAKuiQJ58EVDA3n\nsFZjUEVWhkGMO1BOw3dE/8FUlvTDNn6vGq1br2rvPLEO9hzefrOWF8Q72tvo\nyafKV/vW5up1f4jC2cJyiCaEd9JE+WXmOOz5T5Hnm7DhWSLxsEn1mel+nYYb\nKHmE8Hkotkz+WYVUuPkSh9ljz7Y1/7O3/8ztbk3qAjEls1kBOC+Qiv3USX+K\ng5tsSao1YYAP7GwgVgm/XpL+thx4FO9bhqJs4tO+Z3StVcLjJ4CiB0j9LDAm\nQD207fq2VB5b7mAR5S+/5SnvyRFziNmPx+fqK062quO1c0std/9LJRyUE1H8\nKyngR1B1kSqyebIzZAfdjA6E+nsPXU78LuF7CR4X47Q19LTGZbuUfgsAslHr\nzA3VMn5eczC50tXcurvNaAZ7fyTNekDyCGXI30XDHLS4tIJ/uLgOZcfyN/sF\n5D+4M4yU2ZZbJ9t0ULlRJTEGw+MplnK51h+X21BMvRJyOrvkjWarCvmH2UWQ\n4MijXNI6hTf0ppiJ//D3Ib4ahO+i4YusaKbDTULxz+e0khIfc+oooUYLVL+J\n6/whI8amRO9PtMHAFA5AjUvdIs3yosYC9IG7EM1fF3sVQ1zC8CggmO+Gie5S\nt19TdN2AmRtRwmDrWk3XRmYKq06RlvlGQq9OV+RAf9RCI/ofyh01A/LPminj\nrMNM\r\n=QwWO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/touch-target":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0-canary.28d10a96e.0_1587593235812_0.7436879146470581","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/checkbox","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8540808be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e9a63b491a3b5f98cedef389c9c2db1ec71e954","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8540808be.0.tgz","fileCount":38,"integrity":"sha512-wqsGVVBgktXjfmkuZyutqmzjJgaYGtzQRHOWY+lk2tAmwZ9C1EbIHfeEYsavh7fxhK4Bk3jYHCEOoG+vm8Q07A==","signatures":[{"sig":"MEUCID0hrY72RJk7esobPIjA8Ihe4n0Q0HDWIx+pJegrIjJjAiEAxKGOVPswNHPZYn1L0LO9tDIR8TOieDYTyjRvx2VN6e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+tCRA9TVsSAnZWagAAPewQAIi/e2c8IQmyAtqNmBO5\nPLGa6CyR/1UDLPqwFY/jUlOf9eV/eCrWUi+FGdEJhwJqSiVLzDWgFR2RfQHs\nk6iGqT3VUPH+N7iwJd6oMcoxrpZT82A2CtPxhEk8lg+vWLuvW/A3Cr4uumIc\n+34OUp1L3Ktj094KU0vLra9J0USSIeOyi15bMzK6jjJM7jwydvh1QbXYn+FS\n/nAyuKbijdE0NanLwwcgE7BwyXfKx7B1YrIX/zQfI+a5H7ZeEOFu2nVnfsBC\naD9t19K1UrsjLx9QW4GQBcz5eoT7DDEHKiRulOcA7txBQgq9oWsaH7z3vKCg\nn+TE7wpUafKcHpmtrNYi3DXm/j2cnCnoTW6zrdQhmkOGb4WsQms0qRMw1/y3\nJXkU7ez/f6Z8kfaFHcLTU9sev3fgGofraQzKT+pQbCWqmgqo4/KXoJAyTwNP\nBnHWPwsi4Yu9v5lGRF14d34mEY2iFdhPaYdshxo63BNKphmQbM+ZtNzr6DI8\nAD6S/d/ncmCfr0O9OwgdxTqPk+CTTLFlcbU96Cy61Jt0I5/6nJzT+IPzxz2k\nDfkADAUqD1hosgC64L8q6XuXqFoHgOmUXxOte/i3V4j4RHC3KTW09PGCSfS1\nokfqsJdWso+oyJi+uf8W0ik4c52CDAT10cDsIdWQgoyOKP9JWENfXMTTYG6s\n7rVf\r\n=Xf33\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/touch-target":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8540808be.0_1587662764618_0.5514965915651804","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/checkbox","version":"6.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@6.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e122c72d9b1fc7d290cec6b9f78f40b33bd3dc6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-6.0.0.tgz","fileCount":37,"integrity":"sha512-E9fXgSZMWKHbcpzwVFWW2/ZZo8vJ5OJXSvhoQbl+Pj+NGTl4f4MY8xMj8qwA08Dqp/Bv7zfSAB1Xe7akfwQg9w==","signatures":[{"sig":"MEUCIAGNjet4aS9fn8iGj6cw5V5J9DVi19P7DgWP9sx7Y4dDAiEAh9y+QHPLWZGj4zYUF2IAZpPSpDWnGWF542Z1emJOJyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/OCRA9TVsSAnZWagAARKAP/3dRlldLcPAHRe+VHRsq\nqIXk7JnOzaiHJDEkLfjLIjXNltd5lPbgyzXCdD01/6ps2ppzg3t/PACyEnzO\na/c679QZe/27tD58Ybp8+NOnnROJCkVajOaNHxg08MbbA2ONqfDZBAQrkKI+\ntkgJbrScMOOmmzKpWT0XSbCYhndagFiRWQhzWUvQgvah7vL3EYU7/XbyHhob\nsETHFlq8ieGqcoHaYIjThuu8E5IfARjLIxC/D3xpiCETshJ7x2/FAh+wnTHJ\ni/dqAPrR97RUw5FgUmCvJBLGLly4MzNYab9yMHeeD42nOPMYkoaK9qKN4Uu6\nxo+UarnnKPdZYz6xY4VE4J9ViH0bP4wYNVBwSh2ezE35diUT7w5CJOXUZ8IQ\n5rQXufFIbBNMnZ4uADyz7vIb+8vsBfx2dpukMKdAUbSIXIfE7GH9CCxy1G3E\nvqWkqn+ZZr43pCPq/vhj3fwgUiqYFJV++mzKLq4YzO8OyZWqc65xO4Xv75kF\nNdl44YRx5KgDX/mC8Cs9itxe2RY2h6RezdsFCiwrWcfOBKx54Gn4XdgqldiS\nr9LzsBszK/b8i1TWJAKFjd8s8pGak58gGWX/Rymnu2G0DyKYoVLaF9D9QbUq\nGk82R2Y5kd7OxhBDy/+5Ox6gg2SiCKG//nheqpfw0i1VCxUC1P1NcttsS8wS\nts78\r\n=6Hbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/density":"^6.0.0","@material/animation":"^6.0.0","@material/touch-target":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_6.0.0_1587662797649_0.876499093553172","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/checkbox","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2673adb74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93369f40b87feb8483d3c617bee73938ef31c6df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2673adb74.0.tgz","fileCount":38,"integrity":"sha512-vdKWSgemoNGzxZPFRy3v7pZrc974GYM4ak4sacrL80p3dFCdS3pQdMp6UPku1qFLL5L+5fu/NNSN8ZhQETtARw==","signatures":[{"sig":"MEYCIQDllsei8PKk9B7aHdKH2gT18Rox8iytcDzhfcxoMNbTqQIhAJY33ckcgozTgddYL0b+pZVWchAj73ExOT637nCI//oN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqZCRA9TVsSAnZWagAAdJ4P/0OrNyIOTDKdqeVvVKQf\ni2lDxdaiaYf6i9G0LdW+lxFdTHijEcvayTa6T02NUXNLvLV+3yZOOLC3qxch\nb76ul23JBUs3BJ/EeZJH+UrvaPxZHJtDptVTibTGucXtZ3CmJEgjAkHFKs7T\nAW3tTNJgIe5FwH+6rJBPPrg2fSYJ2OUeHGewiIq4Ho6o+kDvpxvFUpYqUyuS\nf1afhhBOA4XjDH+vRvts69W/b3B4TvaD6xAkwNdfPQGiPmRYM725cVP7Gp2S\nw5x6csXKsgYRCcsGAYbxhNg1WlSvTMvDPZEnbAzVapW2kKonC9araAh9i10I\nRgi/W3oX2OwxrBzENod2QHKfk+yoA0JqMtnsJ5nyEmUcajIplrR/IFY76Xff\ng4fXFu+NjQMBERzEdHuSUV4hhXVp4b0qmjbRH01fMUOgiWLZGrn5gJvjs/cM\nhXEhUiyoirJea0nP2sYCJv3MCxO/8I8AIAvSBzP3smI32LoKnxOYfy4IGYp3\n+Ec/8r3O8vKK5511CQAtztkm228IDIUtEoDnafGJw8hoMrZCW7itnBrxLu+z\nJKLQOSbIJ+uOyzsZ40FXwNnX85X2XSBVwGVTrLVGqw91K6TA/wh3J1UdeGj/\nJ3cMMqU4uD07zrhSkcr24ppwltVj5/kxMb/1DVAUkybGBF1bujMApnbV6xt2\ngsFg\r\n=yX6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/touch-target":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2673adb74.0_1587681945301_0.5793604689160456","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/checkbox","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f4617267186baec00d52808b3538526a3576f90","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":38,"integrity":"sha512-RNnM0N8zhgoCO/RajuBrsKkfgZzIrZ5Dzi970rOkGZN52Pgj7afhvGIoDj8coSCgzbh0JmBL+JnZ9uC95ivDUg==","signatures":[{"sig":"MEUCIQDQXAkI5Cdel9r5kR5W7XRnEpgr/NA/B6T4GJqA9fmvjAIgEDmBIPPpKAWQpbruBmDoF7n0qgZHyhVuG2U7HZ5qmHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojD6CRA9TVsSAnZWagAAShsQAJhnoc3cQSDhPoxdHPJf\nNz0/mlI53OevSFJs5E7XLy5XoAbwoqypbxBDDGLLWByzGNDz//aLOMq4PNfD\nYyC9ZlGu9fZ5vnG3qNmHFb5qetJZk+bcnMz2x38eY16BkoBdpvWBeCI1g8Wj\n4N7nyrVft5Ub10nvVnRRKPZfY24HHeitUdjESTgflkVCYse1CLuXIYC0m8xI\nz4Q+yDtQARkoqZ05y5gF4nUzlqjmzTKTm7bJ+Qn8i41WNsSu+MsVQIFK+jvE\ntFQQp/+FvPF98PQenpl6UuPBa69FKqtsiD5pU/UaDfQShYfl3q6Tag1wFT8K\njzIJBSNRNBlBI9ov1gBAx0Dt3sOeI9dYuoDZKhwPo0oGmkhBOJGVA6o5BakS\nvvF07wRpvLSZtiv2/T8rzx5u3+NY2mo8eIVsW4S8+hbyY3IxNPwRKgcKyc1i\nf3q0VLIsY4cMT31VyQsq4k5RnHqjQCa1l7UJ0FMzdQtJPHQdhrinmm30SK21\nXCmwHDUxqLV+4abRdSdUQ38OCQZ00opb8/WCAzH5wLgFpBsK0jq5mlw0DMqy\nLyGUskBGV9+Ma0L4tR9P/4ZJ1mMkJGKaroiE9P0Iuoi87MW3lH8g7wHnxKjd\nU0mqRqyOFPtA5QMhWQt39LrjjA1PqKP88ctJp3Iu5n77/dJe55IepQCAgbng\n4660\r\n=h+fH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/touch-target":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b10d0d7f1.0_1587687674293_0.9247493980883239","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/checkbox","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfa05cb29598961008e3dc4517fef7caf40e7bbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":38,"integrity":"sha512-Pepsb+8hdQuu/1vo/qSec/Fq8oiGMj1tiqFL3HJWmMYqNBhxgc80sWqjDRY39jqKqzTcQ7sG9kXf64LZwrCTaw==","signatures":[{"sig":"MEYCIQCeNDuiA+kLDG8idZRSvSyYquLLdoG2+kgS/EoBlU8E1AIhAOwGShv/uAyt7PFqFpfBm8PzTfBBChLoypzaCoIfpSSJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TACRA9TVsSAnZWagAAbTYP+QBnmAz9XLwTbAA/xg30\nMhllM/Mu0RVT2L16oYV4/THovk7RuyHH1zF/QFMijxn/c9J+gpqkWRR6F0eo\nCjHPO0Lo+pmhwxKRA5G74powuNaPg+g60TJgKed0GFkF/X59c8d6MeHBKpeW\nw3abswNmo/ddZT5jqjs5bTbPRm4o66bvhHVDwXNJx1ufvD05x+WThd1yYjTa\nGoeVw5g5pQflG3jEIFeAEnkTX0qCco0jjAJGffEXMCytUVEbPyov5PcrhTTl\nVV3FDKEHpm//CMCVQyfbxwRR+lTDmjFoQiKZq9aZv9KxsDcUh0SPGCtbsAdm\nljFnf8jp3YK1J0xoJIv08/l32cdQc8x3ZwQcshSY4bsXBZ65Lwdrs9PGs/6U\niPrwC6xMOrc6XQKhekTRwFh8KtnKc+PJlF+E3f4edzR1+84WV4V8ByLD8zRf\nkWW9jZryGgh6CJgedqdbu8TCy4K8BujS/VlfdYJesTiSInmIAQXBeGD7K1P/\nrSQDAxLQ0OG90KVUk/PStYxsBPJTbec4fI/jtjSwE4qJUsE2DH25dxQ0r7e+\nNMlc3xM2J9dk5dxCVD+kV7HyDH8cKstElqnpTztRMBd0RUHQ57yJ6JEv9BGs\neALRb4LbKjIMaY1ELs1e/CnVEqBybgkD7agqdU9g+YYkK1zOm0Ae7g97pUhz\nldwE\r\n=ZwuW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/touch-target":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.3bd8c1bac.0_1587762368375_0.025478618446558743","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/checkbox","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bba5d4806a6551b268a5d3657515d03ba5d1664","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b83c8dc22.0.tgz","fileCount":38,"integrity":"sha512-C5dRzCUBW1irYKeDp7e0yUnroG1IhSl/Xi+dsTFZf9M1NHyhnu91fDlxiIMgD3Z7tDxp0rAvxN1+VfEOkWvWyw==","signatures":[{"sig":"MEUCIQDRTQWs0DtTnWnh1n8J+LaS7Kze8CK1q0m+q1Q6dZleeAIgYySkXy8/F52MXbezU+yS2MzVx6rxVW1hpnd/Sm7xP7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fACRA9TVsSAnZWagAAOmsP/3TlB97zamGiUJ9Rtagu\neo6SBgMz/e61+D6PZbNuaGOCFuWzKgvAcbqeAjh/PRWrVLZR+VYzhU7BI4hw\n0H2h1LRr3/B/YHSDO5Zq4bfWpW4CfXsgt2nahxERmChfilE0nraneXtZYt/W\nS6tgw95IReYoqA4p5/e1xpKivGRhgJ0ra5gItUuGcy1N8qxmsRBA5K3k3s+u\nNcw1KuuHqi1+cbE1yNzNkoq/m5ONgy/YLQl9M5eZJGYKN81bMa2ZqZeGFT/h\nBISC9q2Rx6d1782Cfmp74LcbS9tRfjODXjVnxuaLX8G+74KiJrG9WcfRHVUp\nZjkDLrS8ZU88QT28fH4GW5qsc64EF2t9ZV+0ayUOn1RxXxZh/cCSmyKNN2Q0\nIiELrGv9qnXl8Q4fAYrPjhuLXGsvTnbB1eR0mwDPKF59jqYEmq1b7uQ5R8HR\nBolFlQTKh76ezKZEYPe61VRy1Bu76b2vzoo7AjTOY1m49V2sauWrkxV0WXHP\nWOrg2Mx3DF6+lCA/5w/lKN7U/3RFjxtv9uToCCf2/eyF9F4ClZV9+mXPk6Cm\nNbskmeh743+VTqmELj3AusGz1ku8PRt0by0AT6MV6AWwBjCcUsf4bFfhxL3y\nDE1YO+k0e+DvBoyjc0pH6Q7+06++tAhnbc54sIcFw3WsZ2nmgJuzYHEUcR94\nrOKB\r\n=Ntr4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/touch-target":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b83c8dc22.0_1587763135552_0.5799559982633711","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/checkbox","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6fa845d74d1055fa38edfba99c835de3628240c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.1b3dd846d.0.tgz","fileCount":38,"integrity":"sha512-qIDyH/Q1h3p9PtrNzvrt9sAsCv5zIX94DvI8iizr9s/7ka6lHav44vuP1OIdyTmU7zAvc4bhfBtx3pEHXgzIaA==","signatures":[{"sig":"MEUCIGI6u/Ns4Lxb2H6aWIbk0BcOGxxcHbDgymiqkprKjYdhAiEAkS89/QpccJcRgE6Cyxlc/KSFUvcKylAnRBP5Ukp0KQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fQCRA9TVsSAnZWagAAIm4QAIhTRi1iWeUdjjDlmZB/\nma+0liF0l/qj82pFHzVyOHKxJv+svCbAdjkEF8DOyRHbWjDjNRPgIH8/NxwY\nG0xQMcTJA4lHCLt+YhxJEmUVRZFQw8eWyRmqfPWatvhsGyzrxek9ZF0JMkhF\n7mZJr4iCAAF1s6ue2u4kp5e00zLazSlKv35Mpa1cIUzM0Fm1I018W4Nj3OLX\nmCyaqBNhPLGMUHxLXevtz071/KPbifjMDdN2b5xZE9qugENwdOmgazDeumKs\nsUvW41CVKb25soUXIuL86cOC/yxkOoqBJsSPV6JCRv1Fj43zh7Xk6ujWeJE+\n1hH4Kf4aIP/PqvJPQBxKeCEwwuql3E/8XBblmVTzZCixyC1z0GZvTZALNgAc\n56lHgMPCaTaS7dzrU0eyxG7z7KtaDl4r9u87BUOZA0n94MJEDesTXdKGwYOR\nZA/MUl7xm9TIAyleQcCnhpITEyD9v3jxeJS/VDmHIJR3Cznv3CWB6xHfSPeu\ntoGgRU1vdTsOGmmIgxAY7Q9UjOegcjbCKOMm024euOcLq6ZCQzqkbM1Fp//6\nwsxuRcz+8MlYd4QjqdX5CGB+RdfzlgcCnFbbhMc9dTLQTTUTECLN/i9N8lep\nF63dkOwSWl9CRRVJRpra33hvqslmQpnaG3SUSRK5+uX9f36qEmr9RjhJMjpX\nv3Y+\r\n=eQdI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/touch-target":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.1b3dd846d.0_1587775440413_0.38929288867319745","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/checkbox","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.29debfea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332063e35b6183ce4f5b159ec87811ccc2c848d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.29debfea7.0.tgz","fileCount":38,"integrity":"sha512-qSFwVbSwrwro/7vh9W1gThD3zv4zEGdcVFTjhXlKZCBl1C/yFZCJqJd8gvXS6KL13LzZm6+HTB3q2hzEKc7yyQ==","signatures":[{"sig":"MEQCICg5wOTfHoymepQ3+rY65Qcy4DhjQQOOEb5wGJaQK62JAiBK+CtHpvVRVp+LOJi6fqb/ctkwAYZw4uqmdG0H9qnBPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDRCRA9TVsSAnZWagAAgicP/A7YlreYhaltWDU6bumJ\noLnEsxzUsJhPJvWW9a8wT/EYNA3/bbQx+jvt80ZXtg1j/vKFW8pq6OLVA4a1\npH89/y8J3iN/kaS1Q0vtxKDotKDdi/+yNrPB+8lUW5O9C69sqHgW2QltNL8q\nUv3atkah5nWXicwi1wBk0YhkjE9/XZopRuJZ4nvtgE+pSC54czY8gbWwNwst\nyPUOGZNtlMelli4LcbI0KRhSVRUQmUOAMquo3hikHwvzJQT48yxawmlI9Tlm\nTCTCXwvMRttoFlZHlR1fezeVxBGgrmbU6kzI+qM8K/5X7TkeeN6OwDtzmrmO\nmMNwEyKbQUlS4Zcu8n0e5hdjbIGPEcBhFTrMAC1QI7CLG//5/tkj8WIGbvJz\nWk5NbuXNUKKsK8jAW0kK21ahZs93GbdFfWqYOuiLNBM1TiGMpamMWnD9Jkes\nQarda6FHAbDiV4SkTHce/LJoSKuXIFz68ghCt9OAN5ff5PomsmZFHtrvXJBs\nBYIwYGi9M6AJy5Zm3zi9vArBJlFCdsv3iAodNLD4AMBXXwmGVmmVon3+R6ty\n4aVRKSFMxzIw5GXVi0Dug6YB1K/F8L0uuj00ixF74G/yMqy1FQPv/ruFi2O5\nU6W4Y0ubqQxukWxMvexGdNTJ2wBeymZjQigVkb1UVTVgmPZgFwZVf8WsfvV0\nwRge\r\n=IlJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/touch-target":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.29debfea7.0_1587990736877_0.7577497823699662","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/checkbox","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83582bb37c8bc7abe092f3d4328dd946c4b8b859","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.28d32f8e0.0.tgz","fileCount":38,"integrity":"sha512-DK20p4mCjnBQ77b43tULnu4FpAQUKeo/g1RZPNMEpZu41JpXrcHPEXIOBrzf23U7RQLICo05Vd/UKf21gKoGfQ==","signatures":[{"sig":"MEYCIQDTF3GHkNptKr09vUvOHNh5mm6m33rpL0KXc/Pq/8TEgQIhAMc3ZRco9jVJTh2qWsUWlJziqpE8limmQFsoGnAQg14e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucECRA9TVsSAnZWagAAYNsP/1n+0PT1yCITRIeI5P7j\niFo7F3G7aq6L+vtny2SDuRqUsbOeOdThq503gkIERzv1X1hDglfZRdHwwj3b\npolsPcRjM8/wvI5lbg8TYY3OPuy8wayFWG1aj/3G7rqyX0uDgMcBJVPbqCXT\nSS/tZcy/l9VlUfpsM2VAQEytxWHeG7mOBcxzEFJI5aue4s2CQAhDBrimI/Rt\nO19bsF5L7OspGVXxQ21161A/jLBRR8wGufK0r4f0p3QaZuNKfQCJuNkJyf12\n2FQJp1XbllnAF0oLfoW1P/4InMqdVPHWpv8P+CYPob3ObGd1yxRlThZpnSWH\nsNU279EB3WGlr4xprNxVCGgISD8fmgRaouTuYoPIYNiQSd2GA/gn42femmNX\nC6gtT15HFq+pgxuNgw85Bcj9/MdoKMUNPAvnRj51knxzrYHzIwkqbne/nf0e\nT3PCsnIk+JpoCK0iWGVMP0sCshbFvDgTETbtTb4IPHmCwF9IB0miQD34Eit6\nRcHUzDvHjEITQqkr67r51Cl72JWumsNa3sSS+vHiKqSM6IpMUTa1RbiYbxUW\nPhFqHhYIoMmgeIQAx4FHJobUAWUdsHoeV13i1Fei1PXhXy7hxdCgUUIdpXmD\nbRi7EISOYLyj0nrAoMdM/lX497piwbXnU6m3wGuZ9ajEAh1EvapSUbXZnIad\nbiBv\r\n=K/Oy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/touch-target":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.28d32f8e0.0_1587996420525_0.8636009098248496","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/checkbox","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ca5cf1c28dce2e00bed9fff702a0bd6d3907b9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.af71cfdd6.0.tgz","fileCount":38,"integrity":"sha512-H4qXknOQoFn6QY5GvYE77itgvlg2ZBaC/36KdwgIoC82ynth5158PKAUc0429eUb+r2amtw56/GGCiMQn5mljQ==","signatures":[{"sig":"MEUCICu4TH9XnPkeHy0OkkvcnZeW/stQr9XiNFufSXnceu4iAiEAto2OgOCca8oVduiXxZ3kU8wZFvQSSstxJoQK4RfhXvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmMCRA9TVsSAnZWagAAsLEQAJlXwsl97XR+K1+t4/tU\nO6qYspbmZpG+zAgMhlJVQOqd5f462a12osH9irlfbSGGtJlCkmLKy7wntYLH\nqyxVwADEXaaJKQTkizEyi5Z5FAYN0sXTW7JH1zWL0jYcZasshF1xR+kf5pS4\nW6JKMMiRJv/8bTSr0OsaP9LC/teyedLrKUYOsaDwlNUmQ7n1BiAvC9S2IPq0\n/JujEfnF/czg7Ipw1BXXBfzEult3oj1mT2WJCckreTQaP5UXYLFeNdywMCm9\nvx6o3FAWs1O/bYqEN0x8MMCZ6GR5GW/YFAT0h6YruNZo55LmSw2MSZyC6eub\nZCsRejmlo5pGcIcVxmGB2PsDX78qpUgWG2w7LOOPNREXUGo7oQa5rvqgFGx2\npF0s6n9SNUXBz82vdV0Lley6rI6MKNXNn1bMfvMJL5eS/vV1PqKyYRlEPPP5\nxeXU9iS1/VrcVfvPWP3vM1gbGsL/CIy2zNS3LOhGe9grEiqfJ437xC4BArCa\nVrAg5J72L2zeq8sxSU+qWWIc72quFTrWSXw1MBDflbWf9ju4xiPee6BvDumL\n/AdUxveZKHnudXko33JhgaIhMU/xkUqt8aITqxj8wALGpVuMfiwjHFGSsyVA\nphTW3CXpfWZ6y9iHvOq70c2D4jpanu3sYAJHsH9/9xaT8+Sfag1Pe5eVqo1P\nVUfC\r\n=0uPX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/touch-target":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.af71cfdd6.0_1588115852210_0.09187068019187983","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/checkbox","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8650d288787690bf20f7ce097dae9ed11bdb1d4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.99d2fc961.0.tgz","fileCount":38,"integrity":"sha512-vDX9VxdOeTtnkDg6lfi0qzesr8RIbYl3dCVl16kpYVF1bn0zWWwDSebMbWm5cxp9SauoJE+H3CD18oQV1s1LxA==","signatures":[{"sig":"MEQCIFS+25z3JhFwWP1rxrWbRPpf5pHKt2z5hkNBmiS8brKyAiAe85k4eDjT6aYfPL72avRsaLsfQo2JWaIAsFYEnMZtcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVp3CRA9TVsSAnZWagAAf1UQAKTlsxmA/t6h1bX5QPvL\nTb01AT7VYz0zhl9NH265+HFt8oQgc7E8xG3Chs2aJhKnZ0TUHJSIzb2DjuoV\nJMvndGLzYQ5it+zoxj3KRhrq1Wcvp7pG8C6ISe0XaLwM1FkV6r+ywoSHLj2K\nMxf0BeOBHHOdld3v4+q55y615jOtxvAOG2hX///c2qPj3F0pAxW1rySP0YZq\n5cqKVJM9zoa2DAmpCl12hjHLop5Nv/AVaBIFA0q6LGlZiMGVtZ2d2fvf3da5\noCAkRjCCnUIEZlxuTkfUI+w8P/SBchd9B+cipP46La/BRsuRX3wiUQV/MPS+\nYvBfy3WpHxfPESQXBCzkIxzPDIcjfory+BuCqk1O0igyNMgsX0rkvFoooMvC\nmh9Wysf6zVDeQIjVpCd5eZ9Z5RNPOrzumgEISfpLLPrAjuP5pgTWLeALlgmg\nNTHdcYeFLG/wBqQReyIYyvSb3zbn9Pb7PjiVJCdVh6Unx4ypuI2qJFZe0s4j\n2/rMGRPs2Z4JTiWFilJ7wghOMRJMtnTD8lzyXvf1gwQZigg6fO5OZ1Q/rR1Q\nFHHt1niX3niN5m6mDrQTAR1ZJ8HEOG/tj7GZaPswgieGFh9etwthc783cG1W\nALbEWhNw04TTSmmLvzjNs8y5bY3SoWvohYOqSdXoZ+TiijGz7/+iQ4+ngMc4\nb0mv\r\n=rNjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/touch-target":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.99d2fc961.0_1588157047221_0.6265285517772761","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/checkbox","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816d6743a79d430fb91e33815269fbbc7103dc5f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.0e052b24f.0.tgz","fileCount":38,"integrity":"sha512-rwxxDhB2dnKiAk3sEGQ1Tc8ogCuVDdUO3GIfo+/ed1fX0cBYrMVF5j9mEE6+5ENxzVohGX7NtK4doMaZTvbC0A==","signatures":[{"sig":"MEQCIDk3TDfWJmgDo1swWT928r7qOG4zW6lt2/CxJsKU5nOzAiA1vZgWd0dUC9Pa/iom6RGaA3BUTT2zq+9m7bHeUIWlfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioECRA9TVsSAnZWagAAiK0P/id7jl36ASUHqLlHkooL\nZQ6iQ7AHPl/b3BnP5wN8WVLhu7MGMtB6Gc+FHpkTuo40/oKqe7U5vTrtA0Xv\neKL+yqlPom9uoRxZlM9NKlQUDPlfwIB2AS0jhlAofsUBWPOjfOdQRIlJXVLE\nmPijwWDi5FO+Y9oIUhE0eHYcfip3iX5wRGh5/c4SNbGV9BoCOMlfmXbxZ5ze\nrI9dEixuKR61zstvUhgURpzoIne0lmBXym09Q+bcSHw7YD3kmTKVy+BEMtpL\n1Mcnu7BQUmaNlIwEIt2xnrL9BUU3EyydDTnypA1fPahN0Ail0gnb7uGMpjDk\nIyD1vpWdzssegLC8KsWvgEwO/BIJO/bagogayhxkYwt2BhAO31Ix5ey0rho0\nlcoIOabmrxhCouGepKdW8ma2BjjkSMGz5uW4mJdDuoaKq3yVh5HuFsyWiu4C\n41+u3uWtTrsurxx4EnvvrhMGZnvdigG8kycmWlGOrf4+/Pz7u6eeJqJn2Ddu\nPMhB0DQeKfAYpmP+lVIV+vFV4rNs88M+nTbAmELyqhQIb1a5ke9I1NuoAXAD\nOkrsP3ui12zqOeuR/O695G22sN3paAJq0gmLJ8c8ansBuGk/GbAMz3GXGj3W\nDyi3H11w9etiUTNG5jq0sAUFiKJyDxzRQKRLhMdAMoJ6Rsr8rVsCXASSQicu\n+FIO\r\n=zzC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/touch-target":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.0e052b24f.0_1588210179649_0.3297424272158098","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/checkbox","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa3d77db3f21cd2e3c13bf1834a3732b3b2601e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ff4bc632a.0.tgz","fileCount":38,"integrity":"sha512-W9K+5wKlOmXeqHgJ8ZSt3BlaXFcfXZgmVMCjj0ftDEORqQzbqQD0o3ge1eGhC7DEFzTNRekboa17/AWlwlVe+A==","signatures":[{"sig":"MEQCICGYqrdTkJ75aGQwTpLB2/9kQKGjRLb7u3DKvHf1KHLhAiAiVYpDx+niBCbQOlpVY+kCu1SDUCfXugn7c3zStjIDJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowLCRA9TVsSAnZWagAA2wkP/2W8LOErKwDng7txvJlp\nNhdi8czpIYimr1K4kwm/kNx4cMpSDtfzJL3HOxGxIw5J8MpsVelH210hAOhu\nxSM9b0pJpP73mSbZhkhzsoBFsZKzYNOcc0tkA90TdJ1uTkYHJCu8ExW6UNSP\nC0U8r2q9ufu3poXu2Y70SELso7yvJpGcasY0B4sBjClwk/XAtdU71JouYDqi\nogJMFMZ4rZusHWDw7nZrZoruLsxPpuZbZjRrN4tSRe0zGfNITD0XohPsY6Oz\nqK1krakbQ6yHAyHYLzvmSPGFxWguv4dsYXVgkWER/YK1heoJw01tsYt0d2pv\nZ3yRHtrstyJd35yUBCGCs8PFWfNY2TDMwqBpBwqYUCXGh5icX7Ri/iuHMt2q\nTb3YT39zcdkXCAmIMl23f+wyi1dVkEe/WvM1oGPtR+/CHr9ZsXd62DEfcU/G\n4Mx9HXPeCZjTLHTeCW+7IWZE5VzdKq2TG5D9wcUayOtSUTr8cgss5zy9mHPU\n2a1OUsyRJletLrWc76VQUiYqlPWxiTzcJvCoRvIRE49LCw03xO2lq7YX4yge\nANnoDXi+/HbjrWWZCi9yKYXlo2+tBwnDBY6g9WMbbuDUUjtMiCYGHmh5n+73\nkXbG0fOcO2PoyyOIuakJvxj7CYUh+fxNx1HMSLRhQCQqHKLyzPbrKZJCSUSn\nK30L\r\n=tCaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/touch-target":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ff4bc632a.0_1588235275229_0.4959631286216901","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/checkbox","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30fa70a871d2c6ffae2b450b2e132eb06088671b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":38,"integrity":"sha512-Ci+WQUazQDEk7uMRFqbQNkuP4BCyw2E+8jlavHpirA5PROB40H+E0Yte9tTQF1Py7T4Bh6UUgKIVpf+bSq4vVA==","signatures":[{"sig":"MEQCIDhBngpJqaj8PMFxgdWCDahDywWcqMazNFriHt0zy4j0AiBld3qVOAsPz0kJCxAni2SexEMua4u4B6HD9TdoVrCUiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGOCRA9TVsSAnZWagAA7poP/AqVtwAo0trL1rS6neza\nb65YLYkM/ReS1T93vHUD04+xy7cxgJR3DW9UTLh17TQXU1tZIeNqiqF4uqvH\n9o4RvKs8Nt4h+T+oslwqoSA1OawZgA0hrR2YDPz183JPkGVWm/1BYyHq2XAo\nh+3+2vQGNzYsuHpQe5Q50Zz+uklWVoK/XxikztWQ+Fa2hOlp55vFrfKVE5na\nnAEFS3B/ElOe/NX7rNO/IaR8twRXj7TEdmWNRvdCWZGb5DQbl2zhsEiwWzo5\nHqdPbOgDP5yZvlUrwK2qEoDB7PBdkDLWRTvnbtHueqB2u+PeNB2lHfayYElG\n8Ms3Rrc4y6sfojEndFCa6c5mEQEQ6QWl2ZrVCj0GM3/l2lhQ0qxs8CQvlOWF\nfbY+X+apsKsDtgJfpUXqY5CSRuqF5v8w8DkQA64PSIeHHHASW2WUhqd/4bYh\nj73PLOFdEjaOH7d2EOjmwNneW1rBMTbigUcph8eDGZaT1oInAGW6Qv85/R6n\nNXtGNogg9BAmrrP1XuhYOxi56frMy1PZPENuZTP8Oo0+eRWPUrkQfffr51Jz\nkwv2TEVD5ompQfiKOvt8baddifQ/dg0jGoanf50dZPu3Xq3wNao3YNnefUui\n6u01gVZodtRtIQmRH2CJRMN5hHxpkeCbfnCSlN9dhWw5q5R1fUqdhbYg51d/\nL9TL\r\n=/cvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/touch-target":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b0f83d2fd.0_1588257166326_0.8568372879384056","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/checkbox","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.e59906a57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b7fb05986049d7b512d280a356b9d27f305bec1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.e59906a57.0.tgz","fileCount":38,"integrity":"sha512-2oBSw7JBle72W8i3cWSuSV3EDnrqJ7CXJgv3r45xovElUdN0crtXz6fXjU2167igXMkGPDUV/wMa/4rISaNdyA==","signatures":[{"sig":"MEUCID1tGze5ltyI3iEK3RUR3I9PAPi2hB43haINultrdlKgAiEA3LMA4cuKSNc5AbMxpTaHPku4nYY4e/vJetW84Zih24Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENtCRA9TVsSAnZWagAArD4P/jXBxx5r3IwfSjCNR9mC\nyp3gnOLTp9MQgGavdi/URwJFxyAZuC9ITklLJiXyjP0Y19CZwxAN0bXf90po\nuE0T8FMawaER8Cz4+RsAV1gLkcHWw14fkg6fKV2T4o5NWVS3nBOpZ65B04+V\nLzXEzkJNmeD9SsVY+h1/YEom6RzWYkW47q2bGrN4aGjaD4RwKOPDKupwJ31Y\nU00GyrJzqekFne6WnMKeCSkPxD9eBfLheZ+h5VvJ1Z6zV6HqV2BiYzU6JwTe\nl8sL+hFAc+7+S5fAQ7EI6E3NvEVRNJJf2y9vspv2WPmhE0UD1+4/4/PbrdQ4\nNGQMu9xXzYvMKCmlg9FgKXC4vacE4uy+SHz6kTLWcCNvwE8QUsb/CTO1XNNL\nAy18yN142F7auw+kbRgoa5p4/n34dol4h+F/Bsug705b0u8JtBdOdJfTMU1C\nGkYil14+LzPf+7HqbD+mtYHveVr1XqyzRph8bZ2e+HsldjjrORoGsKvAsl/i\nizgcoA4WeBrw2Sxrxdar5oTK9uCmT01Nt3hMpV5HwQTkwOm8USiv1rRW0Ec6\nCMGOLxc18ltvuHAU265Ac2mjvKMiG8plWiCPvZb4GFlX1ytCKz79DulffTfr\njgs/U9Oliy31v8g4CHtMN817Gi4mjzgCe2ty3laxSiGcaslI9nzeo8cLcdkF\n4FIB\r\n=/4hL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/touch-target":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.e59906a57.0_1588347756589_0.14946727135786553","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/checkbox","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.c02712b59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"019ace813a948cc79d362fc6dcd634c89a10cb5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.c02712b59.0.tgz","fileCount":38,"integrity":"sha512-XxYRfUir0SAIh2A5DG9OGRO+n8Eg5d4DQsGPMu4AU1uJ15b4NEo8ywCQKfh3fJd/r2Nu0D0QiqA7F4Xo6XtBJQ==","signatures":[{"sig":"MEUCIQC8zo/WOYR9aTjfk8FigKU1rTU2lYR4DL53+OXlAygA9AIgPvX5qDfBf2Op8KTRrZ1/VpYgsVvxmW9mJxc0NI7qzEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmwCRA9TVsSAnZWagAAZBAP/1ZNA2I3wKj3rvlUeJKm\nDm/AT9rT/tXjdDKowYOk5KSotl9ZP9pavZBDOOt2g+uvCa0xB9w98Yr5FL7F\nWzx0Ck9ccioS+H71CStHhnI40xhRrhrLsp3dUiAWFjz1Ie/a4Mj9oLuloBJq\nSrUTY12O71PxLIf6SvP3g5WHlFgcSErakTXCESgjMdSV2A6MGKzQFBPORm97\nbvzfcGkVIGOnDxXOCbqsoclnCMRZ7uTXK/qgoPJksstp/OTLgFqrcMbKrbgF\nUe493cl1HeLZwE+8D9MT67aLyrQgeYrioYYQColU6Udw5ml5fqMz7CB93XNo\neDzGRKyFXKfjOIjllt9d7Vv2kJSf/0nULgkl/64tnJaKxX9MFOzcA9Xv+yq4\n61tozgigt8o22AhCc43eJT6n9aqsulEJdo4OwjA4cCVioMsu+QpV3HH2ab8L\n5CRA9rl4JieIvZqOhC2JUg5A0cv08n4eiagNKtDebxAypXX3yF2jVQZx1eTo\n+ZafoaGfk49mbTjhp6H9PZRUN4Nfn0kTIv5+halg3TTSUu5CUURnim8SGsTz\nhh37QZjiEAC8WcZuYpm96Jj0XIAn1ydU4uQuAbbPGdJQrlkhkvRrtjhtmeNk\nEvaX9O+T3EMMWDbCltk3qp8yALeIYwCFlDiUDxB7Izqvhq4+ZRmrziXSLGl8\n4LIe\r\n=rKAg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/touch-target":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.c02712b59.0_1588357552209_0.9803591733080745","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/checkbox","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.15d65448e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea21d22f2a95c2b879aa865d9309972bb93daa84","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.15d65448e.0.tgz","fileCount":38,"integrity":"sha512-z2SmFRJoM+DWMO7kI2mF+uqA3LRvlZioubTUNBjPOuBGJ7vNHCzAs4rqVx+7dyy9pk8Jxk8pESjiGdhH3bMeHA==","signatures":[{"sig":"MEUCIHLD1MUQFPXrTv7PeMfVqGLtdHHyosMfCNgmNYN466NhAiEAghcCtQCdok4Mx0VtrHCFNGckdTz1DYgKcSUoNeQzG+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHb/CRA9TVsSAnZWagAAo+YP/1mA9Oi2qPunIZDa3QoL\na+ntpFpeCHxEfqMBlqYZt+pB0CnYuFFo4XfwZ1sDy1062hDQ01y0X6zz5k2w\nyJJ5U6oJ6mDGTocG8NpQGEg6weep+LmaQMmLimBaTFTbWer29x2v7uzA9P97\nER86gnWkft3h1LVB/s8q0jIoP2dpc+GFOfgoIWMDK5tenKzWrgxDhC+0xjmY\nk0ZT4rrNkZttg26qnL/WVQitYVR0Cd0zq/6/phQ4v75CRhRw272ychThiqfW\nbqicvo2z1CF0FL1xAVY+pNAweWPrB0GSBOsBXaJZUVTBH1AJvma/b6tk5EcY\nUGZY6Bf7V+9ojQSGs9/kcEmjg85TsQ2d2Ab0zQodKY5ju9lgwoIyP9OtSUqc\nSWvOH32u7PWV83HTVormGKY2nQdPTOFeu0GLBl2nSl9qtreixTQcTtzsKh5S\nf9rMiyK5QK2HG6xXrNfwity+/vU5NzpCxekHj7b1D2mA5C0wtwc8s9olfqCV\ninez5kqcVvQ5D5eE+3pf65ORrRlDq0GuwwTOoduIkiOuihfsT10mHciifdDZ\ndZXUUBt2tXEGs1gH+cbrhq7beUL5K54BI7DK6kdvYlhS7Egu/PxeYPJknG1n\nHx3U/PBdNpNwY4nmSSA/Ozf21rc2DDlQGMlQWoKUHH6IHqdyM6dczCMDq70q\nvurn\r\n=8ARv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/touch-target":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.15d65448e.0_1588360958881_0.7782305057275392","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/checkbox","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.142b1549e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ae48a4964bf0b883cb3ea39458bebac17d2f26d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.142b1549e.0.tgz","fileCount":38,"integrity":"sha512-FjR/GO8L3gbgW+Zbv/j5ZxewcAFccigfT7KrmtUB6r9sXq4sxrFzayLF7YbeBj5CIR8GZ9j20DtcnWevDo4LuA==","signatures":[{"sig":"MEUCICugl9LK9vbq3rPzimYlWnHA5ASm41oT4Mpdw11m0Wp0AiEAnrYYbO142wVIX+vd67dR2ufBqmjFQjJ4iOJXFH5jEQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRJCRA9TVsSAnZWagAAhNwP/jb3eSy8nquowkvohL+f\nbsc/GcLmNn32EftbWXH3HEDMZx6+TPvKOKimsb37mIpylM/a8Z0iGVXHxKjw\nPaGIogyGBOQvx7ypGcfsa/jK8w6dqOBccoJHWtcmUh/pjvG07GrWhAKB+rwT\nEAaWxcY+kq1CPGfZ4cuRUvT4VKlqYHZBq4A8e6guGpixcGImAPzl2bLB2x0/\nWOm07CIgTPu8fCH/FdJoH4/hrGpaqblo7FywV4sN5NdrOPSRBQhSJHbzf3ph\nmiWSAK5kIG+2pNLYcAGLzSCFg3qy9SAD9gdquXSdxSbXqC+KRJ0FV9nkWA4o\nF4ENojWFgO2+5tGPz/e5AZPoexvTP4QVyuQAJBszwHO69w1w/+RRTbHbz6La\nVGBYmnnSS3T/81ouTTWcIzkzdzF8f0mPfyTYPGI7Y2HT2Nl6CelTmSJjpHUb\neoxV8FDacAP1dBcH+OgnG7JYEno7Q+vgEfDqRl4U4J1FUwDLcj0XX36TV7wB\nG6l8YnyFZ+0PkoZ5qYf+IAl+MqZG//VBbMDziM3RXoy6zK/tG7CBsJbhvcch\nh7xO/PsuJJnRsUZFXq+TxiiQC3+8mp1NA81+3q5gtuCsMJcbAkXnodDzljJg\n34GXfScNlKrjn3AWm34mdgPu258HLrUAX46Wd8vGQrAICrZaDsOKFmwivAMX\nlWak\r\n=O14Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/touch-target":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.142b1549e.0_1588372553391_0.1795665512525939","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/checkbox","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.524b7b812.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fec6e6945fa4cfe8ddfd7a5755323ea1a8cbb48e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.524b7b812.0.tgz","fileCount":38,"integrity":"sha512-Qhh01lBCIOGlrY70+yg2dBlzGJJJq8mDX6ETFyKn255+gcnGfs+jiGLWTVs/fx4eC+RXIPCnKKy9N0yj1FZ0ag==","signatures":[{"sig":"MEYCIQDYePO3li2dQOow9cB/poF9JbwPfZ8y3f7VlhF2g+FPdgIhAMbxJc2hCKK4QBZdFEby/pX95EdKfd4JcZW77bhPkMnJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3rCRA9TVsSAnZWagAAjRYP/jQG8rTIXBapItRCdAfh\nrK2HsVhw+ctwNoRzo3JkPivMi/CtI54Qcl/vsIWSoIgW6eGvz92T+ZCrJeVt\nkHvoqkSA3M7mMIA348Bb3vHMIa146oYZxxzVk58uKFHM+9/6cIknlcdZlTI5\n2z1OLKrbF1pM50c2rfnsZLpb/R1JMTTL6zLkp0qfgVbDzV2lkOsicqY9Qkh8\nwRuy64bUfD/IWsCcrjSaJb4gc104DnOOg3X7s2FewNfkA9Fy40aiLD1u9v7F\ne40+JFu6vmViODSPh8WvBYCFaOR+rYBrfKsag4K0wP+8igukY94NGxzAiziM\nC9Rl6yymLIBklJFbHjJfDrEumfeslgpO8WBVjzu9TloXxv6NiucT6irG/cgJ\n6eaLM4Cwrh5Q4cwLB5bYqpE/2rv/BKzeqPU9bJRBSGB5beqBKlH0AOM8CCaI\nnxaRK0ldw18aJtICuAmVl2/pYj3jTbk74Bw9nkg6hQ9xOEzzC4F1eB4hsqCB\n78HZTcIxf1dlhMsQemXEctCPPofklzU0iQmaiiFfBeodnMmvhNxnhWAWshG3\ngfj3efF7LFdc84jbbnZ29kD66sUIIKH/VeMLEJQcQb31hlDJA8idxU+46hGb\nw1JFfmJkiguWIZHWavf0Ewp+dqOZg99HI5umXYtpKfLKvfasyiL3zSglPc/6\nsRji\r\n=kzyW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/touch-target":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.524b7b812.0_1588538859129_0.8828037993771263","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/checkbox","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8263c67df1a220cd8c486e2d476ec6bbfdefc9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.bd8ca9678.0.tgz","fileCount":38,"integrity":"sha512-m8fJMys8PgTjxbxDtDur+VJpfVegV9Yqd10n5EzMWlyOTeFxihfdeqPH1C4CDvyD6UGXpiP4f0pO4xDfYsI2SA==","signatures":[{"sig":"MEYCIQDb9dt/PvQa0r0Eksz0R/Vj21XUHBOXZwUJTKlkbSBIewIhAK5xM5pX8UgK1B8zePcVpkLDiGn3Loz8g4SraE2Ur5WP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6LCRA9TVsSAnZWagAAhfEP/392VT3CIS9kuI5o0wWA\nwcPXVns3YxcMVdn1pFXWmP5G5gYRl3yt/+v2VY0dbR5TBBT+cCAeyVkSKhFb\nRgmnGGX4Ik7A0dmQtfR9YGRQURlomYiSKPa9frdPsugo6neuq/4GMz2gySen\nIqNVG6G5BE1/FtGkWin6UJnghUz4SLY00sOcKlo9YtaBzf8A3o1ntVqHlbdu\nccaDRQBPtjPU53awoX7CldZKSozOVOjyHP4AcCSlZ8TP8kKVf14zs1MUQOma\nmN1nYEKETSttwR86wy8anO9bH8Yqj+JJoQCGlMF99Rkzx0wAnrybbDNjTdtG\nnFOFEL5A+O7qLyaZI/xKFSCbUjTNCEPEqOsQu6xUUT5mv4jIOk7vNIUY2L3y\n6hPEsZEcqEqQUV+8zY2tEM0/YV49pypE0f2ekSeKmMH4XsJGWXWzyajuox/s\n3sC6tAjzkUxHtFUP0nCNSU6S2JKj0Ts4gRt8UMJb7NdaHmlW4N6FMe5+XsdZ\nKmJ6UccWAsLfIcS6c+zpJZCDhoojI825Zql1dz2p2XoCwBArpsELImhbBnre\nbkubBfm0qI1cjGKTu9oIPaDdytulP9vcQIwEDzzwtik88FMzZKUIv15AHtaZ\nnLvEAHULlYjMwFTML0M09QilPHeTseuiTeM0BXjIepylBPi0x9PfugCGVDih\nH6Dd\r\n=jylg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/touch-target":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.bd8ca9678.0_1588612746766_0.7850759584400677","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/checkbox","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ac93f9f171ac7c35bea675e5b81a62964f92152","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2553e86fe.0.tgz","fileCount":38,"integrity":"sha512-R6nqKmIilOVUb+G3+GgfEULHADwCK2trYgJF+A4sEW/FR/O0OBmlTpGtgQeMuSk30Ys6nFPHGZ5PdYdk22WfFw==","signatures":[{"sig":"MEYCIQDpr/Wchu9E8wtF6hIgSbBBZzFcSxrC9SflB1UaNhd+tgIhAOMRAoI6Ld6l3Slr4uwrVVvUyBQH6tKBOT7S2WpUECeR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFvCRA9TVsSAnZWagAAgicP+gOaqGXdudnXN1fAnhqb\nFY4zc1Z3xorZXRuv1x/1wV7fV2yV5qW0j56fnVNOh+5/kP/GyhMdQ4nPzTVJ\nr/uYNFWcxxK1vVxt5pYox4Yhe+IVvs7b4Ugs81lilKt+7binHwaCoHuksOGa\nqeBaWzUv4utt0tnn+5B/jHBvxRNaL5JohcX1duaYyJKm/Yq/It0FshRVDMfV\nXJ1HBGYo6sfTSVpMqyO5Jx3QFErq5IkzKo0P+p20Ln0LjFf4/P2fcTdFkq3p\nNmquSWSN5G0JH0O1tlkD0L6CDIEgf9Y3+3XrF92e1fipjdon3dJ1s7qyCh7r\ny5BKSBomx/8Qvvx1z/ZaeikvsXfRA+uzG9ANPBybAedRQ1LJjZYZehr1NjHG\n2CgehkJxizJToDscNOArs0R5bbgu41soxsp/e4nZQevWnKGSZNOh4xdB0Nya\nOlu4e/8UJQD9ZmNhB7P6eYxl/kESDNSGopAn6ecgF2FjFci+2EIjsdREtCIf\nVSYz8fEIAz6pWm0vTChDhmbu/jzZa4SN2mS8JYZvenOfUqIiGodEh8Kv5D5T\noPp0EUxzyX8l2hSyPp6Xv0hKyPYwBXbXEKzseUlLR6xZNxUvpJqWxyO13lKm\n2i+iNa1UU0ZAWfWg92OM6d/AUcDbBm7VoSS+/BtBUzHhpQGPMpXMJUEZZxx3\nOiIr\r\n=Ah0S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/touch-target":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2553e86fe.0_1588613487319_0.8273999207036107","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/checkbox","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.03dec929e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06cad72a3410224faa351e39532893a6466cb8c4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.03dec929e.0.tgz","fileCount":38,"integrity":"sha512-qe+O+rTMVi+Brgm5amaPgNyN3SQPQ/2xXU1Ndsj7oqxV9tIUh2+ISs+QXjD7XxyIpsZtt4KcNQqxQLoay+TRDg==","signatures":[{"sig":"MEQCIEXarOH5ANb+MOJ0EigasmMd0/CtiyhejmHIsaBOvqG8AiB8cSeW5L6r3uStDSKStbhJ7jjeMH2m+3t+vMRQlErZ/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZpCRA9TVsSAnZWagAAW4gQAJ1lBZuAxU0RdIRGLt+Z\ntBc7DG8HjRWjJevxcTsOI509kLTzvNl9hW1ZHIaQFjdvI3j7oz8lRMK4k06x\nesay1HMV/H1nYZwuUl/6CH5SfW3ylp9peFX37K+55FLM08o49qAhZnjK6gnA\nZdzv3Yi6UOOSuJ3W/ffzDViryge8o/yJtLOeYKbE1z/hEJlqY2x8DqZV/nry\nvzxo0hRn86BDWs/6/pt81JkGOEJPRk4mOuJhPsS4eKZ2Kw3G1k6BpVvAoDCJ\nZfYko4D6N4tz4mnszIuzSWeZNOktL9l9kL7nYsnEdC5M3HM8OfOQJFnhFPz7\n0AL34vnr6VPigMgnCTa2rTCvHSMfKMioM4nHZFm1AG9XYYnIFgL2n1r0oE74\nMACpbQjJMMR8wTPv69PD+bckLpjoywPktLNAviurPwYm+lPhZXI5XFAPJX8Y\nBDn8GyTgZbHtQqR3a5D3RrM2PsH9hNjZV/wlecdr2YseZjLhfyZrrDDS/UQE\nRFk7DaN097ZJxbHxmrC9E6xQVaaGFLvTbyTZJytJwcCyvgTpcdNz1XkArEx+\n/auk8maaoI0gOIdI8e5b2aklOAhVCEQltg2XIIBcCX1a+jybmS3EURR+bjoP\n5HWheCxLdDlPWwra4OMpA0Ik8URe/Et6ud0qcXXL0Lm07/S6RrU8Q6wrpOUD\ndR6w\r\n=T1dB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/touch-target":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.03dec929e.0_1588635240904_0.7258651553346529","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/checkbox","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"547af5361e3f8f02b0e58ac952309ab7d673217d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d92d8c93e.0.tgz","fileCount":38,"integrity":"sha512-yI0C0ua5JJn6qezG71cNWJC6uBxIlyqCDv/3s+aE8j/pHYel2IAJw9wWXA33Xi1QzFpjY8+gAmvN6Go3jS8JDg==","signatures":[{"sig":"MEUCIQCuTl/ZblnBe4KJEJncVNaUxxgymt2uvIcO81U+yZwwNgIgBldCCJp/CmZH2W8fIz/YYj5WX7bAXFJzjSY81FG2sek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtfCRA9TVsSAnZWagAA3D4P/1JmD03V8QKVHyNOFVqS\nOM9S5vok6i8iNtXzrnxwlhV8SWBwIQARH75AH1+1SHo1y0ejbfvEG2O3SiEU\nMiYcL/3Ns4vRNDfXO6EVtbrqz9YlDOsULxHM/+0n4G63KD4atOLdY/peoxVI\ny/fW5Nahe7CCpV4t+1Gfwl6+m+FjqM3pqm5PYKNg78gTTY4+3xAHWxMamsOu\nf/8oG9oRFrCOmZmLnoTjR1ICQSu0d93KiNNjxBA9C1tLnP4TadvAFuRKn21F\nImmJTWNXT+ZjGSfDMO3/4ZzNOCwb6EmvsGCO4YA1gjZ66XHr0/ZVWvGIeSlL\nbnDhH1M0x0O8B7DlMEAlTYXgelZ4auHlRjZXXV2rlpu2GsJWeSRsa74+K1km\nbxDUW+hZaXCUqDC/EsTgIqAyilSScleh3VTQDaDEC7+B13rSbrtTB9qW4V4u\neJva5b4tDoKXzR1qFRDQ8PM2lf9YmYPdGxsKxxEG96eciD0k455nomBd/TCM\nCCyhNtEAR2013kl3gJPwOWoKfcZuMsbiZ0jLI/WBWHojrXenj6IN4UwGkV+6\n3mTjwXqjMa8wPk57fNtjOdXZMUSdzQbscMovk9rgtQUQQivgTNN3r45QBezc\nsKg8g8+Vy4tY3zJRuJVfKZi3iNkHHisXMPM8iKeEh9ju69/OFBgJ7YGPybBB\nlftu\r\n=akUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/touch-target":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d92d8c93e.0_1588697950858_0.24822211233924207","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/checkbox","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.09f591967.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb18847d4baef230d702197467adc9bb7311fb12","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.09f591967.0.tgz","fileCount":38,"integrity":"sha512-BLXpQVyeHAnJvB/qOqT+C489/VN6EXnHN6MVh5tF980WWuyHYNwHexAiMPtpGYPnegmCpSNQSRo12HKzr3swsQ==","signatures":[{"sig":"MEQCIALAldGPx9NA4/5pJdpoXSqz/HZiE/aQAZErst6SJ5KpAiBIiPXFc2ZIJ3oJBv1nu+xDEvpUbNSqfqiRzdGHakn1sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTaCRA9TVsSAnZWagAAoIAP/0JQKsWTFJ+rtOCWdJx9\nLTbQOHhXkePk6zixQv3y5IY7uNsUJD3Pejn1ZEWpPtpZeeVfcIJ1o3uE/tpm\nUmsHULEbnGyszJoOZtLuN/oVcinsyyD7jb4nw8BLbe430LhNCdNet65aZq9s\nAaSP6apHe/fMF55afu3zW1b3Vu/hbRUwEF+aobd2eVUrmt/gA3ENxVVZajdv\nsmNgcF7WyOGLpffNTCW7CIvlI35uxzBjyFWUJEjXVZl6nKFMYbC8pN+AdMeY\n+/aRa+5xX/pM5tS8GyXlp4525eqsfLyePAaOKNwGQb/EwbxvETayabY6CUbI\nyz2l7VullG76wnECC8bu6/Hfsd3XXhdld4Wc/JtewThxP+96TgMs7LyKyPlS\nFw77vMDkycFKqM/GM9alOrKsWCkb1gL+1oCX+tQY8hZPQBuUqEE6LD7mF1eK\nbrRhgPhWY5p5fc9WsM1KR6au514+QaxJUB7Du66nyUfEwBbMQR/J9Jd5WyFP\nCrgka1WPtiWgiZH5alGtISEULjuAcrLDZgRttiQ/ylp+MZm2PPXLAWAvUClp\nuR5xf+4ksOoZHVO1IkkPhNskJuBguqkEFjP4JNR0ygzCEnVRqEacPB4zc9Ge\n3KTElqtIMm6qlvF4qoFbwc0x/x/Y0Yh+TuZdl9mzXgOzdm8kJgtO0QEUvqid\nSirs\r\n=EWWP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/touch-target":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.09f591967.0_1588712666176_0.41647513012571147","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/checkbox","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.3846ce311.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc6342eb1cd7978224f6d33414941ba60efaf398","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.3846ce311.0.tgz","fileCount":38,"integrity":"sha512-HW9ReyIJOh6nhKmQYT8lemniUwkt6zsGp+PkT7vxwGgGETdfa/0camuFRbRMAS1a8/lhJmYBmqJ3PPjOZdh4ZA==","signatures":[{"sig":"MEQCIAU3Fo0FPFMAGz9wHdJ3Phu1l1DWArLdJsfsh1OEt64OAiAcrzQDtb4pG9VIW1cKxEUC8EowmNfc/Up09dj5g5PdIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUdCRA9TVsSAnZWagAA1aAP/2RDXBWBeSMur48dvHgb\ngTo+dU/vA+ydFZFaV1yhKBAmou5nXmrwLs0aAQhFlbumSY85QcEPf5ubNE09\njFTi3V600t9NdWWzNYIqdNluKKpZBI5eDzbUdJcotBA6Igbe6EIEODWG3gC7\ncKi8U2TN8I7bk3BLOR/kqOvsV5UvjWdhM5L2kTrFyrm58ae9G11aPCEGOpfw\nNFN7jNTwnFdUqRRXHD24WsjvC+0HwHc1Q/em6G777O2q2I1vrVkf74VUdO9E\nGAqo162rn7DNLLId00lRwsxbM9whSIYeRW3D5jhVy21jXStTZisGp8PXb0cL\nHDCjtnrv7eTCnFUY+xXhSCuY98rLrE0W8Z+4BpAyyKQF8M3L+fjQI3aRroVX\nHgKpdQtCRMsMu0oDfKjwvF6KWm41bgtIyZzWfk56qLTQQUdarfp81NPPt75A\nz/ruv2U6x9sg6IpckBsSz0dLTh2qcpCaSeiv39zri2geKaXnx8p42v3eO1Ov\nIfa6GZnVjZskQw19TWlh0pu+IOPz2jUMGZ9yOO8aV3PCXRTg9e+IhtGTyY46\nCVN8F7joGpgg7z4eJPlZkkorD3Jd3zS3iC5DFU89XfyqJlEwtqydJCANOE4x\nWtcDF4s/L2JLvmYEM/qiuLN96u5+T7tjuRiVhkp6w+Kn5t+H/Knk7gSHMNY2\nJPgB\r\n=7FAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/touch-target":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.3846ce311.0_1588774173439_0.3506643268904692","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/checkbox","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"300a09c686917324021617521d1985ccfe409a3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ed7f32463.0.tgz","fileCount":38,"integrity":"sha512-o073n7VQaWwWVZmncBMltLPGDzfhjAK14tsmSa9j6CElGbzZqjrm4ut20Jjk7bAxeKXEh9NTAqZpgbDc82NUGg==","signatures":[{"sig":"MEQCIDxDHLWGIsWhfA/0azDYyyyPVVe8QcUxnnL6qa3MY5egAiAiDyRQbfGGNuDSR5gKLAuYRmfsPiR9VBD8P++7nZCdlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDcCRA9TVsSAnZWagAAKiQQAIDOcujznH5uXMzQdw6O\n7urhMtoyYVW0v7lEhUksKr4v3z9WpxscMyt3Cw18mki7CTVh16Mcqwi0wG4g\npo6TOCK2LklkFF7XyrdLjfuG9Er45+wTzd3KU2qH4dzGlrwtimYkn+BLgVgu\nonp32q8CJKQolN1jOnLzyt8i304GLV6fVPB1oF1kGC5g4dupg1GqhAWbSmOm\nSJwpLrhcBj2sTmutyFUiQC9UJ/VdhbI/s5aA5KoWcL/OhJX5B9i3d3acubmH\n0fKN9SRmImWnp5rGWzyr3djbHv6XoYvd/vicfbGrgCjtWcDBpp3qcpCcSceG\nfYVlpuh+hzeKc6tZbvaEhvA1se7scL2xkEKnShd1OnD4SodO4DL7IEYg3X+H\n0gN4A6pPMePNUTL00yPF+2vaZ4X6B0RVUc6+GMMxjtnSdzZrVbfJZs0anMWk\ncyMV3vuvaL9KJfZg/3LgmMjqXKqk6tWfRzyFAXDSGLPwMAadCmMFOde0/b22\nlk6FWclfyFo/XjPEhy9ZxwVI4E3NeWByHTYinSnnMzh03wAER1IDDsHuK/6P\n0YT1Azto6zv782VQLRly2GyxahmAKKdMA+aqdGUKJxs46cMcOd4dN/Hy77Xt\nxoN15HZCGjqEMxmuf0F+O3mSRcg5MKmga2QvhWkaVDOY7oVkDDDFzprJmUQ/\nyS2d\r\n=uL1u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/touch-target":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ed7f32463.0_1588781275768_0.9097505708282734","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/checkbox","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8135cc085.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a50c3f6dd97fa0bccb21a7f965e07c5915c635c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8135cc085.0.tgz","fileCount":38,"integrity":"sha512-6cxYsH4UTko0wENtjhFG605XI1Oaec6JJc9uVVes7Cb74rzRH0Muf86rPkRKYExcloSxx8rtlahg7PyS3nYlrA==","signatures":[{"sig":"MEYCIQD1mFis0RX9JdfKpU6jpIaAi0WgIMW4r/Jzi/DTKyov0wIhALa030KTlHVGwR6KsrfCpJJWGqJdAlHBpIRQUBMkFfIf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYfCRA9TVsSAnZWagAAXq4P/0fpVzJrBxI6Ir7oP5Ej\nPBRDfJRngRqm/WYjvXS1vg0AHv2mZ71r7FZC59BjL3kfho9XxoYVbJUCGmnw\nQTLSwkKVPp3GG/q+IW0RE5iXX3e/guCMevDhzsp4FrisNkvGCWBBj6g6rjBj\n42/53H70jLAkpPB5EGGSRJ7yE+IT9h1F/1xLWxM6ZowB7macFoc4ITNcN/k0\nQ0VXuNOzeWIFSNFTxd1IlSN8sROeE2DvXj8EHmcXqitb/D9gOKqOMkLwU5mz\nYaCo9WFi4tHSYagQG0M0++yqLbHtyCz0MsMPo0Cu+A63M0uQQoLbk/gkAR4T\nbmMFqw9bIzZKCFb186nO4pyQqBWkE+fCe6z9Gq4vbniPcNHCSRKnxuVZ9I9V\nYZPs5kOikAZrTvBXt1E2sB4ToYuXD2CTR6FEYlLRtmgTfYZKwfnee1VcXtsZ\nOO8lCb/aNqdb4tkq/36Mkk+IpY2PHvhpdC38yE5BMMD2Qp6gUDEBmjErF405\nOv6eOlugAkgqbez49tqHfVdFRahPslWWHVaYBjvH/4aldY/beCpA2mzC7WQX\n7aMvE7gSM4XeRFOEKNPxMNOgXfddETfNgCAmvq+kXBTcmwmLzMqg+qFmZ1GU\n7u4Vq1n7LRU+Uc0bHe78QyzoTMgEoAxOqx4d+mqdyovG2hu5XXHeqdS9/6FM\nR0w7\r\n=a6qA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/touch-target":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8135cc085.0_1588794910547_0.4525989509143158","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/checkbox","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.deb212de4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f16b25d81c24539a8e4e7f4c2974b048f597f12","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.deb212de4.0.tgz","fileCount":38,"integrity":"sha512-eVHhvLDrYSUtLSeD7jUjSO//R+PNYKZsiFvgoj8Bc329/U067iWbKogQx4x1SIYhEkvrXYGCKkvWykz4IYKCJw==","signatures":[{"sig":"MEUCIQCq6e/PfeRUIV3HlarTNbuD/S24XV3KsyvMxY6F51zwcwIgdhxZJVEdOdfVerg+E3edaQASVydaTJsQG5L3zXw+ERo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfGCRA9TVsSAnZWagAAalQP/jROZd9636DRjfFXlfjP\nJE1ot3m9dQckVnfwSjPeiwBzOrsqyabIPnBarkUx/yQuSMV0BUjIlixxsqLm\nEFm0lhmQYnATjPdXshmwxx61cJm58+O8KXHGjCaV5xTOU1EOC5wi2cUgYO9V\nlhmrto6i+hIkXc9tgtkXVdx/Iqqj7ZxrRzYy9xv98JVpBFrUfqT0sxM6fggT\nGf071nabi+ALpclc2KT0MBwmJX3qW1ihilOXeIUj9bKP1JZy8hewmv2UdcaB\nEmOSZjFiwF9+nWIFjKq4a4OdGMsoq4I4ffQ89r7QcY2apVX+XQzl89MG2GO5\nXYIdsPs68pE0GIW/vQe5FS614ELdF/9g5YE8n7nFvjjwC32NEqcLuSoEvBwd\nzuQau3XA3DurHL/G7ARo5P7hEZKqm9FfmzlrjcDRzn6BCw0IqlIXgl2M1SXr\nB13TdMfyNGSzia0PJmbb5cQttQAHPkDHHPw6/1wPzKt0CRToNZ14S02yZuEu\nuqdfzzG6HiyoTqzFF+dCjD3oJliu42btS1d6doXQ4gtbFICoFzcQfL05pJ3M\ncOkNMcTW+ziRrchLDUzUdLBjGAdMt17ZI8C+LgZESvnr9iAnfjd6hq+Jjb88\nsV23LY13fDzBM9xcKaK/9UNB0mLv27ldk82OeWKT0wGMa59XVcMGAvhFWlt5\ne9fL\r\n=J/1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/touch-target":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.deb212de4.0_1588803525429_0.9615716148585889","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/checkbox","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.f83e00898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca38f1cbf9f3d46b51b191517a432fdebf188d1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.f83e00898.0.tgz","fileCount":38,"integrity":"sha512-ZhyderjSy6LZI1iSQf3PxoYw44GNwgaqolLzYwTc+BxhHeNNn6LQwXJSQNcllqsKtWHdQlI52dQ+B69Bv/EXoA==","signatures":[{"sig":"MEYCIQDFCoM1d0z7XUFDf1ZXo9JQGLb1MeYfKJ0xWWysAcoI0AIhAJYfJjW3kdmOjyP+ZNiowIYyBpmaZe0Wp6G6lm5Y28GB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwaCRA9TVsSAnZWagAA0RwP/R9VOZxcelL6ZhmeCopr\nZL1X1JiXFCdGsLtWMWV1JmsbF4/8KbkdvkPhxmgwK3VyK61vkgqnW1ah5qi+\n2WUOLM47zBej23Au+odzDiYQozUXiHquJ1PzVP/uTXZglOlimHIuuvGB7DEG\nX8VU0HS4zba4qNNM8zXbzJVzLe6L0L2Nooz/guL8HnExTfvTRgnevmC1DNl7\nQBUd71TajQ+pHFSC/eisUe48d4SHlHdNGZ7UdHqdABAVTTc7KYmPEOe/sDUq\nnH2Dqlpheph+WESQCZifGS/22BAbuGbsNd7R8m587EuZu3u6xL8ik3N5vRmx\nj2ZmBSuJ6Knr7vSYQkND1bBTI0ZZn9YfG88T7eXROw7JYmj/r1dvwD93g5O6\nhBoLbjPWEVmL1uwncEggi8vxVq7GGg44QwjalWEFZCqzbW0YY8Eu/KNDV8Wz\n43GWrcZiTzZF5FleXE/O/YpCZFj1YXNT9c48RrB2j8TeD6oKAIBeLN41ubFC\n81vJJXmp+jsaBDkFSY5o8AEmRhOZq5vWuz5z7tIIss2LB8mWHeYPaqsFOw7x\n+lJB10458aGAZjJesbjMVkcEyqE1tRSeVMiPVZeYfyTJXBGrjVIlH/ZsVC8O\nYiEbmkosJrWfqCDJqP1yPmhf8RtF1fiB0Qz1CyDrHqGH0wj09U7BXo0BqLyo\nZ4D4\r\n=d3db\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/touch-target":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.f83e00898.0_1588870170196_0.9215968936546146","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/checkbox","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.047e6b337.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"268870ef1954f9467c0b941469303024879a0edb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.047e6b337.0.tgz","fileCount":38,"integrity":"sha512-Ra3zVhjWLQ6kyBKTN8G5f/reRao27sMciOidV9KmO8OeXCxwawD9fBNde+a1LSFnBq2cbMsRVYrk/FF3L38GgQ==","signatures":[{"sig":"MEUCIQDn2AHHF3O/JJ9peI1M9vVZezXqrTjIzkDSTJ+crUL9AQIgQ9mjMJbimF7tsMTEvR2lcwyi+NrP3C10QP9XWtmeKzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetackCRA9TVsSAnZWagAArvAP/3REMUP6v9upuPb7sOrv\ntLfNa2jReUuCEbNRMrFoYWLaejN2ZnvfXn7GGD7GRUeI6i660sy9PjmwIHYS\nuAg8iPRAM3CW5chYWDtEvfWc8VALOmJRN/oCTUTnhq+L/vmibIu681jlka68\nLau2Nnos77tuogA+nGsks29wHph4oDxIitTeAk3LnZafmtOlTBNSwhdByKuX\nK21nZuBT2U7K2Dl9IlJGNazkxSr3BVvV2IPkfjf+T/L2OktMts2M6ZBgCaTu\nONqIvigiOCh2Pv7OjV8ZMnX6jnZ5i1iItTgrEEcl93TpSQmVakH1U24ENGVi\ndfSca/0BUJ5TC4lRRBOK2GVL2qNltmEZJdfblOELxrDoGNtO98n0j2g1P+Vx\ncGCAVeHZjefce1EeAMvey9OeDgCBIqRqIy2Qw29XfwjJubSTbS5SeKajoCrg\nrgHl0NucHpiH9cDvk0jLijf/laZsDZoOHNMSpO+owQ1RG1MB6s+Z8AYkSZ51\nlbmELNb/YKz0rtuOv8xpo7co8C2QHo4buI6JcvKGmFviYp3vtkCHMc5emB4s\n/ivHsGiFf10hXsm2B06d4Pgn4Id2MMnIwQ7Gwje7v5TFgRuHHqrf3fuOx48r\nBDhaVyekytWfzSXNhTc6qqJQiOlrSaNRwGGdZaSo19js8KXUnZ/A+6Lfepmz\nvlm6\r\n=Omjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/touch-target":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.047e6b337.0_1588963107663_0.1648228035362047","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/checkbox","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.119e21426.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79ba0390719ea74b70cc18da373fb42b3bbfeaa9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.119e21426.0.tgz","fileCount":38,"integrity":"sha512-YnF9y0zuxdUdIXyTE86t108C93qJJe3X8su97tagD8sbGrql+A7FS/ayr4G0oo/9PMkE1HqPxal9X8yvdvn91A==","signatures":[{"sig":"MEQCIAHzS+xwkF56Dx/EGS8S2ElvbYD+GeHpo0I3OJD582QzAiAR9q9hBxIw9vBIJGdb3ul7sHfSUXL/6wDr9uNFuIW4gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+WCRA9TVsSAnZWagAAjG0P/imJGw/wzwiQWEIPbjjj\nwBftUiEDV0RAxXbF0CnOqSEJnoW/Y/kelRdAvEShJ+nFC9UxQ1K5p+TpIX95\n1X1uAEZEFgOVO4NkHZQZbOLxEwkCIkZeGPvx+N3UgGxo0hDau3aSteKE2Q6w\nlI5J1C3JMODHuMDxKtmPdrj/R+Ex83nD5RCH8hf0yiTGBCzeNxp5W/6fXzkN\ncKV7PINEMXMtNvMXQJRxg2QoIRG5D8Es+zr4X4lsSybVSLtEzlwyvbeZVpDa\nsTl75u7Erul6+q+JabSg+5U8kWBPbtyfCfR+sIMybLs6PMQ57RgnJa3UHmG3\nGoJ8W0ov1MqAi8Wgng9mq4JkS91rFRZTeDk0LoZ2mk32VTlzP4xD2o4wpcAP\n1WFgvFAJrwqpM19CBK09er+koJl9hS69bwgnD5xvdPlxMABVLZthR67PPigK\n1Vx3oAQ1PkXy/3SICHYjOZW6px7UovNcSBVPPU8XAbLJrWiEmfzn51AcBvgf\nD8p4KDZTgMRGmZA73318t3K85s3w27gUTEsIEkXpi0Y3+dBd6skceZnieoni\nnsa4HbtY4q6/KZjapAn/GYA8vVkrG4cv2FoDsFJROENvhXsgKoLXQPG25E87\nI1C8eUyblVsIHhpJA+QcJkS5m7A9/8uaMHt2hGDkKDxOJmmccjEOFqUdK4v2\nngyj\r\n=5QGt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/touch-target":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.119e21426.0_1588969366267_0.303387763095043","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/checkbox","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2f052d824.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7206b88cb4c84c6f154104f7f3bfc7ae17d47065","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2f052d824.0.tgz","fileCount":38,"integrity":"sha512-WSdwOnCW36D2329cmKxz+hlGRq0xjNyaLD3ONSj0xTJmr3Rs6iGQTE5chd3LjC1bDM/6uNmrs+yj7ka8hb0ozw==","signatures":[{"sig":"MEUCIGL17zbDy7ovVfi8yhmC8+E98cIC2z6QKFgPx0AhO6uPAiEA8ZXZMJWn1fZmD77LAGNeP85fA/93fmUvomajTP2Tx9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoMCRA9TVsSAnZWagAA83gP/R8x58h5T3OSaF6S4pKK\nmCCF56neZZeHj3ZvpHmV+MY6aQcJLKcV2Y/EwltKfOjWvtrpyNZWVfwhCAzV\nf9MJ7ZCdZZKLoGoDyrs1EsRpKD51DgxU+BcYp1bb5CiU4AplgCDXu/RxuKYi\nNHi2zG2UTcHWwlZh+scPb1xpuIGYUhPznPyza9DJBwnjDglVnyypKsuZe+Xk\nBZrD4fJQLOcXrToOVv6cuSlx49j/3NRaMrxVUGlNR8XNbDu5sOQ2FEvhwkRw\nVrDIFpHDGF7hXqKEFyTUwg5VCVbf1H6vr6z2vgkDYT5SyvCJ2Gv1GlrFthGR\nRVdSSq0fJGjeXbB7gOchjEKylhFCum6eouHvQJccpSCWoBcxU5aLV8OrJB/9\nMKrtnoy8sraIq4nlJjr8z9+3D3dXGswZSPc8jE2Hzvc0vsZvUT1G+JhSBJlO\nMesV6uUUpN9RXbEFbxV25ZVwj1sPN/lB0qsakGUUH6fGwK+bb4KVU8CGNtJQ\noBhxzGZrnpbiFO+9mFWuCkgx/lbMVdGe956pz1CJxxPgUsnxNppSxa5xKVVh\nKS+HeCUVggtFiLxILpUDpwLaoaQzIKdM6r/623QJbmHJnRaCugySp6YehTk1\nP6SyOW7aV813lyw6uhPdDFwmZPuXVENXyl3a6O9DhSz2G/1s59YjrZ4litSe\nN8Cy\r\n=Bdvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/touch-target":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2f052d824.0_1588972044153_0.3247503716309834","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/checkbox","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.e84444387.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ede606ce4ce660719d48b907fb3f1bc0781bc543","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.e84444387.0.tgz","fileCount":38,"integrity":"sha512-tmqckLgAB+Kg0o7gk0tERfl+brmldgLHEUn1NuxaylYpWR6vUdW+e1D5QzjQLEChmWqI4ru0wR9kGxv7wuJUVg==","signatures":[{"sig":"MEUCIGZxLLp+Y/zYwnpnLFwqYLguvXdCzvipXPzQL2ODAfT2AiEA6an8YK00n9R3PnzfKPBXGNsrmEogiq3IiRC3e7eF7fE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+7CRA9TVsSAnZWagAAph0P/0B0jibmZvFM4a5vW7Hk\njaiYj22Eg/4JWjLg2fOIAScczeeYyhcpWUF3kYbeyitM9SEcwAVG0rGbFslT\nA7h1sdmifUpfh9t+vSoxMYh0/i4ilcgkwB45wMnQsq/yar22lH6uFTtJbYNY\ng7PmcSINulLi86PlFPhK2+V9SlUosM4zSjoDzhx5kb5+ADAfFFtD9RTqwP/7\n6Zla8BEh9EkX0Tnu+PKJARVn42I72FI/eOxQDaz6GMP0PeAWV9bIckS5aBxg\nKvF+jWm22dYee7vGR+0bp4mzT7kSnL7sXTJNGnvMwNVnGT3mPiULzzu3pYHg\n9WbG9LzujnL4oRvBOlzP4/mafm0qDXn2QzY3V/p3/ZgQ3Gd82j/QtScP5YAz\nw1uhBaU2QTmnDti3dmMVy5+FIlEcM4N74iPb9RFfK3mJpgmoQqokcJ+XKgE7\nS/DkHJ+eo0zeybBsAMY6KwBnNvTjcoBYjFTRywFVnZtWEAjVhFHDbv9vCwtr\n4PzJlV4BHLMw5xDgPXxQM4nxZSolr27sjv1/oZhK9rPY45YWF+wMiT+GLLTa\n43K2zHT9bhGEFgyA9yUMv6yVuslmOA5cxuTUmhKefaAdZGaCPp+FQ2Wn90DP\n/1YcetKwEoYNu3oGmdDbp1TGplpA1OZE/TEUlmW6vhzRLoASm09KFhlXlDwt\nofbS\r\n=nNTw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/touch-target":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.e84444387.0_1588973498561_0.11039681387742672","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/checkbox","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.893eb1876.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b727453e0c80dcc3b43ed260453b4106cdb7d787","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.893eb1876.0.tgz","fileCount":38,"integrity":"sha512-KYxjNubMZo4ZqEqhWXGUjsYrqBhG8YDuHFYmCg4L3vFf8dqs9As2EO8h9FE5R4kJGYlrGGES6Q0jqU3X7qTyyA==","signatures":[{"sig":"MEQCICVYKkZumoZI1yjxInKn3yiCQQxpjZZW7JBibm+sB/8ZAiBbLPfFVtXrH8T1gl8wS0oXgXHgLdO+BaTB6wmFqjs0mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV14CRA9TVsSAnZWagAAkZYP/1VR/0+lhicmSImRVFRB\nO7rYUWNoe5/wcFOp+FfDx8iI8PraVYVchQ+oOQh4T8GGD8imOjhKVkPSSPgH\n7VKI2+vPSdaI1XGlni0CdNk/9/x3zaljx+b2rFHZCPSnaQPTJmPoCynKy8AU\nGAR5XwY0+s80D9hPwVgHm3n6vaFS9991z6KjeGNKPqjb5uUY4RFv3AaRhAOM\nJNR8nHsNv0RkqAC1pp34Upd9+JD8XkNtE0r8q9Df88V+x8m4Ze1idc52CW1P\nTT3XGV/H7tSYEQSCM7DEBy1fYyPHhbpL6j3LeP69pjHS6nT/csH43kPfSnSB\njNLJpI0F8sNVW9uuPq5RA491mIiXZb5t21d82CSD1mqhtSk0pubU6hbxS3RU\nuKROaii9tG9ZuSy3pmfZPD1Fr600C9tz/BcqzQiUVAN59vi2t8c0NSTuGQBW\nOWkOwNf0i9i5w62HDKyn1fUh5CbthfT/B/r0FM/52OvPS4bOIBOf4WVTwe0z\nO6BVy2FKdBQbUcTD6FbCEpwBFzCHojbC8mS2rjbb18xgvQRmFYo4pM8uUKII\naIe4gtwQkuOPGa73w84MkSxsxyLt5OLZTLlOUI5Z9DbkA5N7D9rbq+Pk7FN/\nYMaatfNU6qsPMbj+/pXKs0bQBwrFVeIaIKhaIXS9WHbF7wPqUBH2XkT73+3g\nUycS\r\n=Jvax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/touch-target":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.893eb1876.0_1589206391808_0.3437130720040298","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/checkbox","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c1b519200b9b8ed435b44628344f248f57aed9a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.a5aeb3001.0.tgz","fileCount":38,"integrity":"sha512-CCXgJStlU9Xp1YcAqu6/rU9LjQIZ1L/xmpTxKtCPu8Wh9DSJ/nmy0Sckcyhy7LGvQ5FTX9Rd3tmoHWIRIPZXUQ==","signatures":[{"sig":"MEUCICAT44WREEI5s9w4CxmfPxKl3XSgiZTCpBFZcQ9RS+Z8AiEAzLcdnRrUUMu+JoXcmjyJuJLlfXlvVXHUtyhIKHA7bqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWE0CRA9TVsSAnZWagAA7l4P/iLRnu07HbiMSxUfDYAO\noJSdXNYujplwt5BsczlTXXq90OupqMurzNemYghBHmpzWFuYGSiZ6738WJrD\n8OJYrOEwkJFFscroIaxwvZwDfSHLVcGsHvFIcgZkRioDvh3WWzPLeuHGOTMH\nIyfHCEWmJwrxN0EfceASEV9tcvh+DaqGrPkfIDMelKi9TP39nyKOSf0KkLqY\nOkDwWsCgIfyV/nBfskIVQeZ94suzQJBtrXEBlUoeA2DZ6+YfVIz59FTQvMjW\nY2xu76/U6HHyJuXomV4M7SAARyuio3GWc5vnDcWKR2UlnmAueVsCEL5wk78X\nr+Fp89h+hKA5mCUw4gAz4SJyUT5SX4VqZgSDcage39M46hR+GOf9eFQa9hBv\nGBQ2lxosGxDoW8ILQfTyMP0aMqwgRR/zWta+X3p/kgtn4LS8YzYaEH0vvNNg\n5qfxCdh+1iAq5KDEwBkS76G48nH9TKH4M6LRTO8bpnqGGL0UA7xUhTAIUXpZ\nmc3w2s4gCxnGAEeshhCl/lRha8mNfH3HOd+KvQarOaqpjPQexZ9a2sh7OggX\nFxoY+nhh2npSic1xFpOxQ/9SqalJPySQpC+jev94BEvREj/m/MiN6JCUSp49\nCQR3lqJ69zYa0Vo51PjOkQPEJH8OgItae8TgWz0LPk8gri3ySebXGhuUStjR\n1Wv2\r\n=3Q5b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/touch-target":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.a5aeb3001.0_1589207347958_0.04220893924765767","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/checkbox","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.610c68d97.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"674cf2f733a279050780fdb83db976dc9cc7c9d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.610c68d97.0.tgz","fileCount":38,"integrity":"sha512-gmNuaC5AXNLrGbqxLC103mTxTvCrO7ZemthViYLoSMsnrtUANjQocZ5DoFEB64K+A6kS69zomsRQ90RwFkynOQ==","signatures":[{"sig":"MEUCIDSIprG+Q+yL2JYd4bun30EoICjnLdYZj3P+99hxH290AiEAz+nDslHRUlUcdRTqQOhfvRyV15Z41LrScvlHK/pIGbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahSCRA9TVsSAnZWagAAT3AP/RNFdINFUy/0qmF8r9c8\nZucCnp5zuDeOpcyl0iW4+auiaP8PGeZ6HDX1TJb2dLvf9VKPN4mQkCXeSdzt\n81PfhC4qOtvpTVC8PjKVWUQWkVoPm1Dwa44sHAKSUGkX4AJMDU8Y9iA66Fho\n39ixD4lJvLs85Zb1HOCxpn2fU4bUw44tfgcxKpwJ2sETO3a5BN+p/4OUpCz1\nzmILjyt4fS718L5TTq6JRO4fUT5zcSgZUyLdYcI7efryk9ISAoK1DwWG96z5\n06x9EhmHmtXfbCQ7Msfwl+pW3gZ6y4DTq5W/XKRR9GveXOgOgAzOSF+DQdbr\nSHH+21ThCeKsq+STl18hXNCz9fu8vMazlni2e5eH+yzsUGEHLTqGrZpTlOzv\n0YmO4kqC8KVUM0mOPLzP8Pn+BYwmCjzZEllV56wonSjKiblxfSY/iW4SvnET\nvINZ2/IIpp4W8c1c8uFuz/rwcbfBhlEXR5NrcmcN44okWrjfjK5+vWEyfCgB\nQ0l0OO/b/xp63Us2Rxt+7UbfdE9xHgAxGUsjRQ5TtVS/tz9uYbfRUbVjPbdO\nemjnnvlp3kgV0ZCv9SSJUNvYOIWhFJERkWqPGwQeAhhiBomUvnDoxN7+lELJ\nkgp46i6kNno68M+cwpIPV63RSXCWcr5DSNUoRdoWQrlAR8/lisp08G2Ii/vw\n6kWs\r\n=Z5X1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/touch-target":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.610c68d97.0_1589225553889_0.8854277278313789","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/checkbox","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ed52af767.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eae00b3571344fa8f5c39777b850eb136f6f306","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ed52af767.0.tgz","fileCount":38,"integrity":"sha512-2xjYuY75OcAp/jVlzi3INB7DtMyKXweirqt5/xKMLqk4J8sb896FzNui8dCMBbiTMzHT9H8meYodmGT5hACuHQ==","signatures":[{"sig":"MEUCIACFht42LOnQY0vPL/Nq8JXUUw/acqdMI6KlSpQrAK6uAiEA+X790JvNzI9i6CZzym/URdi6D8iCZgtPnsMvbwIIdvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUlCRA9TVsSAnZWagAA4YwQAKT4riLlGNLOxoKa/P2B\nTBoERCI6wpZqd8D0+9MDwmCAk6QZGZtf138f9hRg34jik5f/nj6C1/PnD/5D\nSiwUlQQ46mFSnGkHJRtOeUAjXbWNt6grly/ZccAEYAtvcy5LoT5rS6xIVX2h\nPMnuxeHBI7URWewu3UXIo82pxW5oQGmTieQfgezluPcomldIbqnuLn+kWZBe\nqonvuvcQuni76U2EbWbYOoi6l6c6ESSLIyR0GH+K8t5T6teu5LbiDPGgOets\nxeMRpZ6oGakyoVkx1emX0ZlkDhTn6FZZKZ3MuhutaFGDUmv7InmPnFxbC7ay\nAecD60qYHYdjMHJ0ZrbL1U2mhFJ0jypy2n1qTn9cHCDgoxtGCa6dRFouHKVJ\nhubjOx5NI9gyYGb7EsvaTTkHsuOz3pS2rY2Gpb2R1+n16daJhZCRdBXmH2s9\nbaLRH+5EtoFABr0Rn0T6UE+QXW9rYRyrPm5gD58/dgVafUA9qL9jexvuhZmy\n5lxlEU0lftmhJhE2MeTRKnA/6+BmCQf4HpHJ3sIGfqXCjzFjRr7cm8BMkQk6\nebIEbzJ/Mja2w7V4giD2z1bHBxqpOcQHXPyTSdczW2pA6Y0Rspa4e3zH/oz3\nqEKdOrJB2tnSxI1BNoXleL4iUNQxFUxA75IgrgEqbfJhZ3LPZiAVLvjZXagu\nkDnY\r\n=l8k1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/touch-target":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ed52af767.0_1589228836896_0.690414318646418","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/checkbox","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"407cb236a827146d49d575289912453d6cdb4a75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.058cfd23c.0.tgz","fileCount":38,"integrity":"sha512-VHnCCRkeE+Lr1EaPSAkw/1G6Y4zAJ1RgMMa52Y1FovSXroH5gAIQ6lLD6MkXy0oPe3srJWu8oHGzw7yxndhPUg==","signatures":[{"sig":"MEUCIQCZ5wTphnpES0YKgMTFDokhEsF2VFABRwC4PCuUs0LD8QIgV0kqYV4HeBrvCZpY2yRMDKWudz3APbaLwvI4/9A92b4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucK0CRA9TVsSAnZWagAApLcP+wZW4tHboh/ZljANwafc\n7lhUWZLUn29+aNZhgXdF9XqxQG27OnV16FzjfJ6wEPA1GoYMlfnZZMy4DsD1\nZPweugYEaN+3l7igfJOkCMG6v3DKcU5Jk7ffro8QFF2rtSlI/y7EswNU8BdS\nNpBqByEP1EOyg1rs8dxQZF7kNjYUXlEer+6YofqKKafbRgtqkSvhMSY2mjrY\n9arVp0HPb6k5POi22gDyUPalM6KHx0cdrTYn0ul/iO2Ms91qN5kr9EeGlODX\n5fXHfzC5cHkIn8bCenTPML3/SeLq9lLymWRmXw1ar3kF9wUclCVrkSMfWd/z\nlS1ERvI90/Y5vFk2x15AWKNXDm5nTRDVtoDC/7VFTrLeNePCz5pfh3Jn3G73\nVypLl98PG0ayf8W9UxnV45xjnu+BNag4A3hsTUl+8w7CdhF1A9VLNi00KwnH\nkrpi7dHWNtBsc1OL9JQzEQrm9hsMfGE1AzgO0zP59aI6lzumbamGFVcQc3XO\nm2o/uyjb2+aJ1t2ym9J2MJ64y5d4jhzTEffa6CMRGKAHITMNwGtSXkFxbpYo\n8bSZCzjcd97pQCF9cswBK+IUmPmg2d6Vc0QHdbs8ft+IZRneFES+XUCcNI48\nWA2vES2PXaRdH2RVjJQW64zq6sk5X+Ud0wMgImZMNPWEszxX1RZL3rKA5/1+\nkLib\r\n=WNaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/touch-target":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.058cfd23c.0_1589232307673_0.7577565333473173","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/checkbox","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78bcb59fb09577690a82ce1637393d161c23c657","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.0a371b4fe.0.tgz","fileCount":38,"integrity":"sha512-La3+bmoE6lksN+/FknS9VaOXtbQ5Rx52cH3SPS84PU53mxE4eveDSCpc/imTcN9prTDR4PXx9vmwNr5dyDfaZQ==","signatures":[{"sig":"MEUCIGLBKtD5yF5R0iYYgq3m7PKcO+O0UgdOGnYVvtbxGH7WAiEAgZ5xffOD+cd6n5QZTDzk4YkAC4M8wZ0j25Uti3DgYwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6zCRA9TVsSAnZWagAA4xYQAKB7udxydrUbdMw4uBsT\nk6E83VZ7oZErvUTPMpDqFXAcgxRdowciI9igIeKeyTeoyvJMsrwJYuyAa4bW\nNPy7U1D4XvkepRjC790XLVONBtk/lzWhUjf9Xk8JXKZweRqpSlurjWQmNMe8\nOBEmP7y3eDvjgErvYOrf1BZIOIbaqeogWvEPz7D1kcaszpu5YbWeh3Yv/b7o\nyUFa0Zv+dafRwiDUnMJw1+ju9pNW2viFyIQ1TL0mJXWyx0nkWKmlpX09t+n0\nqqWhIsswkOWLR9Ct2IYdPtBrTYYfQgIo0MPq97pSc/LoVppKUe1kCgh6Kgpj\n/mxs/M6fIVk667DA79FOYBZe923lMQ1si5DmyWBIFAnIyy5N9qIngIBQrBIw\nA3Lgd01Kxj54BamCQtohRzXnbmI7LgTmvsiJoSMiwdAARAzG+MUsEQPIkU+z\nyd0bT0WAWwxNehr305rwYbCA99ThkmnsPW137nVuarYVGT4YALepyoYhGtFj\n0ukGOs7btQ4/9nn6QaZRyBgYKRuwtNvZlDsUZYKQNbid3KK26Czey4xEUm68\nV45mIwgeQQ1urGssBhG9P8QLy4b3rXCTNZbmlIajOFeOP/6X5jkP2AyZ9ogm\n6P5ECz2TSudXdj2oLqNR7nzx885Blrneo7TnBHm6ZM/6+1jawAxJ8T+viW1/\n2s/d\r\n=7VB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/touch-target":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.0a371b4fe.0_1589325490614_0.9264114062073341","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/checkbox","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2139200b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69ba268a5971a450c18eb4b916dae2ee7f822e12","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2139200b3.0.tgz","fileCount":38,"integrity":"sha512-TXUiqd8yRkSr761LY5dnhCy+QEuUifznHStgo68KCqQWqyGTTIeHV0wgaiMwRLyH7BiGrDp1/0OttnJRpFTBHg==","signatures":[{"sig":"MEYCIQCS7sT2nMVBeozlKSo005RiN4P+c8DQFTxswNllSjbn7AIhAMNsrJBBE8l3GeI9DCUbEJbfCGEZL1SqtB5dZezv7aaE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAh4CRA9TVsSAnZWagAAsw4P/1oftV0jJk0xVerXsZD6\nPFBhK580sWZnoq2DRkX79XKSIyq4GnUY/MfrBhROGa0B9KUCtnQpBQJDwfuy\nyxjjgLjEqDsALEDNbSVLX5pRNjVh3RhCwAW3H7UgN+rUTcRVqij7hAYybXVl\nXKxcicvA6EWkL/MrJm8X6AC8v68tWC0qVek5envI36WeVXjU54XASjeRkYQb\nG4D3mWflbXNP9Xs7ADE3Ou9kXOHwHsRvlSryMukOAYiWXNbVVJqmLiGZ5IDV\nfo7+1g5vl4gKHsfqHRGidpYKd55c77UPTDuEJMsCGEjo8ZZcqfOjKHxnkf8a\nsVFPc3HWtCJ/yBVupiho5S4NyFnuGf+Or3/+hELFaoyMRVCOMq3ZafVK6qF5\nQoHg6tRUxPRJc3wHAz8Ejz0fxEKKfuTQyqXh4R5Z7GA/iB8Z5L45l76QxdTo\n5kt7gL6Juf9hu+n+FmniNfTB4waoJYIHkJUlIJ5bBai+FKOKB/DFxr8+0jyB\nPXSq8sPUhk3LSTtNhFrfwP5mhNqjGNuiuz3of2xchwDjxQKT1xh4xitNxi+7\nXshmbuh72Ru48qMEqXJGINNTVxtZR4RvXyqzpmsdhJAsceygXoGaCdw94ayx\neBGm/xqbkZnIJELDp1yC+uWbjjyp2UmEweCzTjX43kNghZceRmxk6fJFTVIO\nrtT+\r\n=i3Rj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/touch-target":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2139200b3.0_1589381240284_0.9239501006204349","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/checkbox","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.744d751a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72b92f321d339fda7da661915d4a43850768e081","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.744d751a0.0.tgz","fileCount":38,"integrity":"sha512-WFuR2lDcG4FdfrDsbW9Ro+54VATRo4XNZigHaAFmmst+SlHe+wDn4s/kpVWu2PtCOtWuNQqgvaa8AMA3+UQ6kQ==","signatures":[{"sig":"MEQCIE+lSjbNQJ33l6i3hE5wuMKbNIJk2uUdnu0DqC6/io0qAiB7zBE94dXSrPAOkeUT9cVbpG033i8SYuAEPqwRUYHolA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxJCRA9TVsSAnZWagAA044P/iUap5P2BzwCP6K1mb5s\nKPB/AI7V63nHpWQV9sr0cPmm4PKr/osAU87omq65D/dk9y2YKLGCAd4Ocu4W\nzngTF3Znc61HEDs4EHAnCGN/5egBLw3sA6sqWaZJGCfomEkA7CjPMNrsSxIa\nysR730GFpFCNxqOK8X8qvkZbXEUZJGSfMyt8pSBTywLOggnjPcS0DhXnJ6B9\n33lWkW64zn6pVxT9j8LH2+IfxWrSwuROxH243+m9LAOntVOUbJ1+4aHxQAQY\n8ZW5XLbNLnGEtfXx1wwgRXpLw3HNBI6v1ZWKQvtU3PFibmFYEkNR7vuX5sN4\nra5+jUKDMbtwEieC2B/A4+Zrv7mqbKjySLAtjfCHr+iZy+cOqz2RqNgtXWwg\nG4KuLdcPb7WJCooY+7jd0wTqLp7bSexa5ca8hSE2HjWTZALJoiRJ6OVp6z76\nlX8F3Y7kkVc/Y092g+HX6CIhzbkyQdWVfpdPvSjwjrkVwOz1xS8Q3wyfaXmH\n3CUUQXd5DsdczbKAAlwTXsT37Csuh4Hrj9aBdDzeAXgUxRY6U+XMKQ0Kn9Zh\nDv6NFJK/8YmOB51IaCZb1c3Brk2ZElHRwPUd+3+DmaPj5JdtoPsOGaOfCAYg\n5LZ1ZIfLYHi4VnL6rRVcxEfb5oHPjRpV9QgEVQZGbG9V/UJNelspcDZ3yinN\ndDmV\r\n=eliO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/touch-target":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.744d751a0.0_1589431369402_0.3503608826400011","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/checkbox","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a739ad7f4fcd957ba0ca3bb7d4bcaa544670cde","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ad0c0c103.0.tgz","fileCount":38,"integrity":"sha512-8LLxIs6SmZ9hqWyml0RpxVaCpO7DWYCg6ngF2uP8nCX6PkPQ82do9NlHSit7dDgdz7lsEbO4ANILmAd6pc8Xcg==","signatures":[{"sig":"MEYCIQDbBp6FN+biQS2Y3a6Z6JTYCQpCD+tP9VSE2oabjKC1KQIhAJ2j0BIRIjvb4xXQO/SQ3rSKU475ZHKtvhuggURCNoiK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVryCRA9TVsSAnZWagAA+KEP/2NNr2ZE0wkxqSfWd6Lx\n0NPmXvr5pvfijiEY+OSZM/zvjSODDfztTmQkOElIjCliBkODisWXqaPdywXe\nUzvzgmgrmb+j2nZaSuof/KI/Iju5uxFtaOgJyfAfBT/QfNqAYE0jkgCGDIJq\n3T40MyovCjSDcGA7tlNg6APWJD0OBkeeGi9kFS9E2juD3TYrUWxBJXhiAQMz\nEkEreoZxlFmJQnNUZ3SwnDRFITvEaHVWFzlR5ykKSHi5nMUtF7vKGlLohC18\n2+nV8A1ofODckSCPGXLtx2su7+D9OMVZkPIRQIBEzWGesRJzpqNtuXw84eSo\nbW7gEkVhcTXY+6+D802qaH3gv0Gd06dfubWav6MVnMp6ubYgq18KRf0al8zx\n+nvssUvIHBZoiDUGIr9bUuPZn/pt/pQRcSTMHYEs1nZQZZlZ8wMhBKYXiMzW\nFjRS1zqVEHishNWOVIQF3itc1IldGtR8PNRsGTKa4HsyPCnHKitVpjE2969s\naEiAo37oxrhdBIzffmjOIdEEqe7ZYHDPGCZQL+aW1sKJKjGpNeWk+k4beCn+\nc4czNZ/463HW7524bmpaiB/ShdwR9dplEzPxOEsjOFnnbKdDDybirTx9SA5Y\n5/hYNKY209PGkxpS+eVH1tS4T4RYZaqsJZ8tSFuLRQ0AlHliIG+Q86KGFlbO\ntiDe\r\n=sium\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/touch-target":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ad0c0c103.0_1589467890134_0.06885144986590164","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/checkbox","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c08b374b9ffee7d89be8e335df5e9c5078df52b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":38,"integrity":"sha512-/lOT+idkoHLcTiE4uAnEVR8vc8MrgPKhcs9PyKj2g4cbTfFV/0YE694tn2BOtB7Emuti6btc6tPQo+L4qmsLkw==","signatures":[{"sig":"MEQCIAEcG0mC0w5WxeaorCldpkjhVkFhCJWK1Ie8zjzIefm/AiB5IDQIzmJFWMWgMMzLuKBup8ldEXZtSVuswLWCUY7SAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsukCRA9TVsSAnZWagAA7RgP/3LuCMGETq0hqvmE5Da/\n4NAByXKpbh8jTl/oWHlfOFn9tBEAv50SW+lNv9UccScGf02I8lIO0B4Z/fST\nBGiqEy7bB6nnVvbJL/taoy45/W+iT3Uhn+q92zyCwGuUZmo1cXg11tyXCG/I\nkgxRQsW3woaul8Wn23+r++W059JKqy7s2AxSCtVy4cHMHwFLgnCpf9ugVzLx\ngdsMKf5lxOLHqCxkCVGy0m4EdXRlMW56U0ozWnKOvU3EvGdmPWxrKsG1xus8\n2ulxcd4/z5EPj871Jdzi6wAKm+nooO93oitgO5AOXH7AnRjDkueXXnlYzV3M\nBdDkFPhVbuQQN0JcHQFpu94djDBpNDbBxAM7SvljEvSquEIOa05lHJ9cBrpf\nxc/WPTnzdrW3AuHMbtxJsj3dfvtvXEROs9rlv/LQBC1o6iYZvinDW0PshLK6\nS8z26WRqI6hBaTpObAV+9eUkH/8f5UZMuF1HCmNWBUwzqH38Zm73UWPiDr9h\n7jHcXde3N9naHy2Go6ONW/+0k25Lq8WpUHI5SMF5z9723m7XPAfTZtP3/woQ\nj+i2wwfsGQvSU+E72lbjVlAsqrwERUWSuYRy3hXLVsUlEkEMJKkjAyXGQ0LV\n8zRxruuJQV565sKfIStLGtz0ibx2L91gDTh5H1TCGtp/tu3z/dD2yLdtrCvS\nGvp1\r\n=WlDR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/touch-target":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.fd8f8f2b7.0_1589824419667_0.2614737355956127","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/checkbox","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.730920fbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb9d53fcc19b8e77037561f313bb6258a5fe4d2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.730920fbb.0.tgz","fileCount":38,"integrity":"sha512-pYXvj7B9G8TulMcb9ClekylUZcz6z0icmXNfBMq9XjBWvF12gqIa9jdZxfZ55kqBi2aUF2Ow36Dbb74zP8AaHQ==","signatures":[{"sig":"MEUCIBLKHKtrrY5Kp7tL9ldddVFu/nOGoPg/JWnQwxveIgmQAiEAiFQpBpK4GZ6HD27YFZ9Xgg/4xSFfGSXwSZSJZDSJGuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWICRA9TVsSAnZWagAANoYQAJhbuYITmYMGxag5Eq0d\n7UYUfm87E+KHRprWSUCglqFlL/FVOZubJrWYcg00xkvzAQoZS49udZOVC7oM\nSAq0dGCyZMI6wsWiAiU+PazJzHpgkoXFdVk/SWZGgt+WWkhHKOxGNijLpBfJ\nQ2xFwUuRdUQrjDaa/mqBBO2iOBrwxIsJwW+7GguSKvnfFIG14letD7k2/j3y\nCYWZ3Pz2ZCqlnxhVVGB7tYuGuozJZfvJysQrBrwWFJ7QCSz3d7E7ujH6EY/7\nn/jT1N/l4Pnj05KeYT560Us6voOnLr8+AXtiU8lZqP9z4rHcwfdkg3osQ6ME\ngc4/o85dZt7A17ralUyN+h3WrLzVlpn2Cnw+tOGyOnfE3LlyRr2YrMX+AxtC\nK9plcZkVmCreDX2yGVWrld9k/Kul5kfTf7hVvzHTcm79km+RCLPpEY4TbzjS\nlQwakd3TKcQkQv2Jek5kxJEjw570apySTu4JCa2dovYp0lCQFe1ooDw45Ii8\nVhc5KoPeSm2HMacO5YqTGac3ZfFPLNLjXx8TdZXpwFONrJkLd86pIZwkLTwd\nxM84FANm/P35cf7UtINQ7AvHTR7b8GhBR3d1WE0BA4nPBIRb6tceuxiGutX8\nLyaurdt5gtvN+DfVoBJYWkpd25d6v4FNPC7xn89nUbIcvr/jXASx6fEVj4U0\nFJ2J\r\n=kBDv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/touch-target":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.730920fbb.0_1589831047737_0.11299830417857892","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/checkbox","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35fc66aff1728b641e29153ee3504a4a5938ba46","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.bcdad99bb.0.tgz","fileCount":38,"integrity":"sha512-g6/djkSt0HXy16gY6oxh/TqVOwex9OHf39YdNad/qz0Lgk4TxnKy0taz+GdzArrAIgWn9ZizofqXkUlLDcvyrA==","signatures":[{"sig":"MEUCIQDrjmz2ILK6LJRLeW6av6/aRcimVJceM0dVUy9Nrv9LNAIgJYR1vUy1vq1PMZ4KkGUTbuIkqETSHgO0CJlSkWP6Sxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/rCRA9TVsSAnZWagAAye8QAIKNe4NxREr8Avb81PnT\nNu7ImBmqXbTElpxPxTf72zHax4E/gEdHgVet8xiRDf2vzBpgb6YG5kuF8leP\n3LH/RPA9l+Lb7sUrRf7OfBCwfFipFgNNCxEFULCkrrRqIyOdi/ybuw6VdZm5\n0F43RIALLY+gDieQ35kLyk+MIr4ZYn1m3dZubNnzj9FhMBB6186wzvw6tUjl\n6mFat147KoKeWkKGIWOUSh8Mkid7f/eGR0aDrATnqgzkKuP1Onx/oQx3gyHv\nh3b5HM5PKaFG/MXAVL1gqz4YwFVc6WL4Mz015LIJQxdhUWXfupUTIuPgjqMZ\nHXhCfNrVsyvDx8EFiNETeKOjDRne+0bFaEQcFk76WuqdyqU+c/yvZwreR4k7\nxV6htqLXKSjYPLKIQyWybOjhGdX/6/+J/PTt6tGwO+AP9OutHRG/Cka4gEhG\nzd7mlUrvgEJJ1RBiAZVhyiqsTUTWgm7E8lW67bo0KZJEabX7SY9mq8+nKmtM\nBArO4/DaihhAoILhR+x6eMJ1K2evJ68ksazlEXUnC2z48K33EVs95cfoxtXt\nPb3SCT4K/BX94KfNG43SBXv2z3+6T0Bg7Kl4QNPReR/QCiey+QlEr95ldhvK\nfXHZqdi0mmMkZgtE7a/4E6+njo7YNoavyKyPaFm9ZmiVcPfhj85km3ApsK0D\nmgpT\r\n=4Veg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/touch-target":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.bcdad99bb.0_1589858283491_0.18330388052094104","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/checkbox","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f25dc57c555bc82a5cfe1edb612b4b76d174b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.4497b86ed.0.tgz","fileCount":38,"integrity":"sha512-uwbzGSJedcRtL2m9Efj4Cr/C1AAOzCBQ/uksFN0ceQ/JtNKLntVVTU3Ke10wAH4e00n78WXrvzWAV2OxvFc6Og==","signatures":[{"sig":"MEUCIQCnWgrv49PS+S94vV2irqZErMPjqUDZBlhuMml18UtIewIgBbA5IiJPrdKDfW8G2GQsBusAE5JVGvo+EiG7l5wmXLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eYCRA9TVsSAnZWagAAbjMP/2E939671HJZd5qFVf/Y\ne2VVm/wZ4zqWNsSL4kgvipnkTIvETJQgjiNv+SXXKZ1o5fzVuu+4E7p5ih5+\nIwiUY/auh8Iq31iHrK7GaTQy5c/dXTvNr1KsFsUGTAXMnawICrKxB1L/grMd\nNAIEYEMVlLx6TLP6sE0U/GK5V04f7njHUEklKGIUia8jsSerNOPqNX3VoO2y\nZ+oumhyqSVSuDFaRiau/APIdN/JUgdvZpnbJ8iglY3ZM+qs8vCXlmlaH/Pvy\nJR+etzN5pj+oCirQSNgHpeZGz66zg/xIxjsms+3wPeduWh7B6Th6pEWry32E\nqBKUUS7WZCrUn+RAW04TewX5LYMjxC6a6xnb+wC5avui58p5vSZxdIRk/0UN\nwg+iD+04cHfx4QAPWu2rfAfm3Kf4k53g4hjeZXicluTI4JCCrPEtbp7MxGas\nR374qNh6OZ/epD8/A7XFj+Ji0F59wetbEswDBlE+gGSU3Up42a4oXOAT8jix\n+iFexhONNWtXsG5ZueiBBOzrK8wmU+8Tp9E7OjR870FvR9LHn1Lef1HXLOhh\nl6IyHdBjhAz4nhTCCUsV4K9uCVcXFZnbImU7NxjVVhRPbXG3Yc9B6fJYZgWW\nVLhvENrDFDvxnbxHoipBYISnX172w0D84TWmwtr/3zQ/xIGqmJPP3teFpLP0\n58Rz\r\n=zZA1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/touch-target":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.4497b86ed.0_1589860248260_0.3316551235986589","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/checkbox","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2e60575da.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddc66fd46376c500971ba653eec64df613e3ae77","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2e60575da.0.tgz","fileCount":38,"integrity":"sha512-aZslR+2Rydsqlk8Yin30U9+Jsl3RAsvgwT36Tl0qttJkQDJnXLjKtOFjEO5l0Giu73KtNisf6LWelPjkcXfCFg==","signatures":[{"sig":"MEUCIQD3eEG0pcDeVUlecfiRkJ8zznekDzLB2Gg61+WnvidJrgIgXvsEa1mcFaKx5b0gHviSGdObEhpK/EY9Ba/PUvXlnzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASyCRA9TVsSAnZWagAAT0kQAJKee2G0WoIil1W2Xown\nwmryZ2F7SN+5U1SBWvHcGV/LHiQ7G9Bp/lBG46P8IRi9HVs2LcI/SEEqgFbH\nuRc38hAA9p+cUvhhSOEtzwUsPO4v7R0UgeE+LdaF5RVNb6kEtYVg40u18FOP\n5GDaFEVP1Qr3yDhRhd967QbHouYIdafQS2yAoNvKWp2LcLUt34u/okghwkvO\nnydJAyuryRh7AjfvztpptFJh1aplQm8nnAO9mdlAvIc8gtCFBnAjIynNWrF1\nYyt0kWdEH4Bd6HRtvSARB/yECa/FU1EwLKKeZ1HB00LR2/x12bpS35dgVZ9x\nHzWMOK/UJb5if3DxRqeYxCOuMNgVrdPKif0X0cSSJrFsqBw8ivj9kS1zDdzf\n97aSKDEzQV/ySV2vzscLs1Pr3fJBd2TxF4cT0kzyzZjqfGZ6xon2g+oTv2+Y\nHcHb031FwY1A1LNHKWjskyQjAuEXF1P3wd0Z1IOdJ4YhDnC41s/nVm1QUKMA\nqu14BEMrTewGsBxPAubc8vSW3FfKTvenMh0HN8zaG0M9XMECwNWM4fIsneMW\nu5ncuq1P3b0k1+yDEB3NJZ+8rAqbbQ3c80ej4HbfrTpnKBaFEKgWXIg3M6QG\nmKVYg6Ph8i7pp7f6wmRoQG3okCuFIulI1T9bwKz+t3rQge4BtyofsN93jCcl\nH9+K\r\n=nZS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/touch-target":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2e60575da.0_1589904561712_0.8942074739520072","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/checkbox","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef953d5344b5bf9437f81b0d3efbba5af49f92e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.e3eacefcc.0.tgz","fileCount":38,"integrity":"sha512-1ubxsP+/rQISusiclyuPw7EDdC4cZ9l5cE4EJmEsNfk9Kdd2+N5kxRrBZ+jTEc8wZytdnsKiwHryx+2GiFqRgg==","signatures":[{"sig":"MEQCIBQn2xc2eTb3RTBRDc89C+9ccLZVJx6g60UNDiPxTWduAiBaNXU8/ucyQ5MoWFfOftEzwHmrAlcTpoCc8aRwZJh27A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmDCRA9TVsSAnZWagAAZVMP/jpjiWmKclnBu70TPOez\nJgiSgJ6Xjtue98+sm9s4Qv1CJq/kVcQ+5C+vWmHArIQedoSZDroQao4ExVlA\nMUbytAMOIN1dVj3eEuYUIIqHfwpAtrFpuAHBOZpjfnuiLTkiHtnQ1uG3H8tw\nje3FpxjI5ZD0e0zdMdSmBKnnCIGKcgpwyJZBZIUMAZfx8+nU3cv1GGv1zQMK\njZgKJZ1Z4HGauVCnMFTUWbfODQzQLmkIfYxnk4BisMjFRYjasY2YvX38Bqw9\nUHTpqZa0rByshNXQdPCh6F2KcBjEwSQo+Xtyqglgu0fPI7Z8rdIlAK3knR7q\nUV4KMSA7XvjHb9r+/QM6LjkvmSBlGUX7PBL7DI4nPz74G3cCKC5/bES/eA/x\nvDgBTajmUu/LEayHhrhv9cm6xnTi2HYGAuvPa0y32g9MYln21vjn3bxsgKwo\n4N30hS9mT+5CL7rZZcHe/bsxY0SMdArJxkQ/be2o59aiAYSSFVrdwDBQ+/Sl\nSEGwftlLwoTxZakOUl873txs/U91RlKqECQahbeXebkKTEpPrd2OfzekNE0L\nmMo2piUhVnis8dCUoj/kVC4U61spMgIILpT2I4qkq+IaeMNPNOEExTbsSv4g\nUawRXGTdke33PTEc1OTr1Rw8iiN/s/A7LgMci5bqgmOaoOMxhkWgolwF2QDC\nBE0o\r\n=GN0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/touch-target":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.e3eacefcc.0_1589909891160_0.7196600476752735","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/checkbox","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd5956adb6443252d53041f253a352e8d878d206","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b065a4d2b.0.tgz","fileCount":38,"integrity":"sha512-f+szXDG1tdr/lbQVoL4805b7hB+MOrd6HDvuuNxjYWw9tyxmdQdhBCUkXOa81bskYGGn79Tys0qruqLTriscag==","signatures":[{"sig":"MEQCIGb/3GciL3cb2uPD0MWd4MPA92iajQrbO+sCiBiR3Y6ZAiAhjx3jU6mW3qazWng0cUfTyAFUor/PxyWr2XQSJvDM5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBxCRA9TVsSAnZWagAAMUoP/2C7GvIakPg74lQpYaw7\n1TtWfCpUTwxi0sBvnU9HfdAyEuQJQYvFbZ1ViWCFUzdUPlp4OkKYJk8Lfzvn\n7wkaVl8alNld9uv2sS/2ahxXM67QqFc4r/OhhsdlogJcVcWnHCwBcWBTjgeJ\nMqQH1DmQucSNIp6+PaVxkfbWV3ZZOORtORHUXkLbi6+G0UPQMl1Zs9N0FZ7A\nP2kWJOixPybHFjdcx1iHfFArKYBeDr81HA8Xl4TMpG+PZId7qlMRpQS3ngOk\ny8OgnncVOqg4cngPL0CWU5IvfsBWVblLhm8voGFk8hX/EMTerll3d2v1blj7\nIYHFysebR3iZ7IffEYjrm48Cv6ZDAn0cKgnIeFEV3Cz9WmwoWYcoiv51onNL\nIEzQxIF8OE/nsz4rxDwuz+vUMu1x06vKsXVjPMK3/FQ/NbCnPyiQCQY02snK\n6Q6ZaFLCEKnuthBq7NmDEsITjlpliNgxuMt6NiK15rTNwmh56sJ7ovN7vVpL\n6QDBXRqKJa9eV0zoUcsGjlPyNrYKonTkFtUevmAqCkT0gU+APn51r/N1/QnS\nxtvS0dvpKGtE6lSfk1YdlH0GU9bYoZa3ixgUBKP5Cv8AwIP6mt2YDkEtnyWp\naVGc+7HBT8hgjIHfOTGQIwvMCpn7nF9pYZeOFT7Xm/6u4AZ7lcIxTy4GEzC4\n5Pzy\r\n=8C0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/touch-target":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b065a4d2b.0_1589985393185_0.7406829458773527","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/checkbox","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af3862df0b1c682b6de75c96202bcbef091b8ba0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.4ebce8d78.0.tgz","fileCount":38,"integrity":"sha512-p1rRBMceZ3TiSVWAQvtynXpEyfP5ygIFm410uwDCMIi3puQ6Dc8IvmiwfYL7W9EykMwv32jSp1rN4/xAIw1q3w==","signatures":[{"sig":"MEUCICGEn65Y0jFAcfLT9d6jT4IKA+aFAOzeiMKTuIJXFYoGAiEA9+n5YSeL8pA9dUZfl0dcf+buqjjLTxdrXg959EvNAFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgbCRA9TVsSAnZWagAAIuQP/ih/aX1VJ/aC4QplBIvc\nkK9rocXaOztxNjq1tAwFgqJgeNMIdbKPVJFPRqI03pX/dDujDFEI1sspfWq/\nuypATU+EfwFP9nrn2F9LCDmKfdysxF7aiHKzjFWEzM3osBfKes4ptKyerXfc\ngDwlXqBY54uTKcPxvehjVbEhCmaN/xBIuNN4921WXVgoGOUFtY7Fm9ahhP1D\nG+azn3T0KuSbOLidC5J8EzJcWFgWTmtXd24nhzuRII8G5LhXt3O59tvSaZto\nHfBXdaD2Kb9T9CcCCk05uvq+IQCM59moEflxoGsWOAs4xrvWAi/aoSD8HJGt\n51yBWeHByCLvndZOkljqB2L/sk3YuNXISdRqXZM/z2Ag/ECq5g0tQujPMVAB\nGjuY74dUffTpl2glkeHIp5KKP2fPMYRNGBR905Pskthm16rhhAQIxoZDZUmm\nXRgoWepwVlPLP+DZzRTD3ObnctjDlktRKYn6SkkWtIrGUDRGG1tvRa21UGx7\nv2kSd68w2l+nFFTXFdIZvr39JR3zjFMANyncpimid2mGfKdF7mrKJwy4trpv\nY37dhPqoR1HvxCcq8ko1ANqIg1YmYq4FgnMXA0Uqzfm9rXU7NiYBDOUPjqDv\njqX6GmwVschpD9tQlnnbVbNlMcuYLjONhdb04pHSd3qIqKVDY/ZnPIReKpog\nAr46\r\n=gCR6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/touch-target":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.4ebce8d78.0_1590007835463_0.6307330449675905","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/checkbox","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31421c1cdd0258086e3dbefdac1cdfd4cf012997","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b0fdca492.0.tgz","fileCount":38,"integrity":"sha512-gnOfxqGRlI75pRQ082q2Gb/IUsbBVndV0bDdAxoOpUJHmjkReiK6QE365gA0mQmZiBRNo+ZaBBIyzGl6hvcdaA==","signatures":[{"sig":"MEYCIQCHNzR2yaDZmLmOAetQ3IlrsEzIXQeFZpAncZCW4KIylQIhALKkvyKtEloi5BFc7avYgcX4AvnBaLoWtVaxG4vt+Cpd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbccCRA9TVsSAnZWagAAHKQP/RhT3hR+UPShda+X6tqN\nM6c7xVDx4Vb+tvg2s1n0vDNhu+/6aB+eVByYUunleaYbUdY5QpUdhOamq+Mu\nAJwbAxDZjDQCWjAZjiuxbaev410mjFdnFf+sF8bOONvjMMyymE+9I1YetwNV\n7EJjeJArWYf00a8e65pkvWOe1tynQ2JRTOkjekDd+UGWTYvr5ru2INaiNq2Q\nTk6R3EPW8sPyvLMeD0BM766nvm7qyqX/L1phwKHetn5ID201P0O+08YE0TXp\nYWrjrpSQBFjq8yEA10HuPgiMMlgyAT7OnQMldKdfOm9zOCrGYn6rleke6Uwh\ndCHK1OHiex/qVbK07Qruev3KqR7f6UimtMZadI79LAK9tyKue/8fXklauVvE\npwfp09pfxa+NmFgLPw/QpyiPrIoZWw9fuBOXe0dkOX2A/Eai3zXwTIhPXav0\nHR5cUEtGR7qDm8kFPXhMdQV9APh2+7f22avvPFQLAt7XHzZIs5LA0nllY4F5\nfrywrSZA3vbWWFE3qZVhjlalLvqpsdCEnGI8E3ybLKujHN+QTdWGqrs96JN0\nlRAY6R6ou7xELDz+XBGaETghZoj3ZGujhdpM6zJoD36VpDSM+dhaZbRm3Xmc\n9A7WB6KlanpGZXvIlJKpW02fuvkxuvsy1Y11NwpOtC0BsQ38K9IO+W/nX8RB\nVwlD\r\n=eb8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/touch-target":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b0fdca492.0_1590015771733_0.5678366814155231","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/checkbox","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25bfaa1654e47fcbf23a9e3fc5c00c1e8d1a2f60","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.c67667e8e.0.tgz","fileCount":38,"integrity":"sha512-yYqcHFBE62CcF/8IWfKFgEHOjDEY79Rp/MqNnLyseDgGeeMbVpQAFuKijtUmjRfmueVTilZC5llwZV40D353hQ==","signatures":[{"sig":"MEYCIQD5HDpMoEHwqOWLr8vMDIQUB7V5G04INEeuTGzxc2286QIhAOZ+10ErQ7bql0jUE5aTN+HjvXGjdTEcJMlQyImG3CP8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxiCRA9TVsSAnZWagAAd6wP/jd5EiG/rTV2UlKzNIZW\nvZN9Dey2D/OL1AOfvLgIoReqb0IV1BTLP3ckKyaQ9R/JnOYXLnu1WNoGd4UI\nVfgm4nACmKltU77MFOrg6JEvWiut0DXgjGcUctCvVj0FIyBUsJniFEduub0Q\nVEw9nFJq2aJYR9f38usF6hm/17Ov4AMQWIl4MSNgJY5MYHP0KR1XflP3fAj3\nJJOFVB296o7cD0BpyhEsbQba4bfZtjpUXOn91et9NpE1S1sJ/3khi5meJyri\neGpK4K/NQuRMP84CHtEYj21tlE2lZ453CMFvYx8zkPa5TQtK/IvGewpEC5dP\nlfk4kNXULoMEP/t6PUzy8lOwtd9RoUMBuEfFjCR2YS2ajdi0vOx56AOK69yz\nSIpk+G7sZ4nB4skOfvAkILgMqbiBPbnz0ENbpNSb2W3RNnexq3dzS045krVo\ngDxC1fM99YSvl5wWup0iVOr51NKV8ry/JF651GFI/DX/wR5YPxJGkue2dTX1\nEPphiUhvVq1NWt3RpHfYd09B126BpEOyhbZv09hUHntfUHlRnGHPuGZuQa9o\n/7RUz/dCczarX190H709l4mr3hBESNoTO+tU8nVPu/4TefoJw+QWoYf2bpGP\nKDjlWGai1u9nnXS251+XYVV6bbWDPKM3/WcxDeKg4JEu/NzHZTPUm/49Oili\nEPMd\r\n=34UL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/touch-target":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.c67667e8e.0_1590070370133_0.6922949256699578","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/checkbox","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94aafe050b3f7638c7f3ac957d24d9d0cb44678a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.62b5f37db.0.tgz","fileCount":38,"integrity":"sha512-BCeX8MZxkRLoa1XhSY2D5ucj/VpxrJ3U1ZMik8EvYpWU7e977dmwjKgv4IqK2FTuF6ducOzpgPti6dgyzcb+tw==","signatures":[{"sig":"MEYCIQC0jIUi4te5iMvAqDA+xqPDBhKVX2vv0O30O0NTels0VgIhAL+43vnHgnVsLTAMju3tYwLfz8PyDb/b864j46PcT+ad","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8qCRA9TVsSAnZWagAARjcP/1YAVIC70sWFNoOBaW69\nnIQQQo7Ck1s3sVSRrUVQom5dGxRfpqccvgQRQOVtTEhJAb/g2h7EKThqTjy7\n7m2p0y/EUyFQx57LTflaLG+t52YmNWc4J7bxH8RpHEzmUPBO+fxhBylrYTMQ\nC5L9y9ZzzaPzac4pNngXY8tGBna+A45khshfMNPPhvx2aQIvX3tmjtq9XBUR\nLywZKiSUpHFlbQ/jUneteNqeDXvANac0BN277bE4ThuqutwnjrjypX7nmKWq\ny3fub4xuAJnWpEBxOHbzB/ZxpEQ4jJpimyYQUIxeCekaI8dkpPaEb7bmeqN7\n39hmAd39ihKM6XS8wV7XX4119vE5tmYf9cjms9nz9Q3dVj7PVyK5yaBu9EKY\nOG0iT8fP0hLqwVJNaxzcSGfcd6R+KhNcJhKDdjP5RSO5gJmmx6wDJHyWwQNt\nMOoLM7PXzbLniSG7rAHFQSMM/welj0amTNxkZv2vYLUXAph68FnDs2wqhCGy\ncKhgq9UOOQfOxIojiwwviZInIY211QeHcO4qXNYynQc0yFjExgqMzglMQ8XC\neprgUE5quL+biLlidyz9hIzxOV667jiWyUuL/b1O0eBhVaydgi0jt1K0ndQl\nCC4xOAhvhOj1dyb25TMf3mtfpWOX/9CN/0vuUPxhAa4IrU3c2Gny7X7zPqqW\nDKKT\r\n=HFgw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/touch-target":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.62b5f37db.0_1590079274335_0.45548689521724217","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/checkbox","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d6db191c9592d4d2c0ea1c7604a7016a377fa9e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2e218dbf8.0.tgz","fileCount":38,"integrity":"sha512-2i8rimeaA3QP6sSba0gzI3Yl6ov1SWErqVlqHc+3p84IXskRtXssj/rfggsGJNhnO5+esAdj2U/zw9r9KXtE/g==","signatures":[{"sig":"MEUCIEO1bS0Qdl+/879WLi5rmCGq4reD9ckEwclsop5gw8Q/AiEAu4qqjKhn1Ox1YatLrRlhXcyNRthXcMJYv4KpWgydznE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQNCRA9TVsSAnZWagAA/eUP/1h7uq3fNCgX7+si+nyY\nl0MCKdUPmWiwf+uiozNaMXrXQ3F80bMAoQQip6B4OVX4xZo5+EBY7k5sU3AO\ncuArjRp2N634rfU4zsn47qujWUA/oRS5CBXSuHV/dHptPyuI8iHM0VTz5SyX\nx3h7n78VAp/eq1fYwgKjyEoa3hXnuzIl3MA+5Hx8ZBKrlxhLSS0bhNYSNBZD\nROPYBhNYwxuCBrgZ4WOeTISdH6z4YJ86SA70T96FFgvBbi9xsGs4Zhk0vDMB\n7q6QIVUQgbxu1b5VEIkl21V7xNxRNTbAW8GKtsh1neAGwwBFj1pMNOsel1sl\npoPJ0UACFFfhmcEHJnfeMEHfGkoVW7PvvQaVlC8X1/TPgN/9g2hdA41Be2IL\n6O8UHPPXCCgI4fvWk8thaupf2shnZR6y1AztFYiD89CjlKzOXyb9EjFkkCg/\noD9d5kbPRJkAmJFOA95ZQAfqy8dtRkib1NarAHafRGyO+907HeA4AhXQx13L\n+LBevoPqeq8w1lM01DpKHysiDy6yeh1K6qjH7ngQpBQ9UGzj/4uawQoSu9G2\njwWzgF0sdI9g1iqFARK/Xsm/h/94KrRppGBml+ikC0GXVu11EzBO6l7faM2h\nkeBFnlffzH3MrleXSFSCHx2RdoElxOvt+28EiZbUqJAxrJrCAlt7ZqkwWdod\nH4Xp\r\n=iLNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/touch-target":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2e218dbf8.0_1590080525285_0.4894497653133245","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/checkbox","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c6ed6fe140d8992723243cdf58728661f03b30c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.7fd792bb9.0.tgz","fileCount":38,"integrity":"sha512-nJ4Dd1vxWWV3ivKZryMfovAWbxML0misDhlq1Y9cP4Zuxb9xl3Co47xoKnpL4lITXaEpLBX06JDTwY3sdOW27Q==","signatures":[{"sig":"MEYCIQC29Hi76y8Jfs+/ODTk93U5LW+Y8D+M2lE/PW395FchAgIhAN7ComTu350G7UHKYhMyZOVOpFM1QRnebUBtUUjC8bVf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcNCRA9TVsSAnZWagAAabgP/0+1M9Tt6qFXk7cqEIuC\n9TF7IJdXWOT/iBmeJ8UpyfSHYK3pc9VJkxGUL+HjxCkMODkUwuBxXmIv3ia3\nzvebQ381+IOUNDJYZ+rEXJi1cCzrMYyJ/pdQXv24Jji5PFEiDYeofe6fBNxZ\n24FSGWMEQ8BOhwpQXwhHup61/Fz43SR6SsbPCPOVtzf8sDBdLyiFKrzdrOT0\nAIVF9XqSrwt0zZbPNP6gzK4rfmC0gt+zWukspklf1/Yxw82HhXljJRQJZ9vQ\ng2it7r0FMP08b3EcFfBDiwxK9naP3N96tFoXtr3MXrLeJ3xn8C1qu5iTBZs+\nOLgZwz0s+xUamOzyUhlxQSF5Us99NC+H8p+rJHMjnv0goxmjE/UlS7R/v694\n5RjOt4MLUMDlgTM0rbUhnK/ifKhdGNXqD3fR8DebS75hH58a+N7xVBNOzuIj\nvST3i2RoRCZXqny3kJ9y39sYFoQWX81VBVq3TzFBUJXiWCK75xlG3TmBHT3K\nLoGcdyU9eC3P3gXsBPS/3nVGTwsfVsyqyhx9sAT0X5RVM932247QGxRWtOph\nnn3gacd2ZeZSOuPB0gGRtGEuZ10BIl17sX72ze/jUlslN0d7BQE5tyIIGU/I\nKReaEGUUKHV7RZPHpJSoFLQLiHWpJqtNPmHlpF3ywLXDgmJz06tzvGJ5txU8\nQwF7\r\n=BDxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/touch-target":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.7fd792bb9.0_1590081292651_0.06854503028788006","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/checkbox","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3d0e296149ac6b876456a7c9386999393bbd269","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.a66493cd8.0.tgz","fileCount":38,"integrity":"sha512-vOjURJam+D9GZlCQoPQRKR1Zdq7+4zAEgHgcjeq3DJYfcDOlArsNctvaYSVHboPZn6SjhNsCz8t0EIjup1DxDg==","signatures":[{"sig":"MEUCIQCb5YwM8sTgKbnfW9MpZfVv0TOJTbsJHV9CeDJ5Ejc5rAIgZqLV3ZH0U+0WMuCclpIHWX2n5OwivSkLYB8pFsExBwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfXCRA9TVsSAnZWagAAit8QAJJPRxCwzcmT/BK5ErWw\nJyO9Sn2p3XTi0hCKePBlaVhuKigtqObUNe0j5P3hhq3MAWRCGD8eIRuCpfMv\nXvWw7mrmhEg9xcFHcYVoIjaDuvbFFLm/iiGAT3kQzaLNuq1SoDXJwfrOrjmk\n8Kd0aLfXyuJ90sN8HXgqV+j84ufptYYDOOrCVuOi33LFIYA9JHm/DEI592zY\nd5g6QvcRJ7AwV53ql2ZvQW1N2BMMeVx3fmgB3c4dDdcRR2/vcHEkjmEHo9qn\niUXV/1zP+VAZNCA4XQSMVFckebzxRAK3VqCthHp+VODdsvX7u1pMFmPyrWY0\nZQVE6Dr9fb4J6notz+MeBqvBYrQCWV2gBvJn7Fk0mfwrduYOyxPYK8SL6ikR\nhrwxyWPDnlZOShNFqFjLyMC1OGTkO8XaeLqHGboQk9PXQSZW8rUUnkamb/Un\npYJOL6BaJV9PXPd+IKH9f/mBihG+FTwACxXlNAUw2D56NOrLPOqjtn7NAF0R\nFtUQAg7G9nC7a2S6VCzkIjQ2USjTe57yjBtBmYsfZYBOmnDtEhrAgWG6Z1ce\nnUJEkczJLUty28xrJHL8QDDVtrqv4msPPK2H7DgyGD/cozye6seMx8gBYhjW\nt/0KinQqJb8PLsN3T4+f4wgUUyBnqxJLgJTjlyjsBEsbyArj9tBT4zc+CX8Y\nbXob\r\n=5pWw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/touch-target":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.a66493cd8.0_1590081494924_0.16516352655096367","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/checkbox","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c5719eeecda0d44b5ec0f281719d0662c6352bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.da05f66e1.0.tgz","fileCount":38,"integrity":"sha512-e/jCb4Mk/j/vxYw+3/1oTvGs7ZUVmM636W4WPm0MxEqKge64hmpJwwHvjzlbbH9jTuqcOdim030lVfIdllN+Fg==","signatures":[{"sig":"MEYCIQCbQ0+DwlSAj9W3RtupUgQoYRN+MWl76nloZaxguxXjhQIhAOdPs27thurIQyK4vHf8LnHpyOrLq8RMIntPcnJIf+de","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhSCRA9TVsSAnZWagAAFGUQAIv5e61Ljke65ZwSF/ru\nHJ2jHOOmHQJwl2llYFOEMbySl7K4OtfCukgKJBLouXcdpVvucadh0fwa18Q5\n9DN7xFQSbspEP9MeoXcZWJwwvq4c2x2YXuwNq99cqFjpTEbFdlI21L406Mx4\nh2pxTCbzig785EVwPEHC+/b2AqX/PjG8y5cmFbs+TpAOGVfVsauz8ympDPtm\njZfUVr8h6sLLa/WHjTkopMnqpScK9uV92SP2giSwTPcnniVSp+7iHyOAWQfL\nrJdMNP7WYYOR7ik2PsX7Vnsx0mFxOKquP2EqsbM0SZoRnvkbsn9rT2t8kSID\nlc/jnCF0DKQ09vdHnHarGrCBzQDU96hYfn7rke431pCqMKLdKPJS9lJFCGJs\nXiyoqd+bMAX7ulXLDrTR2EoVxaP2knFkXmhOX3jPC/AaQo7QdNXz9GACJxqp\nIUiWYftkV4Qyzvxz88tmLRFzPSjuam1bkIUEcwCdE75TR1MlaskWL6S/XJkL\nR1q8s72l+lYFge60V1k+N0s0x8eH0vL8FwIt0Nun0kWyv86wMaNPnXV43rHG\nksxKPEJySJttHMQiGkpHwus9jqdySHIZzHQkFUlKiTkUYvOIlBGOyDo/YRSj\nJOMcP9Qn9HX3LplxHW1cwa0tYqdxv2/IIq0nuW9JwsYcqe06+xICtknYjAJp\nrxwv\r\n=RwpD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/touch-target":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.da05f66e1.0_1590081618121_0.10313632401568862","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/checkbox","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.740860e78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abba3d1423ee5ed78baf8ea3fd64be3e73886816","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.740860e78.0.tgz","fileCount":38,"integrity":"sha512-Lw0+jX+ytC5++5+jpama5ClRwFuKxJ9aMGGLcNCIJZMZckIaSQbe/9rMmRNCwjxO1xX6PeBABoN1/UNrBaNfDA==","signatures":[{"sig":"MEYCIQDC94NqWU3XPRV4pljc2LpwiNf6NvKiN3JwtWxhLFfF2wIhAPg6/UMj4aQeaL9B/cMXP4bRThLwbG+7dDGQB0FddZ3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnTCRA9TVsSAnZWagAAWqwP/1AyuOwBDFraL/myQ5K9\nB9ZmJtt4meEBSOJNvQLUJ331p+0Hrc4sMpiB45FDazNOkE3n8e05cUGrWade\n+NSOQbg7cOsKfYLZISIf7gG8KVZgRPLcWCAg1nUb7zOEVuqOsxftUvH5Y4fk\nKw35EoSFVrrbc11dIUI+MF75Qku9isJNHIkfu6E/NKKINZVzI7TZjTTuRz49\nEPTj2VI3W5qz12XyHwix62yUmHUF6zlo0yY7EVjAhYxJ9cjPPExQb8rtDrwK\njbaRCy1GeRgsmmKrKUSV281y4bZnOd2EFiFMbedMGbznL7qiSLkflau8s8SV\nOT9Jw2M8lkakHdCd8A8GhCpTzaD/aqg9Nc28UHHGvR3dlSAYpSO9WMMfd7jZ\nAc2y7sN+BAgqHo76zh2OPuqp5qTWi4v/XkdFymJXonBMMldEb7PA8GtY1JwR\nzvbc5U0/LzzJi2IuwHbE0/Tg6lZxlnjrf5wqu+N/PRlKC+caRLb1FmtbMSri\nVAgHWUweFGf9n63TxezmE7uycq4RsS1wSuWV90TfFr2R4kVHnP6RsnyytF82\nRkzW1u5cSJfFFFktDl/YVTHOU1f//aZnZlGVdtdezNqDwxwZKB2wjcFn1LtM\n6Ch06nyixTy36OFdC018fkt5ATLB9QPG6Uv9jJ8kA90OH91ll7g1ZI5Hxldm\nFgew\r\n=pWgP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/touch-target":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.740860e78.0_1590082003055_0.6761692406776176","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/checkbox","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"111ec0d909c07f51efdefdc946d68bc8c1a8a785","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.5cea2610f.0.tgz","fileCount":38,"integrity":"sha512-ZX46LkOX3pWDmvs99loxodop5XXYZ2PeMK/TN7IV2UkSVxCcujhjxVjpesl+wa9I+iHsOH698mHdyYSIAY5veA==","signatures":[{"sig":"MEUCICK1c+IQVsXfkfSRKyxRgbezPhjnHNQbtmkGiKAj2iKEAiEAwb5UZvnqnLy+gvX4eOdXreKOxTa2Y7VhfycZ7vOSO2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpMCRA9TVsSAnZWagAA3DMP/R5dTCCs+Wp6FwVnZGE5\nuL9pr47ACxAxXbMhAFm/5t/+Ti9P6jCI7TburDom4GpTubRfmcegUgY9Xy+J\nvZzoRChveZ6A2PTZkADvKf6vr20SRcu/slOHVI7AUj3mphna/qYKmr09mnTy\nenD4UVikLSuVc+XfIByiIwuXWDVQ3/CgFlYlC2T2q/Q6QA8rYDI5azbA3C4h\nsgHcpwS+2aYob6Hfw5K5cfYuzKL7m/Gobj884cB855tlXUqyFu5Cymvx8vuS\nQI3hYmd+0YsmmPZ4tgeNou2JueYTpqUWWPPNIZXF00/dZVldPCsjtt+Yzh01\nZ5MP0GnDKbydbZ14BC5ebfOf1zJXbDinNJyLHAeDR9/81at3lvIstp8FEoEz\nixOaQauIvzjPrC/1IZ7ToZYtxQJzenKDoKrNYrK8cY+NRBRqtO25VpOlUwPB\n6F+7HMvZSpy9yedAY9+G460P/EPq2LKWK7BY3+gP0RMxNoF0e9u8XTdJ8vta\nqBupLR1U5nzrgdv88rW6hFeXGiTTxEMHMsBE7VgwiyFDDJi8e5Y0oHC4exCB\nYFcwcAViI64KQycc/V14Wi39RoCs0+3PcKtWpn4YSLopmS6ZfsrTGUNqcHSR\nv8odj+D2T4+za4Ke8Hu+EATJk+2MLxI48E8HV8ErJIXi3fHJ9EH/XBmrCv3A\nR/2J\r\n=Njmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/touch-target":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.5cea2610f.0_1590082124034_0.012682307578577356","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/checkbox","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09676f0deb4e3c93b9bafd42772d00d2e91986fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.cf7747ef7.0.tgz","fileCount":38,"integrity":"sha512-fi+BNoVTD26IpBYEvDYGS9uWjMaMyaN4FQKXeP6Axwo9n/NbwWymziruXvuxr68c+57ofBfWamEp6eMJ76mKtg==","signatures":[{"sig":"MEUCIDSxqVpifmwd96ARkumXkmDAAjDV9641UE+IP0j4Xf5VAiEA2VdV4TPnlkjxI7KrTCCcLVhJL6LJKrb92rWsZkATg6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpjCRA9TVsSAnZWagAAjH0P/0R7TIHVZs55U/NZx5UQ\nbnDKNX7OFNQ8ajR8U2CrBtgZuLvaMcIioso+gBlcFAEAYA+c60CPIDR4sJUy\nc86mcSsRXIVO4RjmlQ6y9/aY0thipVxv4tMvctasppx1qMhPcVq0aY0GdvRN\n9+LNvxPTX48SE52yUk8SxmTQ9dW6wjR+sfabUP19IQeBOP4hLEEge6ojQ6wk\ncwsuaL+kAXc25qHPbj4xGGR73+JpJlIJj291jbq8ymNebl0O2U/rtnNDR52w\nX7iinq8RPhIl8SuWflq5+G11DHwOzQ8pCE2Ip+ntuMVsMAASjpwbAGMvbS65\nzg5uj/C2f/i+e5BC0J6LJKy4PNDvFMANqxroLCzcdbQuiJxYkoZTDs9iYbpg\nK04z2htH5zH1YZSnW/gUaruGyxH3K+2OVwYaFlPxKWOVqDR22ZN4wrEqwCJx\n37DwF0S7Wv+WJDFjZL4Cc9zqCD7bXjZX5PU1d/XY3vNQATcNO8PZ38vR+cmK\nlOffqcBLvLf//B7EQ3kCtdKXQW59Ihw3tSwhtErqbmKUHJYtndKGACJlBDFG\nGJ3M8PS2M2/CIwn5+ezZYkn3rEF3P6ni77Qa8sLjE8W8OfJgyLrpRuQ04Yqv\nvYSQUGGQkjlh4DjY0CNGgoWYC5d2vPhivqhUgv09+5v5oeKARNdQ8IPFiO43\nHU6v\r\n=IkvT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/touch-target":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.cf7747ef7.0_1590082147384_0.16550562122262202","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/checkbox","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9ec5a2c50d3b3322c56581a1a69cb5400b92668","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.862d0d7bc.0.tgz","fileCount":38,"integrity":"sha512-/YMm7JTjBFaDeMZ1lzTUMYw/zL6tk5QhDRKEvGK03mxkGk1ks4r2K3i5HIVwqcRjpCSn7qVYH3rcCGm0becwlw==","signatures":[{"sig":"MEYCIQC1AOmFCpsZ+LJyW2IxnklH1/jmshIXxyHyVFxLUOAN/AIhAJvv7A3p0zfbci+6Ld4/br4p7uxI1ITQgLu4VhodmnYo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsFCRA9TVsSAnZWagAAOzIP/0CU5lZET8TYWUePBZJd\nLH1ETeVAJ9NHRi5fCLUw+CbQdcpl0vU8xKWJ0W0lo6+2YQu/HCwo0L9SLGqT\n+fLhKA1NfFx32qCTyPeeybyBPHwOjISPXKKzYFnrFOHDxXyhk95+Fwdoe06J\n7VWpye/UJcyJjkXXzDo18hUossoRUXXs12MHx0fLggO6IK1TAGh1bHovKTpB\n3up1+7vHOe6cNGfSa5sDOu17gxZLTHgDbnDTVtw0o+zLUYCFZcJ96SB+/eI2\nXThseDYsQlRIkH5/wmN0oENWAVyPeAfR2wgBKqvk81mITKNZr/PRBhlG809T\nm3L4qULZJ9zqwHeWIwFFG4hIDdezi/EHxX4Ww1GjrY4WySP3OEr4GkxColPA\na91ISgljaQYDt4Ii6UgRDsoK9+ct2sWABEdzoGXeJrH9cITl62SVmo5UwJ83\noCkX5aBGqx6vdrtIvlrzvxkNU5icbqe4lcvOX0ZPegKlllFSgO/vQUGNxgWD\nSv2Ou+GTMYxCvJYS66msO9MzeutGVbVEzukanHHBiJYcw9oObn4XbXQVxVDu\nMrnF7TZIXDu0mOXp4ZicBGk4O0ET4Oznf4FldC/EqJ9vUjUpdAxJCjPGug5i\nbYTfc7MQXWC3Byc6/70jwsue0NUxqC4W6NjEVG01QHOXFWSRy+F3073keThH\n31z1\r\n=oF/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/touch-target":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.862d0d7bc.0_1590082308166_0.2095834571325732","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/checkbox","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b633d778585811f6669e68e8dd0f4f18a0a810fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.0008c8a91.0.tgz","fileCount":38,"integrity":"sha512-Rs1NT1tDbcxRzOiNIlwyR2/HgJUZageODUhlsDML3PvL5WLwErYZPLcRL2pvJz9HMS2mCTj1Dud3ShFuI2Bl1Q==","signatures":[{"sig":"MEUCICEBujlYxtvBn8ZhiYAahxHiR6PjN88xUsjLbdyqXjchAiEAoarT+aH4BYqQYAW+U4JLR37qKoKb4q+YBjIJx3UCivA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextd1CRA9TVsSAnZWagAA9QEP/0EOTeR2nBhBqBJH4qmU\naVekZdVR6FULOhyAdbUOCMgCv5eNqeZic4DbCboiTII4uWCjKJlvQzuojnWA\ng/ldDlN30FvleBNLkGWetaKwVeGHQ3jBXqYEFEV2cCiMQ70sMi/cZtFIUvU8\np3vsXwsKdSPKe1/q9fbSO/jacbRLpu0NoGX6OsmmcZnqRfejiwPeWyq/nPSh\n34fD5NwKoGsQch1lBd7aZ3OrQSpSdgtSGFVw+u/sSU6XLr/8Me1AfN2LGqcy\nzlkdGrorTO0dMElmw0tCx0VLG712h0zYv2jhOiPEAGrgObrojKaRDd+uHC7f\nye9zO98p+AvXDcc6YyOh2OJKYJRGOUZPOsrZsmvRAcoZtmeSJTkPX0hmik36\nqun9buyKOuCgxz1mGd+PCKojmGK28sXgEA58PaY/DOYraAv889yfn9JrpKIi\n4G5Rm7FTdVOhs0ITqC9gtNig2S9fXPi8YBqYJLe96NPtrAKr3BAOWpu7Xv3i\nxBjJy6ZQ5nyDlded3b4LeHptbCId9XXVOO0RvR5GB3t1mgEAPHIcPc5yMTXd\nX/Ctamd3leYIDDxg2Ak8WcYvwBoGYM0vK5Ao0y35MKp4BGu+C+5u9IeFdBPF\n+K6FUvWA2/5hjtEw7HZ9aes9pgTrwYa/pWd8qpNM/1YeUyFN0vsL3I3GAE1R\nbIH7\r\n=F6iO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/touch-target":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.0008c8a91.0_1590089588706_0.36061456406306136","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/checkbox","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.541638fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b325388f67d4863363872f59a1e52169963f2621","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.541638fa2.0.tgz","fileCount":38,"integrity":"sha512-e2e2syVaQfgx3mwanluHxA2pTGTV07kBITvA1XC8tEoqS/3tH2r7sgqZxMZW7KmP9s+uU3Z6TgpYI1F6argcLQ==","signatures":[{"sig":"MEUCIQDRHcdBOptLTMbdP3efFy9voUNO8o+RQTfDtuNKEvhcCwIgZM6jEQytbWfxcCYNL9ecFVPR61fQc/u3VOi0Xkzxi1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextr0CRA9TVsSAnZWagAAGscQAIXdJWsfBroMyAE4aGqx\nEL4aTBlJX2ahYq7zh6QzaQiUlYxNyRZ/dez4cXVCJW+vXTHWskRWA+df+E5R\nJMWtk0r1VH+15CxqJX29s4m9Cuu1LvjyW5eBmB11j3k4YCXjkGUafYAPdQZ8\n1WE0J1J76p3Mlb3goPTe5IKnlTsP2ftaswM+3NQl+grY/RLjBNZs050M3p/G\nLgOy3sfYZJskPAskUFF+zeXXBddl3ebtYcsoVYv+qbO77Vwcpr38xqmbEdjd\nrSAC6EmZr91SX+eDxE/tUnUHCFckrRtYTSCx+oTLrpvxd6qJ3I91wcZRGI6h\ndqVzO6QtsTStSlUpAL5IoKgJdhtr6zPhO0Ac4f0S/Z5S2tLnfJ0Ark8J6ot1\njd/xInzytmEGi7XZhlrS24Lk5qu1XpIY+goGm/uM+UsuDkFDjfo+ysD4tBvG\nXQTS6ZsXSMAFikLGDen0jytfYX2OjKR/m11ZdhUcCwHnbBKCbL7GBliMv31/\nw393ujhQ10v6fEw8/9rWhiI1ukic8yf61dcDqGccCjJhutip/gfRRjrCLLTZ\nyKD14SwtjYZZwV3ACLdIf4zZm0csxIpsGcSwTWc2+yqnupvtnFJYQ81CcoLW\nF9eWWLiJ9yoYWrSRs3fogJIiUBMKIAwVSP6ZYC3P7S7ihX+zlsc4xjTbBsSD\nTOFa\r\n=rCDQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/touch-target":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.541638fa2.0_1590090484266_0.34541163422565657","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/checkbox","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.6167cd075.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"163c7004f30c5772ae33570925c7c76520379e20","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.6167cd075.0.tgz","fileCount":38,"integrity":"sha512-ra2ocpYxf0LSmuxRaWRsttOKw1vwWDzMWQCCuTA77hUCDxliRBaAKdbde8FKOXNeNEhx74IBr4d8PFnynEnNsQ==","signatures":[{"sig":"MEUCIBbV56IJg+nAKDbUlSuO2eis92PTWGEfyjTv492zJHR6AiEAoFY+MgmJNFLw1uRNXYzik9hzgCadAdILm72bQQQZ/O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKvCRA9TVsSAnZWagAA6EwP/0SV9ranjQ2RcKWQnbJ+\nLiJiLkEzi+5P3xv2X7AtMdRbF5z2FVyCcGlXtO3xWLgrROhVgxjswZUtc6X3\ncsM4TDmlyXGHF22AX/yTPubVvrc2WbPUbNI8b1OEPm8k1Mal2Giwm3WxwWwW\nywk9+Cl0gI6HzLXhSXOehPVTfYa6c5zIy0YfGH1RngcU0+Vx4lesZHwHFySH\n3e4GefAvXC5y0A0K9DKVoq9+g4sgwHemMBLGYu9/5DeetBxFtXYRnwn2v62M\n7T+sd8gkYE5cJ6U6/HRgIRV0UDO94k6zp4l0nKXC7+ixsZih40pMMN4zG80U\ns8CTcy1lQdRgkADP2WXJ+iZH47GK3rT3O8hv8Q1y11Lk93m5Xd17Ay/pjS84\nMOVYwPlZ/8nbzEYL/oxKe3rIZMSmbxoAG+rps3U8q4wZZeGan6hA9Qo2xoJp\nOM31Cng+ILIeCoQpMcDuyWpNj4sTOEe5bAFuv1IUxayhhctTJVmqifKBcV41\nMCEzkOSlZknoiW72yeVzZ6suUGl50I4BBWBs/FovxlVnN5oVGUxpV6x432gg\nLq50LAHkH7grfNX8qHEi+5q1VXXEW5Z49xEUtxAmbZA+jK7rYJaLN95z4f9k\nVUzlaEK+tyI+1CcUSjIcK6z/HJ0nYvApOFIaXmq15T9nrorDccrxKDbbgvec\nfeG3\r\n=rHIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/touch-target":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.6167cd075.0_1590092463333_0.4259750046361048","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/checkbox","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"853ae6935d931f3974d7aab679df363fdeef839c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.863ac1b0f.0.tgz","fileCount":38,"integrity":"sha512-zi7JSmtbwfvYaTM5mKkew6F42Rgc/gTWESfapdMhckVEn1wa/GCpA7KhWKmGIa9ceUYohooBj3YaCAb4Bym2Jw==","signatures":[{"sig":"MEUCIQDGJZkpOOdXozfj0xI6aPn3m3yOX8M6ple1mkRZDgAxPgIgRGqBN3n65/m2rz3OOMOKiqOI2oolQkMDJFkXZeJClPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvVCRA9TVsSAnZWagAAdjUP/jGp+kUheberGaijt3j6\nTFHiEHmT4OM0pwxoAO3ZexgOqNqo4r9Gwg30pMVlj2MF6Q5SxuNQcLavkTSc\nkV25PKRGOCx7FxG5ss0jntVjelqt1OOO7Qej2z0GJpRvhYqyZsGdQQDU2zOR\n/x1WhceMjAHjLi6Udv2fLaEToKVCnAz0LDiCtdp3pv65yVhCL+8xM8B24ThD\n+1xAxLWHOHXX4hNIr3bTGhcw2HIg5f14szmsZmug1U2Q1vwEPpRtu1fU1/0A\ntPabMAVzs+AGkeBihaHcesw3jgdOragjNp91w91DJRb53qNWIopsUfyz9rsD\ncEvQiTVW5O82N99Q6CW7Ga8FAiHXp5eUL+kRwegPZpR8tKNzKYn1hYf+0GnJ\nEHLi/HMc5WJ6TcbFmeOMdz+lpcClqj2JdepqKztj0vG/0nhArxYVqoh/4yvt\nR+nAX8wd69gU/rRosrAFETseGBuPdiQgD/cn7bO8+bytJ7NQt8sFQR3KL1JK\nV6HFW9N+PbeCGs6BS1g9cxdBouSdRkBA+XgxsY6ghCJ54ujVBkyAXil1X3Q+\nB+MILwjI/kbfwUcQo3ry6yQEB9wtzZWug9JC3ZV+bRrgmL5EmaK0x/hPevMl\ny/CY8nT8wCjBBjkvQSrsZfu42Jr3J7tjNp9tbx4/ktjpvfG5AwRLeLeaNO/k\niwcH\r\n=j7Fi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/touch-target":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.863ac1b0f.0_1590094804983_0.6989575276812707","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/checkbox","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21e337a106d3d143cc436d02ce4a4efcd9f1a51e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d30a214ac.0.tgz","fileCount":38,"integrity":"sha512-Wi6H+NY311tfSFbHVkSP2eGYRjkUQ04R/pzt9RU2hUYwu5aAxTOeZjZBm9pfpfa64j55QxAdszEf89q4SGUF9g==","signatures":[{"sig":"MEUCIAYvMnZmVQNdf84KNjFjFLEOwdQMZsETGsOq3xhspiNFAiEAmi5pl4wuzv4sh2Eh9BcgLCrkUYJ6rZkuxAGErnMGdVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzCCRA9TVsSAnZWagAAtDkP/2mGv6H2hPZJQ7ipizPT\nHi4NBS2DpsEGiPTMdHPgyXpmagHsaHV1atCmA8oht+DYwELoDtkfoDQ8BJ0h\n2rapWLaVn6y1c02krBVI7PEkcYA7cjkAP3gsBkOEQ6wh/hBGCcPNYsIAjBhC\nqFB2FtN+NXQUCSLfKuJyAYkjVw8jLVmsBlMH3eo9PSrLZBsRZsh4uz0koJrS\nNkrKtIX5sLu90DM67E8XYeZGes+M44xNAtMeFNII7hxXxCljK8OPLqMiEqtC\nNpq1klHIVQ571tnu45KsmT9vbcVFm5UU28p24I4Ts+U2nwZT9J44rVTuyS/S\nco6+/udBN5SsByK94b8JIbe5toA6Ksmn0ZTen1rHgl4G0s3Lm3v4I8qaEQA9\nGPwWuV5zYwKjjrdw1GgCbZVLj7mYTAYMA3wB9pGQYBmCzGenZx9jCfIcbHDl\nQHlhgW9Mhq0D583hRXqiWWxodqa3qPr3cP7QuAlXcM1qWm7CdA5dpQobipo9\nuBWmo2tqW5ucv3vqWSCwgYZOIwzO/8Mi+ypnOtR/3ukU7DljmlN4hDNmhNQB\nGTdIIftoNCu3gzCPfHe5Iq7X+dCDbkiCoCEpC3s2QmrmW72ed9feATqJqL5q\niuUhWXVo8VqKbgZ8XGyxKIp+pdwFEr2Ie+i10h9rvTUQl78l5SIDKRcPitRZ\nHJcc\r\n=Ana5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/touch-target":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d30a214ac.0_1590095042204_0.9857591141379631","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/checkbox","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fd8ea3cc96cdc663b9d1479cbd7a691a8081ac1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.62abbc8d7.0.tgz","fileCount":38,"integrity":"sha512-jxnEEZZielD3DpgMJUvaLmH2F7TsCwXco8SoXymlrJxgA0lbPi7NUJtkY/jM+C+9YjxQO5eR8taVEB2fzc441A==","signatures":[{"sig":"MEYCIQDU4v0z+Ex3xj0Ek61lmAegPO3b75gwfM4yL7bVV7KpRAIhAOSDUR/hS1ZtU9J3PF8tdgTodOaAmvLDf6gb4yIo1y8F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKHCRA9TVsSAnZWagAAZNUP/A3IR1Rf9EtDX5UA1/pe\nHxAjMgsgawHybgDbJuc1ibVS+ZMXpIsUGEXsHYG6UJyZx84MwY77/Rno5xLG\n9DD8YB2a+q+yLJ5Ic4fo1AX+6cCAxfKQSeuzD53bjY+HgWAjczRuxCRKF4kc\nSgOodRBIPLkx5OPYHTrEHqPTgwwodSSiBnRInLS3m7vwGrYcPAf+rk4lLVuc\nrZ/rtQFLmOhra9GJ4vCAAfVA6yCCMnshwIn7rAprkrys6h7DK4Kcyika5FCE\n7hhB+YJZKU3XpOCj/sqvqR5CQc5BWN2Twvc/xfI4BZGpIcXD79W280EPNLdR\n4Nt+i+e3M2JtOSikY/4H2UC7VC5L7wkmeM6IWOI4OU7/YSVQdPn1bAZFG0NG\nsXf1aK9qBYL4xP8HTUggzET5DMZ34vSENyH2x2nXMSYekLwVYdfT04vIsiUB\ncAVWmbuaC7kIUjodQ6kQuiA5xIGPCjC2RXgROiKIWy3x/XVLID8TQaM/KXlw\nsD+QjfMOzlBccRRaVYCu/Ov7VJ8eQSsKFMJn2HT0607NGcr3jSze97ABSx3u\nia+ub7wLXBS5MD/B4kr6kcfkVZkOHq4/7nbxt2RquGo6gWSG/zhglxl7UwSf\nndEoldJZOy5HDh9tvaIG8hoCPNCMDhEXisB6zYIAHoZX6CnlTaaylCLz9zar\n5sv6\r\n=20zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/touch-target":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.62abbc8d7.0_1590096519382_0.6868226381690696","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/checkbox","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a28908b9f09399f7a16aa6a65925296465f05b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.49bf31d5c.0.tgz","fileCount":38,"integrity":"sha512-QTXbxD792ZyKyi8u2Z83p4zSzYX19eYQJS0qobYiXoJsEdIhtAHuf3MU+2k91pXDMrjfdz1HPy1/gYnym+ZjKw==","signatures":[{"sig":"MEQCIG92jYaB9gqMgYUouyWIcnOH+YBCwtsyhwmfkNn9XbxbAiAhFu6XyuWSahv1ATLaBYBFtf5PEYoiHm8ygUpVoJ+Iug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNTCRA9TVsSAnZWagAAYdEP/1PHxmY9EBIHrUec5sTU\n3UBzddBEd9DLO/fEPlXifnf7Lyq+U6+WhYrLFqwW0RBBjbEqDBLxkxWBy2yr\nXGAJq3dSRKyDU7WRGWdWYeTiGStwjvlitUvrMslSGl8ESXLIGqXpsbat1cUq\nQzbwOZyvsABgez0xKCZwn8agoz4bggLFrzHzrTwudXj9a2Vt/7ry2gPfM8T7\nK/3I1CFPkgWCA8Ge4BrkyVeBi0bwnPmAr6Jlz5ZFOXaozUkMI9MEEE5ZY7yY\ndZWjN5lRtW0RHJleYakHWyGZRv7IN0o4Y4bltccMa93tuy9D+pnKttBSOkxt\nAdiwrLisVzr79VwRW7W87EJ6YBSNqtbiVYufeB4sntv+EtPBx9EVuVp7uX+O\n1wu7ELAt97YzX0DkiRqma1s6fqb0KA2nwbi11NpbW2fVvLm9SWVTzy6hFWtY\nrX9ty0w3uAMhPw7pmvjLskn8TVSIZb669G70n+UehvmM5Zmn110YV1Pgq+no\nOB6a/sjHCi+TLxFo+TLejiaFLO1keft8yVinDXxMgQ6/nbAgrgLMjBNsc/Jr\nHeIbaHjuCjIjjf9DF7SwB1s1qAT7QDkxJn6wOTIK2w/VAWrJjPerCLSmQMEW\naoYEy4uoKU1nwhX3X2RhSl2hdK9L8pbk1iRnKFuUra+LQ6P9ktbTBxnK0cM7\ntQSm\r\n=BDWd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/touch-target":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.49bf31d5c.0_1590096723147_0.3493272629354114","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/checkbox","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b6a4bbedcbf2939ff14dbb8af5ab70b9939e5e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8e17857d0.0.tgz","fileCount":38,"integrity":"sha512-6o6/ZBC7JXhUWbW+BexqJFM3CRScGC84sIA8nAm/faqmQsOS7RZGmQJqM/gd+AZ0jOvQuTOfdFqo6hp8caDnAg==","signatures":[{"sig":"MEUCIQCoNGUIZ1GkBrgbMl8gkP9Y0YtLDiDDXQwLozINO82DIQIgNgge/RfnstHvFWC4V93/X9oAOAHLlJETHBXaBw0J1Ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOLCRA9TVsSAnZWagAAo4YP/3L95JPm4Yyl4dVyQX1i\nvHtY2oujIfvW1YKEZ8fEVQhm51QEvxA17zufwBSBjUEAJCichMhmmtdFi9j6\ngc9NZR2Ar7JF4kqHsyABob3ChpX0C4IJ7+/a8lfr3qDxQHZpN7QSf4ZHRlDS\ntawywgHPRJv9pYDbBc1gmXFvlCF7Qr3vJPJLis138Po3P5k4bMlf+tfz0gXW\nRpsW3ApUufOitCbbZGxu7vWLITPB69BqiJ0ylFtinYHf49fTAQRdX+8DklsV\nMiUwndvbUXQi+1y7/ErhU21HkmBNaPEz964K2qWdYBPk5LEeuL65I8Xgsy4g\nrh1L6h+IMojetq9buL76bDpnL9Tcg6Zb+BXPwxs0UX4SgTQf/z0ApJ+eWko5\nC652eMcJWHCVh5Z3jxcdSiubLq78YxwXJPjAoLrtwx+ALjiu4nxj44XAqLPy\n05gtHFUa16myGfjFQzvZJHmPGhAR0i2R3RFGBz4kiZgX70uQX7/VpfEkujjW\ns7QlgdqlWbR4xdK5BNp7mDybPzBsBjd1k+xCMMH9YCYDQwQHz2EDIKcXEzpc\nWrnC/LCkXliFEudKjIbIs+6Z9Hm80kzAWjmhEa2yMu+BVxodU0ZfuEOVChL1\n+zTge5Hyy9H20Oyj40TzUr4gqaoJ8J5bZjxj0dOg68M/Gr6Yg1OIWawCPIFf\nyn4L\r\n=wNxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/touch-target":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8e17857d0.0_1590096778557_0.46639873272043664","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/checkbox","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.c113fc942.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83d34f482f16fcb14098bcc613bf2a003646a8c0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.c113fc942.0.tgz","fileCount":38,"integrity":"sha512-53hwTCIu1eTq7Fv5kJYSrAYX9fCPGrKUgcx6KpSEIV1c6U0m8jXy97FQN12JR7K+FE7lWXWt+nxu+S016PZ3QQ==","signatures":[{"sig":"MEYCIQC76Gy9HgW12x0Z//DoGH6wH+rLWy/hM29pmL2dEJmYdQIhAJNHK2zd7n1kX8G0/PZeMlv2tT0Y7zi1moXaXG1PVJf5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTACRA9TVsSAnZWagAAFUAQAJ7Sih0HZVp40cp1RIig\nOrxeSS/0+4gZK7i01weYkI0/9IwMp9jAbyq2qW4d2TyH02vVmDgUQ4r4fWT5\nLK8NuO19USsNA9Y1CQcCrPCuGFAajdXnCFi+Pnf/ApLoauCKlvAx9GtNeIoj\nVdkl76PRUeEJjoS9el8zLRYnbGBacVmSMjFxYOiuJcjEMhDq1x3MLKBsWi3r\nlpLgVI2zO0OQSJCZw5LKAauxKcYnDuxiHteVGeGPD4SYp5wyHM2qShHMHPTZ\nFU9RnQtS4M0OjX0ByMQ1aGXXwcT4oftF1Vs5sXZYVRK939loJgjyQ9MS6RZt\nH9zdI27rOlIV6mdTKSD+uyr17xbv5GYNQkB0oLR+NNN4HWc9IFQxnQBoYcDq\ncac1iw3oBgp3bOAiEDA032u75hGY6GX4RfGnEPQayueJiNovkdZSFzE9ksAq\n2bBQgSUrIRfONGk5cmeTrSA1uD17Jjo9kajt81iznw/jsJHozDFtXeSEF3Eg\nDAUpkJNIB2yluIp2ms7Sg9GVTdW6UME5MT/Bri+zgayy9JzXY7YbK1zO4pGY\n2K9R7X4uHbamWFYTSTKFSVbnXrlJ/bQx9IlVfg46z5g43FVc6gPyAlXyx5q+\ngloF5MsVEZ2XVwbqtmSG80G3cgcUbvYMZdsxkwVukxy64wQ9MzFM+I/JGqP6\nGpmW\r\n=YAPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/touch-target":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.c113fc942.0_1590101184329_0.49596327940222174","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/checkbox","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.912d9021d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c0149ef82226637c23d49c75a26eab033775c1b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.912d9021d.0.tgz","fileCount":38,"integrity":"sha512-GnJ0HLQYrRrIVNyFxNls2b1gMf9Temfxj0l73B8yGrT/pTKbM7p4cLm7tkkyQTNZNjttQu/YEo0L/WsZesrw0Q==","signatures":[{"sig":"MEYCIQC8VCj8YvEJoFuFxE8z51iglvuETgYmoXCzj3KQS8AUrwIhAOyi2tVAC2IHML+u9LlBEyIPTIoQeXu+G7WUm6/plAMq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPBCRA9TVsSAnZWagAAUesP/joyJyteVnGivFIV6wWZ\nOJDnHOJW/BFfY/EtifNIaZ0a6mE3cABKmmQB2VBEMXqIblLYLIp+OtCFFeRl\nVbDEpXi3XMye8/BimQ1ZU0sbb/p4RJJbJrdDJUusi2d15gbn/az47WKWmmme\nztmQjfB1LQRaGuCz5YxyPeP0qk3aTgAHSwJHBujj9kM5oyy16n8FkKpqPe3e\nRhESpJ4cvf6JxK8zWMoMDj/1O7UGOuGCpM+uoCEcBPbh6OYu0pfMpJVZrWxN\n4fHuss6F/fdH/zYXXc6Hw+qxljoqkRYk2WjJLlhBYATli8cmhZk/+kn+IR2H\nyPYMX6SmFJYGoViFfF67BnLMisT2mwuUf8yhOX78QYGcTsHbybyQS8eItRS/\nT3ea8FVeFAeZgeqibssMDWdeaPV6gDXI3ikcytM0cDlCqAez/K6AbiYkfA9c\nQRHQBdYVknheBdCWqPHm8Ci2FlyKvcGB6u81n18NUAvZORfoKKG9FsktRE4R\nZ3ka6pVlTjrYFYMv38+Wu/fIP3wqw3M32rOpHSS+rLQDngLtM6Chii3Pnm1y\nfYaZzy8EQQE+/kwoUjFEgV+5tM1lQjrOBOtL68wZK1lrBTA6sX/KlZtnJtzz\nBzoUgOQBUJsb7GdtLatOfzHEU95sem5pOvDLlMI91GsN6+k6HIEV2jsNtkMn\nmMeT\r\n=3YqN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/touch-target":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.912d9021d.0_1590518721251_0.19943060966965453","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/checkbox","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.68a2af131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a6041704418ddec990684ec94f2fe6b11bc7b51","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.68a2af131.0.tgz","fileCount":38,"integrity":"sha512-ifDssE6uBk91CQRvaMW9AXuIvWsHSAPPdwgMxjj+qS+//zW0nYIRaHdZm1S7KAsGOXdY3nbtQCwvtOMZmG/DHQ==","signatures":[{"sig":"MEUCIHmktIbaQXYVEFjIo2ou0aR/bpohaph5zG/YZgQFw3UEAiEAyD7Hl0wNCa06ari54wB/citk3+1WIJ4GYnPqES2sJmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWj1CRA9TVsSAnZWagAA6q8P/3UkLkHbcD6uTHGSq2Q+\n8TV1v9sOLOeobs1tx5ITBs/yb2AHRxTZtJkWE3RAjqxC4IVltSKJ3yPhae2F\nHkSQfjIz+Fpfl6G9hY1LiX5Q0cgJpgeBR54LfG4ZPuTlnBdGOPlO35WgEDOM\nZ9TaflqSV8BhTnPYecD9lRkx2qa5UP/Mh6FUdNuIGrV0RBTOlsn7wzHbiiM6\noKCkwBrD9hk/GDTjFMkUOvVtV5UR3U61SvA8VQgLvmtWC0RlIWa7pktpJWE+\ny7yrIoyFkAIGUJnLT/Yzcu1kQC7fKN7AGJWC73vqfmvz5zYVLhgCeGlteD/F\n6eto3qjElwftD1d2xgQ7QxW5jLgovvOsB5PTK9u+FNnDc+ZPqbs0uEF2ZvUz\nssnKDdQ5J38V92B6jZ5YEF0aYdJ5P0XC9Z16oS92Dyd/aEH1nyLiUfY/Q/SY\nE3iKs/86bRc/yXWVBqnEvAxuMxCPuEyRAjRY2oD0/7zqDqgNI59dfiC9cuJA\nhJNh8rqrmlviV+kD48AfSE4iWNK0B4YPud+wXyTfhkjXhODpLWR146jnqeOH\n0G0RpYNxLMswTHG06OayeB2eosFvGzsDnJzpjfaXpU6cnyGB6tenWMzYc6jB\nkS/PlE4i9WvGun2o/IUAzDnTylevoG36lnMLFCaHsciNWUcIPEkw/FTa41aW\nbg1Z\r\n=e9t6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/touch-target":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.68a2af131.0_1590520053332_0.03071136231244309","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/checkbox","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.01de07011.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb4534992adaa76a2357dbab0353920252280df9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.01de07011.0.tgz","fileCount":38,"integrity":"sha512-dtBlyfp/o0+T2LfLo1PD+sYdXQmhCm39nBnGBmYhb6tkp7g6sWFCIBQrTzdjGZmWcOyjAlb9ZWNeaO0pkxdQLw==","signatures":[{"sig":"MEQCID4WRwr5NIkgBKZpXelEuQPnf+U3ZNYmRrIXsWiUYYCOAiA1odprCx8IADLvS+gFAZvS/sEifKED8kk9FKpSzcQmMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOGCRA9TVsSAnZWagAAQiMP/3qXQIf1ugMKBcBw8jJm\nFoLYynoatfKNWru7g+6grhcsnKalLVyIQKPTJk/p3tfok5ryxqhaEmMw/XA0\nWn8Q/jyfKqSfPuDzc2pbD5C/Fwv/1WvIY/SgRt06PXdwgNWd/loWK/ybb1Sd\nkIU4ntJqie235OAVpNDBssXweZMfzh/98kIwJKhXFJXewTQ4cLfe++jiuaVq\nJ5JMwPVfn+B+AWhQhCYT0gqScfhw5kc6l8I8vHHu2XbX8QrS7fs+Kr+OLXqa\n2O2PfMWd1PZAZc88iuAtWay4VQVBsJYens6gRotc/4osKUZfKh/aGfmEqaLc\nUI/IDBOpCF32wE7i5/TolXIwsqO7SH/cuLhcqPsjvX9Ify4k7tKoEx01QcEd\npA4BNV1l+5hcGBZZv8glTHZBrQNBO33t/mhWYxP9jcP3xk8VpSI+qGLJj1H7\nmGweYpFZXlP+LHJ7xn7xArcP/u3f5C+T0w+wlFUX0iZqAhimxW2mkI3Y8UT4\nscvv0faxmZK3h7FESmVfjtGz7qOUWmOp6X1KWQHwB8nT/rUSrs51SEr8oAZy\nw/Uzv9krQmzaguc2toJfAoGsaf16+8hOEyJ/aqBiX7HMkncP+Aj0ZMVg8XLb\nXn+o77n/I07OUdQY7fvlwHuBVYrYkZC7gT5TrdyXmahGTC25VV4bmqtkdpwQ\n2sH7\r\n=TREE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/touch-target":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.01de07011.0_1590522757744_0.8509199442762896","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/checkbox","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d5f9eb24a7ce06fdcba654759b56307e0bcc845","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.51d4535fe.0.tgz","fileCount":38,"integrity":"sha512-MTpREIynZU8RLDZIXU8bZoH7eiE7G4BZvERi5TAd6dMFJ1AVQJiFzeHpRvzOsKwveSy16WlNYr7+8HuWClhgQw==","signatures":[{"sig":"MEQCIFjwWVzyY83aw43bb365T4x1xqU+zjtqJnMigB3pDv3qAiBw3UZy1PdW6B8yBw65d/HrKXOhcGEUoJEYDtZ2qKnUgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuHCRA9TVsSAnZWagAAwFgP/iuapHauUZe3V9Y62CBo\nys6qipF1Skdh9zOx1JZyVwhDS0d83FTa5pYByr5zAkw/dIbFEx6DSPhGANLa\nPT4JUQ4/b8Dxugcvy9+uvLVjqWkWwRuEOUi6/8EuHw8v2E2DW1k5T0CtkkfW\nUfNKGbNbKcGimGLFdQN0Fvxv02HJYzWoyJ4tmVVW5EMO/dOBDHxqf0+P+rMG\nGnAZ2q3R0UScPF/FiFtHQkt8c+gCGG5nuF8tZPR9zeoIAx5GrfSbH4U53w9o\nVRehXAQuvBHHLtzdl8iVVjAO7d3jI4FY936GHTgskpHScILlZZYnMLbrcZlV\npyu62BLSYvdCJQanJx/aZm8LuayO8Yvkc76NY4p+GTlR1WLpComAaGIWfN+Q\n0TOtzNSQDuF7HqugCAqXxo0l83N+3dUUerjK7ekM0n1qwuYOHv113P9Lke0L\nSr6nQ4BHn6G/jIvSkDZOP4z/hoxnfmmHc+XqC9GpCSTXVgWYLCUw1gebbKp2\nkrw7rhuSsNZI/OAlRzATn7YBYUAwYjG/LrXwzmwLTWd6GUXgXRJgY4w/ag9m\nRM4gv197ATigw9ToIeXouj3erukZvA4u58KkHfk86sCI+eX5RL3OXrsTBsvi\napJJawX9G8ND85rLuRJORj/EcoS+4TDeLSQnAwbtsdqnSv3V5OEOqbwNpuxP\ns6jD\r\n=tt4S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/touch-target":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.51d4535fe.0_1590528902948_0.22070611454775535","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/checkbox","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62893fdde125ab8c5e7438b6529c113f9ae73d7c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b86d826b7.0.tgz","fileCount":38,"integrity":"sha512-LgxCzDUy3R+L2gSw0oXyXXPd/c9ScwlrwLinwvap37Z/554fJfHCpUUxivBQwcXw0TlrJMoMJt5OVNX1JcSNvA==","signatures":[{"sig":"MEYCIQCdRxQa2GnWUQ6ewNz8x5j6AzdrCUFbc4w49DAZHE2s2gIhAKlhlnazxGN2hvOqvzy6bYTroSeZDf+S6283+vETz3PC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSYCRA9TVsSAnZWagAAx1MQAIjaik3ssRcgIsQC/Il2\nrPYhhAlY5hTDLLsLucCSqjNutbv51aBHU2vtOV73faztb4hZjklpKOa4OOlZ\neS38hs6Oq2u/2wHg253CkVrM/O8Gw7SUcZbaS+yxJ++UpX4Q824ip7fm8kB4\n7P+tBQfwJFgY6LVm3JRO0w/eukwScMl9+zV5Vr/+cl5QOVPeIVo2Pp2o5wvP\n9hPnsrqj+avJQ3Ml8aB/rJmIRD2XTWx9tqHzQg3+BCyFvJo+Tf/RxRD4KWg4\nBQFhylsrEgx7LrYgKQiLdB4IgEomO4/u3Qk9A4XpH9+GmfiZqfYg25MzSXas\nZqkvjzZLxH6kiLrAgO6x7NHcXyU78gjiWx9hglh01AHFLAWQ+4zQwDpIwOLS\nSahG6kiXNz1qTyjaSPcxpJdx9tyR3sqZCPBk+9GQvMxSlWZSn6YAa2RbdkL4\nayPtw1ywlQ4KsIF1N6q+5+NUqhWWmz+4lQqSzsMMklhzkEsWMudneVTX4gMQ\nVM9ifHIkB5J7quCFW9NgckMivdOvnSAxdyl8eSpngyEg1W7F3tfPl8Mqh7iM\nkZ2IsnXgzbVj1RSFOXiIIIu8R5nT/d4zF5LwNKMy9M3l+4tXqjO2+Gg5cJUo\nasBEcqbhecINBU0xt44a6JpH0GPEABKGI1VgxHscyrP+eIzwsFv2PI2vCmA7\nPk1C\r\n=hD8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/touch-target":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b86d826b7.0_1590531223957_0.3829449017534401","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/checkbox","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebf2bbaf6fa2c121eac682c5c8d5eb5ea118f854","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d91794c7e.0.tgz","fileCount":38,"integrity":"sha512-qKbhehnaljHAAlOtwvw7g6KPK/EBb50kPrvpttmYWwlIJ3EZrOIVdNmmM/LGdL5KgkCt+emig8B1x6Vm8pWdJA==","signatures":[{"sig":"MEYCIQCLBQuKqXUJnmzxmf49Ly3bEzG2BOB6Pexs+kRNOtvsVwIhAMZdj6PgYLteYhf+GsFdNbaxOWz6Sfui77pSdOj+/+pp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxRCRA9TVsSAnZWagAAKxsP/2iYz0aZJECzuLHmx5Gi\nLZRyxDm3UZlOFR6EROfxjMalkEdodup30DD4QgULjJzd0cf03/rhnPq+j+Im\n+DigcI89mV/z1e4QoEvSgdOSRn+sLHxcUhPdoEHgs2Uwa+r0IQ1XhkDBGeHZ\nlefVidj7tn9BSz8jcuFJzBYTQLBljBi/CftKeGmE0nTO8vnIhpEY0IgFA6Sa\nx3+3EhlAtsVgjxZDLkn6DnOFno3Q6pB+nNKZYx9KXTj3Ri76uZ8EmLPTkITl\n9wLfGMvLClK2qp3r5YkaGW8WO7+F3dJ5LUR8zLgUe4P2ppzf6YK7z3bGiRit\nK2E4DXzniYz35/0k6k9I3jIa79n19NdMUtE9bzwEh2zMF2v1ejn1X+Es+0AV\nv8kT6z7KkoQ/7XQn/Em2c0j2AvIr8lihTMXxMfiW2irKKSLle4JmkOWHNNkY\n7AWir5zNkdCw4PHDSIfvW9p/dDW8prytdCNKokOd5RtUiakTDjNAGHptpCT9\nDs28gvEkWTMkH+19lqUcZwpuhdLOAVjEbwnCn18tsmLXHfZ0Zdv6a7yiAFDo\nfV6Al4CRlfBkbWRQkUK95q6T/e/327nhkg7dF4krH6zYxeqnhZ+YlbHUSLsr\ngPfhj9gjlWTkof3h4axHytdB3YCxEeqVIMqNEQeLNIa5t/j5+e8fW03ALFt4\nrquF\r\n=n8hV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/touch-target":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d91794c7e.0_1590537296665_0.10744286877017895","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/checkbox","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52cc35a4072afe120170bdf8c2bbf1c6fbc551e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8c6d7e076.0.tgz","fileCount":38,"integrity":"sha512-GU/fSCTk3vmvEhfztD4+wGi/eOprv9fUDFwXPTdQVTi6J26tNAAw7H2qU1cqDQ9HqpuzyLvicp++XVyWCfoJWw==","signatures":[{"sig":"MEUCIAXIwRi0ZBF4tSIADrrKDcfO8iR3u8AI44v94EofpDbsAiEAzznq3ZB234IGeuCvZOp+d7bKd67EERFeLsSfeKkXa0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriICRA9TVsSAnZWagAApXUP/1nj07ZiNwddRpSnpMLQ\n76BOOJfAQQozNtmab7pPEDaqNvLnehbjYNy1uN7YE7LAUQBG34u0FR10FcDg\nPZriIE4Yj3BOvBrgaMsa4+jU9fLzY3XpA4UXFq+Wq9u6W6NBm3tyE0oy5gjp\nAmbrgtbOxzC/x/Bk2EaInUF7oB18ccgpqBNPYA9CpBpN7oiYW5jiPW+6ttxN\nuqWBtFW8RDcjV1Om0NR7VdTwNgM2HkFRPJdsKDVj2n+GnpLJ086wBsF8D1ZG\ng0hYXaHGpOq1qQMPNvy/CfSiv2103qHknD/VXOA2EtIR/m2VSouotqSaeIkm\nLa3CT6qkoEig6IXIA+TvTa0CgcMxZg3le35dXJ3TuDXrgM5w1t1PR9spoez2\nkU8eQ38IvlnYORdslihfV0lgOH7RPho2sih2K3wV5IXniQr1+yn6oIZZ6GKe\niISxo57u3vK/8t8jTnTjIVsqs9Zf6stgMeYtYO72eRtVem5dNK/9uVG1L6w9\n3vPiy+RhAjIDpsb4AnnnF7bdeYUfGCANWwBOyZI2B6o2tEfm5Hs/6Dz8ydP6\nWH0XhFrrB2DRDQK+pn61NS8M1yXA7MJZRzL3TS8EHfiZmdynTj9ubAlwafRl\n4Hr3J4hVRQiN1mful2J1X/jtQWXzp9UoPYTcWGo0r1YvbRUYhulffTZstKxx\nNRie\r\n=CDUg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/touch-target":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8c6d7e076.0_1590605960297_0.30385047034432544","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/checkbox","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e85031d04deecacfe8f452b9fa5cfce9a8b0099","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.5b5f62f93.0.tgz","fileCount":38,"integrity":"sha512-lPFshtrgseccgzFCZMCxpKrkAKaklzH6s8NrczUbrq562z4n5Wnsq7eAvE8S/J/IIsHbbjFoXkfvKIHvzmYKHw==","signatures":[{"sig":"MEUCIQCmykTQdZG1quEwS99FcNaAusy7cphiMyIti20QBkZI0AIgCS1M05VyBJFuVQdN2KvkdbeNxutQftaFQNt4FyNUhA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezryaCRA9TVsSAnZWagAAuGIP/0aGV4XTk3OdFSe37Xpf\nG0qhhidDnOPv+8MpWix5Ut8FnoFedrr6DiMhmgp/c8msZy6ZHP8Ii9l1jIx+\neYi3hpzlaS6mU1i1A11y1Hm/mZ/YHcMaIxGo6foUjd6L8cm0iFPhfY9BUhkl\n/I5MthOOCoZ3+x6f3WqzaEE3dMcJnEsA4PU5oD+4I3jksYFJKJsKLHyyiA/X\nwywAX/bBz1vSXUboG3Kd09QgtBRfgwbfP0JOAbl3klYf6aPQ7pYjHMmYsPS4\n/XP9HdK7j/odTAASpsp+ihrVZocz6pwAm6xXxcXXvtAkpQEAZ6feRvD/tSgM\na14LVYyz1chWLDV9DfThqSoVFnvDEKmzv95BHsnCdiL17eAkAkBnW0Owkfcy\nJ9vK8I6oChqM26+xOoHMzFMbXkgybVmkGwR28Dtr/QUN4bVs2UnJ13P18VMz\n3ijw6Q/01oCpBh7kwidnisOkWlpbX+iMfo1hkccKjqwOlsF/KTYPLg6Ktm5I\n7Cau6SDTEvqIRW+qkvMwn//CkO6MZuiKIUjNhpUHiKAB03EfXzXQGGsFF4oY\nZmNg0ABL32s3dyPb5xmXwzZRUnD05mqQqkGpAXZH7NKH1GfJsYKRUhLyoBrZ\nKWQlzsNUP59mI6iwL2gXXQ8kXg9vDjaPREIJOqqOsHkd2h66Rcjcof3a4Ez1\nETPg\r\n=hT6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/touch-target":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.5b5f62f93.0_1590607002212_0.8775556139475373","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/checkbox","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a836f08914c663e5cb210bb662b2a47df0d08988","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d9972abb1.0.tgz","fileCount":38,"integrity":"sha512-63V/OngxwCJs79MRRHGz5MQpjBmCmtZHE5jYY9oz0SejLhknqqYKfOiPKxMsZp3f7Y7rdUkfUxTuMBf+BaIrVA==","signatures":[{"sig":"MEYCIQCMvzBAowM0TPA/PwShf2XXModQ4oOjflnOWZs3HvZaxQIhANU/JQ3ibu0e6fO8szq34h9v/MPkDRHeUl6arVy8xvxJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsujCRA9TVsSAnZWagAAvGkP/jL0xM5BTMPlSh5ZV+h9\nM+y9S75o0XTagN3z3Ht91QRAeuMatF3eFXxU9gLTk6Y89r511uREl9LxIuVA\nXvr8jeUw7OV3mYWFOGlvoy0sLmcIn/1UNl4greNxi7G+pMgQn8MC5TOZ1hLB\nY/XBD8qNJE0Z6kU/+HUAiHkLzbaYNYIVzXsDmsE1TXu3GNeOJU4mpR6N7y0X\nM8Dm76Oe1VUV0GsAxvJ9QYApxwBUgQZY+7YTmUq5KM6DP7Cuqz7bP/u+owNz\nVGeN4h9KTtYADber8e3H6oVAjUYFtSBIbzyA4txrkwi7x0GU1sDxGPtm5GBY\njVAPmwn07ycXGg02EsRiQUzY9uh0HXAN6OHgaCzixE2LGfd66FMMWbwj1tC4\n2dRVKg288Sx7KqRQvJtmvA5Wru5/5lsH1nVgcYBK/TghaiXInXg1/HLDhnrB\nAjHqcMdxyFNe2n10H9Xn/IsUgS+4UdWieLLeSxBjS0QyokdnZPXjmOhF27rO\n4ilUvefoB0cnHwP3SvlkNR7J6VGH01vmnKFsr+UGEwgNTt5j4Q+04fTBlIeO\nXTsc0iJu/OMeZW84O7Cmxfkhq2FLjRsYaoP4yl9LBHpsxsh3twG7NKpDIMEm\nWp3q1IDu9AAVnzjbUF4yDz6WvDu46iOUQ0m0Rvf5rEumKFYXe7ITZ1r9NoYu\nyUhe\r\n=Kcig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/touch-target":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d9972abb1.0_1590610850615_0.30436783088612085","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/checkbox","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2f4b1603557726e65e4732dbadb2f945f107bb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.6556eda2b.0.tgz","fileCount":38,"integrity":"sha512-/g7LoH9wlt0SQ6kaN2zhQpRDgIiX5LJ5dj3A07MnSQIV+fP7J0t1QCsK4mxpuwrlfPUVRjaYBsaUdfLmPNLNJw==","signatures":[{"sig":"MEUCIQCGNO+Kf8Xeadnv6Vvtq60bsNpDu+IRWSRXrdSXPtcFGwIgZI02S6Hvufsz5CgPI595PPeQ5WiXTFuNqjDTTuyEavc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3JCRA9TVsSAnZWagAAMigP/1AXadu84XnMXTkGUHSK\n6Tm13l/vSmeTudbbAAInkVwyd2sgdva+3mEilb2+wqq9Sc5Jw8pjSKN9rjsW\n3ha0jLzvlN2ZHV6Elj3GVQLEYfXnCVC99NJZZZDaEo71ndMrmpTgPt9XVsuf\n8nprtID7sm1x/xpbcwDTQfG3kAhYjZaGNQPJpOVpy04799n7ZNivEIsLHxsR\nFv2pcDYQPqe4r3vbtbPVdVo5K2OFIgDKd4Ll/qc8avNFf80ZxxsP2FSLRPnF\n3AgiFZEC+3bQFJK8LMRj+/B3J+/O6MzFBAPg3t81VBtBJCx9/K+Gcufj2D65\nklHaK73xG+KnM/HoMicV6S3FqzqlOg+GWWSZ2igj7uVdlOr12rv0B+xJ0mPb\nfcnJmu09VYbAgSmm0z+jI7ynirEUJ7iMJbMuGyHVJgW4X843609IpojN5nkc\nxElSRGhJPibFR+Jbq4lA6GelvmD1agWZL9zrS4oxhNFhvZizt6UzmTplmvci\nRu+sAyUZ6jnkSDNIAIERYLd4PJCKY567nDks3mm/3t+DGnkaIHK07DfDxYtM\noEY94B0XWbXkn9tdzuJYkcquYfGKudrJuWyuODznU/rXNRnIcqVTQbEDvKjI\nmMweTCqW1fux4Ow8go0nI97yhU1p6GiAumQ3n1l79H2uHSwsuG1YKolvj9tg\nrroG\r\n=PQE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/touch-target":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.6556eda2b.0_1590611401365_0.33616444433852566","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/checkbox","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.32aa23641.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"089402ca0eddd428c07b3b2ee46dfa911fbeafa7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.32aa23641.0.tgz","fileCount":38,"integrity":"sha512-4mPM3v3lQf9qqaqzVr+Mxq4w80zXLgIAF8GngQgjNHQf8CYZUspBjqVcR9beGLkOWPndkR4SChQ3AZQYotAaqg==","signatures":[{"sig":"MEYCIQD9gJ/7tr2xSwMJ5ktYvJ57NmugMUf/ctSlVsskG7B+1wIhALJUTGVxj3ze72ICy7NmTG177NBaxFmHRuuNGyX8xaCW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3HCRA9TVsSAnZWagAAHRIP/3mnJWj4+lcCF+3YM3N6\noZwLkWWvH1Yf/26VrnmNta0AzvhdaGBMVNlgRlXvv6MNH1TKGfdYvbbUKcBQ\ny0e6e/dX6Dde3HLdmYDTyXD6c6019yTm0/qyX8efprZOpzBN8EZBcEKr93iJ\nFvW4z+1pHfpzGBSNOE4ygPKhKIV0htSTEdmewraLB78WimhH/CdckJafmqta\nPJIRGElqwTaPUVghaZA/rqNYmklqNgU7gdBZp1rOz9QPpOVurwyjIoR6uGUM\nv9OKdNJbLC+t2VP3d2WC1i8qaJhEtGYwCdiL0KPt3BK22djueAVzbHnXOuqh\nQ5efGe6sKi5q9p8AOf5BMRdlFyHuvUX4kLku5SdjJa9Ahu31qq4cMM5AemcL\nOHLKitOD9gHRH5L0GL6DkGWeTDsy139UfttoZs8wyhyodxU66qN/MPkyrroY\n13K2KcjcA2I1QHKq6QyoQH8CEE5VG0/a1YM78DTMqHXkR5YCwH3yjn/MOvab\ndtHfxCER769wY7l2f43qyx/3TX0KDw2y00+gwkcBRkaus8q6TaoAQSxS+R80\nKhs2oeo8G7nZBaMzjdVnWjTztQH97HZ2k5tVDuhra7ctHb1jpJ/Em63AtMjg\ndCHUj9w3Cx9EJITiW2jC2GWpvbngx8486sB+yPf/A5HQHe5k1R3SbZ6kawDi\nRqxr\r\n=6EBp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/touch-target":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.32aa23641.0_1590615494708_0.9865277819763696","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/checkbox","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.654934dfa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aa38978814e5cbecf4d812f040a8afd5ba84de1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.654934dfa.0.tgz","fileCount":38,"integrity":"sha512-bGp83YzlLXs5PPmozMxnKxWo5hXpf5BYcWTHUMsZhMbeUSsdZV3OgM4q4d2ltkWqLgVj+fCIww1cMUeXcPqkdw==","signatures":[{"sig":"MEQCIA6RExz76SVqQLuwRfUNRXRCHxeaf6oA9+L13lz6SrmUAiAkJYFTb133Hm3TLes96SYVLqZgIjM14EGpawJ3rqoK1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwenCRA9TVsSAnZWagAAALgP/1pmLUwzgVVIuek8TMio\nD9GfawXxGQB+kKfgW5AE2EczKsgNNzUSgRolfwbQjRdMKDRg1UZJKLRu22i2\n0dlVb0sm3GgHGldl2aVnxSLREcRJ7VR+ugOC+K+LJzk9+L7fCXdnFz4dcOwP\n/sk3lWCHlyA7/zQEUImZfz0TbZJ5lx6w+ZPxnOQQbenzL8YJUMrP0F+TFHrN\ndpx80rhbhqj6AgV6iwf4+zN2FFqtP0T5aQl7utSylu8EW6ZPhbVe/onAn0gG\n5qp+AgHDBDRqlKlxpHf9sT/v+jSX8by1vpneMtjjn+r6hkkDioibfT8Bo0bn\nh7j61JXhSR4BbP65BvULSygORX30KFoUms0JN8dXrARMTF9CAVl0cPtTBhW8\n4UlirsyEhjZpssyW5YS5CD27WRM4x4wzT+tLaOK5Evz58ZjRRbpEJEfyfyDl\nZ4mgWU1q9MoB5W9chVUI3SCLHRAHnW8z5SD9zQgedN3UlEXlzKT9AGxJSBOS\n88iqCdhOfWiulvlsCvnB8KxBsFl+Eo/4ay75Po2crutdz1BL3f7/ZDEly0UX\np0CAAhIBHoaJQNlTfW2ERjBMe3b7QjsAYK2FjZjKr6W4QdhHQQN4TO2cBRHC\nrwbf68o16W4u0/QK9DMaD864nBRnQZL5jfKJvaAmLNxPLsMkdvuRID9LGnEY\ncvhg\r\n=t4rS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/touch-target":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.654934dfa.0_1590626214616_0.8222397460003845","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/checkbox","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbcf2081fc1f05e8d1d06748928920fd81bfe048","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.41910b8b8.0.tgz","fileCount":38,"integrity":"sha512-LKWLhTxRouyIorGbnT1NRdDhjFaSFQR8XH/Zn3XEu8MPiuCGM8yfWGesRw3th7ttNryAjjwuWH5yn9NrEzuhQA==","signatures":[{"sig":"MEUCIDSqEES1PgLuxu5CLp2Epf1T0FRs2xfCxCt2y44TRHvtAiEAwKuYVhoQm+JHKD87uJ4f0eDS0wmDqKdfMd3INgud8fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsICRA9TVsSAnZWagAAlk4P/iPTmGgxZ+mzosVukqSj\nF3f/Y52axnxxLcYmFKTYW8i2cwgz9qUwBo4fObwTgLoZVFPWYR/o5s/2vCIw\ncbFAwsXqbmUqEghF5Zm+73qiRu3PT8GsxbiF8ps5X3OkbX2WcnMvMNEmyxAW\n24ezX2Xekakm6M/CdRjMHF438Afl7q+sZlfcKBt+H9B1QE3/UYuwpwyIgron\ns7wExaWCjzr54Qji+FHMaFuCDUEhU5RZhe8C9eVxYsm5p1anuGRBwaa5yX3G\niJqm8cW1lIyqedXGop0MpIxs/Z0hNC2+XJXCVL/DUd4aNK94tdMEk3O6UhhG\nhLw/fML0kTE5Xr1DDF779P1XMKXk5/cX8O0fnIetOZPnMehHX3Z68sfECNHU\nd356ejPlvn39CJH2w5PLQb1hocJwE9umHj7SP5w8paDZp0bX0/MQjSgXMqo5\nrAa3VjH3hEZhtL6PO5ncvXwAGQLccgmq58zkjTy38bg/Q4qkZl2sotO1sE8Y\n9V7sH/ZImY5y8RMw5n+fLIdiPRq8nO/LBE0SNxHsArGR8P6xFGQw+fBBjfib\np4zhkedg6zXUZak8fMAJhN7+60QMWSapH9oFAaCXObrGTkiitfqHcxy1icVe\nf01vs7QyPJ8eC+y3GQn0Upyx4KOMRe9r/njJTM62ZAfGyBIlWmfYEJwRQrAe\nnjPG\r\n=ZkQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/touch-target":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.41910b8b8.0_1590627080263_0.8870301491451704","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/checkbox","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3724c9a463e5fc866d641c2484ec0835917988e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d66d22bf9.0.tgz","fileCount":38,"integrity":"sha512-wpr/fCho6KdnffAtY6ljiNVJQ0Sfwim5ZUe0LQMaFRfUuLc828B7ZiO7zi0NpJR/OL8yD6ZZNcBok/vgBvxbbw==","signatures":[{"sig":"MEUCIQCMhxmGEjZ6Rr3gMUbWbQRmpMoiiSSbJ8+tDgJpqcqEcwIgCySXSa2v3Ndpo7THRidamX5m+c3zYvis/4f5bV+A5kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcqCRA9TVsSAnZWagAAdJsP/Rkv9xDrC+jPZAyerVAz\nVvDVi+Y3gePadW8rthx9O096VzDLGGDlbmdzbOHMy6RLhVV+nzKcFGWEOO5U\nUnMtcIO8gQeJoqT1vjfQM4lcWA7GY4ChK8ops8y9SK4/uHiJkAgOECLgsUQ+\nShBU9tZOFn02zUWcoMsfdirYz7LEs1CS7spxMPdWz8VKEm9W6OHTbSV97qJD\nBUF487/R7rZ5margWIxgQhFVwl1Z80HEJlmY+YIWCmwVMJZ13D4/4S/NuDJh\nQx15UzBhJfvMPH1rogZohCxl0wIkdoZpH7FVR2k9DxK1WBufmh1ceuozggQk\n4xdQR8wiTSJvCg/9HLFwXSoyxq3Gx4+nBcQu1Si6JeNiy1DyrPgvTJ03/lc+\nP7tKSzrNJk+7uLTpjFqB5n7s2RP6N/p8gt8tePfcTfbqzQvh6ZE3/KGaU/AY\nXIhcct0rHQej16dMAfRjGYUawEOs9UV0p2aJoQJqU9E0Pp1dIqqHzwHKLoIC\ngVXowfLyh7xz7STYlkx3fyRc92bx0C+W45+mYm4nCwnLzvOot6nEnroK7YFd\n6DUxoFCFRQ+dCcwS2LPbOZ8Jba4ChOKX6kIDwZ3d8rJ9+xehf7xWFKuJJz5X\nK85DO5o4tiMctmS7ybJFKL+jrSieC4mJwXhuMpRv9ntDw2XTXiEDC6F8Ksgk\nZ26I\r\n=PpJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/touch-target":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d66d22bf9.0_1590695722094_0.6324526923917357","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/checkbox","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"628561ea20af26fc03c563e560d845daf5eca44e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8904f3cbe.0.tgz","fileCount":38,"integrity":"sha512-gUKSKirBBQa82hpzykFZPiT8yOx8NOF1C/L6yvInWOT/S4VEEZxs2l3NPd6BO2r6d//fRQd7pzPBttlEX6mhvQ==","signatures":[{"sig":"MEYCIQCsH0wNkJVh9fAS6c3Y/WGsMOL5Lfq6TvBvJHGYRApWcgIhAMtumkC0Xjsqf103eiShAOr34TkQ3s1rPL11jfrnK3Nt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1OCRA9TVsSAnZWagAAOC8P/iOwmAk//3S7xpcuib7G\nVcGRd81iIc9w9gPUE15A09N0GZ8noQiiS49OtcH3YNmxZuMeg50mJm7/Crn/\nkzdWYTpPOv+chM22W2PyrTlXbKqG3kc55FrDi779I/WnkWrS6YIFhX9BgxpJ\nLZd2HcdqmiZK+GXI9zpb5iyfFlCV1Tt8Q8DXDh+5XU7PZjlxe1otQmo7g8Vc\nyRL/UjdJEE5XfY5ved4LAaZQANpyu5JAeOh8bnJk5rXfbKnhB40e4DzK3Sy1\nx5bJ7iVIo9Musu3r8PQv6649fiqf+oVnMpRH2wXHwkuMG1iNjzexJyXYlwUJ\noJ6Y4zngoBw5hHo92rnrLzJZb55autyZiBVbT/WrkfiHOVSUM7UOW3zhH7Tv\nUx8tNPVIEJS3T6Dd6ZbzaoXSfwgu5EXtz/CB7gV3IcTeZ+9zeXT/gyOiN5qT\nIn93VriVl/oTTh0/ULEr7F+LagfgjoYKx93ghthEtBNua7XRKy/j9QYF+d7P\nKnjn5JuI6lF1UFzTIMkI9qlO1Y6fJHi2FFu6ltxoWGeOFdx+y5SU1YlAVpLw\ncCkDqJjT6lv+VCWQPWCiVaNmibrFXZknjZN0TrjI5COsQyuds2escIGQu7Sf\nBUaBYD6RkNCY9ip0Ypr7oFfYi3bjlvycz7q98/rJlo165+nPCjmvqGlZL0DE\nJ6uS\r\n=x9P5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/touch-target":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8904f3cbe.0_1590771021429_0.8837715890859854","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/checkbox","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1127d88b0b3a70557f7c9702d40f9e7eb928d531","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.51512a4ac.0.tgz","fileCount":38,"integrity":"sha512-6h4aWYt9ep4fE7k9HxEolj5XnwVT26TmQjeWgBlI001Suh+VeacKntYl4ZNjrLX6mX9nzvzRifFBANV5hZs0Ng==","signatures":[{"sig":"MEQCIGpNvf+Cg9YPq7TSTrRVCYJ0WzMCa1vj0PZrb55uXVw0AiAtZ8/N5KSDFUu4Ok6UBft5tN5oNscTGnGN6JUBnhfAyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V8/CRA9TVsSAnZWagAAJy4QAIp6VN8atVTxF5yeTw0t\nRqmJL3tcXEoYRc0pveIqAuHzzsSgEqOcVMnVDVF/nW1iAsM+PgU4niWxCcPy\nqhjq6/vfOAvFJP5fK32ci/dr2C3P9IVsVhNVC1e3OWAiFo2T6rHfTpJXt42L\nt7oBPRS3T/NhVlty0iOS1buWrVTDp+SeWgW1r7pYpkgsTg0thGhIUWuoNmyM\ncCPcDMxmMWP5o1lEVBB/W9h9bbJWJTr4BIupdHsuUorCuH6VYR8oS2QJIiL2\nJCspqOTFz2H/f0nJJDegkzGLIJH1aQQUDlOi0XBqgzOI+eqRiXRfzqy4JyQ4\nhDh8VqGgCMQrXzsB5XczTOoA+NYcaVpkD9878KPhC4QeY+hCxSr/sIEMamj0\nRGEzdGNRwlhU51GfpLf4TxsmY2BvdFnR6KfMTmAlh1g/YB0g64mnC3WI8jp0\nqM53pEomJZnWg22Z46ZetL007StqS29lrRsAYnTdYG+E+MboerUtoov8edpk\n1RjYUeAw23pPgZpcCpg2QlbkblDTV3qljEiEOONmaVc6HHULB3zYep+AVjeX\nMKSSFKz4XlQB4AbV34ukUzooO/jiTdx0gPeqoReocxvk2aDvidh1O9ZRubd8\n2CxXsBG5N43iaQFHsjkNhL96R+oRvOcRIpkHaynb/DkFe7IxImm6Ibmxa2jx\nU6G5\r\n=1sL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/touch-target":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.51512a4ac.0_1590779710551_0.5185178804430617","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/checkbox","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.0743288fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d1e4dac9503dcfbcb3af46a24d3b0bb6989edb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.0743288fb.0.tgz","fileCount":38,"integrity":"sha512-I5kVIXEZSXyFbgm75oEuNvZrcOlvqzwJcNXRgWnEDp6/GhVnBI5ExK7f1Nl4jk02GE3ewIwdcc8dympeYaIUVg==","signatures":[{"sig":"MEYCIQDZuyiuk14TOmgnhNh2LVHtZiI8Trr2Zm1Gs/HTRTL++wIhAJPmr6LxlcgT4dLJ3PDxggDjMJ+qfDEmKVSoRyAd8H56","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrsCRA9TVsSAnZWagAABtsP/3x8Fa6C99RZ9jaw0ktl\n8vkZCZBKyOLuYzW980inCdNJNpt4d0qkATgtNHW2bjL8hHKaL6QimQEnYc4M\nozA5T35xlktTBIQFjtPeOCjh6oISNAauPo1OEbGOz2XRZct+owXncXWPgGTQ\nGL4UEXuFudsFL7jhLK5sIX6H78jOZKWev3qVvzcRTgrk059mjq/wdUkTJwcA\nP5tHfyt2s/8LbW8loGGiUmxo+Lj90EP3EIvcqQ9MVcUsf1O0RjbO7+nEf9VR\n8GUOKn5FWqWrHyF095lebQFPehuCsMmcO2LPa37F9EnVTeqcLLr3Ze0oyGCL\nz+SdFCQ3ATJq/7VzN0/STM6mRLqZ0fALUHbdoNYKCp/x55jN93QRxGfAOLIf\nQbq5vn0UMyEhxJmRNs2dgqQXFzV4FQJCiR7bElNnutlUsnSz+A6JWuicnv7g\nAT118oLeVk0CILfxC31EVMtyR8wuYKyD451AdmVKgafIjzFjOIkDzkPQ4C55\nDb3U69din5rGDAiciWJIWb4tci6Re9TEGDckxbP4yi1geqUuj/Nk5tAQP2Vt\n/To3w3pVuUU2uzcsjuEIxECS5CRWkAOgb3c6jegKWUuTYJmQgBpf+TDmmjvx\nKVHhIKXE8YCWG0CO9hJjeEONhRoDQXT88kgTd/dWdshJwN43gkcg15CCCXUY\nFVxa\r\n=pFr5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/touch-target":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.0743288fb.0_1590782699924_0.09366148959357257","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/checkbox","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a923a13b6886b142760b6c6f5898d6bd7b7a68d0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.06ef147b5.0.tgz","fileCount":38,"integrity":"sha512-Is5naIcci+uyYyxtmphpwFX5DOlgfENqck1rn21mlMOpurBY7VcM5J0MkCMZPM8mpMitAzqtjD7hgDsGs7+dsg==","signatures":[{"sig":"MEQCIAczELgdpcJsycLRmUJpL44z9xXI4xVPAMVCmQyhOfAPAiBoKvx8WSIsmz9g3gvjyENbl34bCqsHnLrAwmYGan4fWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNFCRA9TVsSAnZWagAAUKoP/Rfippe28fBDMkP/CM64\nWOoGdoBkSGpHK0IsthOd4Y+7OFsCHoZO3sLEp5PKdWw/IRr6QPGAB6v9q09q\nzDeepxP0YUGbwK9kzgIek25f7ZnHixioeVdp3E2Y8SkKh2ta5RjACKXr5rxA\nJ6kHIfI0O4Q9/giQK1nOOPrkB2129aDyyk6JB87C+dzVOIFuNFbo2Y4yURSy\nA8E/NLOFsssjIPixaG7zpifPY2YmIVAYloQzxekU3FJ8g9Opgao36Z73PJz6\nIF1AflTMgoZnJdAojQB/Zh9LrR5WzwYuEiqNlZ5PgVLTd1C9KyElPKIr0k8a\n5IJSfxKdnKlK1w0qt/CRF3AcP+ruGfBQJ/43QyMOWGZ5EReR5Ssx2prvafrA\nw8mAeTssYjDHKEGetorSkFB6NT5GyFMUXQCNMLzHgPRdbi3T3Mx4pJL7lvwF\nrhSXs1oAcM3wAAz2HFkNcyuNoHYeuPK1htTO7GCtdRLCZsNUwbDRRGRDAJUy\nndjNXX+svPNnlDBkiZzhr/Gz7nPbWzfbPC3CO8ZaWrpQPFe1Rtta+Yc6p5uQ\ne3MMfEHjddR9CPhELJBmX3L0YnvJHngM4fSVmk0Y7U3fjl3az97RCkzklupm\nIxwfVtyLeTerY7lLve7ks1s8LHcw+BEiFTmgxESS1m+0CHWJ/Ud60NO4w3A7\nIU5C\r\n=29yP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/touch-target":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.06ef147b5.0_1590784837244_0.017311504000793843","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/checkbox","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f08def579f5af1752e3ab07487e3b406bbf10bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8073a20a9.0.tgz","fileCount":38,"integrity":"sha512-YTKnj2a1IJtyWZ3N91ybVZVnHyTMXWuRTNWuvZTMBYEGpjMwIY8Tx1t/X6XtEVP6nTQTrMKAbjkEnsaDp08Ccw==","signatures":[{"sig":"MEUCID/OEmS35fvBr5ePOvt77kcgSetZjOi0rCLYm646b/9sAiEA/FsItCkwHMA8EbnAbOQarpkDqLjpHKzO2gaJ+/PIl3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnoCRA9TVsSAnZWagAAX1oP/3Xk40RYWLzCtryO5Bqy\n/rpLen3+G3MZFOa2SZJ5dKRrnobRxH2vWzD5OOXLZiWwuCKh4P67YIwO0jAr\nf3g+w3JubS8eRmIFK41WW0TzcPlofqv1CeIFFO0wBKonWHy2hsT7XLMASlJH\nofD+btZqMK8x61Ym9QwrnkbELsamAAwwbahvQJIc8Cq46EfyB9Gw1B24bCkP\nWyqTE9dRYCw/k+MPzgJ9p9NS0Wu16k8byBWudXNoEka/xLiGey5AGQMilJzs\nw3lq13jZTdkVE8GZtzRelZZ6z5niJp7t5XOSv81jBRodv6C3BGdNnkK49qjV\n3QhHjO/Ta/Z0eyLvX0Bi5qVJODBTM8ud8pTGE7IW4QxbsOhwFX+vddAC9pcs\nWOhHMtoYN/hI/sDupk2ekLj00JSpelcXYA290kWUQsS+kwx2qqGLxUnP1WDI\nh6j1Dq8CADc2ab7b6UD2lud/HXGZ5oeS+fhuCWSyLx0DH++R6UQynoXxaM7o\nlb/IEJQ8R5yPjL9rDr1CubntWAvObVro8xAfUbOQ6BPT64jb7Q32v0YcIvGU\nu5apa2ySIEPIj/XtBCqGVohsGgCcJ1HTBNnlh0BJXaenmuNwM5wmdb6iKRph\nqjqxazbwde8FxWVRsJicj5cyyV3i08eDA6dGA2gkszalo7kTu5TDaugFFqH0\nSGp2\r\n=+noW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/touch-target":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8073a20a9.0_1590794728099_0.44570672551114576","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/checkbox","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.72ff42330.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee19722185634632c443ddfe59dc77ab0c1229d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.72ff42330.0.tgz","fileCount":38,"integrity":"sha512-SNiF4M8NZMdIugxywk6pvFO7XG3HgnUyY1B3kI92iAbfL2DR69i8w6sZpdei+Ru/QoR/B4XDWHhd9gylVglLyg==","signatures":[{"sig":"MEYCIQDtO6SUQajRR0ZDwa0Ymgzez8xSqiIkNx1kHY3unhVK1QIhAPFyXoKeDfB+f3hSF0ijfew8gR443CKwJ/BCUian7CFd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBeCRA9TVsSAnZWagAAljgP/2YYBc8I9wq5BFvMNaTw\ngdioFfuSLjhlvDvQ4Yo2gYHKiBSg5UPjUWX/xTkQxrRyFzmNQsGvkBjY3SDN\nNimUXbEM55zl7QIlrMyW/aJBCcoGqmShDAyAzw60YbUr46Nf30me4lKKkf9U\nK4NnmPXsGbU3F5l+ENsLcD/ch5Tnzb4MP/nmv0Y8H+djgHmQrlOHD0iOJ0cf\ng4PrPkiDtbK/rhWNA71ZtQ49e90x5X+FxGBrmLYJ8FwtLPr9VGP9jo2YIPpF\nyGcxpmSGpfBG1fvpTY9o+oEjqiNg8j13j4sJvlEK4qmT1B+ps9Siaof0Z0t8\n0nwQDRQZ2aem6jK+fU0vRvo0T6JjGcUoCrv4YfEoYwdiA23tnaYj39HXS8AW\niGyE6cRxmcQlGsJXPJQxsS4TvDeW7/8o+FUcVu7HjYqnMbzxchPwzr3pPxsi\nGDMaLA1JwJ9SpTXcgUnO6eKBdVYQhbmp5OVoTN1CPS4zsZaXYY60rWBZNZaL\nHMnHARdDwgqM6sy87GiiknWSYesoo51Gyy0g2Zo0hEs/ykn5M8RRSC6Yh/Qy\nr6gScsjrI00FAK1Oz30xjoD4eyhWsJEjGi1KF+9zd3EgsttcfyXLr4OlVrCf\nMKGQjfnR0SS5WlOUBhUdhxxp4wvA9JX9sdR1KoMY1LJ65fAfeEiQl4/SM7Pu\nzKl7\r\n=QQBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/touch-target":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.72ff42330.0_1591029854322_0.3977593711840284","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/checkbox","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ef4f3fa9c12548d5757b6cf951278a5357759b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.9ea52070f.0.tgz","fileCount":38,"integrity":"sha512-0naMkWDUPo2akvoIY8OHBvo7n5YTwDO4jNWHrUuITH3SsNTf7dlt9Fg4P+KY+T885kO/5j4x/LLEd8JRZKlDIg==","signatures":[{"sig":"MEUCIQDmcO/YzbTmllZIDCfC2PUen5Be5fLaY4N6TbYkmLtSXwIgOkY4TwKX4obxGR9bE7dDQoxDxddEsyR9+v6Wq0BMUE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TF6CRA9TVsSAnZWagAAx/oP/iX+tyqBXQwAHKV5RJzq\nmNVo/y7fsUtZtvho5ajbmKQgPLKTalwOhLSkjK1nxy1l8sMY4AxxfY8efD0f\nW9qdh79BsRtGFGYNnp7ZREE0f11ODhP4mtTBYEzPnX4BniWfO/fGLgaf8InU\nUXXfYDy864PXdOI5HnnzFxK+pcLPSliuU6RHVgrsDQ+8s+02sbvUrc0btITH\nv8dFida6v+2zofw0cMZbQALFAkIWzaVtz1+6VrkzY/ijnHdow0NXgcfjFi3o\nX9HAz9CMjmtMwhUK1Vubj+4HZHadtK8LtJRbF9mYWMk7AdbD7k7KhAjJubbZ\n0OvojxkZ5meHcdBsSNQdzupERTt/8g9i5kWg7TsIL4h7aKWTxH7McEyiVh1P\ngR+HCdU0DZ5KmC+R/MZIZi7hDuV+9TI58Pu/SSAuwdT7p/NAJMSAz+dlXMFP\nwxYGpbn3Nf6j3rdwCXOshwtwsxby/gwrxB3oaudWGvHmT53pIr+nYkFguycy\nitVOkkB3F7S2smkvZAD+HqQTqNXgX1d63LTWyWXfgZcewGXVNFZVtYVHYeB5\n2dMd484vm6SItbCUoj7ueep5BAqHBdNWCw+QynPj0n88I5ziTMmUdYaRuBzB\nfH9gC0RKvPRP73b0nRRF6fDsGD49QXBTolyp08weOhV8ShHkxvI5UKJrIBsC\nVvlX\r\n=Zghc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/touch-target":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.9ea52070f.0_1591030138188_0.7896622475115798","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/checkbox","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0121efdac682a43f6b0556ba16c51802c692555","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d86ad3b60.0.tgz","fileCount":38,"integrity":"sha512-oRsHPfY9GjtymIxiaR+s6aqivLgbJn8iPL3/03sz7QnvBs80iJpedzBbmt/ceSlnj3YwkD7N0tvvqtuzCfcSew==","signatures":[{"sig":"MEUCIAzPzdX2eOalhK8VJyO6tpYGbl2Wrn/U9OlmiRCGaniIAiEAyteGtyEOW+1yLied1/RoYoWFUoPqQjs8l6UlRa5JLC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+ACRA9TVsSAnZWagAAZsYP/1ciaXhujoogdyx37teZ\nroiSz7rkldsFILsLIZBFha+UMHzfr/tFubtBwogJEibEWAJUgDlm9dxHYLxD\nCWiJsG3NeW5WIzd6rVFpbVnzzf4FkenxdTZjKaHUEBwAaVq3o11krSg4EIUb\nDtlj5I6HqtHLOiHvS1aJx69hfIUrDmzQbyw/9ZktSjot238glNidvHkgCUVI\nMuUbG51AY3SuBXmJBklWOKNrcR6mm0BWtK8+8RBARwAeJhK15fsZqQCH01xz\nYu8wYVFH5wy3sgOQmjkon40GphdHXIHQ0Y65QXMo7JqLRallN6sMC8zajMnY\ngYBWrmrUwFZFWPwmmBSFMKLfqsvX9ooPSqO4CjjRnSZxNxnGzOJMSsDQZmC/\nO6U9at+BjozUm7hNqT+l5U5Yrkfzs84O66zt59IDJgAzfdPX6GAfOOgDkjEt\nmqPp0QTvbpj2UaxZWLilnjP7S8zBdrSlUsQ4XZRmjZHocYipKJWi12gOs6ko\nISRExKVgVrYSgBo9xMZNJKLI09rNiSbsosNUmUbnFEtB/PJ0u5k91yZSM4/Y\nMgkB6ZLwyHHPv2lR9uEYddIOGRrnr0ZWYj8YFWwFQBt0oKDLA39qY0IPrE94\nXPocOvdLllX6Wv9dJKF/Fij1Oq/8LH0SfeS+UDEgZ+IbmoIi9tqPyGpRufNl\npyKZ\r\n=Xyjz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/touch-target":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d86ad3b60.0_1591033727856_0.5530168242141726","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/checkbox","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bfb76e8f5d39c72878c70e42fece8be17b2c84f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b9776b1d0.0.tgz","fileCount":38,"integrity":"sha512-Fc8IG0z2j0JiJjCtraptWA8neLgsr2L02cvuWrMDJ4oB0/J18MoqW1px/qMRqB/79IIIj5PuEja2KMDr1pBHDg==","signatures":[{"sig":"MEUCIFjg+f/cTJb+bo8cVILBqL/44y0OUkJa4Ikmq2RMruxMAiEAy1GA54Arjc+X4WxlwTcEuO4V88Maqk5e7467WbFN7NM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Ug9CRA9TVsSAnZWagAAT8IP/ing/aBfeAaWxEHGL4Ol\n6Vonka54v/T+BWPtJPiyV8tZKVnxdAeiIvgbdQ4sUp8LLiucJWX+CiR8KaAh\naIS6UoZHLq8m8iRZf8eCfKg100JHOsoDjmg4tfjLJpR49tuXG9FUlLrFPXVq\nZOsmq5vBERuY6oi3XmyxUU9yJ90CZilFSAf3cLQxlSqvlHCavR74UUPYtWR/\njz4gCLBKvDpeznL9BHBAigVMQKq0Wdw0VLvs/otzei+Ximssa28q/RZ4KwP1\nZNJwoHxr1c14TKE9rIy5JLps8+ga00KYBQSzPTwt3qpZFcHs5SxcRuIBU0xS\nHgyiPLCw0ou3EiVh8znNSfrHb/VGPkg5gqnJzn/R+LghJvy7PCkXeQczT3Fx\n+UbjTngn+X2RhzgPEe5vBtJkUq+QjePA8TN/9EKpqHDtTvM5Ylf6anmK+bpP\nc6QoEdEtw/SyuwODsIQQGQKMu8i/cXql6kClMj3GSYWaNJyBu+71eQkJL+PX\nU1D+TajNlOXe+uhpyNGa3XS5OSRVRcM2d/lVNX3KJFo86c7R1G4Vxj97A7iI\nu3iPtUdhIhWpm7zSVx+kc3bbRHFoma/3EU0dKk8awOSV7O/IzIh1plSNcGvF\n9VCA0pbvlad0K3xAcRW/NqB9BPF9uVKC5VVvF14ct26fkR2P9CjgKKH++6Ja\nV4O5\r\n=5a6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/touch-target":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b9776b1d0.0_1591035965295_0.5165986950044272","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/checkbox","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c2a7c56459a7aa468f038ae8879e3b30aea12e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ba6f7c294.0.tgz","fileCount":38,"integrity":"sha512-S7/YicloSbvr+PcuAfz6eq+VlSH2SEyN+22d9VFVkq+KkMBh6S2oeCD9m2eynz5gSq/TfwTzcuEMSaAAvbZ5Hg==","signatures":[{"sig":"MEYCIQCMWULb41XRI+v8soruYUUpOo5ucvPX/SWmq9VYsrf9GgIhAKUORAKGudILGzyAwWHpx0emKgRVEVZogtSNbXmQQgyO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYvCRA9TVsSAnZWagAAyn0P/1aVFcEJhybVRp5gI2bF\nocuerSGZ1KThncY6WzJsLdI60zrd3qewHBEFrCpVS3sLPcwwXEhqu/jPxlps\n6pB5DuHolKNO+GFNYJQTThAr9mLO6wwTeqk2zTgVwayQxNhXLp2+CL8Qppu/\nTV98D2ALcaqV9woYTVT8VsZihMTh8S5vjyroJU2LCb53aMJHsK35vc+oPpXf\nE+/ZexXUnh29DpFEB1v2Ho8NkKMAEioWVxmXiczVaBWeJoJsaAN1Okuf4m92\n4bMkNiqbtD5uxvMhC+vDdCEVpzOHmapoNL8Jen1aSWNpgiLa8eeAcqo3a5KP\nTh7qGAItaYs+Hv2oyN0W8MTTj21ys6b0TgslXWUJcGPwQkwhGfZxqnEiA2kw\npFt6xN+MGNLiBtOhwW/uv9ddg9F4C+MR3qaZFKmF8SYlxBq8dIjT0Qnoybgi\n7kXRhG6ImHuxkzJVRB51WeYkK2XxY0PDvVVJFj5ePqvVszh6UXA5ierwukew\nN1QDcGUS2ZDOKQ34ivvt/BzxQZY/LCfJR9oqt/cPvehBbClGOgVvzUu3wQG+\njpRyuVSClYXqMu8Yv0N48a7VzZEZOFEH2UmJgpDROEPCBZUgI8aiU11Z5QDM\n5NHRn0Vi3XR8N+02uE5eo3le+D4oKsKXXxm+Ya8NJ8THg1GKyCqrKd48bfZw\ngxMX\r\n=G61K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/touch-target":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ba6f7c294.0_1591117359149_0.009404974300523561","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/checkbox","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99de3c1942afdf0a0b052dab837bbe6ed11d1d7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.cf3b664ab.0.tgz","fileCount":38,"integrity":"sha512-Gt8sttudX6XE5iSsx93110i+tnxWxg2us8Kxd/zVKDi4vGf7hpfTGDS6bjeLOd83/1V5+4FOw+HXzlRRvew2kw==","signatures":[{"sig":"MEQCIDwm7QYY9lu32/3Z+i+rs2aqi40ucascUqB5yUOrr1w7AiB/wxgiFCRvX49K/2P61oW2TCgT7X7OnRosTIXhAGeoRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkjCRA9TVsSAnZWagAApdoP/j6BNtroi93yP2Hx6bv+\nwmdD2coVDD9+WZYMUWLG1enwDSk5W+rWxPAzNeUdWmyxEBs8fV26g7WQPM5n\nDCgBirsF9IIXHHHDEXGvm7N6R/oFMX4MBm8PNrXOrdb5qy52g2L22OeCPB62\ngMOIZb/cD2UK8AOaSFgxosUDyqJimdcgaCHN8Kv4uK/WyGbECQGr4s49Ec02\nzU0z+OC0p+fcDf0vQw76fxxELRfXhQOBvgKJp9WDwrlmV10BMdHjVf3xDPSF\nxqi3vk/ddZgy2PDONk1T3UkAnuT/dnkcy7W0q+gV2UyeKPbGV1j55icsxKVH\n7B39PjxMw0/JfPX5ECcNp0qsWcbU80XnvlJfyWEYqjtD9BZ5oCiXjxrH8OQK\ne3f2l7/hKZJXxpZfcPouzfoEcc3czubilvhxqRxa7bMrjfgKgR9KYuBJ/tx7\ncBo4Ggkcn8VUmCo73Oie708PKsZP6BgmIGNDXkaBYbhXCRgmVygqTMAsfxMd\ny8oj0GbpLE4ul9YZyhiKWi2xhrXu04Os2I1Y6yB5GHYHL35WoSYggrhpiPfk\n30N716iGdncd3Sg4+EpFtkglJ/TybSC41g4dx7C/lgKAr1RTXOkacIwbk+Wj\nYYszM7UeoWzGRcIi+aVWC3crrnLOnk/XGFdS+nGufVVXSojveans6Ay+yuE7\nt7Wd\r\n=6iKn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/touch-target":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.cf3b664ab.0_1591122211172_0.3931594177019653","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/checkbox","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a4d38f6cc23b10d8c2ef7b2fe076dc195e8cf10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":38,"integrity":"sha512-PTNM74yVcUY3ICG4C7nsm/Q0sACEmFZYsUuCetYqoUSNU4zXxOBiFQC/EFezqDgxkmkiVUp8QUNd4P/Tkahu1g==","signatures":[{"sig":"MEUCIQCZnsW+gmxEtpx8b84IRap1fztFKRtPa+Ab+MpkzdvRFAIgfDF761OeIFb/kJI50RZicLY1LOpwQlJS9t6tdy2oBPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uY0CRA9TVsSAnZWagAAA3YP/2xZBFDV01HcS+I1CryC\nagPAg7ukMDnFkGnkmkNBi4ysVHyggI5CgRZteASk1PF/n23ir2pDxpCYyqr+\nFSkfSEjSnlOvB9pDT1pe5eTQRrSyXlfo+byoFug9Vc2xnK9ACYaxl2qzQ43O\ngD1pXufBi2ll9YhgK/lL4ybktmleCBWeVuSi6dvF48wiYGWp8uJa6wJ+24K1\nAY9R+CZ4mAmSxNpwrI5rvWBGKPA2jsK3+RuCPqbpEiArnWQxSQjOqBMCdHI7\nIHYRshPlASJGOO/fpk2SA0dB675AfGr51dPNMyblGApI5Ksr49AU8NHfQk3o\njozBJHco5DYELQt6ON01j9HX2XzQ54GBVimJZcg0HkRQ9o/RooipswB0EvqI\nxHM13vC73NzFFBkIWzH2pzO/StRvUG0jzb+vwIb1hK1lOE9xtL43GFxrQ6j3\nm6Xa3pzAeHlxD2PEK/ktP+S7zyRRlvALVtmxIvQx5w+yXJvOba5z3ghdRoZG\n5a8BvI5i3toAYLTftXETQfUkVgJFneCUN2Ttnvhd9xy6khcSGGvJCqsrLtuq\nojWCbZBSWOGUMY00q5qLPTMs2nhTTQqs66VWO1J+mRJLeIMpsVTyi2NDrkZL\n2ByudCFMhH+ePudKs+pz6haKWZurD9pMENZknpXQLILrKokQz+bmwxNCzrkk\nwQHk\r\n=E2Nc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/touch-target":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.4ba3c9a31.0_1591141939565_0.7439409684889988","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/checkbox","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.388b042c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6037681c291ad222dfa2f5a03c83df94556e0daa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.388b042c7.0.tgz","fileCount":38,"integrity":"sha512-NBGuJqmzRzSUxjpDQ/q0CagcnBiT+HJaYo/2CgIh/d4l1t3D44T0MFUmN11Y0NI9Zt8otSDluZSuYmtt0EPuEA==","signatures":[{"sig":"MEUCIQC1GY+Xm3OGYohJmBmtpcnybDylhosC4gTd/doTIK9KMgIgXhZgPrkRNhZKQfJPB3I5PWaUAcHNnXqPKm6GC3XL3n0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nCCRA9TVsSAnZWagAAGmYP/2RzdSDp9AqHqy+tb4LX\nPJ8G+ixiTS+0xYU/0nh8PV9WcB2pUQ6JZt7eb50TZuMo0+zEwXPQMGVx3XX5\nQgtd811YQ1Qbos9qtBujdCbVQvB5PyvQm4LH4hb0E2SXRmy0CVJVhvLsI2rw\nD+5FycAgkoOMcmk4odKydKU/QVk7CP13NfzJmvl/+fUpbGit98fNt3hf1z53\nvQuQFgbTvHqt/d//wko7PKkUlhZEYKdUDdRMnx5mi382ifOCuLkXSWnGEWBQ\nWSMZmroew3iX+w1zyDtXLESSDnPyP1Wc3ZUPeD9femdFOnK3gAu6j+h9NVtZ\nXvrEueMtfU8C7J9yG9hlGldX6rF00r1eo3B6j7ovPmEi4CR/LDACtNNez74n\nv7IaaxG8IDd5zeN4yKDRKSDL6ibdZrCOw7RPNvpajS92xyS08EIh3nrnn0aK\nn1F0YhOAespEP5A4eHmvGCyz/gW3gpACf/JYy9PHAPTD3WYqZNCNxjEIR1b1\nQvMb4f1DYoREihkub3+t60gQKH27PvmK5VTw9T3/Zw+azh3jAOBjHjwJV9q+\nBQ6V+/+yp/gWndVx2vouPK9indWzMlRemcfR3mb81DleABI1lSlVM/Pfn63I\nFVuTM0wpvbdO8vUwjCp4Vb2pUZPx+Vjz6/4RMinlUmTWj189+vjqh+//5y6K\nE6gg\r\n=pE7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/touch-target":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.388b042c7.0_1591192002098_0.7762922630692564","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/checkbox","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c554336a6c5b9c98ec3de95a720610b77d5a725f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.cca1ca84d.0.tgz","fileCount":38,"integrity":"sha512-pDDzYvT67i+jSKiiIFQQQW2Q8lACiwyOu33ZtMRBogLH9ICBHxQe5grF0X9Q9szjzUzO8ns4ofEIR+/gSmoLRw==","signatures":[{"sig":"MEUCIDDaZ+nf+bql+nz3U5ClnKso+Wdakss7Ly1iOmObkgAHAiEAvjpsncvBNKvxXCbkF+o5Um2Tg1G7ZxCt/se1urZuzuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18m+CRA9TVsSAnZWagAAyYgP/1GuB8xnIb1/m7tqNPbw\ntSUvvnYlHMWdVAkLDBJC/CWyGDljovh6o03X8B4cR+P1KbHjLnb6344GVSFS\n7jGCPJLaPgWEhvtt5ATO8V/oknnSg2/j0/zY0n0/FQRfYha+NYyKMtjqRiUl\n1mLibSyeaQfQ5SDxrvyawAv+poGuEDOZRv3c+4hlWBTQm3TztcjDwdgD4LNr\n4XE/bS3zDWwb50bcsJVjyUKBHGw+UOXg0NYqneV5461wzgJ3SxRj+aq+Dpji\nbVQsX65lR+JFW302iblJLHJqbkV0zfkOQqzQqXcy8G+CeyzYNKLv1w4ZEc3f\n5Oq+AvGt7k0vOcx1WHc8W665kjUT//v8n7xOCqYLjEOKe2+CbjSSmjFN15IR\nOxVHzeqiSyevlyD0VygzcWeiYY1Pj+xuidaKTKFKBKjsXqIWyKCkdsJ3UwKO\n/mfnT6VL4LGXklZRzFbsvRg3AkQAh/XFb1RTqFs96Osdv1MHFW/6hDYsk3E9\n5f0/35R6Gde7q3+aUgNd0AlpNNXONRkSISjBIyBEPt1hoZwAfIxef0ZzENSI\n8WfE9NGCqwVQTx+lDZN7TFCTkBfoCMIkzuX8YGW0Pjoe5rFWdZv0GrjIwdas\nkK7S/tEcq25XpLkzeqHklvd+rkN6CQu3HtMiN93eoORTzxb3AdIX/ENC3zep\nHg0C\r\n=F3Xw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/touch-target":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.cca1ca84d.0_1591200190406_0.7589065455320925","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/checkbox","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cd4a28996956044bb94dfbf204f3752aad0f7f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":38,"integrity":"sha512-I5gbAuE7tsXDR4n+vIA/FTHVgv/516xZkWsTcQtNyeVocnacBtHnXIivDoN+MeET1E5edxz2MRucTRMcE7kpBQ==","signatures":[{"sig":"MEUCIA3PTpqgAzpGfMoeKT1qPj8OO7GiHPegxvYSIjVVpYq0AiEA5lQGJKpv7r5HGBctsKroC/w3EkkMSgMeRJHly6mRP/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KnCRA9TVsSAnZWagAAS2gP/jYeTZQbz5Hf404gGzV7\nNt7DH0WmnekSatdm35ea9TL63Gpr0VVEHn613u8oAdUdhjCKbDwQ3gx8A4mA\np+H3WRKYX6xzV5UZLAXuA2ZI5VtznQ8jHb0V6B48KQLcnnwVG7uhLRzc0QVn\ngXFuXvQzv+kPNAnw4H9ysMnPbLNH2sW3C+Y8TF0TGQJ3T0IfCkZeuBZQi9Dv\nZIXm/CrroSQgw8bpWjnzHbVKcc3EbK8uiN7TIs4yObL41ZcjY5CHMXOHvmFN\nPPpqSc3Gf1cqn7SVAnSboHy8DwWnqV9ldN1aRh5D6jGUeFmTxV9+2uE6znA8\n4RJVNKOEEnxORVeaCtNpdu4vYHzfHVRHA9EAZRAnxvmdpPwdBAmSx++xrjDM\n7alJEbaby4ewKdaRW9cxEAKkvvJEx//zYR2iLppcRlRdRxHJ7op13gTJpJlx\nTO2rbCceIrgZVybCwkmkwCaERlh+bUwF2KNCoYz71R3sbLIxDFsRu3Ly9GhX\nfK0LAHzA0tHJ+TikYo3v2D9vgUCs+eEazTHU5oOoyh6FtpFVY3z2M7N1IOqk\nyuct74hjXSYYffWaKsKndtB0U59hZg6wTdl67dj0s1C90dWWflyKa5UPpWym\nx8peRaPz1LbLk/xZMYIzv95ioIs116/dPbdRu7m219fvbUIH8DCIkgFc4cgH\n6YOQ\r\n=FuS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/touch-target":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.9b0b5f2e0.0_1591210662648_0.2542225373197575","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/checkbox","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d68b5c3683c44b2879791ddb572015b61b575ecc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.0a7895f4d.0.tgz","fileCount":38,"integrity":"sha512-jCEi+Yuj2pBMS81w8I0bQhRZZUhq4MEXqymJRH6wVNBNFWLAyEZSysY7O7BerxJQ7QoC/CxLHNjdEAQp5rKBaw==","signatures":[{"sig":"MEQCIA1qfwIEkTimljWz0IAhC/nzbz3Swcq/43tUu98YVsfhAiBv+LxU9u0oKIy9ZBunPKPeMbr3K3SKEgm1PYFM+GInJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFvCRA9TVsSAnZWagAAAhEP/RhrkHCxPNri8ZIZB78D\nxXnlNItxjGk+QyaFrlV1DG8a1Ybd97hadTpcXlzJqXpqTlD0trySiiq6hHPf\nv2RhNdPVJZ4U/ISwiS03e/OdeY0ysFydsq7QYpyvPYxN+HFtzKPr3kS50ywN\nQ4dQmcDww3roDRdFpc0SO+0EvptH5UfwMUyBo1fMOA40d38wwtzmWU+fy6LC\nCgt+R2ScB9t1Qs/FoPNv7Af5gBMDR9kl9VCTeO0u73r+E3r4ouJhSPwNPBNZ\nDUI3Um4BvREms4S/9mmFTv1xhydXaWigpqeb6fMDZ5eMDC3j2lAdXXmV5L0g\nx9WyYgMpaFkAMMuF9pWCLGLIiD+YsugLdOPgeEmulaLf/ggucJfQh8awG/td\n2Muh1ob71SfK69Zu7TbYLLUPTYIN8C7gy9Pmwh52dUwVam+KuSav6W3lpRIr\nirImxQoWkFYiTDOIplx9hTD3Fa1nQcldrnMMB7CcIqahoatKpotnLLHUF+7o\naYDj4FPhhU2xQh403R/3s6lOA7vN1Hu8nUvQIsH/YRPvsmohq9GH+HiI76Ct\nyP+FCv2hksEbTluVnqoGI2/B2D7fJdaPE2Ou28NCP2YIhDETuza7ambjOTpK\nZy1LBRLrq4JDcIuHr05LB1sRYyhdMhstFpknLfH5XsWacAI+9MBx59NQjhEb\n/vDZ\r\n=1J5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/touch-target":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.0a7895f4d.0_1591218542562_0.9292769532185332","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/checkbox","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.7461aad68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9da26272c9077484a957d0bb90b6bc299123e2cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.7461aad68.0.tgz","fileCount":38,"integrity":"sha512-+nQFNX983ZeirxwrPGs+IfC8dIPLiYk9bauFBheGo34zu65q/Ca6XznKJXs1W2FJZS4UGdNpPbfrX/4OVtYpPw==","signatures":[{"sig":"MEUCIQCPPxx6QQ0p+HvVOM/U8h8a/6bu2zd1QuovofHc0E3AbQIgLwNv08AgBtLKIBs3ImOTSEXQkTOCkXDJ3l9Sie3nIp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBCCRA9TVsSAnZWagAA4fsP/jlDK4Sft6u9s/cNztAs\n/0ZsGEOyVMF9BuxS3IeFoVURWjVp7D73W3/gzQUJDAkBjvtMnr+P7S7RZX5z\nfEyHuK7JdFKQqdYkqX5hEDQwoV1wWbdpUpsQ0GdzSMRIh4bx1/Lp5J6sRxny\nwOLveJtMgXcMcfYJAuufPPdfIOypA1Qy8l1qMckGma8qxjjhDYDn3JEwojMF\nd9CMRYdsgQnz/bTVjH/UeBt/cw2LOYDbrz8bVm4/QUC+7L8ZMYlDR/8IXSXj\nAdHDy7LZGAnwcXW8S6X3xEGRzggpcT0i7bmgIAa/118ZmoG8F/yUd2xqGULu\nDtB0azErehSa+oQYy0orNYxAJ8HVzEbU6SpP9W7SfU7G82GjsOcRqy0hdMro\nDHdvjw8VyDnfMKbs9boDJeTqs99c54k0xGYlDvwOjhyQYhV+iSeROYL+1gty\n+vsnFMInwk3pKGbdbnQE5zuWlS6gMK6KCcN1YyOXxa+U5AgsogXhD7zO4WQv\nWDLQKGYLh3VYoBxNWoycamIJnxqxafmJG9i8hNK5khVPHfUVzrjsaR9DVWJk\ntBbL641lkWKaGAVu3Aj3jZ8T0XZdy8sAU6TAGBMy4vZz6i2Ib7ctYKk3Dgcf\nxjoq4bPh2fF4Z5HJoEF2JNlBpi05pGQDa+Qe3vyWkLoN2T9AF3XohgiqHB6H\nXyyi\r\n=2VoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/touch-target":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.7461aad68.0_1591222337302_0.0763824488396121","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/checkbox","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d4f402305f82edbb8440cfab2bb5e9e7794cc35","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":38,"integrity":"sha512-RTNQsnlu8b/qex5LQ/cIC3hgbw2hPsKx/AfZ94tvVOAq8BuJGlD2kYuDeu/IkI3zn2oO7Tr/0CIdw2Z1OuiZmw==","signatures":[{"sig":"MEUCIAsZKVMOgj9nMqOWu6IUNIrM+k/NhRvlfkQeKqdSiCWoAiEA6t/96h3O74ymvWoAJML7H1RSMJTj0eGcSWCckKbgEN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQeCRA9TVsSAnZWagAA6RgQAIYV7eG5Tnuw0VqakOck\njE1ajJXDIcqzJn3A9rUvMwrukQUQ7CuJQxDwZG5KHgO729fUuYhpvegIYRfl\nU1YglXlhHkP+pvSaNwlGKWQqAvGwLx9/beXP7pAZlZJbZw28XhON7Q+CjicQ\n9OeN1cbap2mY+FlFmCjOMVpxOyVssXsPkzPxicFH59ZCbhI6yeYTf7waIczD\nTV5jg8YaNYjjitKOUTitRbpT2fep1PsXX1BUNbDHSvRMYvfYLs9Mj9eftwiV\nAIQ80Q8zvLy2Cn5gTLNgdMn8saDkWycCCe/89oYifkBmlMbeI5ExCHmzugZS\nDAqYXxqbcVFv4XBcV72OhmtSbwr2JcE3xxC1yDwDW8biwuQe6t6OWpsKAisW\n6rpZsaeH6+DA2K9LsLPL3Hc3lSAtt+REDZJZIGIN41CxKNbz8d1yAlFYRWwp\nFHNIbviipfstVlJNTJo0sbN0L3NPAThSLg5/4NR0mcP/1e/uMX62ih6At78l\nnY7a/904RzJ3ip3YWpbLMXhZ1B7EbncBkYDnTZ0jvsMvtW6L+nEbYeEL2AaV\ntbgcKNB6GrWjpbCPIml8kxFXCkTIz06PZ8qJJ6gZl/j7hZ7weoUN5bhaahYq\ncEVB9XxIzcfjfBrC5USBu6aKEUkopBBgwS3uuzmeX3P+xP9r53uF98EOAqvK\n5w2q\r\n=xOka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/touch-target":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.a0dc2b5c4.0_1591305243149_0.4367160698745616","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/checkbox","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508a5a402f13edffb05457488612cb834516c7b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.2b420c5b3.0.tgz","fileCount":38,"integrity":"sha512-vB6h+8MZFiznmHh83Tbbjt1sHppUk+gmxfbOCyJgxQLRoZNwEB8/Iwd6tzmN7jhYWUabeND9kVHbI4gxePDmsw==","signatures":[{"sig":"MEQCIC5heQwNxFj+8R3Qv8Y6ww4uEm7LpK3oyJa0Jff+ZOjKAiAfVtNIyTMxqvlNpOX3c9CCg+MvlSqBVac7ZmlJvbKzwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPnCRA9TVsSAnZWagAAe5QP/1ZHgfaeSjygVsIQQtpI\nN+1jWedNWo8LzjhHuSl0AKlI1jBPwfCx/ng+BHjjLeK9Ea1M78KVhoHtCCr/\n2DoZRQbuwPG/heykHZ3aSTgdQ+ZJmbxVOje6Fsc3hJt7phXOr9v4zZUyCpEo\nl8WoYWshHflD8sCMzVLNR8xFtB79sNbnZupJsMdlUQirBgxk1w1u75QwahGl\nYLUVsxxnaNPQmUj9kZg+CaDVpOra9zO5Q/zOCpvRgo+/m5pPrCk+ypnZ6vza\ntYHjadMBDODycpWYjqYL6K5I9AlFNA+qNpYxL/oJ+CAFFjt+SN+VFHMayT0Y\nMxWlvTGFhjOA2SHE8lMraBEPHVQaX+GkJHvRwwY79GBw1qguj7zYpaZQPkTa\nSZQQPvkWiRUCC2p9jYuSOlTuX/rgS62M9a2SEVDX0wipCSRHYtbfAtPGeuTr\nRGSN9aK6nGdEvt5a9akm44RU4QD5wGyH9YQcrsuplxFusfeL2YQ3fgK+Fa27\n5v02+es965FHShA0HpKr3OyuhmgS9HXepjvpOQV+q2Ee3YKGQ0obchJcHY84\n0VRw/BybecHhJp1xhKP3K67/m1xoj6BCF5f/72Dw/ewhgwpIJriCqfhxaeL6\nmySeBldSbxJcXAlxAMtX1CVvUo0zjsR1glQWZYM3ddehayR1r1vZpSBfNti8\nsSMc\r\n=ewl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/touch-target":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.2b420c5b3.0_1591632870992_0.10660947079152816","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/checkbox","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03160fbe4034501eb698354ded88b7abeb29f322","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8fa22aacc.0.tgz","fileCount":38,"integrity":"sha512-bTpfHtoKypaYTJzXzpq/K537F46ghFeggA9WkjjRgtrVXfwoYc4MuABeYxFiED/yuYwOm/ZDUkfF8zr++WgBgg==","signatures":[{"sig":"MEUCIQDk/FfGc4JwnhWHRSjSjUtr4impZLatkbGy1qVBaQjgJAIgUZQRYtGWwiQjk39UnctsYp2MwkiVIRnvb2DQu4hhAYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2uCRA9TVsSAnZWagAAKLEQAJ4cgVVTscf+z4RR7FYN\nglLtH0OoT5H8eQalKm1Q1kvkfMBmB9FRMDrSD/I5t5Jfknf81xXBepofDMz5\nd/hgVcH63SOKK1/SSArdiqkNxwNt1IKvXaGDeuXHgpovrQ1VRhHo4IufpbzG\nLzAOXUvyzmLBHftg96/xsWK6dM2A6X4Yi0Z5rL2sf7LeCgjT6zPKr3lp8k5H\nZZ53uFJXCwtNdtHIZf9zNh+/IkrQ5ZV3D7Nns9KMz8yjNlHbDhRHpfVFmora\nLqbns+Szn5O76T4V9Gx4oPCS5rIckWBlhWxSEY+HqdRn1UFsBi4w0MK+//rq\nvyZzQa0RqjRqe9k5Cx1oK6VqfHM+FSQXeXiXrcK9f8QxJjvwbeBmQFEDGUdM\nCfb6t6NtHXPpiMjuKAPPegh4/Yu/mQwK5+652G0lZ7RTi07J8DfLBDtZKCAR\nYiNASqcj1X0Hc9SQZ5EuKz5upI1c3glSXAzEl+/VTq7UTrPyInwgnjukl7bI\nNG9QEmvGrzQk6ZZ0vkSDqi/fWHZ02HFB9B69NfZqDkPwpd8CKOQmX2tjk0u7\nlpf2oqOxMKEXD5NxzEQqF6FNQoLgYFaay8Fad6snrdinnlM7/WWsHVmRLQAi\nYlfaiGP8RqHs9gg1iVoFh5GxHPFJCw/BJl5BwN3MhFOOJgE+p+MM/2Y2AKHm\nRTVI\r\n=+wUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/touch-target":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8fa22aacc.0_1591639469903_0.4706954761370836","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/checkbox","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d446f3481567f81747cb19794590ee2daf94487","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":38,"integrity":"sha512-P6x5A/fvPiI8H1LuIJWtqMMxWsSX1SDPYROnxP1JeHn6T83Atafru2zEXAJYJtopI41FfkSTgQU3Y2F3zHA+uw==","signatures":[{"sig":"MEYCIQC98e1BTN9DaaTEJqKoJsoPiFPTY1UaXo0Xu7qP+/KEwgIhAKnt9mIs4MJeIYv0iv2YS/u5IFFXtdOiOU9ZNeKEpmDM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocFCRA9TVsSAnZWagAA+IcP/2kqp7FF0Wm97itgBl/a\nW05iii1Ezxk87Z1+D87to5YnWoTDfG+B8j+azW54S1qLsKpCOf9uCXrz98MP\nkMMbXpUeuetmGGPxFULXFwBy4aZKb9sbd5xpwW35vDb/+FBnS6DMvaFSHHls\nnoj9P9JDFl8PgDZrYoeh18+RjRU912mjPpmWimBRpJa0R5OegDRROy6LVILV\nZUFoW9pXjaVRri5gGhQF+OFUp3r9wXjoXIaOD+rrHg3I7OmYgAuj/4W+XWzu\nN4RqxuSLXmQ2wyk1oM0bu85T3QRmVOg28bOmwBH+7dUBYg45J0lCEE8E40lg\nUCYhyml7i+bsbYLEwrVV46Ih3K1w5ZtvlPjxmF5p+gWWaIn+gEoMDOdtCOpW\nkf0vKCIStKR4THfqEgmGUcWf45+wG5H/bXLd1wO+o0zv3tppyCXPMxJLQ08F\ncymyHsRwUItC7NQUnfLn+nHFyz5qusv9DoS0qDQrq1Wqs/0ysZelc2geCWSt\njElJlp6t8fwol1YOJvS81nQPTViO6N2fIMR7Z5LBr3igYaDUmHFtxt8yyVRt\nDcdlFmu4SE9drmR2OJFVid8UOad7njsKHKbCBf3DFpnuoGJsclTjn8m25oXX\nEylBtUxVcpgexcNKN1QLMdibJnAusVp6W1gk55oufZR0n35ZKuQyz6OJN9L6\nfFo0\r\n=SFEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/touch-target":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.21c4e4ed8.0_1591641860848_0.16878269363172516","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/checkbox","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.dfde46516.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c1f658977d8ba5a5628561afdc802a135ca894f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.dfde46516.0.tgz","fileCount":38,"integrity":"sha512-/lEnenCZDOubYwuVUdn8HCWrp6sgp0TxuXytDRKKseIkg7IqCmySUE9/vx6vouvkf4ko7/YM/MTgGvYN9GNgiQ==","signatures":[{"sig":"MEUCIQDT+P4rxPprB78OL8OlFvoZNdsTbHtR+r9DCksFUyUq9QIgZpFsImTlvB+By9EvERe0/io4+/E3Zn/n1YFqkgRh49Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSGCRA9TVsSAnZWagAA4mYP/jiYzo/0IwWg/ubNoBlj\nx8Bv7vHJxDvPRSU0WtDWneA4TI/6JpiMQ1uUVw/MM6+Dp9UPWWEw/G4k8iLI\nYWdQ8fnuMbO06Ad1kBeW0OZi32ETWBcGx7N4AwW+mDtFVnvaexGRYKZYLRvB\n++xaW00MBOI+wJ8sWQzQVfMIRifWaQAU+cDF7B+utTmkvG4fHte65hRYfwET\nMejM3ZeBrdIRMpoi/GzoyeCWj9eAO8ugf7Wmsferf41g5+CPxVklynwPVMps\nVj8M/7pror9EHlLO9RJNCycswHBGR4YABU+Ijtfpb5Ky1y7tCBzgnKmGS++H\nGUPDIPyWcq3F3ovzLjSMYkrTM+CDoh826gs5n43fTP9nGSAhrAyP28PKoLwb\nQqPSJp3e7mO1zV2nlIoviSrfxbbZhiXHEziBuJ6cmKXY+vG5RkxKTb1QcM4T\nHxSfCGXDWkvTo7b8HcMCtDG+9m9H6o6mgI+UiHSXyzLiBO8k79wb84YtGFSt\nb3ErRI8cuJPQjdFH1xKxVvoKPRLOIOK5PPQkdsWgMctCSq+MofPcts+aV9K6\nk+IE5ymWcDpdifgpYleheTPeVqTfU1xWUleB02HUERQRrv5x454WVCJvXrvx\ngxxkmceC1fN03g9c6KtSMd37omaMYSLzQSknbpp7hEdHHek41Ar3+/eL2Re3\nojSm\r\n=Yc1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/touch-target":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.dfde46516.0_1591645318363_0.36512342456426383","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/checkbox","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c5b29456bbaae2ea254a7fde6aab62c36bf0f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.05cc5c206.0.tgz","fileCount":38,"integrity":"sha512-LwIt2sgpWV8y9Xy+gi9xo66YGDjS5cLjQ0S+L+wuKr8p6pW2JBmlN1XE+kPK7zAo+FQVEWPveZMIZ7SVX8IEdg==","signatures":[{"sig":"MEYCIQC49p5vZ8dJubK0/wUmSje+5z8hvMEMKx2M3ubw5/oFiQIhANEKQfLyd4Vp26VkmPS2gfgflat19VUtWio2DW+nrV6p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYUCRA9TVsSAnZWagAA4yUP+QGyQ538GFt+/pmMDbMb\nn9UjVw8thRKFg+v2rsABRdrfwCy5PTznLVUG/PoJt6VoL6M1PWcKVPMTxi9E\nu/vM4X9eitPtMM5Q78Ww8dSDrn2WKo7OKX55gCpKnt13xpt2Tjpkhp/KmWrQ\nirg5Hw52DY+NrathkFOqR1rM6gvTEjF4BzWLFHiV8HAgzaimCf0QcV/m0H6i\nlW5yOhyWAufKN3aX7JMPlvfm/jRSVUbUW9M/eiNerjHf8KzJez000RA81wQ9\nKXZagIfvfO7d0bok7kR7Rp+mmzKKuevKY5WfPRGFs3lXiQBvOXqkP0mFszeg\nNgpVegrsrN3tf9S90LDRpVYviU3HtysL8QYUcv8vG8k5bBie/HgslUraLJwC\nZwm8Ef50zrpX39/5bWCBI3FApw+bAFJGRmYIi7/s7dknnSZfL2eAn+F05N9v\njsKANHWGcThhtPF82CAgt9ofZ6msY3bojKy9XbwWJ7CZMdXhzQqRSWaxnYgp\nKBLAqpgpXSgxEvrUqd4gNQTlniBumbpCGfayQ6WeLq4b0JCji7r1LYuN+40W\n5kDKjnnRc0ZW5v7vrT9sDADqHP4ZrH2PE70LZaWQtrWnNckZR8nW/py0j71u\nuSPZBjHgsR05JKWZAQz+HCPDuUoBHYMcOF2yG3SilTHPsyJCCxMze0oDfvUF\n/3D3\r\n=xBOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/touch-target":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.05cc5c206.0_1591649812230_0.677145163705194","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/checkbox","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7936e55279b2c51a7045067fbff54f1d6254c57b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.3ee488f1c.0.tgz","fileCount":38,"integrity":"sha512-Ab59BW6cGx1HxzBVOOL8cHe5SOeeiW/AOrgWa1N0ZXtXtqne9elj1UsFhlNOzNLHvZM60WUrTTB8QOsGK5vZxg==","signatures":[{"sig":"MEUCIEIrrBmrnP94MepMrzfqLRMsuKbqpPxZ2rHEAv+ka99bAiEAv9dNsPL9prd0HyiqSusFQEZeVwIQTWWlVnRqwEmpUXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KMCRA9TVsSAnZWagAAf80QAJQmRIR3YrGoicFN6E5T\nLf6ylJlFtaDjVcg4xe6aQXUED/VNw6g2NgBsIkJetHbxZNULgA9Hu57Z9ND2\nacQfRbBU/WGMtmR0rFc2VJyE05CTPKI9Qx50w+vCFurLwhEQHxeZMzHRj1Uv\nsZZwC5G1COcQ/8S8M2HRa1812p/gz9gDuysdgH2Uqyz2NrczTlLvs7Nz4TSL\nFXTAefOhZFDvbZSn4MewORO0XuRJRNJFmKA5ZllC3DmPpIJ313TgAS8YQtba\nH6ON4NJl/pEbuaEcIpS3eYcwNTjiTPxXyfskH13+MAbHteQ3XY8MdeNvuQeQ\nz+DhnPYc65LZVfJZdTU3shgi2aizWLaIAZO7csBpvete8MgRHDyaRQINnQxd\n/5mKk6k5BNjpmD3KZnWE5BiaUkkX68OKBNX88+qqf19YC6IHcN+hm9seRkHM\nOXuPO1swQtUMH5HkX3cXlAW3qJMyIJnLRBuuU6DcEQ9ozzrR3F63AZN2Ce1K\n/IvGF3TJvNb0pvjtZJa2KonnEHjSjnVDBDHQOHJr6grzjUjl1XQq3Uz74szq\nw4syqT/PRjqppmCzcEHTU1TCVHn0IbQama7X7kOg6YzSWd0iebKJ6kxodhM9\n7jiMMza7JQUxq2taQxK/U7fpfNsEHqUzduH2jIcTQAt/tNon2T4zAvZA+n/e\n1Qz1\r\n=mVPX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/touch-target":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.3ee488f1c.0_1591714444000_0.5125907700682906","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/checkbox","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f742953bf2e6b38edb2f91e9666ffcc801e8308","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.b83d720ee.0.tgz","fileCount":38,"integrity":"sha512-XexqKpp2vxUztN7sGU0GI8lK8CMJvkw4Gvt9I+jbt1RhWpjWFftbhvruVpe6l7EBNTX1wu3vgF1PoisTF7aUug==","signatures":[{"sig":"MEUCIQCZq3HaKVjwmIPqTakf9HqW/tanbdCEkmQBLHkKV3AISwIgUIc0Orq1jg8O854EOEKbDhMXrPNQawqV62ty2XUyLiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38Y1CRA9TVsSAnZWagAA1AMQAIxv3PDA20RxeMdIV254\nu5EIxIxd58Kx2ke6bH+VLOrl1lZU+gRwq52XmekCjHp661IOHsZ6iDEXfQO0\n+78uPqDfh/luktQYz7y6tc9buEkdkqemKJZpJ36FqL+ndR9Q/mBqeRGQoKC1\nSNtrnZjhtJv+SzAbteBCD9PPrl1UB32InxFG2K9V6C5hMONbchTGTmczigeX\n5M253wQiD0kTR0iXurFNA4uG9x+7JfsWiYIglchBOHtCyvzZdbgU19SbDElk\nF4HNlA8TiD4THgYBK/SVYOHMcWHkMIWWB33v8sc4n5T7luq65CuVNlzW5CLp\n1eTFiPwU5e66QkRcI6mN8RBapDm2ytPBtFhjWmKfYlTa8Bgagq9fQxGOKF5d\nuiIIdgBReh4838yvkSonuUysaAX7B1sUw6fVjkCyLB3URWxRV6pH9eJNKb+9\nzM1+UTjgMKLC7TluWULqHWuUbLVsQcBElOPg6rC2cb9PQTRXI45NjaGC36W/\ndFiKq3byMZKD5teXKz9alg04/f5sx5RK9cCNhHWvfxtqA+Jcys1MrUnZpiIy\nxyTHBZ2/nw1QydHBk82rXH0PW7t35MGUliJWl/7uOmXwdkTANExzeR3w9anY\nZuscvggm/AuuSYc7n6khA0Nr+gbuNvkrjT7U2OlTXC4O+I7Nk/tQp3kjJFy2\nxAr4\r\n=aX+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/touch-target":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.b83d720ee.0_1591723573379_0.04024650055820822","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/checkbox","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82e9820a7670e8e83011c90c9df0ee5a00a9a63c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.afb1c11a9.0.tgz","fileCount":38,"integrity":"sha512-dzkTLMlQgiAjm2BI80IkD0tvzZdXzcHr630MMACpsOIDPNJE/1yh7pAcMMJ3T+PJ0kZmaGhJhkaL9eahG2WJqw==","signatures":[{"sig":"MEYCIQC1iN8nWLdHgfYMKsv+Cjzkae+4J8nI4wc5geHP+JC49wIhAIJLuAwsX0sQi4XNDQXwjQajwW0lTMSrF8bOcg61skiM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4aCRA9TVsSAnZWagAACkMP/iOJVw7lVV9AlSl+5kxo\nXLmOt4HJUBbCbAHZ4v4EZ5On9KNshu/iQP+84qtvfy0DCttN7gUotiJBLr+W\ng6EZBGT3edvfDTEcru6yAFSNb9x9+D4Kg2t/MCDXxlFGJcuKnMgqsnsCFHu+\nSO585NjiPGzxrxYlJWSkFIfLRz2ywU859Z0QwoUkS6d29VcPIK6hBvbG6I77\nZAQm1frdUhdEP0ci910Cm2UdtKX7PjRYRul/jcRTuf26fH88f8PfEHBUUYOB\nhAL/fnky4D6Q7II6L4XsoaY9tdxNKlWN4iVtsRENiGsH0qtWNL3WiUJhN686\nc4nKZ+nJ+seviCpNYzKH6MK/k9wuN0T6LEVKwD5vOTujy0kRmbRpfGaSBCDR\n6cx4Y5uZGxoj7K2U9gKxKs5JRRYo8hF4J5nZ5Lsztk5q+gk4RtB/HUhCdmEI\nTx7L2YLEoimKhqfKihuzvSy7OZzhFpZWTdhhhfhOwcG5hOCg19Kt/TFfn9US\nEZKUBKz3Ly/VeHR6d0Yut1CydEf9nOhEdzgV7f3f++WEv90Kknu5KBHjb/EF\nM2sZr9dABkSDyMfmXWn8uVyKt6TFLeXoqeBFJXUhd+CkZlywp8mRRROQr+y/\nQVPa74UToGPEPySFZsGB5TDFrmSlWcsXgIcc/RMZfUUAz3zXQoO+y5acvvrz\n2E7i\r\n=3ZyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/touch-target":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.afb1c11a9.0_1591733786317_0.8578233081491833","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/checkbox","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"328f185dc39e32735e58540107e5b2cdf7fb6cb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.39e6f71e2.0.tgz","fileCount":38,"integrity":"sha512-AyxtzUh/JGsZpzzSf4arfE/qVIyP8Oo5N19ngigoFE76TJUjkreQqUSE+JiXC+HSUalMZJl/Sf5AjOGcSxdffA==","signatures":[{"sig":"MEUCIQCyVYo2wTYCogXdYTUeBs0JXzV7twC6OBLAMZdd6+WRDAIgRz3yizZWyhOezAzGLDFpMdKdM87nNWr86THO26JlLHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B23CRA9TVsSAnZWagAAJt0P/AkMq8N7MAEafmO4pyXO\ng0AmT769tp/8iKaBZYQDbSlNJdTm62b4/+IjtImvvPi1ShMumx/gdapsTizX\no3Afn3oi2a4/LAc0y6NniM2QmERMt0cmpZyRgUQBKQyJ8adxpbfuoz2Dmh5d\nfSceb7zgC7luYbQq4Hc4SJk7+U3D3sZIOj6s8k8IWvXVtEWvHFBeokP2kDFj\nXo1YWmNgKCKakB8wLxMzd1cOnOkMeuOb+CR/4zUycH/C/UH01C54jXji2mMk\n8yR9yYEk9bGlyLGCxpEVytiZT/f8ans/q7EJ3ZAgBmOVsPoIyO9d2jVGi+LL\noqu+GZUEyO0y9YUx0QnVVJBpF706Cjnvniq1WBSYJsDXL22nxdR75Q1sAYME\n6lf6M8yvSLAfQW/Eq82p9sJsCslOSuHz8RMtO3BZkT3vLcloo+xcHwm5SWa/\nZiLv9yz5zxyroZEdJOgdKRwYz83dcr1Cd85hgsZUq2AvanRn60bB7475zDWE\nH8DpMwOfWsqsWZ3+2qNggtq2uAxGvDldFetoxPBJdhaYkQCC86+Jq02KhtJm\npg8DWZW3lh0tYQeFJBG0ZQNpndUUPzj99pekquY4+XHKY3pSzO5zr++xpnx9\nPsTOLX8iArwBke2zDodSnpmTy2IPv5vXf7TEF66Xt7rkwFNo10NN/c5j8u7w\nmtWK\r\n=37hR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/touch-target":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.39e6f71e2.0_1591745974393_0.9286896355067629","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/checkbox","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc4fa70acac1a8a3b8fbbe243515674167d4b773","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":38,"integrity":"sha512-2XLM2FnBOINOYnhvIOl9aUbnBK6jN2L6SaB8SeOZCD2S09Yn4uE+bniFAC9wbamY9swsegJp906oD2lxiNqboA==","signatures":[{"sig":"MEQCICKu/YiQBkpH2pFuWb30pIupZuE/cJJWNv4U1V6R0FWpAiAOK0h3VcHEZ7b2WhvgSwpT0lQDLB1E4wU9RWE+jB/e7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m3cCRA9TVsSAnZWagAAbGEQAIercqE3yAOEC4c0efoK\no1fR9bOaTB53tvNL9GuJG6RgvolZT1mjxSZZzrAqLp2QVjmh+PZSOLX3H5LE\nmFRr16vWnva/8iWV521fOU+1Uc1W1/tZWVETbo8wgjgtWphjbWFf/x0p0CZ2\nIP8qSwflGnOkIMPV1+BXuIdvcGELvayl4I3/Zy3wEUqzUx4iNLaiB53vKTiu\nfeU3CFLZjw1Hhbd+Wfj2KBmM37qKXnRQL3v1Lj1oIerK56ZTkETH5xkW4reI\ny743/cQ3F1hnYa6y92QKMULnpr59f2dlKwalR3EPDqeSrEhsa3pzoQ22Mj8M\n8kDc5qlermob2wRYebt/jyl2pajlmKSs+J4+SOo9sjMpYrusO2byTHftkSMS\n+DreUyQQC95rKSwUtfo5i+fzNvt2J5SjQU0TizdLRsRbB3JwSIStXVl0I7FA\n3Ah8l2H8j7sAIZIE2JiKGo30RX/zGlurk8b6DLm0c8SbkwMN4Aa0mLXp0Bcl\nRBnAmdQUpzVAjNBFpvMTdj3/cE3kGUW8Zu9XqYG/r08CvnjVfR1DaurBVeGx\nqYw6cKfW1oz+CNFaMPfppMEPV2FoFodOorhByKxBeu1ZJUvCaT1mVj9Tybvj\nrXLKNNDq0nXT5znLs3t6tmvJuayWeRYDCO3wYASUfu6jeMh9Al2vWufOFpIH\nH8PU\r\n=5xLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/touch-target":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d4c66dc7d.0_1591897563905_0.47819252013945834","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/checkbox","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e966545c70760c523033e85bea459577a462e2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.be4a19f9f.0.tgz","fileCount":38,"integrity":"sha512-Ho3GuIC1EsMJYerTFw9gkjJ3tyY8tRrkd4PcPLwnbol3h/KEpIqfGk6FAJK0aZXkhUoQZL7/JeKa66DOPWyBTw==","signatures":[{"sig":"MEUCIHXwk6nv0pfd9CiYTbvRBc2ie6pYjbjsNL9Aqt0zHz+hAiEA2GTd9d4pUTyHJkeAAA00N8mCPk/buScaFIW+3ET8DZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvWCRA9TVsSAnZWagAALroQAJb0JQfnKSyMklzqUhkc\nuN+Br+xdOKILCaM8aejYOo2Lvme8bdIu2gjj78fnLBRBQCdKj3ZLiGFp0Vof\nn5nN/QQM5QNsRa2lReAIQq57IKReTOJRGkNDgxqeA8uQ8A7RctPQWPYBy3zn\n3H1y0zPv1j2pdu7h3pm7txccWfE3xu1Oh7NP8ZXVhWzqCcnpr3yIiuAct+46\n3bhR6cOMglOsJ+Qijl0SnX/cOuxpIiw4u+J1r37FmUDfTwMg6niikIZwGRYo\nKMlntNuyvFWavEx1OKLlN4ZVs1MV5hPC3vnVjyo1QGotwhvAJRGZJ8iaKQrK\nEgavyecDE5V+4QKlgZUK8q+39Pvm7EIV2iV8LtlLEGwHNT3OCufxV2WkHDt4\nO1VcFxCzTa26CVfzJSTuNDBjA57mGJZozw5q+cRaWvymsF15mVUMEHNE4dOV\nVIVryug3Oh82dFPg+We7lViQg6n9BfFcoAygyUZ5b8VWeNtZMsErYTdr8T4M\nE83WxaxSmt2YBtncwk+isOAySsRKM1pQCa7CgvdGpKbFKhAaNxP2SsDMda1k\nOjWp8fuG1g/EKMmpESXiTg/5mDQXS7BtvXkhKqjPnu3X814sNYPrdaLyMsv3\nCa29B6d2oqipzgBK/ev2+q9ZOcPdpDMpt+65fTTEfFWWU3Q7THHV8oMIlK67\n6f4m\r\n=eLkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/touch-target":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.be4a19f9f.0_1591942101674_0.1866372845797275","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/checkbox","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cff9f3227ce05c5ee9bb4d24953bd5846eb7a339","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.a6ac8f629.0.tgz","fileCount":38,"integrity":"sha512-0t5dCylehdkf5UXAvH5Zf7KYrlKPMSKFdvaiMTYe7NbzejQy0sEbCG59rJUSubzmRSeLkM11KjWqAt38UNsW5A==","signatures":[{"sig":"MEUCIQCfQfSXiTC16J36fm34hmjpxxLjG5J4tRii68aL6JUTOwIgFkZICccvUIiiqklXUxam3yCHa72Fq0nYJorgOjIYyzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iCCRA9TVsSAnZWagAAlgcP/i8PfnU51VdAiGoMVlFe\nsIh/LVOvpwNy7WxhJWFedvlbS2XaeclSLyMXcVavrT9WzYPHmF9F3qTUhQCy\nUJHKGRJHNaqvC3FSfCwhrsbjw0Y0GPeP/NY/w/SwvSiPPZxFrCFQ+R4so9H3\nGNe6m8Fe8xX4eQUkBD4fb4dIjCrK1DEStKdSTyFjlrwMZG8997pb/uhf0IKp\nYyrBNK0syEgzXn37VJkx3y4m3w383QDmRxJrPD0BuLCmQltmw6nbuV3K1Wqo\nxdsLHr9a/klg5OXPm46NLd3YcRQZi7OFDIss6X5rZBjy3EWL1UB3vxjhb3rL\nmxPwLz0v66BCXnrynJsj+er/HBiRH7bhCr3hA9nsIDyv0Mq5lb7kXr691xnG\nrpbprzbmZChYKOVRnOX5aX01TIj2Blil76yA3R/0zpFzD74PWzmgRxVNg40S\nkhSkh0RUTFsXNkk/K2OZAR6XZkCojZ1oe2/lO0xH7GpT3LYbHkCOzbZi/pQw\nWifCeq5W8iCszO/VggaUh7is6rjFx+9n68TwpAkjm0NJ3Sb5/JfSRBBwI3eU\nO2f3sqr339cszAC87RqBkD1QX3lptGcer4gamWg5C4Rz88+kGvJVJ17gIS4Z\nBpRxlmpBnCAS5ZuFOFqSgLCOkKq6AnzQAcOhCTmWomgWjsE6GanX8FyePQ68\nPC3P\r\n=Cvx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/touch-target":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.a6ac8f629.0_1592256641933_0.4261081092987662","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/checkbox","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.9833dc287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7341202074874d8701729d7ccba0eed3bc479885","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.9833dc287.0.tgz","fileCount":38,"integrity":"sha512-YUwzw140pCJixv7h5klMpfHkT4Yo0XATPezIWkgfzVtKQi7xGooK5005KNTSOpFizNnm127Hf/rSP6ai0t20tw==","signatures":[{"sig":"MEQCIC6z42q/3pJQntXQNqaeLTe5jegpyrKp5X4pRwcO4CQfAiAQT0Pmf8UGrO9K773WmDtcXrR0+ndYtpjPAhD+EqH4QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJCCRA9TVsSAnZWagAAawwP/3BkRFZWUEWg/S/d3s8/\nSRzpp9jShP6XY7oAc/CWNQqscM0EnqRTwKWXqje4JSvYt2XvLsbr0RM5Y+sH\nvywJoZOQMo8rXF8naW4dhnouebxV/1ZWzoJ5JlZ1UFVF0JsT+Hq801MqRH71\nJLWsH+EKhQWg2pj2W1hwwxMZCg6Ep/Zo2lsM4BQ04knNGOm4uJ1HbCPDftBk\nc2gNymgDyxCDjbRN+JTNGWYluRIHO8j5c1aBJ6a/6Bh0MYmzMthHxeJV6DdP\nHTyyuu4Y3K1BN0MLobPcp2Je3lfISXzIQVqS4uOMx6ivFs76bt8NYvo7jUfy\nEtRCx8ezYK19pUTLb2FGRG3q3irJtvfwtq21hrbAKx9W54Yx4+MQbfpcduSe\nqp+SFn45lQ0gnairI+O2OJW2MIQQLK47ojmHtNm651F0z9mdVRTlMuYC668H\nFB7UsTqc6I0kM6naIzxJ2dFWgOKCLK/WWbnMdsVEdaWRNYsvN4X47QxSLGZk\npRcD69BVTYUQAbHmMdoS2kSuEWaMrCVzWob6ylyi6pWKiR05mbaIRgudSzkD\np0b0gVuHjivi05oS/DQ8VqRmHSKf6tZKAJqqSuZ4ksUsRKXMlm7c6Jo/rpFu\n7ZboaJF7O638Jes6CKxYaqxMYTxWI5QYW+AJqbtPS/gA+mbvdED7I6YWPQwb\nZYQl\r\n=NmQx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/touch-target":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.9833dc287.0_1592336961939_0.44076324574636416","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/checkbox","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e00c4c1379e2f7c18555e1b36a546eb0b5973cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.3aa33998e.0.tgz","fileCount":38,"integrity":"sha512-O04DZO2SSSYOxiPrOnfAKEyBT5+Y/SEuWEBG1cCM5D5ItIOlkDArRWolylkIQzhc/s343vstoOXxwOthpFWR3A==","signatures":[{"sig":"MEQCIBrby6WjMyHMhKfeFqG9Wiv2T3aJAhTbvH719QPPcCEoAiA5bWNNVWQAwcIVSTH9Bx0RRew7NU+v5YPnk5hCBg5TiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":552257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SmwCRA9TVsSAnZWagAAMJEP/RFem1IqQ9fMTY5qEl8D\nxBVH7SuDjqCSY3mtCou03fDq72NIpQ0RB+EhbEhzfLuPEJVXkhwqmfYDOip8\nvM8fA7oELZ9KCg5nHs2YdHA295pP+1ZMc4iPEEGTRoHASdGKAhir+OII4q3Q\nIRb2pNyyYoBLr6BOV1x1UZe/Mm6HOOKoVaGbmt2HJCoYeYqmVXyV59ZEdXnX\nHkTkI2WG4zamdOgQ/Ef2S3hXaUxFhANb3P7+o/Yt6A0YSHgrwjqihCUqqPda\nzkTd8n3W301GFjdx0BxA9r8hD8rMG9ZHNt8T3v6KG0XkKjGkaXebelGYkIfZ\nOLEu1EpXs1q9PcNQTRk21USIDJvCCZRfj01tKM0U75rGw4JwBkJPUtCKapWC\nvyW6EGG5X93GFIy3zQzeL5R8dJXoc6vvqMIPiVzeC83HgA7W8jE+35YAGJwV\nQqJD+Z6xi1pnYI0c3Db403hHAu0UG1zcM2UN14DDq8vtCXmnMZ8XVwF5bhyr\ncJ9RVVl/CMvPvYVLnNg4Oz7YolC92OpELwGrSho5QSfF2SuxswyqYwopZA1Y\ncGwMSpoX2xR94fqwIJyPDJ49gIV6PnOUMi4AuHTVIULuHTQtkuxEya4b1Bn8\nNXuanQoFoqeEx79jbrGy7cm0SIo/Q5Yp2o5HjnFfVDcTx20Gd+d2QaS0Nz4P\nC6l+\r\n=3x8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Checkboxes\n\n\n\nCheckboxes allow the user to select one or more items from a set.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/checkbox\n```\n\n## Basic Usage\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n> **Note**: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.\n\n### Styles\n\n```scss\n@use \"@material/form-field/mdc-form-field\";\n@use \"@material/checkbox/mdc-checkbox\";\n```\n\n### JavaScript Instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Disabled\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n## `MDCCheckbox` Properties and Methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/touch-target":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.3aa33998e.0_1592338863694_0.575026541132565","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/checkbox","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"558aa5120a7276d503d6eb99b0c3ac71667fef06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.d2b54d183.0.tgz","fileCount":40,"integrity":"sha512-GSiNP2WwlTiTqff2X8x3x+ImPkdmUAWEsqSe05Ccq9SaqjmWZrQcv7+DVEkLd+wQv1d63HPITGJ5YJRERoXYjQ==","signatures":[{"sig":"MEYCIQDQdz1sX03LG4oXPTJ1a8n54uE6PZxMyjsf+LAtMpmP5AIhAMBM8+ObavorOa62p/PkJhSq3V/Oxfub/XE1tEqO1Ufs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sA/CRA9TVsSAnZWagAAPBYQAIb5MCL+IUVLw7WFFB2r\nR33x8+LFSmy0Tts9EwPKgvev0rd6nbmouKaNlDjsUN5rgBOedF7SrQIntEgL\nEs8yOLhPRCsLj+Hk7krwmBBQ3XRc88XR1liUSAL8Wd6Cq1ihxPxih/0sayGt\ny7zATLrv/NxOaMVqbjxprsES6xTYbaGmiCmSVzA6bmvfAvMR9kg9ISHZOQI6\nwkN8CLQZoeEeeiwrgVj+1IA5do2GxE08lInX/JHklY00a1Mh3FWXXOysCQ0h\nnDlOB6wljGROpY85H9YbsV8qy36fRi+wDLU4OfyLMkHUfrzgvN2mULlDP2hj\nyzUyJ8em4VyY05kQA5/CO9Z6RlIP5q12es6VoARMSfo8I9/S7UTeJE+UhCPJ\nq9wC3yY/peiTbeTZPkEByTKbQB/cGm1fSTc4/cWggweJqOWYmoZdJBm/W9fC\nbz7LSY9Kyl22V5adEwC7MDPr0Ax0XBUkmAwr/E8Wo2CP+jfywnmn1wUg/H87\n6jZLqANsik3RSSaYoXgQZXFrEg5kuSrzVbIrN3PcQCU3dAutKrra6qF0hIH7\n1pGI0PVHW9hQdecRn3/3xhdihDe+9/0+xPJNiXDZvxmVz9R16RR3mFU+CnvQ\nJPQbBjNRX1RIBi6M0MTy/0LatIUufHO9v9AAOkbA3C3j32g7NzFTnoYoz1Wq\nqklx\r\n=oMxq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/touch-target":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.d2b54d183.0_1592442943089_0.9068043290950123","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/checkbox","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e247a6c70f6e4cfc9f676c430121252e2a09603d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.f2a488e95.0.tgz","fileCount":40,"integrity":"sha512-vxcZZvo1X0FOrEIReMpUCJrbEcowCTUAoSuAxi18Z66xxbdITPqpO1emSYbXn5+wb+oA8l6OKFQxHjdTlL8GMQ==","signatures":[{"sig":"MEYCIQDFDoclbE6hdf5QyMy/ccmGDFYx0UNLPajXeagLCFZZ5gIhAKezZnDugfxcdie/K1eIo6pY86DZW8jV/c4s7M5npti1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JuCRA9TVsSAnZWagAAX94P/AzUOouQUBRJ0d2HRGCM\nGihc1HF+FxUl0hMEzzZAh/mnMO54S3PinavjvfNbbALhXtgHij/ebZyQitnS\n0IgIHUEmcAUqoLtq6XQFs74CSpbes5wCQGaqsQN50B8gwFUvQumMX5xleg5t\nDi0835bC5/Bwa8YiEqAZIOiIipyK+zS9vyZaduvWMdn49uIhuWC/05+0vq5S\nT1ebSvwq/zH7V6siDA979n9g35yQyOm0wurT+U3V+mSvUt1udFhAI2DyDg7o\nUa283SZx0PCndUbosZwJPY0GMdW/+O5zI5uR9Nq2c2YRX4o7G3c5sKs9H+3p\nXiYWLwjzkYz9AowCmFzQtaZB7AjYdMZ61LW2RAdudQ2c+7A8iZynLIw55Xdd\nYdG4Bmn74h6l6LHkP2E8xwpnSqDX76WHdPudtrCXCm/5+HiF8luzFjvTIj+O\n3ut+G3X/qdZ3+x41aCmIpkheq+zThdLnwBWwly6kB/64I9aqTcWlWL/vVAg8\n16t05uBgQbIebvIib3nYXP/E/OhCkzsMCahqc1ORlDnG1WTm7UeZJNEQiggt\nqQVx9Uno454RlKcUEX8W5/AbPE8SP6ounuWdZwXQ7WrqZTeqJ3kWA5mZzh8r\n+GyNsF07UEZkNgYCtE85mke+PnU5rT2LML/1a4gd/CB2YpHPQaQU+vhUZHOP\n9scN\r\n=cBiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/touch-target":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.f2a488e95.0_1592492653886_0.07525202858938229","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/checkbox","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c828798e62c2ca4c9da7a901b8ba79f528110911","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":40,"integrity":"sha512-gzvl3KktVaW6ZHaMP5Hpc+75uYdy6nN6SmDTjIeFV1VL9cbtkGA5MQC4O2kCMGGJ9o/92XBLnYDjSlx7uJI3RQ==","signatures":[{"sig":"MEQCICXkAOfRrkFisXxgay8TbIkYmvqCLxO5jftatE7GRQqCAiBhicziRsD/4ntXS/+j2yKxo0seNFl4eSpEuM+tvQaDvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VACRA9TVsSAnZWagAAXlkP/jD/G1DBWfbPgKJ4HSQ8\nKRAXnpZ+MRAVKS9eGCuhAL+u0AJO2lQhFxoRGIBnsMMlWAalyXYx46kuwaY4\n6gSi+EdxYDRWZdQCNLeFZUFDQ25XumyyCAUixYr889lHuzUoT4L6v3SyB7Gj\nMagXkxEXhkJD85csLsJiolFB0xUbS7SXderq+4AVlijYquXjNgSUGjsVLcgk\nWazBjZZAEJslguiuAdNzzLLAapLdAdf6z4p++bsmb3nZc2shqSxQ/SYVh+0U\nXD8xzc9NdhWm0Rxds26abyt3XXeTJWasuNSMmv7lCKhSkn28HchLZiMsuoM8\nhiWKlcGdaF+pjaRJlmf30DFZ6Rq7g2ft/hvrgJjGTe14YKG5lrxbzUcDytNR\nyWxweey/SPLLvBn24P7HKN/naA2d0iLZkKLjwoPsK2J2yOouxiD/SYlCBAVu\n5nTnwfG8jmiCYOq6eyPuVVDQBGlWTw8JYr9TPyrmLn8MiP0DWf7nDRMpVoj/\nYL76LVBQ6Xvg5hGKm7HQwZfzLZjGtf+pJTernKzvfIRCUGVVqUoZc+NWyY2z\n0/OC8PBiUIhms1T5/lsgFDQYsBFgT1B4ozFx4odlU+m1qz/vnqwEAr2Qjl4F\ng5H9hK0sb9ia78FHT4EQIrQYGM3SZf68HsqgodpO3aLaTKQV+GXx3X0Avpyj\nWqib\r\n=qiHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/touch-target":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.bd8d1aafa.0_1592493375414_0.09560703452392638","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/checkbox","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.1321eb968.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af264440e6128e4d15bcbae88cdb6462fe99b1a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.1321eb968.0.tgz","fileCount":40,"integrity":"sha512-FS2QgxoGJtgMU4OVRk8PKiL/opxWeWubH+/FVI2vNaFVLextRwY8Q4J1vokQAQ3RB0PI1+ZVEDYofYEaGRddCg==","signatures":[{"sig":"MEQCIFd4fbqKXnSR3Hp8DcEGl3JbR/QwROTkh8PIMgAUGhOWAiBZqXo/cM5yUS2rPsEquQpv1kGg3eAPPjOb1xQCRK1UiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RAtCRA9TVsSAnZWagAACIAP/0uwM3kK1/8IGedgV4ho\nz1uutCuA+e61prA2ZcdaGgpCzgVJ7W30Q8HlveFYzRYSdd4lrCNc704ORnPM\nrebCir1hWiIAVRgj2ggXy1ipzh9s5Kxj6awVVUGO9BsAhrPeYrduyLaEO9Py\nwHDTzwew6bFHwhhCihKCOHHd2iujp6t0Bi3DIQbwaqKKjxFxGWiMShFbx8/n\nCTYip2BPJWPXtxrrlhabTYEWLbRgc9ze37go4ympbOau/Wq/UWNQ0VoifVKQ\nEc48OrzPIYoAMAZ7PgYmox/fTV++mxpNixb5aqNpvm/p3nXfYuLs0pLOvXMJ\n1YUOl8wqq0i6ptjg3QFDGs6qowCYv+RN7UMpmQABTAl5Xi4xy8asCsBDYeK3\nkskNhIq4kKlAlSB00bZ5w8F+PX0TKSRIucXnExPuGPkBFOfBY1NBP+E0elrF\nEo53NdqTUaeHkgquUKoty+YKpIhnyVLtGsgNGOTuX/DsW1iFetZ+aRyAjr7d\nngPOTbsz7noK8NOrgRDw8W4FRPdRGtdDUjhMEEGtbl8jw52dX251dtvm8hrA\nX/3NfXOsb+t6xBKAkblzRYZJkmEtq4vumPDNLuz0p66w0zf47pl+7DemoSCx\nMgAQrfKsD5PheWg4+yRVJO1NSNDnEtT5lRxuWieLXjLBuDFYAHBJB8GPVtvc\nDqEU\r\n=xrWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/touch-target":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.1321eb968.0_1592594476812_0.7779957134464603","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/checkbox","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c12d716d91b8adf09b7ce44ef2705481df44c5f7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.db5cc0382.0.tgz","fileCount":40,"integrity":"sha512-g1nKMUOFte9weLcAKPzImO1u6zhbeih2iL2jQ0kYBjwI6aN/znd7DW3tJ/tKqpBI3pMvKh0bTiDMTi/xQE0Wwg==","signatures":[{"sig":"MEUCIQDeOX8hhAyDfWivwiKoOeuJWex6vCUVPQ6mPafpv5ppiQIgFYSgTFO2gSm/wDNwRo2+cnq0NW7L8soqlU72fdFMkuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGyCRA9TVsSAnZWagAAYfkP/1d75gkdnMK681Vbn8bC\n+VEqycdK2sHvSUKHi932Hwmt8ptpeHtKxjqJmfEr4+uMzRGqvkJ4WOTU8MRq\nMkmbzUoHXL8ck+G4YHH+s+GdVCkfn39Nm9K9ocP66//mirityqw7Rc/Q8Tl9\nISLEDj5iXfd6svIP5vUsb2AFItnZotCm/JurtJU8oHVLYf2lswUqoDi/+FXb\npEM/gEdr5DywW1pXB+d8n1Dn4nJoSaei3/U+PZnz7yM1EXQlR5nrrchLnBLA\ni7ibAk7WAPhAIrMpsjKRpt9WQ1nKAOfSJ5uFrMc0ATJpJSbzEzijDOUzSyeU\n8hOBjfghIq+RXVLWfyIMfHCzz445iybH/91S8aUTNG/YPSQpEnHcH4ZICVdl\nv1KTTcdDBhpGxcybkDs5+jJPyLhEhhim12rYmikEFONimIb7eFsW/DFJKTAD\nzHDMKgilw1ho15uBvtV5Xohq18olZpCcsKzSvupAS3iWuPqr3CkQJUcfz7Nf\nd3xT+PBYIpf2T1Z3Q99u9lAI5iLJ4U5qApelh6To+HddngUDPsM6kQxahlHN\nIDoRshbGA8084vO2xZXJrUuTMnUo/M1vXKXwzQG/bxVYDRYIYtKlPr2ayyrL\nmT5Ut6Uzo0p+4Bfy6+c/2yRd9JR4s/bw+h90IgJ9SmanrMFEMvAQQAUgz+8i\nHT4x\r\n=0/Fe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/touch-target":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.db5cc0382.0_1592594865498_0.042994677044080554","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/checkbox","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae3b551160ea4f7abc2fada7375bf7e60f3e158e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.6ac9bf031.0.tgz","fileCount":40,"integrity":"sha512-1XDWszAF/IYac7JGXcUcnkzMvlJM+yhiMxktUiP8Y6Nklh/lnJdEJX8cajHoq2rBjt1J/il32EgnolrHptzJrA==","signatures":[{"sig":"MEQCICusT+TLamINshNO5rUplxxjiB6GodLsCkVh6DBAhzgFAiAe0opOxfRAeQJTGE1p51tRSXSBriJFhofy9vGzNfDpUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZ1CRA9TVsSAnZWagAA0PoP/0WQaG0cMIYpKkwecuIr\nQjvMcIrNTapyPZApOYPPdTA6nAJDJwbATBSFtBrnhhDC61XNJpjnOvbCVUOM\nADXyeX+gOlJbDmLHfZNLGQIbYOrm8AnsE3Ija2E/Ws5VjSTXX07J39KEtwmy\nBVSnO4hEvucoHf98OrBDrjlvLrShnL9oJm4d/bUYyq6oc3omFprKwP1EyBUY\noRQCsZMzJILA8fa4kbCjRl0IWzgQWXg/tdRNJzo+iIdzBu0l6OmrKurOdouG\nkg3pZffp/opTXxmeiotJt0jnNb8qGmJv3/7GG6fYQeheocL5xxxsorSQOfd+\nMPb1+WgTrUTp+hgdoH/iAhZik5sdvSiSJ0NwOcaPcvwiQ2tWkNzILut0DOB1\n+0OGuFns22H9WwnlGRwtWqAq/f7j3c+UDGp3Hau53Hu7btJ0nNCQHWMx5FtQ\nzQw9w/KPmugnjRmkHnPh9VNteoOABvZyxuBje+oOW/TEojsZ4OTP5FrgLH/n\nEpgs6iBzi1QhaSiR32MhEyxhG9GjucGO0rCxXwWAas4DDkaMZUbvSxac4czJ\nBXhMbMittcW+34A12aKYDD8bDAjMnKfR2Fj4Neykl0WtT5D14eYW5lVzxgCz\ng5c8T77Ah62grWXrhyDxMK/fega6LAVC1zxTidv+xVnFU/lfGXX1SU31qsMK\nNfZs\r\n=zzuT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/touch-target":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.6ac9bf031.0_1592596084647_0.29867978774153414","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/checkbox","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21396f657fe99fd3f2e65063fe9dd0c6b6692444","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.c21b5c367.0.tgz","fileCount":40,"integrity":"sha512-VMUFcb5TjP48fTIE+B7EFBM3gz8xc56Z7Frk2PoLg1ip0VbjLoBJpsAf1n3q5PeF1GFgCjWkJiKEZ9mCPeaQYg==","signatures":[{"sig":"MEUCIDelQYbp/EgoVFo0/XBWTl0GpYI+WUMp+iRaOOpdOhT2AiEAkQnMl/9BphzhgpwhXI15GNdO0pr3Xcr3e5OErJIXs1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Ru7CRA9TVsSAnZWagAA9PoP/jbEFzGt8Bvhl1pwZ5Dc\nWszv0VY13LAmmV8GN/kCpJqASzKCAgIlvVv9qyrCuPXC+lU7VMEDJ3y/UTDn\nLp1SwI0/6PvkZstB2A90onxezgH3+0OcbKx8dx0Yd/ZEzsmyO+vVLkLmtmLr\nrHKb5rf+rCBOW0n/+stP+oEgzZNFeHTIYMRO98wTbW+oFZ/lpq6p0Mc9lMIC\nzfbnyhLbOtU83SY8mwfiK8/zozpnM3ljccykWx+FkZ9saQ6vJI7WGS0ZFav+\nrxh5LA6f1lDe+nhq7DqWPyGkL/Gj1nFmPWj/CbChj1+krzSRa6+dx0+YyQP3\nU9EA63U6EXa/4q5Tp63/DyGvP3yxnh6qbTVj88X9/C2l0E0GHIL2zf8dK8iz\nQcim8UTAkvWloB9q2R2GmpWQ5tk/L3QaSC2543cv83m6v8Dhr5ahskz252SO\nehehY19uuLez4CRNWGUsKRvZK3lgMO14Xdvd9EIqA1OIMGYqlNGQPjAhUZCY\newUIBxt4j5zMeG6Vy8JUfB7hxLOqezkAwUmicnZa3rXI659QQ7C7s4g3PCHC\nBTdv+tGKw5Cld86q1m5dV0aKwMEIvGBpjq+FcoHt6K+bWdU30E9FU9fTsiXT\nGTnmwXERkFRps1LEqv+LwNL572ndtYqW+GC22uuqAoMv7alxfazNsa2mP9dM\n37yV\r\n=UjkW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/touch-target":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.c21b5c367.0_1592597434676_0.3753425404402948","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/checkbox","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9ec359b1e4a5766fca8255b690e62a275723b58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":40,"integrity":"sha512-HoHwE0XL/84th43HfBcqoRcsnJSrAmlebm+ySPSnP6aCHUNe+mE1b+OWec1DUdZ9sniF9t1cq7kzcBl893tGXg==","signatures":[{"sig":"MEUCIQDfGO/GLUd9lfHvGSZX0o1UisOKByLFjpyGJqSe3HmDWwIgbewaOyCgJq7KqlDRI2+cJma8wYPu/hO3w1/aYb08ou0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3qCRA9TVsSAnZWagAASDoP+wTUupO4nWOunBm9aW+F\nzO8xw4yRqlze+F7l0iwqqawiEGIlA6dzQ3a/hWFJpszQM4L6eSEeVt4T90Rv\ngYIZxWNV1CVsDrmmvmaG6Y1SbBMZMBuRL32p6nn/54yeSw99jSqQ54AEPpr5\nfg3dadsXGhvciHZY+tCVy3+mNyNintu/WosZr6Zj1fjAItK/S3zFmxZk5bai\nFsCw5/apw3Ucg/u24z+yCnu7CWrdaBuFJJW41oETbrBEBnlchPbkKH5VslA2\nWDHAAsbIzxN9G709DBjYuAEz7J6YlzG65qLJssUKHGNN3bf5xOiwn2Pt8Fds\nmOQ+ey0aWvEE4O3hbfH3G2fl1Quru6SPVMPoRjIKyfX/NbhcqssuD4wwAcAM\naS21byrNHAQoVk0KzPv7oppUHZV4dRAZJpyuEds0fkzwSqLQ7mS1dHR77SPh\nB45ih0tMYi6njIUmzfXhkcNti+zHxX+coN/nXQBVHZ/IDRj5aJRmGzY8ldt4\nhu7SljfqQdFQU63JxZryXGNYQjg4uJbxJpz7MqVjav92EewRTsvF+bmAoXo5\n7Bw/HzYBX75bmQYo79s9cPkoKgK+cF+fgGZEp8faHLfFv7dx7QUKrYUY4Ch9\nCWI5VpMatl45j8W7ru7v0g0uJsX0Ekc/acxwkxM/nD4vnFm8GbwJ/DvghlRG\nEJj3\r\n=Ug0j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/touch-target":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.bfdd7fd39.0_1592597993959_0.724668300354276","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/checkbox","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.10b505785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1653e415ddf22e8a72fa9a11041a785df9eb49e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.10b505785.0.tgz","fileCount":40,"integrity":"sha512-gT8eABrNPVEU8fly847B/XHArJPJ6vlOqyKTAt3L7kWf9No9CKsqMqvyNJq2e40XSDLNcV25TdnLqHTzxb+ctg==","signatures":[{"sig":"MEUCIQCBiZ/XHF6gNh2N3vqgHBJXRi3WIEhBMr78wi59vYQ4rwIgIXhSqym1QYHl6Lr3OGoDgekF+RjP2dd64yQEzFwgDY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5CCRA9TVsSAnZWagAAc+EP/3pNjV5B0sxhoB9B46tx\n7R/qxLx8cSYrVXbFl624GP/fLJpyRrkY1gm1SWTljyl1OVWjqaxVAG8ZTGXx\n8+lFt1am4lL0eEdZjcyvcJvALZn7exkLlnKPbwDwwbx+YPNIOkUvt+Xt1idi\nmBKsStK1916Id3zXvH4HwzsiNcuuxKKTiJcmCd8yzcC//BmihyEN8TB6E+N5\nOfIA9GSUNVFrzyYkcO7RQtrUF/0q4Fd2fk4KN5jXYVYwpGrFHkUV6V7O1hiM\nBpmU3QheoQenALOAjhPgsKS8Ieec4XeJl8u0+4kLsnn1AjU+MAUs9b+G0BHh\nwBGF1pzf+OLqRpM1lMiTBJCOO7i4U21DJGg1V9k9X5S2TkaUvio1TRU60QG+\nRlzVnaQVpJi9aQ1L3iKRDrehO2x+n+BI8RAWReSITvxRPLVfiEro3PdbQRXM\nj6YNdJRuHMNfoRmxSgLiihRYzyhFzUTtxKqab1LAULB/1vKT8AS3+GJSH0ki\nnoW1NWj2u49VkNvKe6rqTLi4SiLes0HpUMQ/Czoab1qCANQ6PR1aQAgAvl2K\nnc6MCNhXOhBmmw/iH3gsyv3NWo1u6s18J0Qe+RkAdqhzfmHvT247ep19NL3J\nZmtPKZkWLiCz8ZNt5fd123ZckzLPUwOX/dl5fOx3dqcBc3ENlNMKUP0ADJ+Q\ngCOQ\r\n=/X5Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/touch-target":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.10b505785.0_1592598081703_0.8265948548277204","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/checkbox","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f983f17169727fa64e07e12d34aca7b3047c0ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.6483d3f44.0.tgz","fileCount":40,"integrity":"sha512-OTRJxM9pt6A8OXlwMioyaKdFczTbbpvHPPlLoMlWiPUXVixWgVybAi6DfwVD1H9AceNeKbBhF/KMY7LT88y4yA==","signatures":[{"sig":"MEUCIQDnKRe/4Ceiyhhyp0vKvNIc7awRj9q86XOdQ5+f4QReFwIgRBEdb2i1phptwlnnLrC7OJ1MBK2mOXhoVWj/zCrm/yE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SINCRA9TVsSAnZWagAA41IP/iK2jneSVJx3Sle9vISO\nqlNLyqtlFtL4woa/iMGwgjrRHAdjdg2+55H6PR2Fd+6PN2hDSII0A1oLXySK\nMAwvaFVh2Zr31zooNYuS1JlIpwd404HdWUQ+fXVny2qHqXMyORsIKlrvY4oS\nXUT4rWRLFPyRZ5yEdCqWJjqW0ESDvc5eqd2stz3iFDA5Hu+uGveYtQ72Ip09\nXMuLr0ZEObGlCh1XQlzRuPEE8chgDEVX2fAu5lRp+oNW0X3BxNcMWhuzB+39\n05QfmRZDvqjg3k3MagwVMHhb60TSIPzMsfUbwwc84p9hMa778mVwp224Y2VA\nuJQ1YPHzxeBnGzU0Ug40gk1HIDlAJZOM05NUwtN2e2XxBaLJMoAZBG6boDuk\n5NDATAMfQh17xm52S1m/OVxqUngy85JBkhCz6yYn6ohe+txjfMbkjv1eQ8wo\nHbz5nity4bW65t3x9GAquovtH2T7A5nGrfFkRgEHqARCBeY2S+iHFNTL1z4u\nmFjL0w3TVrnWshLR3V+2Wy+hKbLH+owUOk0yDVfmas3HbEqD9FOQyhaG/29S\nP2s7f2JZbR4zTANUToi9cRaO321pZmI4Vt0EJkhFJLtqywVyBFg4a0w+lkgz\nytV+ezWpiNBRyWlKC8HPMsk6klYD7WEfowx4IQc2GCruPtHP5a7nASW6IfDR\njG1W\r\n=LV7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/touch-target":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.6483d3f44.0_1592599053067_0.33774323250417604","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/checkbox","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.30a74e921.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48daf4bde61a090a001ec204bd86e4dd44d1daa3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.30a74e921.0.tgz","fileCount":40,"integrity":"sha512-dP23Jpe5TTzJPzbVtfcBH8AKXbTEtP2bFST7A83RBd2VQcVdj5ZYkj6JwuCUkasghDEpFk0437IhgtKmxqhIKw==","signatures":[{"sig":"MEUCIQCuD0pzBVCoW62MR5ogf8uzw3VWQ6TdkTf2K7GXnYaELgIgE1gAl/lu1pRQbBJ/Lr/hrhdckiPDSD4EgXafsZwyCy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKXCRA9TVsSAnZWagAA+9UQAI8FofcA18xMfaywwvBk\nG6vuNJC6V++L6taJe14JcoWNOiDML1qLzys7nSNF2fqhYfijeqIrSlqHeVxY\n8uCUmRvWM31UOquaNKVY9ueKi8iwSh7T59FQpbc2Dnca3reSyJU8+z4XJBI5\nt0uIj1Eq8tY2hhzNEyB+89OgE2xH1czLu3ZGEFkcjg1yvsLzP6juCnqzmLFS\nWGESI6dgrhQDq9PM+Sv30+MiI3zKrFK0DfhibHcHfpGDL3q072etlF/Op0u7\n3wRjmaU6lNisyt+rpExeUarD5H0ABy3VroXVOaHZDORJlRkjZTwKWeaQsNsF\n+8f7oFvjluNWIpmdNjTpSKBCvuvKALlYzeyB1hQ5VDkyJ93aWt6A7y1BWG1n\n/bEAsn6EBkT38IkUuCkOYaJG1dVCLsH4jiL+osXhmWHG8wrirVELZaROpd8u\nxoH+7WsRFvUDgWx7SWmQS+W1O6oXM84HtJdxZVAQf4es1AmTkXBvRcTE+o2+\ndcU3O3tP+dbpTqNaMXjAHF0561BVnYHaV9JGrFCm3Y9rHs1eKxzoCb0HzoFD\nh1hZwZXNE8VQ0BKGs4PD0diUFZCyBOSCv2j85Uz0qzJ366BYXKHgjbdc8iU7\nksvo3VXdtBxI9701zG5UGmA7MKMQ3ERtLFAKZ5gQSncDKUBr64dyt1IoCOjG\n/9FK\r\n=vcly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/touch-target":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.30a74e921.0_1592599190480_0.8645730744257754","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/checkbox","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.c20727498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8e8fc04113e09494e94d8e48522c8d1e136e4ba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.c20727498.0.tgz","fileCount":40,"integrity":"sha512-CbyAn79s8vzTSmQaN34TL0HVsPmezXMJDCPgx2K+Hdb90ln9W1EiOHNEQpo/Xvb4To+g+K0BUN+DSVP4HZPgYA==","signatures":[{"sig":"MEYCIQDYMCOOghFCaV/wV8dSvGx8KBkyu+ay6NWkH2kl6ycctwIhAKOC6/F/Q1cTmOCpPX31pTSC82ADum3toAnXlJ0HAMm2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNDCRA9TVsSAnZWagAAaC8P/3oZsWfkQx81shO7E1Xc\njkqfhatz5QzdNVxlxRzr3s1cfKEccW5hbhv+9YXs7Ylcuvpbwj37vbaKN9qD\njAKDksoxfqrZObtJ49cFdFDioJv7xnmGq/HKEElb1sjTXo+ES7qNbK4Gm6x5\n/rXl6HdRiO0YmjdKwfIYzsj+ZV+rOHxNTkTLhAbcNfBOzVfk3JdMpCDA4J/v\nparJKRTE4S4WMnwY5u8jWaArvS+RSRyC1+5c5CQrJQHfyr0Sa/l8AqvHHYV5\n0184VfDVlbea9h+ovhqqFZB0EyW7r1BNabwxP9iW9I1GM6/vpmS0WDQVi4mq\nYjXBcsd/OzpRqjv7wPlmF4Gj4vK2tvolisveg2eCez0lvR+apBr+qaO7ZaOv\nP4NNKBj+Xr09mdkoUHF2GBg/CU+rlxTjq+ScA6/dzpfLmZOotey0mONJiDJC\nQar+/E+YU1snDk+PnBxfcVXmv9vdWeTHzNPji7jSWIp6mnmzFYb7poJ/faXT\nNGys5T4gyPrkYtmT+m1xidsOH2AeT+yr5cSxYwl9HZzsNOnn9iQCJ1JPDE2Q\nouyPEO2tSmGPjETqvOusMvlswAmG4h3R0LHYxyb4mNEbcCaguoS7EQjA9HJ9\nuemO78OjEmetgWo0hz3jC/HifyfvhU4aMr6t5zpKWPKo3pHwO7D+R3CoIvKV\n8I6b\r\n=Cww9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/touch-target":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.c20727498.0_1592599363196_0.8119556443816061","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/checkbox","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee6027f8c1a394d6fec59ad6ecbba73327a1465d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.4e360ae94.0.tgz","fileCount":40,"integrity":"sha512-decaOnYmNI6SERFJQQAbp64YW6DvbpuPcxVLft0uOrkJk6Xm/ZCaOWLVFqHHsji6+AgYSdsqNUEpk+d2cEPxrA==","signatures":[{"sig":"MEQCIFrK00ExTOPBJuCGYaAWzFQaLLrcGwDvdW+d7F9rgErHAiAzVU+x715Lwhn09UU8LRkHHGhAjB1jOP0XDoV4+SwSBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ScuCRA9TVsSAnZWagAAoqQP/1W3ZcyrCFjyDqrHrHRN\nJGlCWwPBDYRQC7R+H6YK4GSw3j+QgqOY1oQ2RmIpacMwd2Q0tFsGAPIQqx22\nAqoCQnQANhk3DOdtK+82TPKdt/XXY5bs2bHfR/2umcTcrM2Vxa63yHaHDVq/\nO76CNWe/9qJ0W9C3sc2+IUmacHRzoYNNdkVOFJE3lR1vF1Wli8woqD5wXPCn\nrrtoROw474pbeZcejVM2Mmtpu8rpDqlEzlHrINOXcCpQzGj9C4QSfGOXL6Gr\nCxRoVSfrkFgob5L8veeMOc6UuxWu/K0ldrxJGy+eLCvRKug5xdU1vkceQe7z\n+EL44Jv/+VNx7s3ApBPQxYbF7KDzoJgxRVQvCUwwD4qpI7OBMdlVzFQFydwl\ngagPBPQezhG4Y3N3qYGF82ulJ+ct7ZGzYGVBQTLTFwgIJ6Z8/2YeT53QzecT\nHAYBpHbrqvEn1SNyXKueSSglaZkfP9KKVrijJhuXcZXt1fejcpmQJRu7xhD4\nHKai2UMjc4Y0AD78aX44vOwk9n0BNDrFmePaFTaB4X8TxjvSo5AmDp7t2uEB\nJPQcaZcUZjJ81gq3+U4DcIr9DMLUyQMPrMUJeLJ8y0qB/+9Y+q61m8BS+Qcx\ncHy487r+2YZMt5antq7qLVKFW1G8jVzIZdKXnUbuiZ4hWuoSrRXRiZ3CLumJ\n4H73\r\n=dCM3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/touch-target":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.4e360ae94.0_1592600365524_0.30520307456875706","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/checkbox","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32afd1646a5d9933254370ebec45e4e7dd98db95","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8550fa53b.0.tgz","fileCount":40,"integrity":"sha512-oBpq3tBvbDk6ckQ/cOqMvDQFGjoU28xvEUKutENu2BL6+oq0+g6VP3Hw51Dbh3YnIAdYv1wHjlWGLwEhNOZLJA==","signatures":[{"sig":"MEYCIQDqlAF0gAlW3MHIVQq6IeItn5p1f0STxxhLXnnP6MKYDQIhAOQX33dXWr4SI4x1vJAKTo6x5+/TD7gg025ZiM9FY2Tw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Se0CRA9TVsSAnZWagAAk+MQAIfHCy1n/r4s+tKdXH/o\n18DIZfrFYxO9RYRddafyKDShYagx4rloYlVkVfgVsIWJYp4z4doi3f7lTegQ\n4q3iweTWYDJXlBevgms0QOdvl/LJ1TkKv1sINNL6uz0YCWUPtmaUmy+DEXJs\nIWkycvT7HJej86FRC+btWqRdQPkO5iuwzP+tRNya0irs7+oVQxsjXCeDJeh2\nN9wlTG5WbDgtcwd1y1+a3ZWSuh50OkdSSUOI8gF5FJ4r9WnK1oRk7qKawOhy\n8uFD3TIH/rHU5h57sdawKtmyIWUDCU7/7YU6mNOhGGaCn29oXgqkrHlp9tZv\nzKJlkgTL6giuCWs7YL8ljb6lk+vHnsV7BF8TIKBqmNz3bCkFSxvyCkH3+mOP\nnZ9vdPgoAXSoLG9dr4FRfTu4fXmuSlhYURJCFNF4F6kofh2C8DGdGvATLo2j\n0yxAUHHNulX37mXV/vIEPXxNtAq26qPdXCjiH+6DxNC/X9yvkT+8DLGckLPS\nF+ExIyGWH1jK3jmzSTk8UiB9c0yGqfyqWOHkuiJzyOrDCoey0ntsI+s2au89\ntmwBBX3IK0EZ8xqO9VLe6IiEZvKxji+2Fdtj55TvDg93wLbTFmlhBZ9RKIap\n1h7BcpYkYUrBz1GwoPAX6tfhzNfyUpQnzTGq2T7KidJT+ju3PmKFuWMw3PPk\nm9LB\r\n=ABqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/touch-target":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8550fa53b.0_1592600500107_0.6865173430930445","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/checkbox","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.93ade142e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9ff52b682a0dfc11f15c6e1d812b11383a5fc58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.93ade142e.0.tgz","fileCount":40,"integrity":"sha512-E5gjYarFU/2W5JHPIY/KxuXcUU6lPByyHfQwNge8Y71bhyEA/QxRqPsQgCHrgv08ZLpTMyoK0zK9wMQbUsQCNg==","signatures":[{"sig":"MEQCIFAqf4WoXTFLvQxjwpCdNv9yyI9X+JjXI+zLpVvsaGtOAiAZixpiD9j+/ECE2m84G+YQIGwSxzdxVwTp21XLibtPMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgACRA9TVsSAnZWagAAiBsP/0B0XImIYb0DnV7GWA9D\nXP/R/iwjRvZ30GRVW02TNMLvPjVMBn8sY+Wjz8lnj+iAYs8TQ03ZWEpbfYpj\napK/o3Qd9m4eEZfPAhmj/e2xqJflg4/LHWXOoDEj5f3giotu8KEZKwfIPT2z\n+1hZ/PzydxcsfPbSDnpG8SKAO2DMcnGkvTAAjlmeAX2paIKsaxEOw80AWvci\nRBMnYj18ET2N7HaXVHUS380s1n6Q6wxuwhNnRy5++Nvc32yRRub1bhwmvCeQ\n1IZ9soV+AUfqHmwDy+SfWU6DwDg2iH5b6VxViYRV7pZa6kuQO8+SnUIka2q8\nWVc/Jt7s5GK70x0tCC9AugIKQKMUbvKaPNXaD1cgcKURkz/AvbI75RaSsJYN\nHniKZkVcNUsbYEM+64cESQUwu0gGtpUU82nVfzGqO3IshJDy8RaOebmDRB3G\npMBMJ1YqsqsdjxN2iHvGQWLRrxBb3jgJMVwIPHC4Lf4O6+BYwVhuMpRVkvaP\n8VeATGtnj9FgBYM8hPquLGaAHsQMPvdJszqqULY2WI7BGc7yS26ETF0lJVFZ\nWhRnq21dr6nsljyFCzFhU13mmtS5MY9+vjybgDeGHx1OslLa3TWZobWzy+lW\nAG937Fk2GoS+0AGWTfVPPtRLrECCuOweeRuq6iYop+bbJUkDEvqkDDLaJ8tQ\nq3Q4\r\n=QXO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/touch-target":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.93ade142e.0_1592600575965_0.017408691553336464","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/checkbox","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fa9b4470661ca4057c4cf04631a84f1461114d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.a0032f5bb.0.tgz","fileCount":40,"integrity":"sha512-m+cGloCwazlfYsyvljRElskrp1drSJDKvnOij5ucDc/WnZCMbiXjAW2j4Hogr6pmWTZ1BnHgEpR/pqxbUGEuYA==","signatures":[{"sig":"MEUCIQCAZaE08KPiGDOxv0ESlkQbBdGgCZJoiGw64ErSJd6uVAIgMv5H9LKQzb47FmsS+VWQN9Fi5XaR5dDq5JerzjnbcT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3eCRA9TVsSAnZWagAAQ2cP/3PAfi4wXpkjmUEpHY8D\nX2UhWPFeQ/3CXJQFav1Eo/XLDsL7v5oykkWr2wIbTz82mI9X+XRT5/pcY7kI\n6t3wxwEDgadh+/UNnsK9820u/sQTp4KXIbjiiwSvdQ7dSdtw7j0rsa2mb5vD\n/gaY3QDAZtAuFoM2GBdd891pczxzwfx9ThfGkSWxYeM+oFcxfu9z3BcOy03j\nSN9hXJFHmRZuOU67f5BYaejmPKAUD8ABUZPrO5AZvgHVPRA4Pj1YTr2F2HYf\nOiNT2RorarJJZOYw7vYBQsS9Sfp5h4jPTtASSuY86H1K9E0Tfhnn4NkE+pQ9\neKvvsLHu4MAPOo+WOOy/TasFoH9Pqd5BjvBnN0f56wDpbRB7zwRyRnmItYMO\n33fPaWhavaKrlPq55QCPNBAb016utL+6XbklTREKc30msx5CgBFGPog+2ob2\nksQydv8nPMApMFm6CAf7Us9VhPwFJUWfwrefTi4+arQlIJjW+jJfqFpJVfao\nT+IK5FXd4gJFLa9Q0oT+otNj+t4cJSwzukpN4qB2hsKEg3DDXgr/ZMNlP2tI\nlWFNyJByyR+TkjL/aZtn/toAzCmo7I5RkVfZS3kWilOESdDTmeodQdyin/jm\nNfTlr50UQDw9TIW23jcjoZ7+KWiaI35fPKyUIn+/UMsSORmJmlQvzbWpHCSK\n2EcZ\r\n=uvbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/touch-target":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.a0032f5bb.0_1592602077665_0.6496743092614734","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/checkbox","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.3f342e721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"542255e3664f0869d69bc0e225cec7d20d002252","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.3f342e721.0.tgz","fileCount":40,"integrity":"sha512-72aM62loqyYYfGW+aDO67UbIagZkFI1gyBDs4OmAsM78WyU3LM0XkhhL4UgTZEUq4wljXPLQjmx9iIUCoH0xVA==","signatures":[{"sig":"MEYCIQDCBfMxQ5te5fzaXeON2oslfJAJp6q2DbADyZa3K4MdYAIhANAX4JvDUjAitkyJ2HGeJ2ZRneujWfYESpTDx9sIETnn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S5wCRA9TVsSAnZWagAAbakP/2/WgrahRpjCrgGf88DL\nsXV0XbbB7zYxMWphAt/LdIvkfbehnlkWMuEre1qJi9ZeTt/cYQ1WZRnIUtR/\n9ngyLK3/JHxNrJ6iNxgzX2R/5lNLyfYoKHgR5S/xwBYrbPksldzu94T2r1rU\nOPtaQJCQX0VJvldOYP++oXOtzoX0PPABa5hiCdHG5T/vRl0j7ddlIi50OjA/\n1l6jOSWlmmRM7pUC5hrvlBxXgcshYIIZe2VhogHZObpO1B8Crsd0v365Uzj/\nKZIjwqOWa2SpidA94JP4IVNW0+dQME1/VmUnAlhKclzpKxf5Gch7LgbrcoQ4\nZON038TQI9bnMFXy5FmdB43fh7ChtukVP+38BTFQRfiuERWiOWW+rwtJd5KY\nhpQIOIlVoo9f1u5dMxs65ivwrFxQMuK4lQIvFMUBueN1dAngbclp3ZL9iTOB\nzVJ0Hppczh6p4rSQErpU5Jwz1T6Jgb/oBe2159yK8EJQEt2nXQbkft5L21w3\npmb4vrxZ8vu781YblSR4O82l1vTH+tmPHV3nH1NoqupjzqExxE9sVdTcEoG3\ngm5MVTlIZZe1lnZ+oXWoPJaH11+D5oeknia4fqYFjWwuGUD+y2V9byBgNd8e\nTk2s2OEeuGWsGxfFjDt7qAwF/cNThIs3T1ITKNUwkTwXvQBGCiVYrZviUwew\nG/oH\r\n=6gZ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/touch-target":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.3f342e721.0_1592602224232_0.2707424638121241","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/checkbox","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c6d40396d2c4bc5a2db6da726007f8591ccc999","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ff89457cc.0.tgz","fileCount":40,"integrity":"sha512-iR/YurjjQ4HYk3OH/PY/vn8KXmAQAnOKodbZO5ZFylJw2+qYww1wQj36Bgpo4zyWx2kC05iZpFek0w+ZTVit8A==","signatures":[{"sig":"MEYCIQCsuvZVmhCnBEs2CRVZU32neDMWnqIUG0bkNyecYKtZAQIhAObDB/XrpWLjB3gevJuRPk4WG/gdd3xxL9X2AyFtUK3e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6kCRA9TVsSAnZWagAA898P/iOEa6DUoQgq3XboHPC7\nXp1A5hvNUnOIanDnQgQZFYyc79lJJ2jd30mN63+DcpEzHHvDA53/b8PFOqdZ\nC0cAECsc2bRi7FRGy7BMdT2VelMe5Jj6pxIqyZJBePqV88NZBRaI7LZotSxJ\nbp7H9yu/SffzEmebg98vJahKpkAamVYvA7p3ZzTCIN9o/QMDg7P7CrGSFNnT\nEgTkYDC2e3f9/y4KhTQZnrnDfJWu2yjqJJud1tO7AWocVZb+hlM1r8rpmSaB\nxF8D21Sl0DuQtxTQd7gEgtH932TwtyAH35QyCap8gtVztKehDTxhd4sKJipM\nKnmvCnejBih9+zOQQtc7VzFPOBWxOtEFoQnVD4PmKVh6vNhgynzHTJrm1by0\nIoad1OqhxeRi5k6hQTEko2L+sCAObrg3EQr0DcBGphn0YkQldJv2s2x6JDfZ\nTOdg/SIsEduL7+mqyfzSyBv2UycY5ABT1YVVrmkwHU6r8b4IRRNGsul6at/f\nllmXop8XaeGVdZMtpDSWEGYxbeKNluMQMX6jDgo1QNqcWtPD7bwjZa3IZtVL\nSx0Vshon5XZ1gmhaV3dvDTrA/rQN2PENnAfCNdOQH6wIXepWAY6eig+AIw5k\nRs7WoxbzDRYX3FNtVyBP4QG5cEIRsLsz+KP5wc6VQwcOHRh/xvn0iew4IAQW\nasrR\r\n=NZ+I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/touch-target":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ff89457cc.0_1592602276235_0.8168728255504918","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/checkbox","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2581ab9c72bec4adb4543a7c874f14acb33c874","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.4a1855cf8.0.tgz","fileCount":40,"integrity":"sha512-5/P5XabBdlKCXMZPvUlH6YSX9j1gmmaZgvguumHxoQfB+ZeKDsz9Gw9Epb4oAnb9ki/1qaikQxN9uO8kfZZ3hg==","signatures":[{"sig":"MEUCIQC28s7CMAzilmP7KypF94k0fM8yplFRxlhYA8aj+XmAbwIgZRgxkNkUqHdAsbp89ZeIc1FnpDI0s2xFrTBDeFJ9uHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9KCRA9TVsSAnZWagAAYcAP/0ioAWQ3uCNZVhDAGmHQ\nw/LUI+mrPve7b1/tuJDeLkYAre2fFE41Lt8R3VnXiTmXOvCWrWJFtBuyph8g\ncPrGvcayl8Dj7S+dXrGrkT/yn0PfpwfeSwN0Z+l5dHWes4I3JpYUksbBGijc\n0pPF6c7QyPCDuBFkPfHqzau2pbHkxpCPVU+/5cPEjjnn6KzWOAayZvV7LMof\nFTEohC7/BYauOtn5LSplD9rdwMdnofKwpln1qvu+a1Jp4e5pTnoupNEkEES/\nzYFggZFv4LCzBkewIjqFR496NYVZds2ZsYDvvuKAX6svpeDwQn2bS50BEpQr\nB9MAKGevtiQ01g15VYkRymKRGvXMsiQE9paIRZGpeGm755Vj3FLs9YtTkpWi\nEH4g1ga1MkXDtaJr3L//d3Py/hlZ885u0TYEMf+O2QXInsNrCR3h3dmrFwgm\n7gfB8qBDGwv6ONcW06X/mgKeAzRyO/LYp2gn3TSJ6+CbPXKr6qyqjrZONxqq\n0kOr9noGsdacQG5OiaABvfuV9S5QupKzIBNFC4XSYLHscbW00NZ/3AFCi3Gc\nuvsenMEOp7OdfWLfXH5cF6oZ4hxcFSyUrhEoUL9b7+IXc9WV7/wFKf+z3f0q\nJ6Utr1tSKjSPASl7M3Fnxr0ZfNmeyl/ID6gOYAuc/t9N2Z8/OzxfuKSK2/PG\nO7wo\r\n=lTTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/touch-target":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.4a1855cf8.0_1592602442047_0.39636887177252134","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/checkbox","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e626a8a1a8b5c0d77c6cca54b30ab9438b147c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.8602f1b4d.0.tgz","fileCount":40,"integrity":"sha512-Txqge9vnmlbjTDoYNPzzUyY2LRu+6xiqLsXlzpLih3LpmCSlxjoYr3BMy7nWkCJguCf/OgNBYM47KG3w83uTMw==","signatures":[{"sig":"MEUCIDxCKI33zeDlwhjY+pTDvVmjeJ1pGdEM+Gpx0g+6sWabAiEA+BQ6mIEVYGfkVrx2JoX+JJZ1gjHsKUHpiG6Z8tcxEAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkbCRA9TVsSAnZWagAAYO8P/jGYQzsXSLuM4VNZiaW/\nMYiVljlQylATpDmHLUwtdclkmw/JdhOFJqckq9FF12znavEJQoYw+8FpKwFx\nq6LkSMEPAq9dbJQQY734YOBFSSe+ByhTDXyH5CYqvTNt0UK8phA5xLAxvgv4\nmQD/gzrEhNro8FdcK34X7v5wQvR0p1II8hSGd06HTFbxBuBtTsf2Hqu+MiIl\nh6W6liit8T9uYIp5EBdmDOHXjf7aGExOORFEr2iRj7JkVGoYyb2seQA+Vb95\nkIHQxFBbHujNvFYdfSvAasBkbUVEMFLpJn80Du98DaSbarrf4biC2yvCVrzg\nqCaLQYnBKhIDcAvuwUt8gdF8MdqpSK3Gx/J5+yhoAUytkByIGI6tg8PWw2hf\nRJ6UYoljMyQCWJhQPl8VZLAky695rl3VwJqGIl96TZo4uZLEZf2zzXPFwAKD\nyqxbmGkHC40QS2dt1gWs18zm9S6O6+3mjW4jpHOkTPF6L5UDuiGW95OfEs4N\n3+hrXQUK8o54KjD31TCORJW7+6E5WwOfKFzvPEd6df9beuzIGgAriIg4Gtd8\nCnBbWdXWAHtecEEsmI0iKh/do549+BcjYj73wt6+lwrR/XbiyCzRidGrF8Pf\nw8k59mYE+IYrN8KNELoEedFQkhjLNddsjHtwRiVBEq+MUovLd69LOYlRjus7\nBQYU\r\n=utyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/touch-target":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.8602f1b4d.0_1592846618779_0.8531446166103174","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/checkbox","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"359800743030e2095c7b92d1975306ad62d0f9a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.69f9f0982.0.tgz","fileCount":40,"integrity":"sha512-fgPZaMV735o3O8ziOvbUAZwjHY1f7tZ9+BUVVnxtumT9UjZmZawTDQtqGFlBC65NUCBj3Ql++rWmPj/BIgHM0g==","signatures":[{"sig":"MEUCIC8wDLNmgXiBMcnWbbH+bZh8ggq8iBu3KtvJ4bmu7VqnAiEAywu1pugnwzFftaf5Uy4Sj8rK8la5SQg6+WQDuUxtcsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8tCRA9TVsSAnZWagAAFQ4P/jqrgK7IVeh+gL9x5xWZ\nZbrpRoP3G7z7kAwhl03CdLz0h4iilF7C/xOp5E8wxjVIU3t3UuwtATejs2D/\nbkVX266Fb5ln9VtndfbL76FwYjvv/LZEkhpzhWDJfECJkzcO4aymGRLhZOfQ\ncfPJxsXTcEb5B2x+PwC//klsbcBtjjC5uw7DXVdu0N/xdUTSRC6yMuZpFRB7\nacpWrJey46ULoKyQcopVs5d31SXhbQRd/2h7scOblof9atC1/2AMn3puZNp7\nYivX5BZE8eyX77olRavZG2acRnGbEbwXTMBloXxJMNkJ/bYOnBt0k5tE6v+T\n2Bo3mTMN4Iq7uOenSht5dl6kiJbUgjYzGdmDYGVriFodYmV9WeM/zx85r0d3\n+ihbXrr/Jjuu5MB+QuNRgo3gDbQiBh38Q66Y/9ofRAqyUU46jRYMerdGW6Mk\nq+WocZPRJdPkoiziFy9Gvz5YEiBeEjHgj+bR1Jt6sh4bgqj6qjnxCBaXRzK0\ngy1NBVNqHLzG+J7K7jyI447/DzAny9CZNIMSjZNWbB5d/RAXl3XQTelRRQAg\n8+OHNHnk4YXhn6QPvK65m77M5eGHy3gvujSD7ZrS9TeteCiD2DJdflETF2R0\nVKpUZqSgCcApZ68muwrt/o5xuYrmDdCnsk64CUsMnO43ccqSgowbbxA/Tc42\niBZb\r\n=m7Hl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/touch-target":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.69f9f0982.0_1592860460591_0.8878879617985891","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/checkbox","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.369a293f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d57a66ccc8196bc7a9e79e997405fdf12138bb4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.369a293f0.0.tgz","fileCount":40,"integrity":"sha512-BeKLsxXTDcva99Ir/+eWg/yOzAYK4mPn1CmhxiRo8L010AALi95CEaYcs3KYDJrA3SNZzzvsFcbbHs+77X7JdQ==","signatures":[{"sig":"MEYCIQCvnEM8sptD/oQntwfKwiSfWaX+NhBYUEQVs0LqLjfpHAIhANubd1NremxQAXg7mvJJ9GkBS88+G+O+upgqAy8zm9Xw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+1CRA9TVsSAnZWagAAKE8P/iye8Ktp3ePGDvAbn++U\nltYURGec/6fZYDNw8Qcc1Y603Ys29Vdn3LK5yEwatNAYXzVefwU+HNzaMrhB\nvxh23TGgiPuo2ruTiPc2paZNOYxDBkPopL6/N8mQnA0AeOP6LtzcvhjKvlKA\nfnGcikkOlM/ANSyrjgzP11GSfDFeCrOKyPnF+gxZaATzcSQiV+1HUqsstYlG\nfNg2Z3CKgNYpQgpfu0HJUvY44uGqXgQh4JzqRqLfJxEIOm0lAGgFyikGlmX6\nFzQMi6QI78QCLPpEcKA/cBBb3irav1gI0o0UfHxrZTrawHazSCczk9VOQb6N\np+BtFZ9OuIBMcdH1fpHopLi40lRsfhfKPQNfvjzvi0fbSjgV90GiD2wRXOKH\nmg2G5n/C5Cc0+3ndDU6pDxJ2nOVyZpmugyM9nW92ay1joYQ/lc4zJWZaeLlV\nChXj229i8aQLZZkaGwepApNA7NVEksSZFR18/6TTHXIZdsYbO0wSeFAqQS5Z\nqly1w+H4n7XO07bFn/iBQeniJFavlutQuhgrDmHntOciq/3juQETxNCVwNVT\nyRQCRMC0uhHoYkzs8Vycr/dN1WIVbf8plSoYuIyd6FC7OJ8PrGGxPTQZvU44\neIaUFMlbgbAYzqJVvkvNUbcoWXKATscVLGdGNFE/Brpf3QC/tCstSREl+Cnx\nNgyG\r\n=dYCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/touch-target":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.369a293f0.0_1592860596594_0.8132770150871353","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/checkbox","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79e5d996f6bb0da5b8c8c166cf0232b64019a67c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.f1432b5c6.0.tgz","fileCount":40,"integrity":"sha512-OJjEUWA58fpA5TOvBnzejcPjZEUPTDLck7ncLQzDg1ZPbuWj6dfmum8hLlzKt628heAweNEfxlHAjFeUTvutVw==","signatures":[{"sig":"MEUCIDPnFmfP0uXyNbroC13yq8FLrwPccTG1LaWRqciyY2/WAiEAi46f035qeeEna2EUHCU4WVYCWtqQ4qxmMnovPoMX0OM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SG5CRA9TVsSAnZWagAAbGIP/2ogLO5+fUUCl382jKNj\nukvMM9n9k5C7kdmnyb5+IAZOo7JIrJIeqiAgvrkT2P9FIDdl3IvVUz+CT0A/\nDkbpu36YFRGqGAkI0L45KR35GvJm36Rtnfz5oOiT/UsWzAdyFoi6b9On77E/\nPqWYNRK3akHqrkjINJ0IzeQ0ZPX8tipFi0R0E2WrD7Rji2hHEWwzn2IYZqNH\nUGp7oQhzm4fRkERTfpXwSts/C6D1zP/fh1R8tKkS/dIhXk9r2UHDWk4ift3a\nDmJGLcCkFgyfDAqQ6y1+0S9ya7sLR86XoPcl5fXp1aS64UpGknSc60PnmTd0\n56qajzsKqhIJ7IYna+emIn0nQP+WUQNQWs4v8UYfHR0wIXGhGlliFek8gEjp\n04LsMMdj3mIu0q4DgmBydY3t/MhZt49Ev/5E9PucLV94jn1N7wX9PNO5NHdB\ngB5df3Y9DIeQkU44Dq2C3Zsy/J1gZbGjQHpV+wBegPX0/foMYgHnkN/cSJ22\n32epbrpZZF3mFv7/0Kf01u9in4UoDbyhnX5s8oimCGu15r8uOPA66ujlCqw+\nBGk+/bOO++d0HHgACRsClWUdJMtD+Aw9CC94hU7heOBvkEwhmT/bWVGTJfLO\nJrCRuY2u4rsfmGhxZpt/xBfm0kfnj/9MAlCY19qUTijMQmXTsn38dBb8cDMT\ntjTb\r\n=kqIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/touch-target":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.f1432b5c6.0_1592861112535_0.10033704324773707","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/checkbox","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd6ca32df8588ba5501d0cbfd15a3222ce6118c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.4757a16b4.0.tgz","fileCount":40,"integrity":"sha512-s8DRWapoEcSVnbI0xjb+CSwh0pd6Ws8j8eNNcG00cCrXW1CTjg1KSgYG/U04m0tOzgYf430MVz1RfjxAYlhEwA==","signatures":[{"sig":"MEYCIQD/jhvPD0BWkdFzO26iGd6mb72JBmlfqIrVdvT/qe3TUgIhAIn3dU6v90J0Dm5/98p2hESlHyZBtt2dywgVa6b2mlZQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShPCRA9TVsSAnZWagAAYWEQAKTUm1CCRLEYd68LRl8I\nMrhWm8rqOtJCn3RGVa3o+cLY811srrNNwX0jhi2QaoKO7v3M3qAqK36XDXWy\nGbHcqz1IhRMunD3l2Uh6gjZrLbnPGM7SrVoao7OILBMt5UPiwZ8uyNDu3RSp\n+TWO0HL251QN6S8U+mfSUKhKXmhlkEGURuzL8BEar7HUKqf0UQOSv1WWyjKK\n8L9UEsfIzFHMSjedXWeH7TkJIcJxGdzstQZYBWb58UOk+q7kTCc3Tpe13vji\n0i2pGnV+u7iAJPSHnIjCNl5Z74wOYFkP+CWH+SEUkgj8sXBr0di28yXo3FRE\ndr5GdF2jCa9rLvnnbiP2XLZVmvGvxJWAHO61Veixi8Jv48C6Zi8Lo1h/EAIl\nsTZchxSTmLLKf6SUhhJtNlkhrh8Xx1Lw31DlJDnHfBnJ8fy4ZGvr3TMqx2kE\n9CTwPGd1W9XC9eZi+8VI/VaJViAur17wmgkqvOsI/YCUk9sgnZdEXN0fNm+f\nMJ+1CHoeaVA/DhiuZnggq5uxWVCEQGoAHdTrijyB25dfmKpuOPK5AjNtWJNk\n1K229mJrGJNug4tgH4DeuX3fT9cmhd2T9O8qRGJ5+d6/583/EHSW6XAvzOmb\ncRXseDZfqWUo74yxxnjDWl2pPF2FLCrUnA7PifRN5HpLzGbMUNJjbY5rIo9f\nn//E\r\n=/NLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/touch-target":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.4757a16b4.0_1592862798626_0.5606410992479289","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/checkbox","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.f8f472762.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e0ab652df8d7bd0fddb0710b3f5fd6ffd0953e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.f8f472762.0.tgz","fileCount":40,"integrity":"sha512-MCmjt6R6yB8HX/vBL/J5b8TLUutLIJJNt2oGjtToTiMTD1mF488PdzZrF+q+Cvw9w8j1GeO1MJEKrmmEVqXL/A==","signatures":[{"sig":"MEQCIB/AbF6wv8qktoLK5nwHp+x7rW0QfQMFcCYkQr0W7Y6CAiAmQp43+lnbpQSDsAFvDmdNmpBB05sk0OAIcAv3H5XnkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlFCRA9TVsSAnZWagAAr6QP/RS6ACfSznt/bqiM21Hw\njEfFEZsuABVyhGYtTatZWEbR1LJa9ngK6TKPFjNp3kGVOD5ihJAjsqz4KLwU\nemCjDFIYPaK1GcHC8NAUbsZIzbnAe345iG3RzLQ5Ny3xwOQ0yGFWK9lMkEGK\nCBoHSEDcFrS87QlEjaPPzH0IREQ5iuySYjAZ9ZPbgTVSV5rKpOqrokL2M9NF\n2UDYD4H5gPZBNYEjHMKG2Def6MvfmmvpqrZnQqOXzpkF0OW9N8Z++4IZxWsD\nCaE5q7VDJrAQ6GLBfEDqy1eZmRyq2YVkaRWs0H5nyFrDggOA31BQNyZbryuH\n5Av/CJ+6ZYmoLEGBhVRjBzUSEluI8QT/WSg63gdA1o/rVvpldfIQQ120BXkM\n0y/p3gezrPSvkimXbwZldLhEdfzLIUXuzdjYzIhNC/OpslWfimOg4TiJG9tx\nDmAV8tyE5I0+rGpNO8lBsOmib2ESb7zkwDZavW3MiJVnAQj3Q5mKfdQPzS6Q\nMR+ZAywEYZGK46t2gb2ex/RP9UfcIKFquOCirpjaa9VaOQL7S+r0MtTCARpH\ntA7z2ym3LKF3yoxsjxDZRDZHwBE25HVDnrbCMDVomEQBEerMJ0Z77llsmHgV\nlXZraNcSyylKJxxfm4Qbj8mpjkRvmEmlJUxiCs/SWJeMGlnLEUby+1Ae4g54\nmzXo\r\n=FtgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/touch-target":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.f8f472762.0_1592863044523_0.3740981051806347","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/checkbox","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc42ca4b43a82aadc8686dff36f1a0842404bf61","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.7e4d55c34.0.tgz","fileCount":40,"integrity":"sha512-AkYzxLszBbIzePnJXOOLYrBbiL3MfF5Adpw3cPPkBVlDjuNG2aIS6ogCNZ7NWWrKnToa9v/ffHuIO7MqWQkxUQ==","signatures":[{"sig":"MEYCIQCwDt/UGt9FFiJnkS/nzALjHDV4VUXdW6Iv5OXiHKMTnwIhALLKIbrk9RKFmdQhVo+rLbqFp2N9knUsuQkHitB3AwU+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TC9CRA9TVsSAnZWagAAD5gP/iKeVZKEzLGAHSRTuftS\nWTEIeb/REG/LUhQAykzNuXvRovvGjuCSinUig/mAVUWayrRIcpvqLBMedEet\nTCCZr1DC4iTfIvaEfz849YsbfEFbiwRNZvKy43EESYSERCxMree2Zl8QSEGw\nKK4uXhS40gyvzng09pwIY/Le/+CkX0ghiJ3H8BJ+6eP2lOLQvunGEuqW6Px4\niVbcocvYoOVum0+a727tL/MZ2g7OiK8hLtOjByGKlgybS0cn1pnTm6Fl3nls\nvbE6SkPOhfQWGBNjrtSAxNzlY44aXfGRJsrYb3n6fzKN0pVasSbrDZvRWe+s\nbtteTlNmAmtyZ1LhqPicFhOZN6sveJibNnCzsBn49dUktHcqm1k/ej2QigvP\n7y89OwNjo3WcMpZETSYb0m89ZblVVehqilix/2C+W8r7BsHbyZHWmc/DPvQj\nlykuLD5TAUhEcRqgyuEuUMdly6NaxojIt5cNjLTQAuuTzZ7qu5AN4bolugQv\nCO8bdWvecFNcXEzCALvXuVA6AcM/owX2YxHAegUjfkAeVJOEdxnMuu3PPkDy\n5Zs7QRpEZbnSQUmLjLEiikmxE7RgkdhGd6JvOsP16LEuyOZEvsz3Y/4leEJG\nFBEuSSzJS89yfwOBTDMpTeGRNSxlrvM2Ylt83mGqWyiXVHVt+zfKiD22f2Gp\nuMxP\r\n=5YuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/touch-target":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.7e4d55c34.0_1592864956846_0.9863369611697985","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/checkbox","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f28e810fe72c4b8d1a12c3c8fca5b79aa0a12c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":40,"integrity":"sha512-o+8fnB+qGUTtaIAwQFg5T6Wz6lnr2pXGjSlmuXaJvimacvtceUuP8TRuahYATQ7YcMU6y8BqyhVcwLM0u/ZKdw==","signatures":[{"sig":"MEQCIDUh5e7e1/WoMuHhHTT4MG8buxORCL+SrNdRrMWpxCyrAiBZCF+qJ6y4DB1ueacc9zjFych9TZZdAjnYL7iqA9Mpwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hFxCRA9TVsSAnZWagAAcFYP/2V1hyN9F8rnzfP3I640\n2tN3ZZQZolH/9X/CM8zcU3NrLO9Y2vpBA7l9K7lzhglNSNieLc3d9K5NMeAN\nicZBUKvBp7Hfzhmyi8qY23OL0BUteGjZ7yL2GhTxjHlb60kWe6RvgXxFk2NZ\noJKjDc8Eh8QuL+k/jvf17VxbpfdXaOmJfcudol0h+z5sM477OmubncbeZjkR\nHkyURb15+lW2IrfnUYjAdUYesYlg6287xAYxFkjoOAWBzgAEocVYsiirCEUU\npSRimGIYybDC5Y1RluAoBooqe+op+ZxZ0x/3H53G7ZX74sQqQN6LWEZy0Bon\nrTnyB9mHBttQacz7/kviUZ5TSi9ucVtnaE1gdsnT2OCuozPPJ4iqIZ2AtUYu\nZfOKXgmFCQmZYE+MF8+baFCwvIB4V3k/lQQlYGlIqMaa9LnMwOKczGSsOCws\n6v7AGnbN/b1PGrHYHcS3/bWdXpOzSL7G0dy+o1GR9PPHhGpFhwyaLfLKpeZr\nVxRSoLI76VB+MFLWjpUFOuXSvTwrBXukHLNpk6xT5FvEJcW43dhN5tj3aTjb\n3oz3aZFxLE1w49Z1KnY/83M2y7mYSjf9+DKGl41Kee2sYpK5n2d/6jzoUSKX\nHMZxx5heBhEqbvCLK96yLTObf1MsO4LF9MTV2O+dld0UBLg3NvS+Vyl0KEr2\ny0wv\r\n=ecTj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/touch-target":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.bd1dbc91f.0_1592922480986_0.30055972420197463","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/checkbox","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.31523bc62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d89624149cbb951c4a57ea3f61b65dbfffec034d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.31523bc62.0.tgz","fileCount":40,"integrity":"sha512-aBryHDv4/8m/0PpRdc+T6jowy9a+Ghib2E5tkMN0RVYwkfw5cFDZ6e9ez3S3kJc9pDAorMux7ibNaUYM43FVDw==","signatures":[{"sig":"MEUCIQCIx8JwjzIPl1ljhthmfK+KcgQuobKjm24FD6q642H3SAIgHvvwP+E9nsXopvoMgcZNOfi66N82tACZGu7FjzWJ384=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLBCRA9TVsSAnZWagAAsOcP/1LZD7Qb8Fp2DyayCwf/\nvE2eKAI4b2S3gidFtdn9Y6UgnXwDWJzMHs2w9S9q8E7tTwBup19yFZ/oh/QX\nGBS9BfXFnxceIHyYc5zfctJjpi/eToYJ8FJljKAYmXqE0s669Xxx8s0/IuKL\niidzPZ7UTWWWiWYfXFYTkHoLM+J6P9hqfBmqlvP/sWok8yXtNV+uWqYvJou2\n/C/Fqu6f2i5UxIdJIXmiCb1BrB8QdcUosRBeGP/HzS8oTH2VuCbyZaqyrOUp\nbrjpR1OpjiQWMW/Ca2U/ADgRhvmEey6gVo7dky8oiDmHgf/oD32vFHu1hIMm\n3js9jq/AhC2s+2jFMF8hQ5QISeS/GTPRlxHfsMkhgYn1lxvg2a31OizWIBL0\nM3IXByaUuiBd+8y5X1/MYkNFCmHizCiW1O6LLBjMTSoLxubNpb0yGP/JlVZ/\nh55YynFUC4uD3T7BRCBsR+NayqXxHoghpxfEbBq1fEooPHxxA9U8D5/nAysl\nfmPFGb1jWJXTTaspg6FbfHaUxlrAQgWoCx3QLxHjwBYY7gKyCq0dsZDR9udT\n0OSfuNkcwdKSgETGZYG572W+Q3iYy0hPs/eMUKNkwPNbrZbT944SSrz9JMAy\nulROC9dyX3fpz+ZLcUBtSbGE8fc+Znd0T4bKhQ3mri5ShHtrCuU8tkfesP10\nwzyA\r\n=zU+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/touch-target":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.31523bc62.0_1592922817385_0.04020055922909904","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/checkbox","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea00a716df5e39789ba0bae84cf471f2fcd8dc22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":40,"integrity":"sha512-JwzGpn/pKkNSoAOYA+hNnue2ALNQ0eu1wyKfCGlo27SooaapMnsFlDi6u5C6RNdhc0QT6z/yw28TSqOBSN2UMg==","signatures":[{"sig":"MEUCIQCxNVy5L5Vy/g22T8L2yoAinCfxaSdQ7ekV7IpaALuCMQIgFh43HDjAfXz2WJ7kT6nsuTm0HE+f+RF4dSfTp8TU6Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQ9CRA9TVsSAnZWagAAPZwP/idiOYMITg4UgTnfukj0\n2tp3f0HqdbjJz809CWST0Fh77gxrohTYaJ5g/hPF6pepc7U8lEqwPF8QPXMb\n68YZuT4U3d0bKNvZuLnq2zwZpcq8ChihEIluKLVZcUzWcVjpi9lj9oWxPJ4p\nD+dVEN2Tv6zLGCJ3paT2yLokRF8wFJqMxKCBupzRVCMrVj4mGa6Cp5DXaYp6\nMQql/LmiyFwhqRUoH2EvR8yYCsca8PrVWGgtOxwz8nUoar9pgmSd+sQ50zdG\n6UEkcjdu0BUoYf6+1yiKqu4eD22Uv7DBUtm/MIQ6/luuX3MNA8iHfmYlz3oK\nr9RHW5NxSRaoKFQuU2u7WJ7KwDfy3j0aCGlMWzF45GCLbHJlI0yMq2JasfBU\nr+4i7loEhUKm4AqAAgthqAa5ebtSu3k3j54zHNJ7lQW6OJhTZo262HjSJfPr\nW56/jiRlvq+tZ4y9JlBIZZHZiLRTAAvjp6LZDyy20aLHPR4twiuK8sEMColv\nowOZ3ZYCyz8mWylwhTQ281d96GpHcGosBdcUERsCIncZ51b7kQwGw8qa6L8B\nJQBblr86hur8EGWX63crTTOxFjsqI7y2Bs3FHy6IZwfuF/WAk8F8sknp/YOc\nsWVlhdr7s/Y8wRxao8+rBo77o+XEIw8r2RA5l/uT/WpJVK2iE64zJWGM+TAi\n51xr\r\n=NO6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/touch-target":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.a96b6d4d6.0_1592923197189_0.9256727835462688","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/checkbox","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec8b287f3be97faf27bc53db4542aa1816fd5b79","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.ef3a09533.0.tgz","fileCount":40,"integrity":"sha512-chJuHjbpU9GDezgh7Xc288lF8n6z/IfrnpdK3I48k9cOYAxdgGJCuxn038sPMNNcc3ltF6ldZI0/Oo6lXepkyQ==","signatures":[{"sig":"MEYCIQCvhdI7+8CrRzp2r3UlE/2e6u7vF3qpBKvpBxHk/tYtAwIhAKYwKOyAqhGFuYPjs2yJQqL2oK2hwpLfbxVAq7HXSdcj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYkCRA9TVsSAnZWagAANcMP/0qhC5JFxXDHVajgFv8q\nak4H1SLJZ1JTeLKf1vgzuxuvn83YU58QaQ06XbLrBXDc2C74EM/+7rfeIloZ\nL8xDPjLDmPGdbGQGxuf+24DDUw8BYgNEOXaHORCLaTEb98iNX8nZrhkw4i0S\nN7387FMR5egOItukuWNKFaa/NTVU1yAp+dvty7B/SdL5I0cghwA1+n7fj6CQ\nNYmJDD9N6Qgu+pUT6f9w+mMfJ9QVs6utG3jfggchMasvcoaF25LXYBEA1B50\nnWAvZgaQaCUwmSClCZNgoS92lV8TXdB8NBmzA0TH4nNziP6Ac9PsxVUv40mf\ndVRO6R5Us6JHrWlSXvKqccYMFDe14BdZnI5BzMoPQoEOU0qLwmkNVA2jqDzc\nWyuqefEThLjhIA3L+Jb66EEEXG4UvYeLjlTTVzoc6xXyEg4YyA/gHO2guzyK\nx/8MmHNqVlk3+mIyvgIxw8GL3RtYpZE6wlo1IUo3Hrmt6l05QtsimaNvs9GV\n5M9zHCn/qPC9PQRv8B5ERTY6f41CcWjwAi8UXk9bUsNs79zmpFLKEqKvmcxw\nUPp1mbmbVwn5Y4UyEUEva83+zsDzzcpPnQwUtJq0QqpJcqRdEUCBzqwvukOF\nSGGz498qMhVwPR8lw/jyhBuUo/cp7AEKts31vtgXNuPjereapf/AynHYwRS+\newTd\r\n=PV0A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/touch-target":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.ef3a09533.0_1592923683620_0.025862955907053564","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/checkbox","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.080965f39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb959035b15ce3cd11ae5dc65385f659d5ddb25a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.080965f39.0.tgz","fileCount":40,"integrity":"sha512-zoUErIO4Yz0HOuMOIhklSG9QX0UO6CzXgPWtLFfwwf2eOZ9fFfYKEa5rf5/hB0KKFezFGIsCgFfm7U9K8pOl7A==","signatures":[{"sig":"MEYCIQCoEFTtnLNWhE2Z6SXWxmyOS1d9KsQFjo37wRdRTfUY9QIhALu976OSNcg3ZiiWuUmMh0PabGM6mRdsuWvLh6kfQP9f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0MCRA9TVsSAnZWagAA5DUP/3h6viMfL+xxNDT/qtEx\nJD0S1xlyizDokrcEP6SfgDcSrI5fUZeJOA8JPKAefQrExwo1Q1DVn+7p7nj6\nFjBR3gdUfOUgECry34EnA9R+4iUE7uVeuBRJwv8GlL7I11LHTlq2Ohrl58XG\njVKVUQ5Jli+bZwruq/GUoKlPYRmt3ywp/ljru5dHYqaNiaL1HFSFZpuoasri\nD2W8JTchT0/s0SsW1MDm2y+aG4ZwK4ynHtH01QHcrz4VoAL6Yjc/ucoZVa2M\nQgS+x+J8ClE7XE2RVJmeWgDKCfTEP8VoD6ZgAIN0KUOkP2wPJUcXgW3nLFE5\nqUe8KMk2hgW+p4wHRyZRXpmPVV05t7eS+fgkQ0W5aT5/EioZ26OaqzNKbQm4\nMdcXhDBBXlbE23H/UPnfpMcrb5x8jYRfXe95qigE7x0LF0yWFinmUKkKzdis\nS7VAMtZRNDRT54qCY+Uv+xMNTl58sa1aPI+nzKf7Ji2HKgss3n3Onpr3NU70\nDcnRmQJfqkR+gUWsyW2x/0i8aLaiK3vCAyiOD2HqugBJ4HHEC1tWuzJYM7Ok\nRgOrFQZ5ZTLuG+qaCv8LK3XVEZk7XTgP4UtusaxI6fZBF0rlix38NHBNyvo2\n5K1TtzBMo8AOkxi/T9rtAhILejE1vgg4XpOSop5ekB5sTyZ2M/VOncq9BaAS\nWG5l\r\n=640Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/touch-target":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.080965f39.0_1592925451122_0.479138268907062","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/checkbox","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e359a2318139d1c5e7bad384c0990d2073b2461","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.1bd67b65d.0.tgz","fileCount":40,"integrity":"sha512-CprJoY92ctcxY8tbAIgam9anKiaWlPA8yKrk19TNSx3BLOQngxoWPK+aRlXpPX1+juM+bUgtpUvgRvXyzR4mIQ==","signatures":[{"sig":"MEQCIFGHN9DNNmp078tZxGbQUsIiiv/MjmyayhTkqHCMNe5fAiAQ117s7u1kn3o2CxgrYRggpefJGfjv1Nk6ft9P1idglQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ib5CRA9TVsSAnZWagAAdH0P/3TgMg66UjKmySE2EE+i\nIWspVb1NV/IIn4sQuVJao8t5oJBPU6ig4YVjsJPwgzieBvpUrsg1wG65xGDV\nH4IKap6hdZpaJXu56GxAztOPs/GY75T2jJACHzuCzQUpxJMkLzA55n25tWdz\n9nwB6UQOS6+qA8fGG5vh4RcCk2k2LB+1HJuesaxWAtd/mRNaVuDPwRRujAfP\npdeG/ZSQTt4L9c4YPZp3SxE2uDEwdCtkIP91dI9nkXiZxqksMv6kmWnQyB1G\naBhVWhV4jEL3lmNuDqGbN+4hCK5pzKKd9dSaQ7kgle+G3tgz1XYMZx2BYv/j\nyjHr6JQSJseDu2gcYYxoUIh8S4/MTc4ur+qoheBe0eZScld1dS0rWJ7gG/xG\nQ2cfdHW/DSH80s9hvwrEwv1LDjYiW/7vrU3o9HUo6sT+nQzEqJJOUKtgJYj3\nwz+CtsEkytDmmfLeHp4+8JEd4jxYjeNFHJVGhzPdq6/w3QtOXXn2aKp7jBjI\nYqdP/xe8+OGmhc9ac2OTpdEg45Tn5LCyqsx9A/4OTSaXSy6ZmUhh2Qf1V0vs\nrQdIL89EiYFPRNyFNELaBkVTmcJBJsROpe4EUYZnHYFyLAzz7F6lEejP9IgS\ng0f541dmR6n/F2p/n+FXmRbfrdmsFk/CLc6UTSbJkEcEMGqTPrmIqb7xi75h\nq1Hz\r\n=ajHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/touch-target":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.1bd67b65d.0_1592927993075_0.21699335349944615","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/checkbox","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.18ca31248.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"335fb0dc403d9db275a47a62d0b8ddf5596fe3bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.18ca31248.0.tgz","fileCount":40,"integrity":"sha512-kMOH8rrc38sPo46kgXusBA+jMLDG61Xj1E/2yeCgZbXR/g1IxtC6c2kBBNeshon2pKZG6iCzpW5nRJ2Xx1vJlQ==","signatures":[{"sig":"MEUCIEdM7yH6NGmuNJ2C/Rz4NqckMpjUZqnofdI+3lvhu+nrAiEAj7s5o9NMcVvZT57kuxy0DrTSInN+3JNsfQgaVohzi2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kj1CRA9TVsSAnZWagAAyfIP/RGuyOWLcl8Dmlrqul6D\nrm/SeNW8b4add+5fhzt59Gomgs9lXbDIxt8X0PoCtSjgK8pxnQvg4KPl8ANP\n8e9ZUr30fzQIu1wdcviXv+dHWh10CDCrPGThUk2PFL9O3T40adeYANXw0kqG\ngNUbNHqEdiC/LCuACHtN3Mge+VUae3fvnBEm8UFz7N9V0RTYmMx8jcloKRJj\n9x/vkvYkgAKvmyjK4iZqnmFNRS5/JXXhBxr6WZd+FU/ya9jD9zVdTdoO/u5g\ncUZOB4CCTzgYw91bmWUA1r3XemgFsa0VAEKLLDcctly+LLRZ7Ulfx+Gmoqlj\ndg2IBr/xSrz8f09I2sbJ3pIKf7xHNHWVTB3SY1In8aKyGmk+ida227PJNkAu\nQqu8RdFD/vjiXOHnMdtd5Ce9BdjJ4hTi2c13q++RdC+ZqMidp7fSUg/u6vJY\n9Aa3e0gZnrY5W0hdAuATTZJn4Yxx9w+x1wmoprwUUi9CLrqBXIbFbrV7ZmO4\nb6Fkgq/qgc6jXYZBmI7uGCTygTNL34F6WqERg8aNpZWN1cXdVm4Fi6rkpbnK\n4Zhj8PVl6tIU18MCjzD0WdmO97WDDpD2ivlNw3mtluLQqAMzihDTvAJVDnWU\n45NbWdjRqfvo3+miIOSdH5/7SRvzdWX22LRkUKu/RojtoIpv+MWRO3b5Wmq6\n6vA5\r\n=blda\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/touch-target":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.18ca31248.0_1592936693200_0.08085303345609884","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/checkbox","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.39cf00836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b53668da1e219d20bbeb2586edc14a7c23a776b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.39cf00836.0.tgz","fileCount":40,"integrity":"sha512-WXJgtxI1gEY6j3rI8mfHLgxSnxLsmMG3pTcoF5HNlPTHhjBMGl5BH/xbSr1spSwEb2VnlgBzCZlxAvMvzOT+Vw==","signatures":[{"sig":"MEQCIF86obPpVwNjoqa96Y59gRbD/uMPHkseqI2CLiyKMPDLAiBr4OEj+zzXekZWwPm3vSSSe1tNKjjefikxY2ofacRvKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5ZCRA9TVsSAnZWagAA8gUP/jUsfD9SBRpGxRMFhQ2k\nOFoeEFKpRrZo+x2g7MV4bFIYnXlX9IEGNwLPnU8YM7Jd+8pzvdREmotZ/lB6\nC6M6B2ckgpp9ICjdCFRiQsyVJqL8T0d48Wi71LN55L2ANbgpg69TOOrbFOTo\nhbgvnaTUh9Ia0zuVwv03yXoEbiJIm6SD8aJPvDuzVJdyIBcsn41n91J9kQHc\nwt9/4+MP68+RUaMm9CytqOxjFrUBSxGAwemuq6zuTO1NIsekSQiBiZLWY6aa\nF+ZLMJAGt4ikXGhMMG4+lsgsoQLUy7MpOp4cvypBfKSgF+bV+uQSSZArxH7Q\nNKyYDlIwkvz6q8uOB1yvGjzobF9z+re5BmqRgzyPXVd1vMvAtR2h8GJNiOTk\nTDorMdp2PQBppuYwX7KvjXUiC4gcP26GMkUg0enuUAEkHH0mcQN8kBjPWAgj\nkLiSbRaQZPnaMVMqTKhLjD3bWIJ9u8+j5iq9OUjdEm5OF7XKqPGcn3bZ9ofL\nYITjzJJsq5pe1kK7z8usVpMPfAOe38fZHbky5qsKoqWC+Exe//JxGN781d7N\nKsASTYhkID7LudCObCtWJhYFwwJETfggB/gkvl5QAfcmWJ7V3DVxMBaJT73T\n/2upmHC6EUL/E1gVmhRcmc7M8HSLVby/B/3yEPZ3esenJbcRS9hT24VNqfxE\nCUu1\r\n=fSfg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/touch-target":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.39cf00836.0_1592938072703_0.009891093338875168","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/checkbox","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32d17a855baa87a137e53dee5ebb439674b64107","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.1bfda9e05.0.tgz","fileCount":40,"integrity":"sha512-Q+/xPfT/1z7I4QQeKuVf4zyqR9QXUZDv3V8NSIiZSvhwQwEpwDr3x4SzjlM3GUB+GmrglYgSwWT/i77mrcxobQ==","signatures":[{"sig":"MEQCIBZYdEqj4OL7ZIjmtDlFAhMtgElIxDWrxU6thNI07UWrAiBC3TjIdUck0w5M4UOWK8lebZdWfObVeGKWX52OVC2B8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFECRA9TVsSAnZWagAAFiMQAJ363IuYod1QyaYb23Wj\nZLyaR+SgXhf1ouXcdV+C3BpoBlnRpGHvrmIvSR4P//tBoyu193iBVRzbaG4i\naQ/RUaAB/6O/PZXjvPYfx9x1nC1KQb/FDPHQ+w6BLWaQeSbLdA5BTZy6INx+\nflcr59K2dPdilxQx8mnXXX8uoK6GRvQeLy1lwaaSobSnOISkQNIUpcKhklpF\nb+LnBI56YL89SX7oU6YCCsJH3YOCc0Y/UHIwsNFH3Ao2O3nmi3HKlMJiej9P\nm9rF8hSsTWqzCX05P59LzxBZ39qvav9nZzCTwXJamRwpuJKcjoJaTo0gsQcM\nebYOSEuLO20xtc1KUUZI4vaORyOdEf/+vIGrMtHdS8N5gIHYiw3yxilQkRWf\naokyNcap+cPGdBRFgmVSDENvPpEQgRTXGVr8H6wqp4JMq9nY1cNnnQk8+MdX\nWdJiJb9kH8AE54CtY+wLOnRVQXHTz2OS9jxWfOdbsb/T/907RZW2RXM6TKn0\nUKJLq7JGOKRWRw0vCPD+pUznBRNoGunoV7mPhiLqeVehUr4X1DcW3lJ2wkkL\nUmiVATwK057v0W9gK9mqXs8D3id2Ed/HZYRASs2YAKU3G8phmIzWq+GggMzS\nSpvwz5/3CEIR3yV5t03/moDBXGpxztbmsnLQP/Nnbfqdpu/PP2+/F41+RXvj\n2vWu\r\n=q6Pm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/touch-target":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.1bfda9e05.0_1592938820423_0.8307594944476246","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/checkbox","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0-canary.08731bd95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02e7c867e1e9123c87cb8ee4d8f4fa8926bed694","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0-canary.08731bd95.0.tgz","fileCount":40,"integrity":"sha512-T/Bg8IX6oIhkJhzE3JasDfdGcvZuRjiqc4XCBBs3Vo4lO7U+AQNcnPZqG41qFxn5Rv920zbYa7fd93n8/kUFQg==","signatures":[{"sig":"MEQCID+gv6jh28ecd64Qwt1soV0fxDBs4Pb05bbzmxOIlozWAiAwCv4ap8vAy/A/x0af7qr9xqpzUv7YREscUmLF4aqHGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHhCRA9TVsSAnZWagAA1sIQAJvlPo/nUtUjoFdCHG1X\njYVQOwLMMEOTRwBdz1sZaFhxOgaUMbHUE00aKXKBcvfI6Iy2f1+EQT7EZSIA\nTIDjuiAwKn+jqCzmqqIfKwwnqcpnzZJBZwQ5EZahB3q3V8sLQHOiE5dCiyX4\nP/8Zf9n/wjoB5cy8sdtCVMiBwPiuE4AqnkC/iWe0nW78SkLewrBJr4hflQVs\nMKzUsCv92rqspF/hVR7GNKGXEsz0e9y2ufaGkny5DeuujclC4sRhGm7ylKK/\nRqUKfzdDzeZ/zEOEMZ6CW7cLL4zfUUVUVa2e0Ma/LBtoeOxZd/hdjQNhINOj\nOpI7y0EN7ACeObiJdB6X4vwo3fyScIcbp9guPHLiKhLVsi4eTAu+QGY4J1sY\nelxMauN4aVaA2HDSF2sWlSRXLDu03BpdtReyK1MJn6AjzrSa6GrLoB9GrkIB\nQJAM1aGO0uQAwIKX9kb1n2tQrM0X8MhA8eoU9GJ5RAdo+2zKBMuyUC2WrhUo\n1BYJ9ZiMo6sm0esx4jUSfZ1HYaGB8l8O19UoPAUm015Uc82bVUqNKUCMVIE/\nsxt9TE+EHxAZUxQ1Yvx2QbqHhrsdE6LP0KVphqK2PiaWdZ+Mr4jltUUVT3hg\n42LjUJgoij7FsUfdZ0/kINWEXy06WLp4Pm9ztjCwx8Ey/bd6fBpEUGiOJ34C\nJ7rW\r\n=7IS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/touch-target":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0-canary.08731bd95.0_1592938977273_0.6316124829190866","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/checkbox","version":"7.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@7.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8941fe7f31570b7a055b72fda73c3ba4bc829f19","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-7.0.0.tgz","fileCount":39,"integrity":"sha512-GMQzABt8vLZNzq44qHSPKmUurZ2R1sKPX8gtwbwcGBoE7MJXIYkMj3+IYv38Mki9B3BlJPDVqBn5jU20mPCmBQ==","signatures":[{"sig":"MEYCIQCkkjjlX4hI+rPGGu8LlpKImxDGvtkm+fAmd9QXbF4beQIhAKJnf2X7Pd/lP/ErfxgUEOHuwBUk9zzuHoy5Lr/h9M2W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lOuCRA9TVsSAnZWagAAKXgP/iGcxXrOlWDNe3mtu/1S\n6Ud/MPLllTGIwgUuOulXsrd7fWa9Tcuxjdnke28lYoj83RN9LDZU4V416dN6\nmkjEuzQdlJ4jO1wkC/yPCGPxHUOlCApye4NgKMs2A4fCMAGMe1BZfP+XDF0E\nUFO86wecxSq46lqe8BZ+nUx8JacbPG6hHrFOgMZQL65/FiTtAA4g4y1Eebyj\n1AuaQWltHULcmvwqs7AtuiibWLJIdzB6wwEhzuCZrXmzGdjCYgdEBCGeXcjI\ngjifnGfD9XTTI0W4bzRG/2MVWHPoi/aFqTTcpZ2iLYMNik6kPEI7OHuli/kh\nKx8Hm7LlpENf7FbNktx82WrBfBALYrSxKg5bUOYktcyDzBdSV/5AMxhzjFOF\nVBy7lsUaFpoDtoaS08weTw0EP3Im5udojwGiEha+6wbmEx+V5agGgaxSjiX0\nULp+W0YbtpJCGKP5bos6Bki0WsRIqeC2hYpF3xsL1z8vOql/vSBtTF4owwSx\nGajlDWgtC80o+i1OcwefquXNSygLbumBLESwMf1fzcz8Aw1eXalXBrFfKgnV\nqANp663/+hNsi+G6zxTAaksqJ8wRv4DDRNDqx7DiFYp95JCRh89iWd9ep+N3\nd2I8fj3blnHZuVJmp8jqNYjkJGum+T0JvxMo5DnPqIaZzQOHeexkgR4rrAWY\nIzja\r\n=48uF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/density":"^7.0.0","@material/animation":"^7.0.0","@material/touch-target":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_7.0.0_1592939437850_0.14201736570429113","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/checkbox","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a3212b209.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bab79f1ee71014745c52172728108c19c725aba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a3212b209.0.tgz","fileCount":40,"integrity":"sha512-ow0b5gbM/MDCrO8cZh9KyzWjY476JjCTAQD9ysER0QNIvNSuYr4vJt3ocVbMUqbB5dmpQXHpYivYehDHDh+88w==","signatures":[{"sig":"MEYCIQDuc0dOVqFg6q322J9KKsk0nQiMr/f61c3lkWDJGExvfgIhAIq7Sypmz/9omLbahsoMcCkzBToH8tCpj+LwJvz8mSie","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPlCRA9TVsSAnZWagAA/CkP/27kFE46HsAC+kVXoJOB\nIQld1gRAwa0xWST0W4Aog9qnYJ8bgyCrJfOIEBZuRzyqT3XQBDjg3iEd4mIu\ng9vYw9+OEVEcNHDZo7LC8iP5fbjC1cFsE439XqqgN4KEWXokmwIF9H3tKLvL\n1zeXNqj7YXedUtknIwCgb4wO0i826fA5llRTp3spHOu78T4pA9nKOuqqnJU4\npZAohZa58qRNdvmC9CvNUhbFAJlqsP3fczYQ1t1965uYp0iZi7sRnfQHegUh\noDcFdEwb+i1iHbEMQbgt0Q3/LmVbZbuZBuskZQKtOMrBLMEuBbpq2S5SGj5S\nXhUnh/nV8KcHAvJuNPF1BKNBx/3i3kx/KG0/Gsw3qlnoetwf698UgR17hJnt\nQ34EFjTIhzTRRYfDti2o0ksDUfYJwvicZaXlckwfu/YrtLw1duGj717/HGDp\nHPFFlJmHraqT5B5S+4l+wYPAIDMg8acEfza05zq1aHfUc+dT4+fNkLqMgpeE\nOiewOH8jU8M4GEvhatLfytsdenWabfSP+OQBvM4EUj9mjAtfT3TMc/mZAqyE\nehLZfUr0KMdMVPb2XZ9fFKE3zt0SAgCam/AeslVHmPUtydtmkBhKQYPj8g1L\nRxXcDpMKWJh3f3kHChxbbbwDuncnMHAMzB5uVZtTa8uX1WL3iLXr9eX143/w\nPJJ2\r\n=XRuT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/touch-target":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a3212b209.0_1592939493448_0.3081204749998172","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/checkbox","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d628669bd8dc5d3d92d42af6b08a5c37498e5176","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.15e81fe98.0.tgz","fileCount":40,"integrity":"sha512-KY2IsF/r85KsNSBgjgXUS3/yBEGA3J1jU7fZLUhdttC0uuzyMGPtI4ZboCfK5Zfs1KeRZeYzE4Z3572KbwTONQ==","signatures":[{"sig":"MEUCIQCtg5Gib/wWqHve/vnZtBvbbVWH7azuNQCaP3+XkejtqQIgSZz7yy80eqX62eYiG2BP2PDhj5b/O2O4uiST6aYB6cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrLCRA9TVsSAnZWagAAb5QP/RLp22YBx3LYP1B13RTu\nCPLxc/8g7E/FixFhZUoUm0h8Ymy1BBqqBVZTEna3QFAsqDJIMm9ki2pDGX+J\n658gJoE+dteT1CKWNfpXIqXn9iWjvQ1eFOgOnngXFkDdXAF06nWygB35qoBw\niQCH24AUv/wUgiFUA8WCJf5gtQ3QJDXHYhW8j5MxKey9ThKQvZtOUKkk03Gz\nsObA+0qstgJAhYd7ehlV0Ve5SU302Qu6ROrUTlszhL12zQif4PHH4+XhI+yZ\nxxyXLegc22hraeQIGzwBlPZBokgdGVi6thFjODHI6ReBCt6jtYkPlRLPNChI\nFX8uPtzBnoyMHy+Vk1u+2yPcFdL9NmVKWfeXaIWUFzbkwAx7bztjlMSk6uwZ\ngkj9vYxVohFDDszJQt8ujKTq/Xejw1BIQxW5fNCBkGznGcbVLMHtdhoX3enV\n/NS1tTtFHPzOfPWfsuG1zGCxXXhD2kOxNvjnBEhZGDrCfwMsI2UfaCJVTTW2\nMSCx35Gys53AFyJbFS+fJ41DDnphp7I1dc6BRFZNnT82iPDzW6v7LpB3cFk1\nuEudOTpT2cGe5ECARBUl62sC56iDAKb7L3KiwzUSVQUwi47RgHVS/geYWY9Z\n8Lr82f2UM4EhVogbNL4APFVEE3Z6TgCUWYseZLYeaQ2d9Am1tYakrMkDnywk\nlvJ6\r\n=lTSX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/touch-target":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.15e81fe98.0_1592941259509_0.6258416167817753","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/checkbox","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.004c9d392.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"960626c839b8c1ebe57072f921fbd553ebfae07b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.004c9d392.0.tgz","fileCount":40,"integrity":"sha512-sGvR9X0yAozSBrMvWA926xOAMDfroQzyTyK86VNazIhFtud7lBJJT7u2+LVznHBwjd5C4Bl6L9fORq9LfTVUTg==","signatures":[{"sig":"MEUCIQDsuOhze1cTOy28/oj2ioAcks/0t60t2iUfLdovGYR6UgIgRlDRgGkKtZBfikgKjWYaTqun1UgEJ1P9uCnqfyn0WVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oh4CRA9TVsSAnZWagAAkscP/jZh0ipOVNZUKHPQvDPI\neys2kGBQDAOEIlFl+jvbiGNVvjR8PLsQs2RRCzXcbY8YHrD7Xyyh3W8gLMAG\nzQxfUmo7hxjenzYz7n9WrnwPoUTUGDXNxHUNawHL2VkP1bwcsIjd3FCL8Htn\n0GIz1edBmP5f5WT5Rier6QOEsbogUNWBQcNIePzUD0yfSjKNHQo0JdrQHAGX\nY4GEgp1tSK7Wx9D81r9Gj0zOijhTw3f/5fm5H0nRkOlFYCIRT2/lbd7Jt/Ax\nnRVYkCS0FntGk5ZlHO7wOKffsjnGNzLNOtfDr0mzXAitpP5QeeYHGOk/LZ8C\nXtn5MiTS/ZGOqCUZ844vvnaBh7cjuT4v4fefYjFyG7MCkdLbX/Q3blrFfUNy\n8IalfDxLU66fdHVTC6w1y+xXR5jUf+9oXqG84ywMJa6l2FwZ1XNePPusD+JG\nG9mQHDIkz1XpfBOocKo/S0llvmKWPqow+gnsGOeW57zPO3dMNTqxyRjAf75F\nxIrsXdSzQpACkSjQ4n9lfKkOLcGmAd6b53Sy7x16SJZSbrCPB0070B7Fk3Nz\nNzpNA0UOY74ZT2uOPAZhkPod1D0qvzPV0R0dcwIsyRQyjUHoCTQZ+eaIvc+a\nQKlqD/ml7U3i/9im4Hd/Z2C+qfyXGqVwBL5ZZMP7u6ap2Yxc6YJ0mIPbHDB2\n7zJp\r\n=Cl2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/touch-target":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.004c9d392.0_1592952952399_0.26009883240376364","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/checkbox","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fad1edf9d6f0a485f711460e31f5ef829ec3a09a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.03bde00f5.0.tgz","fileCount":40,"integrity":"sha512-txqnewv4hvqJygUKyUMd1aZSBxqUyomL6e8/6P+xGuoL+85xv87AbzegIFehFl3Ch7Um8ROYyz3QCbJhtaqAkg==","signatures":[{"sig":"MEQCIExOgV7T+7nCtKF7yvZxdiA+/aypzBVFLzURcdH7ihSZAiAm/zbI1oo8VvX9lUpD8nPmRk2nCDx/QtSZcZQoAMEL+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7nCRA9TVsSAnZWagAAe54QAJ3fvWVgqY4uW+zLJOID\n0mCIRPEXmxgAcvScTQvux1MiodqDDwKcRJ7whrNdrEM9y6auV3wDH3v43tpj\naZqfxIFBEysHK9xRq9WXr+OmvsNUX/uEFCCRO/F/dRM6viSi84hQ6XV7UUby\n3/G8a0EnCWwHmB8xh4e3Nc0QJRopgNqu4v/G9IMxUD62ohaQxVO7yGFy8DGx\n4EHfIRcr8SyC7flZgN3ylgXJrDa4fXh97tauyjDgIm4ihDhZfyPx26k25r8B\n6kP0LoSfAqpWV03qjYe4TS+pO9xscbl1OPkkZ4x2Bsp+ZEakWww4nLH5BHbC\n7oIliYPmkc94CoQbhbgeg4qVKdfiymkMg4QDsUCSM1GvIV4bJ2rfPuuYGwrU\nDgCyRCRNcZ89J0fFaFUxHIenqZ46FdoCicNk3XDlqSMTNerMzqCdTsXvI3iP\nDFPzzW2v6hdHmeQeFCXtZrkqzBTfxU21epkxv8fNy/IvrUxXDT2tNRk8XdeT\nXio+wCt7AOBI6ii+QNHm/PKQWvJfgNQc8RwYTYEAlHzFdRpqwpAlWfsaCGnb\nviVR5Lg07OewuMbZCHQgZI+bFSaDHSEzWSvCkJpOR3YR/YxdQhQiJJfFcW2k\nGyTffShMPiXGPGfITneyVwAuq0RuQBtQg1gHoGAjUpUrfm2U93jFV+uJ37lO\nDlqp\r\n=OrHL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/touch-target":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.03bde00f5.0_1592958694981_0.6933335614912706","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/checkbox","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.599b8c319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"895465c3eb13047fe9c61b2353c0b83fa2b04206","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.599b8c319.0.tgz","fileCount":40,"integrity":"sha512-2B7Tb97c4JLqxb+Y3QefRQnx12eIqy0ZYsX/LkBfVs0RG3klGFzsCHNZF9mk/eLJHQzsq9gL90VvWGFIxB3RbQ==","signatures":[{"sig":"MEQCIC4nrn+jCRcrjlLyQ926JI9mD2je2Rv7mXE5sqC6pUpbAiAnjtSDF7I7d+KVEiBVTLXHKdrUhAVFM5BRO4h7GbzJ0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mdCRA9TVsSAnZWagAAbNIP/2Fh1gmat9ssBVXTUTw8\nfIg3L0Qjp+2PvxpeVcI4Ok087A1f1799VdLzWpGE/cq0enX+3ebFHMIB1T/p\nFqN2U15wNHot+Kx6ZEVjaU6uNUHbOaXa6qwVCuN3gNVAqAhcmwpRmsjT7Zt/\nckC0auEd4464fJiJZPjhSjRGed4nInF9aComOrW2oaFHNIPAJjtSce8WeslV\nsz59peC6oy2pnkwzSJffaJBpCLg5uXJHe5Pw+Ycbh/atby953e3oJNXdDP/3\nb4a6o86vnS1k9zSoQbDunLcgoSBsu1MxjfEndUF3HkWNBWFv1C+j01J21wXS\nnmOht/1QfqIkV11NUDWzCTqFnxsM8JkwJkTL5LjAj2uh8FVLDZ8SNXKyOSB5\nPOlSPCYR8ehd2UyYYyKeKtYf1lZV9YsWFPfnvgeRZ9kB54lVo13D7IbbjShl\nAm0Dz73L3UfJfiflueBx1KXtN9sPVTYsFYyIT/sgxIRrK3QGqo0pfbayDCpg\nVoknyNUf3J8UnU9VO2bx6/YJwwxwyUUguQKtA65D4Pq/xakdSaNHAMtSawDU\nzFntpW8Ah0rJT2RJuzxqqbYKjFoKkJE0HKOGLnbOsx32M6tMj8mqCaYv9z+C\n2ub9v+pM7yNNYjLQ8SYrLV8YvuNhv9Yiw51cMGUAaYs5IE71ZGPkewhO8C9p\nkhUd\r\n=q5Rm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/touch-target":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.599b8c319.0_1593010589230_0.48797509704750897","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/checkbox","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.87e3be418.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9c79581709335f5ee0f55fd26f5c00afce095c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.87e3be418.0.tgz","fileCount":40,"integrity":"sha512-Lzj7mde7S5FMOKtOkuDv9HL6rRcJe78GWVM33FucgdZcQ1CECUgkWiTHI0y/S84KnWbmTjO63R3eLCS6EXy0Fg==","signatures":[{"sig":"MEUCIB2uETBrCsaiXaniJLh7WI2j/d5po/g3Quwv56XIN0AOAiEAgATVGmH2SdBxnhIGQ1d5GA7Q14vRaKjpPZareXwqlMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MGCRA9TVsSAnZWagAAc8wP/i9TH4plcMW8nSVzVvXx\n79grHq4kdocdkR3GSI6swZHdBPo+BUunbo2CcyzLFzTT/KOwMR2Z2h9/s5La\n8QsS28b0CjK9PWXC7q7kq1X7ij4oulPltGHeKXgsCWajErKnA9OIAY8IIXPT\n0SLlvrx2i4sHqlioVGx56myYAqzww4y6THGDrUwkHJ98pNwKbnStjZNOB1ox\nualP3Nk6dsNepm+MoEwQLC8+t7aRFc+kJZjkH/XSiUGTZY3ufMEgabJQU/pB\ngNz+B9of3X3Eysf6v/n+P0Z13TNGjo9fPa0c2Oib454+c2veCGmi1u8rp8QP\njqzZwhaRh4g4qi6hzqYDwzE8DYGhL+Veo8qXtzYuV33tSwLbQv6A/UO8qZd7\nR92coUpOFlYtVs0T4t0MZ1yj2EXx1NKmfJT3xPALGvMtW0JK8wWljsTqaCse\nUv4+lanS15BBnPvNqcQF2a8Es/ze1oVB319Gth0AwPRgSpWr3POf8CrOaq3a\npzarw57YNoJ5740i00oGipQxWbVXPYQlMO7YhbLy16OiePkPgol9s4UaRNvh\nqFLits44wci5CEXyF/o8aDsXfjvWxllTVENITE/Zws/6NFtPOAwni1LEamAW\nc/nf3vV/W5DSO9TNJgLLWnEE2Bj5hfxP1z8UMMmmrmdsxy509U+ew9pvYaXj\nJdGB\r\n=QdjT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/touch-target":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.87e3be418.0_1593021190071_0.639185632097381","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/checkbox","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56e8dfca697e0bb2c86c49730d3ae0b54e19b110","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.035cf2a6f.0.tgz","fileCount":40,"integrity":"sha512-49Veh1Kiy1QfqyALu6BbfWPwtUurzOV81LNN3Dig3MPQTwglO2dFEwk9xVJP+4iVU/HKnJ8VRVsbWEZBd58nVg==","signatures":[{"sig":"MEQCIFWDYaO34qPrOJlztWG9iovZ3bPFttT+sW/elM4nCTtkAiAmP/dORi9r0FPrhfIFUaUvZ+S8UEVMWXPdkV2299o7ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852tCRA9TVsSAnZWagAAULcP/jaAJWX4av91hSNCYMT+\n7WkBp5bETjhxFcWyvq7zpQfCH7qBOuxp0ZR4wt9MhQH0DnXsmiRpn7+aEs1c\nt9YgyuvqgjiKuxLl/aRb0SLn+jzzZ4tUc9nEQ45z/ZzBTyo7KkNXz9A9pJY9\nSE4+R7pzu846qglLCMGcRoS/lvgOX/AIPF+L6xK+Q7NZZKrX6eBpeiM2p13X\n9aAJG2cYpOLrBdU58vnA/cazHK4L2VOEJCOEynO8w4SS7ZZSkWDuSO2n05RI\n8fioMCJ4LlU6LiE9lLAVhsHUFyZSV3z/marJaAJEVDEvwBXzJIR+PtRF6i2U\nPyO91FvcuFHshmAIetHR09QOeYL20cUr7No/5fO3YFqQgG5rbKxEVT2YHT6R\nMxyK8fXoAMUc3YmPp0YXP/q23IO5JGA/ZsVCXREAKn+299lcyOJS1PJLTL29\nZ27kfTz6/tlgpSlV70+Al28jmS0UEmH6snej5V7EaytlRvsUU/tCU8W0aBzL\nNpJuPc8y7PtPSX2TQechuYm1zJDGjUp3x/QjboXDto4sgezmfoqwvkM9VEAe\nKlgo8VClrz5EMRncEdg9edcY/hbbbtYZ8dO+FMLtWDXAqB/6zD+31S3LSZ7f\nEd8uL/7T/mAKs+HQ551YH6b/9yRrAkXZzF+cKmNyvF79oMN5yZ73EGBoCQtO\nF6pC\r\n=mSUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/touch-target":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.035cf2a6f.0_1593023916456_0.35891690071618343","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/checkbox","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff6619dbcdf731b50ce2f0aed8db3e58805df6de","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2fed2c12f.0.tgz","fileCount":40,"integrity":"sha512-+uicbR38Z4twgV6l2HInA4db4nStZlalZHPXlCUSVUbnJkBt6OJbb+jJHyyXVaN/PqjgMvHlkpFNBJ5TMXUVAA==","signatures":[{"sig":"MEUCIEcemhxfdKaBEyNV60LgHBWGjRC1rtD9mGbvfq1YmgUVAiEAhmxjUZXnKur8/DtPtaQ6pDEC5Fi0jaHyR6KO6HatNgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKnCRA9TVsSAnZWagAAa9kP+QC+YknfljpQMJDkEN8m\nJRwSrbSSVcxiQsJdnbCMpd44O4+M5qD/WoWs+rbpCM20NWHvys93y2MxMT4O\nEqbhe2btX6Vq4s3COjsuE3tpAumHLmTbRh8D12PcibgNplTV0oaBbZyrGIgO\n519KOh1hzzdy4rs64nNIqEJ8ilTEuMgvkIEFAn4uR2+MLmsp+XE5oKvFVRnH\nwsQpkZ9MCQrNLyDBzlCCNu77ZcP7n9rFdAR12AoZnPZ0M40wTHxTDTZjRBBS\nGFEkpE6Rb0VrVzqIbVf36wgDJyvNdNkmeuFdAmuALbFypwoBZgycTEmwai8k\nPZhgcCnQ64zYeuSmRcypvBKG+J9ebi947cm19yPPPZohFV+a9lLiMiSgRrUO\niRX1xUQUevEhA0IYGlEaMisK2ECc8J8qHlEfXinDzbzIpOeVDiFNcBQMueH2\n/YfpAPQEq6Jqi6ZmDq45E1NGlOx/MFC+spPSOiHn1/nCIwdG4qHgWo8b7a+r\nNs8h4DfYbXoIA6NhIj5E7PbwfsgfYkpb92R6PREkrRO8P/2qB1lQ8Cb3P0Nu\ngGt73eXswh08/PglxXmerKe1aQ46NO30zG5IiOYqNuKESNaL7hl0ulshHNwy\nLO7w9Kuq91Is8Zl7pKZ9zoo6+UITInoD4JthaFhRdNjxhz4NumTnYlvSNaGN\n1vqA\r\n=k8oo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/touch-target":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2fed2c12f.0_1593115302954_0.8201966960827611","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/checkbox","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.38197b443.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08d5244f1dc782d19942c80df5e262ef3817194a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.38197b443.0.tgz","fileCount":40,"integrity":"sha512-LZIp2Z6/oW1G2McDpNmlMv1xBPtxPdC2RpalWInDNmhLrRB2OAsqIMZc8UqY1wQxKZ8xfDlU+Wl01AIt2CmERw==","signatures":[{"sig":"MEQCIFyRt0Bx41SrEk+Y06B9ghqWutu+qUOtPArZCzf5NQHMAiBIFqxcwKfQSIuVY/DgJu54Djhlxb4V+XFS1uArmELeBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWSCRA9TVsSAnZWagAAKxEQAItnGzaUlcUoUsXafW8y\nKXR+AOCFWEpK08EliIVigAhinnabSqNF/ZsYaNcZ+PqFIFV6h3Ns2JeNfiQQ\n5hav3fcpBPaRHgiTby4Ut7ECMFsVRJrs+R4DbtpVYO42dAijH1zqQahQO/UQ\n3ItksN8Do8TlyIzX/Sn0xzezCEJMYk1/UZDlHdnOwYwOqk2cccDByZmnyR/h\nlyUXvN3dX1XRK3eF1zhGjl1momktW79C8s/1EoESDJqcl4whjYu78JloNU1p\n1XzoYfSTuwgxBE/0x81KpGfrOU79so11Q9ri0EkEtWgF/DTuvpTq9baKT6M9\nHkKgDxpr/VJKe6/n7w5QTrGLXhJQf/iG+IgQC5ZfVS/Nx5SjyI4Y5Cj13Z4B\nO8E5fXsPdktlKadyZIPGWc/ly1nREiEzuJn33BJf7svzUmHWwc8kzpUKXvsg\nrAGwC+Hmedic8VlJTgd/gnVmXa2jyn4dlU6MrXF98/sr2iqsxg2CZZuG98Je\n1WjsQ2ERyGguqlwVO7QnelvioMakQKx2oq4bwYzlwzHqy3xdwfMsbqUr1B1f\nZWaNl/wO8jYccTSs12RY4iZefdlUphxIynGLroGPlYIJYM0WGMRLJy9l1pmf\nv4J38iR3gnV2JScJkAh09FedF0a+ip5E128zn7DXvf8LKSPgg23zcmKnl5W1\nb4Ao\r\n=SFmU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/touch-target":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.38197b443.0_1593120145687_0.6155500621225505","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/checkbox","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b15fd6887ff851565ff7b1d9b9398648ebb680","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.69a35e80c.0.tgz","fileCount":40,"integrity":"sha512-Wvo+1yrxJzrMr8DrUwOwhy4TV9qtIoykpwG7hk/noIYWBjutgiyX1alygXATHEKmzlgSBiMWlKWwP6xI/yootA==","signatures":[{"sig":"MEUCIChRsDOFzxrkAXQYOGtgNF57umlH+didpBWBxvh9ZvuAAiEA1+SjcBHTqnGmxMuUuwshjtG5cs2dKkNQskSJp+HlqAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKiCRA9TVsSAnZWagAAdtYP/3fZPE16JAi7Ze8c5Zn/\nvGncRRARogrXxsSvIx0h0x4KHxl/zThWjf4OQSfyVN9+mbzfaeLg/UNVDW9z\nrlnCBFPruwGTDRRzfiEWIQfJoE2yHBJmas6s/z9cRmJmIumxWLLkg/Cukaf2\n5Ne0OMU9Aayfa+cktunjcARIKJNt/ibeTfiie/4M1Vrc26U8s0eu7UlOHPvw\nE/2O3tlqqb38WyjM4GKN/kF1mWl5UZHXrmlWA9VxmYA3g27YbAtCGGFLTUnX\nDijuIddB96hIZFYySDeLOcge/JAd/PSyiVRznPjzELuyxYuA38WyyRmwebNa\nZudnJDcxKef5/Ub4+G+NTtfSuxp+/cX8UWSRmZkmnFcFmvy0GNxOd5wZWHGS\njBvJx8b++CprG3YtdCa0ZopGetHl8jJ0RAd4fBBdoxI4R8tg7qaPPSH7hTo9\nAegyqrNUkf5AtfrQ+Egf83koepHQYWy0rP+P1fpcjEidOmb7hu6TUteki8Vf\nds86ngstSiScXYOYVnBOi2mb4OOK/qHetED0dWV2I0KbzdLL4tmgXe/jHGzK\nQGZRVMB4GIQTJAGYaMYwoZW4o/ZcKUmbap0GuLxw3XM3GsnXLS69gcsJgErB\nHl9wZ10U/ZHl+HUrzX4u1qQGfK7QaUPHPaV0axUrguYNuBDpknSrZmkSTtSL\nhbKS\r\n=tg/D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/touch-target":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.69a35e80c.0_1593193121728_0.4641434512697378","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/checkbox","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b38037739151713cc6b12894a5c94484f29b8265","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.df7154fb3.0.tgz","fileCount":40,"integrity":"sha512-agMGH1TyjA6LLAlCVaDOnklZoHYoxQN0/BTTge08qYdfsCo5VYj8aWrEziUOFb+5VUOmjSYRERHOr/xwrj6C8Q==","signatures":[{"sig":"MEQCIEPzzDpD8vKcR9OvG5FYVLBVlPGw8gPpgyLuNbO8SbaZAiA4KRKU/T1bPwkt7U080n4QNokX7beVWgzwT5vsJkAWCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juICRA9TVsSAnZWagAAPpcP/jya7qVmXZK3KLDIaQ3f\n1fU9rTqUkUbznAuLyUuw9lDO7N+D2uDKO1MJNlEeQLNvqbh/PBtT/sS5zcNU\nnKe4qgtm9oRLU+x6969vig+sLbN4cg5ky6GKzQGxlitTlng7SNQ7DkpLhTKm\n7YCLS9dH4cTDeGcW3FD1a+qgF0POmJdsukZsnJzubyE/JJoFQPgKuxbdLy9t\n2cnou/dRziBA2/NYiEvNImcWhgT+wMkwEcWNPNnIIiiN33PgFVbLYtb5rDg9\no11fPJBvc3u+6fNYIXECOjJPYXEscOxHF9c43pc3eIUpwgJ8CWlr0B9PDfUz\n8X6cFJVBxR/Q70H9M4inS1XK+4PJlrQQZ9klhfVCHuANK/aM946X148GKfUu\n7fOfj9kf1Vd2dYIq6dE0fZUk9zBX+uGSTd8Ful/RCzf3a8cxEq8dqgW8NcfE\n8MeUL6zW9FvmJblJQQVqL20PUeuJaIsleSqGwi+PQKpiDG7MuouO+AsGy9xH\nnzr4IZBNoxuMRFb7cJwgNoEcQOOwmEoeoBziCSNdhWzULj5fBGdgQHEJcTu4\nfk4lGawTh0+64vmvJoTp7LUpd1NxdEOoYc9psg8SRSTy0Ta8oOlB2d8/nNzH\nbEM9wE7+NAnYgAOdiyLSJtePoYg+y/AdTkkAVSa4fghsfNABmLfZ+S4yDcE9\nUjD8\r\n=ZCYG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/touch-target":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.df7154fb3.0_1593195399719_0.362826627040876","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/checkbox","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d5618602a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b92612a8d73c2633ca26ca363eab5348f6c89a3f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d5618602a.0.tgz","fileCount":40,"integrity":"sha512-OIJ5CR6btIb/kG1c9BXbDuYBK/yfZ9mIpcFGiIRJ4kwKDTJT90gOaXsSp35Hq/AJ9umaAebFkLsicUcKyutd8Q==","signatures":[{"sig":"MEYCIQDdVz8SuckGksEUrV1Y/FA1XnvzsYci0D8uJGd/PF9C7gIhALKl0YCBBFJIxzMmmnQxBDG3WwKxupXaYlWyBVCTekx3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0bCRA9TVsSAnZWagAApCYQAJpovMlEUe62mHFjdcng\ne2Zk6ChOnFQ2P7s54pf/SGmNWRNAViATWujRz/8eOsmhsy8rRLUIle3yKgk7\nVggngASolDhvJpQiWktVTbqtkkTSviI4s5u2vgi6AhkDrSJcQ3jnWHyPLWWs\nwfH3t9a/k9BHVQ93lpae+4aEP5GvfY/9HRNi00iL8yiYTtV+mvac2zaz7MM+\n12DHtxEB7RmnVIK1kPkJUNJI0/2G9eZddapHq0K3aLbYbS6DeBMh6wAyspV/\n76HKYK5SYw4zn/XWZ6p2R9cL154WM14jm8sskuSx8bjeITFmOqslUi/Yy/LX\n5OtqevDB0BxxxHNtD/h8BYyxP3jGARf5DqN1I3uROYlhLx67leJ9RWjJlUI3\nq1vkybwltFeFVIQCpNEuEQ/TNHwFv3OV35Sn0kbNoThksa6KnU8xC/f8lFQj\nz1h6ZuSnI4dZM7fcKuCtbgAEfC7X0P6gKovWr0qXMvMFy+5lAv5WXVl9sbvX\n/zKKm5SlHQCRrkl8FYbf2zl4H8ZlAOGl8gTFV/XtV6h+84wzbjDAFgUrduIy\nPaHIAYX2pxJ4cQYQSMFMY/IqsD4SZ0YgW3i9FzrCBaEx/C5aHklwY2nuQpnh\nD1iCCZ7D1uj2QJx6RSjMIStBPcZo3gEK5eE4tgoeq0q8sT76C2rRI8CNYqnZ\n6aru\r\n=yu+g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/touch-target":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d5618602a.0_1593208091330_0.8378725483905274","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/checkbox","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e590b376b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8537f87e53bb2751510f88cf9ca9132f6d0f75cc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e590b376b.0.tgz","fileCount":40,"integrity":"sha512-WkWeU9pWj+R+UE68wG0GKFHYndlLe12XY8ot3tihlHHA9JHJ7SE2Ho0tlv8GWI4pUmck6oTGLtLpHy3efy2MCA==","signatures":[{"sig":"MEUCIFVU53gbFE4lH8HCHL9iGuC2hK/al+jgvRA8BzdxjDDNAiEA+8+AXime01AWYZ/kYSlkBhTcSU95UnjFtB+aivBnr+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNyCRA9TVsSAnZWagAA51cP/i+FSFdWQ2EMStQ9fEX5\nzoSIX1Nq7RJxn7KBuFIAAdCd9Uk/h8F09Ydonl1Q0q7JmePS64igNtn+KR3c\nl23SDG+dpQN8zaVFaD9rYFx8zBv4GvqBJ9ayxH1EDDC+zIaOLvBF+T8IkQmK\nfyHSzYTLB2tkG+SUTEH56pwv8isIfifqD/1LRS3CGBB76fdCA7XLi1cqAQNW\n5V4JFaZNIM7SL+hDGkmByLC/p0I00tG8Fs4N1EeVBrdWPWsRHyEnb6uykUCo\nr3KQGhiQp627/pMlk7dPwUN0JCCEGqh6Rfmr/3R4/1boUxXijfsGRIO6Yt9O\nm8zM4TxhCl9AL21DzFTSHNK9hn3UvPrqhdqULLuX2x7cyLrDKnOBo22cLIWw\nP4sVo/QzHwDbIPOe0LvWecfZp63CTBXNEyTsO6o+J795y25aR4Kjg9Q4cbQA\nqWgyd6PMvzFFHe2SEf55AL/tqYhamHJRDhIVHBk0zd9G/sLcJkF8hrYfXhGt\nyX+OczHrEbhuSu4CoSF70o7V2qLkqt8d7i05sunmhzjstVkaLjis+YoJyLDy\nEYgrjzXwP8XjYd0PAMdLONS1dh5SgtDU6u84NVqmFw7nGvRqw9hCU/aKX4pP\ntyXXHTAiYYeBN6CNcvDy7XC8VPiCnVp5PzYdQNL2GTmYN7g3j/qELSJHkD0G\nQ//s\r\n=PjRq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/touch-target":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e590b376b.0_1593213809643_0.12193404012521958","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/checkbox","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9936ae233bcd6566059d88249a898e64dc4632b4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":40,"integrity":"sha512-Qpwgc9dVNV9QC9Km4UvqlTE5bjer9s0zI6TCoaBjys6XkVLV+V2lHNjazmCxDgiYhPHHD1lIrqAN00VL6UlTtQ==","signatures":[{"sig":"MEYCIQDAJhf7k2Pp9NeqvNyq74VbIojtG3LSodZS9s7B5SLYKwIhAJgN0XNeuOhNDon16GIbL3ro2WbcRDj5bsLP8b5rMRes","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGiCRA9TVsSAnZWagAAAMMP/iBAv4O07nZNMyyIvIJn\nonBkFNWc/KDHUIDfrZYm7DT9Ua9L8LlBbo23VeWtJwr5qmEGulzZA5DY7IKf\nxIpuwgoN0TVUzJ+CKDpU6ziQ6eMQwiughPzfW/hFngS21NkQfDhn7RzImuuD\nfO44k9ut15BWcSCgjzm4aHUyde8n3giennIv1I+fDQIdO8ClC1XEfrFGbs/Q\nDHhMbBMsHw4Dg7hOeRt2K1wykuu9DpQBO5UlaOvLq21eNbAUCgulDqoBuior\nTgKpbqK6YUixMX1PpQ+YzULI3WvASIslb5gxBQswDbmYT3b0i2/Fi2kM0Ff4\nU6F1Gu2Xkt56ItMmW9JbV3jyZFPinH7d9I09qSIRXbm0bPG9p7WEl4B54VcC\n4mougGUCtpdom17gCWCexL/nwRer35FH/q+/KHLpKepy46ItsRC0jBogptnl\nkP5ObxrT56GKjDT1yRaSk7NqLzLyFhjwyCQZ+Qjg28ZtISxQzGGzXFgLLCxA\nNvuF2TJeqaCzs+Ghb9II+LDXU/deov6m0mGwN13fRSMpr/MjVm8iVFJjgo51\nYFXx041XtUwCaF81sVAVQY54V+pn/1wLvEhCSKDCxm/bQtk4gdPM4sX/hFiZ\nET+87FOA5HSzzZ+Xhf+dhZuyVXbj49FKzziJpQW53P5pyO4b/X1YJcV5+GyP\nq6wx\r\n=MOvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/touch-target":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.0c9d6bd2d.0_1593450914123_0.37850965223911137","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/checkbox","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0bf133c162cf1dc2c85368281df746e35e4957a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c1fec4246.0.tgz","fileCount":40,"integrity":"sha512-aO+vHPyQc5jI5aUshN2zcriLNdNMgNCqZs9NpEzEDvfFg6B2eEaDz8Qv6ZkqUDqdo3GMKHogS5Y49JX+igEHNQ==","signatures":[{"sig":"MEYCIQChcsEAX1mYZsVOWfj4iO+01qAuAya5rVxQjBhr/azpRwIhAPb/v2CvRUT6nIsC2cQTjZRcHXt3zi4w9JD6uOcYYohM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iU0CRA9TVsSAnZWagAAa3gP/105Oh1mlsJy/6+nenJQ\nr86eTkhfvRMFQ+EwOJ+7my4VtXmPl5N0uzQuFgmr/HtbA99gw6xMZbr4Fl54\nbT2mDuWmIUxuRyiBjRst0gKxgceD7IGUCVo7QkBmP2AgC+SLbxjTQ2s1bmHh\nq8l/Lw5SO1u6ovus2HXiezVQgwsSHg/bZhliDIM1m5D1WfkpYFK1n+G5gAXR\nFr15hSoLLWb/oJMZRxX4X2eAnLdh/cAEb851cCcM+pr52JTX6j4bR6i3OjJR\nCWRusgD7k6EKwFNSbs8KpNZygwhGHr+qgibJ4dThQyihOMnSrB3YqmBuMzs2\nTn6Np+sNyJajexnkVwN7lXYFhYCQtb7aa3hwyESEyXZqXLMRH+R1jrdu/EtL\ndqQJj5gZxAMXpkMZICfTiomD134LYE+E05jn8E79cVOfVplnxQ3b3meAAi8T\nOuOI6566hsQ4KtcghrUrIOeqWXjnH01WhfOWOlXSGscNDhPiRXNJJzfQjlz8\ny63Jcbal45hyYIhgBKD31kry7uSgQ863hqtca+0mHt/RlVmoghR0cG5XgjC8\nGFb3ipLkVI6wVXnqdk3drDER77PYwif8xDB4jKPE0cEZXaOCaf4fsWOXmSN4\n6EI3Vp+/h4t1R1bYwaTf1OF0c9SdXfE7S5gvU3fPtwGqHXskdtqAY8cUgRzj\nGrkD\r\n=5pSC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/touch-target":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c1fec4246.0_1593451828532_0.10007560654222614","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/checkbox","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"935a4e058044de9b3dcd086c846c32f83ec25184","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c678a9d34.0.tgz","fileCount":40,"integrity":"sha512-MsXiXqlMNCbsvl3IdhskY0KLr6n7xr60QNVmCVr8GY+UUK05kksUKhw9I+5MtBr1G47G5hMRD/2PKBrNfU/KKA==","signatures":[{"sig":"MEUCIEfWJJtuah9o+KggunddutXvQ/CWkmtrLRVqA6rPQXG8AiEAlz0utWxOobUDZCftXd4sAyHDEj445O0yZ4DHRrwCEmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iotCRA9TVsSAnZWagAAXR4P/jwMm0YllIMgDegYlfdY\nx1NsXXkoPexmYF0lHzbHdSkOMAhTYB9zL14cHEi+8IubTfdaTkzBQ8rjydoT\njkhnXomH3wqUMA9supdVIt4wszQ254y+FL+DUe32C/lEFR7h8B9mz00/6Dtv\nlZfA8RIG3gkvF+w1KMarGidINHXhkWA59ALf+zjQ/zSdWib1pNNq5DhqdCcf\nVEyFGZ2/CGkPFDlvchqHswQbqLNA2m/ff8qSL1uWbOkZwMBMbZhRoxCaUUa0\nzTOyBwddqx/EhKylwWJTeVbF01g0PcAwXIVzZ4/3WxlMCqVgZqWVwiyqrvZz\nxi030LWMk7HrUfpgc135Z4d5+T90fKcJ5s00dvK7GiGNC5kXJIL8WcQcYLYc\nj6LKFsU7sdZz1odvvXD4T/NqsVkCmOWDc4OmXiluKKtG+H3Uctlsbtm0cu4V\n9NvBo0m1S3cYHKy/ciNK0cr11/6jrf3jzWJwdfFiYTK81x7e5ZZZNGaEfW9h\n6TYS7VG5DWzCqpM1bZuwxWc5nanPhg6X0mEsuo98zGPKboie0is+43jnHaUJ\nFIFtRpt1mlqJg8gWpcuFr5C/opP3OlDxzg1CNYwYSnSP/rmxw3XPHWInLJPY\ne5VF5pLbdmtdR8IyU4g/nR+Ddun9Nb3mXL7iykUahRw4FK/NBOOE5Yl134rh\nkxYZ\r\n=vXYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/touch-target":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c678a9d34.0_1593453101381_0.8018898935486751","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/checkbox","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc357ef9c8b84bb251b3858c8a7ee9b7d313088d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.521afaf6e.0.tgz","fileCount":40,"integrity":"sha512-FHibui1OyA8MFlZsXL8fHKITCmE17Wz5wlfYxgR500tR6qN9K8To7gefZmkp7Skl8IoYvplwSeQk6c3RVb9yYA==","signatures":[{"sig":"MEYCIQDZH+hfwKe+L5vqoDOGuwkBfMRDTGs/vPx7agziXTWbDgIhAKXaI2gv3GslMHoyWOnh5WeIQq4tJeCzShMTjHO3njwe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1S3CRA9TVsSAnZWagAAu6AQAJN/ebELsspGX+U5qsSi\n+7S+KzcM3ZaiKUxDQkq/YR43caHJU82YmksntMKNcgrETuyZqfKx28ZykVP/\nhjdEqS1rkldraj5LWmd8/+dmUEDraFDEdfrHzHPjn2MAXk3n8je3uVUKlIot\ncBupAlZIo/5gSjM5/kV/pUELy2IYLtxLTLXiexiKxsGGoZe6Vbvw/rSBoEsk\nQkawhunNIDpFmYII+iH64zme2gTbhF4+7iA7QU585o80evjiXANdUGjXpxpU\nmdJsYNoLimaOBRaSBjB9YC5805SmjhxlWLtFR0lHBOy774cRpcLyt38XL9rI\nQK8nExhRKNlqy6kqasE+pdCHLgmPKHEgdup+jyxLZRQcnAVORAfNiUWVfUJd\nbDyQI7gCMfykBhonDdyp50KZvhXkeCUYWT9Rqku+wqGqyGo510A11Nb/ep10\n8zHSN3iPvWoFbLFvuUL8UJlCcGfqs0pc35ccytvOq/+n4AO0zR5/zf3DTMDR\nxg5IICIHZOoD4otidf1TCzpxwEYVz00eXzwkXSVWhK5NANqOe3qM9YM0Lkqy\nJ535pq9r3tJSfjJIF/9Gu0stIw0n/BJ3E+z7ahaG/0LCJAp2aDNaAyYRs5KN\nnpvUkfFqu60tJapDVsUMZnNXyw0tlIivgCmvNSNA3tRSv0Xxj67+rh93zbfw\nYdyW\r\n=OkBp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/touch-target":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.521afaf6e.0_1593529526960_0.18227977190341837","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/checkbox","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aed38ea3c946baa9fb193eeff65308b4f71c3988","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a2ad48839.0.tgz","fileCount":40,"integrity":"sha512-MO9oiUg1ZWBdv3XvumihBXLTBXNq9W+a9IqSvlkEglD3XK9lX8Dq7YDlWp/SxEL6BrNbeR1TbVrUAmweAf+eKA==","signatures":[{"sig":"MEUCIQClM12hDERWZX6UtgAW3is6yzDl+cKFIwy9iz6xE/fxzwIgAn7V4PFyNhz9uSM07pv/PPRiSCJHba1bvWlq5EbcjKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48KCRA9TVsSAnZWagAAF6UP/ikXSJonDYj+eJhW9cTh\nseWxaoBOcxLmrEGKUg8cbf5q6qMMVhTSt6EpuF9FwnTFeAQu9XamYkiS/JMt\nYi0svn/Ne4yg/2OikdbL6X+7A65+bUgyGtLVr9ZPB4Irn1Mz3T6aBUnJc6kc\nWnSXWumoCYlpa9NrXr6qjzG17elybw6F4EFFT1n8aalCDYUDJj4tRKYHP8ym\nTl87wETGt9qbZoeCwzS4j4El+DkW1llaQs2a03k3o7tIyG8EmRG8di0gyIP4\nIFJ9unc+8P6F5Q265jG1U3Bf9xLvKkWsgkTubPB+nbxFf8fcP/m21XaXj1K9\nwBE/rflJwA8FSMe3D4ysFy2WFYYaZQw73N5GoYlMPxF0TWOYlhaFMJzcmqDd\nvJ/gbVBhq02oid3q4YVKW4AuVFoL49NrGPTgI7q53+TacBmD45uURSz1j1gb\nVuKN7WwFZgZzqwumg9Fio/oFSTiguxih3162SPwoSwKYrOLfoRF5tjfLFlLR\nHEl/pCqcy0w9HuHAYtBt98YZ2fBbjTrLKrwthzOk6NWgHm2kjTzka429aKlt\n6oTDAsK6mLcV4hmYgUKZapL7hzYFUx7eamLfEcmuR02EDRB1BxhWmHli40Bx\ni1saY15vuCAOhrIJeZVgE6NdtDQiKJa/yq859d4jM/C5816/VxBmP8GKHzCV\nBeiJ\r\n=OVXj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/touch-target":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a2ad48839.0_1593544458182_0.3349747905098437","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/checkbox","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ec2385881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9037e4e575b46f8aabcf2e8d6c84eea0e1dd3f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ec2385881.0.tgz","fileCount":40,"integrity":"sha512-8WMKIR0NvLiqd93A4GttHrhs8I98OoQiTxTPAjzVD9/d4lN8mk8jbj27ICF5naWFCDxCmOBmzSqmrb4DVpM1mQ==","signatures":[{"sig":"MEYCIQDJFr2Nn8oRXIFsSyAiJJs2ww71Qq5AHtSNEzNEmHgLAgIhAIxYjajym33bjEDxYHIQxBJcYR/k2+gJCf8UCsvIWFUp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LNCRA9TVsSAnZWagAAEo4P/3XGQo1y8huJ/m3Mwtj8\nME5IqL0xVtXC1c1q7X5S43kenBiNY5r2e/eXj6SK5EFpZPXjiNzGj/PvmEMv\nEBv06g5/0+YcdNmzqf2QsCtca0hx8vYa7TOpL2+Od4AIAns+5qSAPRQ9ZBqg\ntPkm+/NcFDiD8KCVhCPdDWxqueROG+q8a0VjaL0Y5EIu/VZMhzvA+1nSaZnw\n2rpt0J/BI/1xE/7LAj/c+uPLAoT7Yis/D5ePuMEVyNcN/c2x5DV6mbyr2nXa\nCTmisdVbO+Rrm6efErC1ICDSs53yadYIqt8+6XQ+AtPT8aB6SDM8rptm2U3Y\n2mdxtLP5SYatntpBro9T4zceQq3x0zU5wZxb3bmhm4ar6FonpvvWzxEvVI8c\nMcWSfMs87i+l/QvxMNpZXk8ajX6WOhz16tIPCi9+A4IxHd7VWPhftV4OhAfC\nvmh/q22sC+qmmhFQ8a5xGMh5Hyoj7H8Ln2kotATbJI2R9y/HBtVh5Uc59ftc\nAkM5XeqKtzjnobDgIH/4PcxoUJx1t1cv4Y4oichfNd5XrtYHpg5gHEo9xOQR\n0e48gln8KY5hnwnDgb8BySZ+F/Tl1fiStdgaH9V++pyy+sLGlV38BEQ9PYRD\nB9vsx62R9yd2I+uCunmBXsl5cNp57jO2GyH7WNc07/Mu0+X/gIrPxy3/OzSo\nPEPM\r\n=laEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/touch-target":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ec2385881.0_1593553612881_0.625149123448798","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/checkbox","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e1077bec6077fdb3d8dcdd4a17bce2574aeb1f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.610c26c4a.0.tgz","fileCount":40,"integrity":"sha512-lbPylGh9dCsfixjG4qqye+W24FO0/lkRJRGuCfUgueY6ZngfloVH0iErZxC0G/1sa0QO6SLOyKjgjKEshqKQ4g==","signatures":[{"sig":"MEUCIEFzhdM18fg9eAt08Phk4HCeMTOlAuZJ2uA0l29De9ynAiEAtCw1n5A8cWGZhFCHGN1YZ9h2yayCaPgg1hsn736F/CM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQBCRA9TVsSAnZWagAAOrwP/iw/Ws8bDGVk6pp+N2Ew\njWUN5aZvQpck9up4o/jXd7Gn6jONzmUpeiUUdeLa86vMU2zmsBZgrmshNxlG\nOaLbNnYgd9HRIJX4/MV8k112/nLIyKwsCW34jCDZ1AmlnNOa9ZBY0r/o0lWN\niLC3+oqQ3CyJvDcrcM+bYLJHcq/q6QVLygiF7ojQx7W+9jNPXRu0QLZVtp2L\n5+Na3yUDdhC3iliJynI35mGYEB8tsKvdzOzHTW8SAhdzrrcUvcYSNakw1oOI\nuiWuSZMjTA7UNCZkHVnWPBLSlP3MksBCtA0W0nADIo5966MV4Ov5YnMzD4oC\nd8YHGylU224oeVRc/BRKcvhwo2IGkT8Iz9/xdfu7J03/X9wjaivmHLn8ziZM\nVJmyd4GPvTBoO1LCeuW3iO2ixxYFJ3+UF9aslDd5zzQFgSJhq3Y0+EDzInx9\niRDPfqUvJgihxQ8VPwvHY44X8DO5nIRdYMbFrpaHe0IA2o4aC9A+yLFDequ/\n2UBdlddvlhbEbLCKKJ+4QR41CabF5Je/dMwjuwfjuxuXs0BzZf8CgI7xB0WN\nTzbUYec3uNb4RynsTcBtqVWDWc9m4WiLhfjstR8QmEa1p7mYtmj//q1kd5pu\nS3Uy5YmXh+OU4Tzi52jA8R/aXFm5U0WuTSdALx2uxu/31mowKONOpMJ8JLEi\nTKZ3\r\n=f/O6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/touch-target":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.610c26c4a.0_1593615361216_0.19114204040611904","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/checkbox","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b62cf0b817d29dc33526c4e25cff0c46930d06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":40,"integrity":"sha512-AVYxzm7kKBRhk9jg5LSMw3S97boWPHc3T5ce7c4fe3eLDyqVyet/S7nTwrjqiZ1aekugIxQ7+rZU3TAjFEGKpg==","signatures":[{"sig":"MEUCIQCLjpFPVT9x75es0HusXwn3Lvts/j9/0/AnUkdsgmTeBQIgRlsE9w+pKp3QkG83RkgOqxozAQxcq6K9V9MjirKZ5tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOLCRA9TVsSAnZWagAAGPMP/Aiia5WECBE/1voAMtF2\nC52bnQFH9QCd9gVrEDUu7jwrQq54/6eHEbtWFh347wvGNo6Rb4QEs0tqfu09\nikWhCPzZayiPRsjG+a8zCXFUrkzuFRMTOFs6ceBqDTZldaBdI77aLU3/Ldwe\n1L30TecbaKZ94HtolOYEwZp5EXSSbSJyF+u0amFT0cFuwbEhtzIjQNg3dB4k\nqwieFtpWY+YCO1JUBflXuvvlyvHMwH/49MG8SdpdzE15yIbpvk7cu7JM5P7N\nmGoeK0STSZEvLFfOkFU0HWT9rY73m72aUMG7QWpF+Yg12C+pvJpk1XbXQ9Ms\nFG7DlE7ecOmOA5oKU7pD0E7A19p/kVVF6yQslegwpPaO/gQnAGaE4TFg6Pzt\n/xX3J029wB993VNE8eH2dde3C/3tOSxe1i5Yq1MJ2TY1Z0Scn7LO6FJT4P8a\n3R8BFMjKc4mkcZBr/lyUSswzCB4jNTRP+tfYoBIY9Bb05IuuhlH4I+EELk0e\n1gt6rdOORVdoshqlqqon2PTWDFsdJLO6/EPdOMoYz1cgE1pIUf/x3tx4Gts3\nf8BEgwRccy+flEiesc8P+A1HSB+sI9MJQpkZ3WzYwhT6HSQOsupu2AEsJKXS\n1yRQayFNMz4nBQDQdABaosXgm17lKGzTtwNNhx9AP2vqmvTE+lMWqIUjIBy9\ntQXs\r\n=kiMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/touch-target":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e2ea4a99e.0_1593631627091_0.44476509824914445","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/checkbox","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4222388f5bbb1aba3bdc6639060049cebe6fde1e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a78ceb112.0.tgz","fileCount":40,"integrity":"sha512-ke91NUbI+j8/zzpBr0Iw4MjUF8gj5VNmdTTJP8dvHmRNObSBwXo6ZERactzndK7/CG+dVV0hkwQfcTqC52DrTg==","signatures":[{"sig":"MEUCIGWBabfnRwRr/sZJp+7ErQs5N09km/yMzuc/Sw/aVLpEAiEAn+3NYZVNAI1spF4Yfx20LKltaVwqompkmuTtI9K07Dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZLCRA9TVsSAnZWagAAqpsP/0AYA6ULtRlnCrV/pi16\nr6fhAJ7a8LzavXjBsJbz+zYZg4GSCoXmRJYOO6tu4xpPxzgG4i5vMddX+Kb/\nM0OaUibPAWwo7OmhwEk2JlkFSPuy3GVZ+8uRkZz06DInCQrwAMiybbkhW6p0\n7P8jP9vkyqm/Kc3zLU0k532HXd/NJS9y5FzZNSzRuDWiEulcYBQeMn+dEPaE\nrslbTUooeOq31mxaZwr4sUv6YKv1GKCjaMT0bUYZoZ6WN0BcDQDSsC/4DAI7\nWB60EV0iB0f7ui9jLyMJVN315Sl04wZf5pgDPAGUdSdwGs1qsKF71eu6v+rC\n+ZL72BfclSFQmQhG1v+W+Fi9VondS7/eXRH7MbnMVZEf4F02Bvshp1wSryNS\nw678oLo2ioGKh/6uhZqZC1UgnfbjErdQpbxSABOGqeT2/8urU3iEdcS0HQnK\nwbIrf5FmJMx9tkNnzFuPWqza3FsPVrDwZ4HhWKFlTRIwygijpr68tongcr7D\nbf795b1pcOVNc6chWOwrgcEdrn6z6etjbDh60a3bQ8CX+rOWt8MJhl45JFm7\nglGTv5opUXawKycWFj33K/JOX7aql0f8s9qUAZ6gfVM2U6t5zGOWWmPkqWgK\nrsqUCzXbaOicrR2+W7F+/ncyR+7drw0h3xGPGxSoNS2wVCxxpv9GzsqOGK56\nHBGM\r\n=WCub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/touch-target":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a78ceb112.0_1593632330998_0.7809919332514161","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/checkbox","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"036073850f5581994f8a6e565debf794964e32d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b0c456d33.0.tgz","fileCount":40,"integrity":"sha512-FwbZOzk5163yf7AUNxMRRSr8K2FnymDIx8GFXqJxPfBbFYwM5uPgBjkxabKZ/qRAUMuiqSGIhd7Zt2X+lgZWww==","signatures":[{"sig":"MEUCIGCtTy43baNbm3cGYayjTtS+oD5Uhdqx0DKN0goM70QPAiEAuO5Tfplk5ohs4CnbYLi/MgdIN806pOcGaJbBw4Y7kNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6iICRA9TVsSAnZWagAATJMP/25xIGz0CnEtqphq8VQS\nha4Gnd+ChvfrR6VDWDoXsf8dSZxMXaOsfMNAAn7Boy8azN4lpVz+FRYXpyD4\nCN2Sb6SU64M4uN2+Hk6wQ0dheuchP4Ke2+T8dpWxFhIw/r3xefXM5lxUZB7c\nI5YHcS0LWKWlyscWADGJxnsVk5eP+FZgddqLbTFAq1o3vLGGjhfk+Vtl4+Tw\nTclJnBnIVUor64XEbKCohZN84U3nNyx1vzxswSK/uhK2sASYFcyyCCeffKxY\nWw3gYlk72lZ4VfyRUpyqbC5FvX5ipNbRJlMlpkLuT5wJlx698T8yJTK49cOk\neV55eADrpP98WrVizWRWzWGsN2PeO4z7sRvNJFOFFC2Rd9eA+tLAig5AEG8B\nOSfA9PCxkXMHLVqIaIgkCtSc1dR7vuxdEIyBDOkZhTYWxq4dWaLhDU+vCkgp\nEygqJxpnY7LYNOTRwOIzRh6pjBi2QNwSo4JQ+wBxqrYhmwD50/CQvB/AHVzv\nlUgUgh8I2IZOleKcVpxxIJr0jLDjbLurSAiyiiypw5SP8WimXKNWUG9gju0i\nG+Jiwgh14W7SHHdIaANPat3/9TppZmgtSpbktCmG+oENKBcwEmuSaOC33cky\n4CrLc7aY1IutBI3aynx8+kPUz8QrPa0GYXupewJsVn6+XApIWHNuz9LV/T9/\nrdMl\r\n=tmWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/touch-target":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b0c456d33.0_1594075272178_0.07782280219126081","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/checkbox","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bacc4be6f56f5da754eed776b839a151cc613e15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2e5711e04.0.tgz","fileCount":40,"integrity":"sha512-nn53jrPzBNdsIWxLZT2aoRft+1ALjit3OZ4bnNxtusafLx+NRR2MbazZqcsO5JbkAIrBoxUoQUXyCbGAwS8FWg==","signatures":[{"sig":"MEYCIQDn5RwLXBb0Ko9xIWcfQZYuLF9PNxVc242Xm+gtq36QvQIhANKiAHPFfko1v5r+HBcwx/3DApmVvp88YuK2j5tQhJOM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjGCRA9TVsSAnZWagAAdnAP/1gLTE4rB61Ndcpw7Tp/\ncdWg1eUvPfTI6oyDfemcZoMQtdtw8nGJ1UXthWG+5qV12ShmjOaoixBo3a0P\naMsXSU5HXXaEHFK9UJ5MXb3Fgt/YEtpXm7xIrrbwxpXFdMkKrDZY2bnPPQ6d\nmnyHEKik69qyoqfeVf9kGydVXfhasQ+Iez16JVpCOroMA4OhayCfthqDBvUk\nfwN8ECbc1uxF+5mQITxILa2ORoB74rfFBuClgLzgsq6RIIlvzYYhqqfG4gvP\nl/nrSpSN4ZxnDD2epXRox+pxjEHaJlr1hpy9lFclbayodcfDEOwglXPutPBk\ncHSgO/1Chvq5/uC8gGZg+9+FGI9rQBoExRI5y7jR5h2C/A/I+KUs4/36wlvW\nizg8W+BgNB+rz8+kugC/0Wsln7ZTfsDS91258uB9fut7ycXHIeOgbpIahgOj\nqcup0nPRId8HUjKgBf7rSOUvee6T4QBwRAGJPWiBWO6p+IEmIj5bndriMnny\nYMLUeGqkozKpjcTGjLuR10woofDQbf9bS2ftPmUNnpnNDPlrZ/UI6DcWFCaq\n2b0p1rVQ/glJ2PH9Gj+iIB0CANSmSdQSl52JtyOJNhIUp2veUNyEbiYeyakS\nyj8NzGnJ8Fj6tC88SNhS5M8DMADazZZ+Xt/JFdcwNdy2lFz+g9Xva9XBBP9t\nFgtg\r\n=Ovk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/touch-target":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2e5711e04.0_1594226883326_0.7146561031850531","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/checkbox","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb0c6b7f67ed345419915c985e8a1ef9dcfa1624","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.811fc5d24.0.tgz","fileCount":40,"integrity":"sha512-3iIi7pog31UzCsuXBgWH3kFO5ILV0L0Dav5pShNaXk2kXH74XqbUIdVvfYctXYyWejT4Y4W+YkOfxp7lZa10Vw==","signatures":[{"sig":"MEUCIFoghFlM9iddCGvnlQ/HS5vxyLjEOMgYilVeN3+tHeuLAiEA1UOf0L6YOj/aRxJA/3YNtSzQxb6RtETsKnGxlzbDxGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9ECRA9TVsSAnZWagAAwp0QAJYPG/8dRhzBcI3nWejz\nBRYVOCQeDPDyo9i+QxSo9EOPmyniyY1VWdeojyhOJZQxJaER9fHmlgmhnOY2\nlWgcK5KcZ5MzxfVUYvcU5W8dRy3566EWVKJs8eknm+rsKR/SFe/AfVoOjWb5\nD1CR9ynrAcnLGsLlonpjF9izIfc/nszkY85vNQAWGj41q4fV/cZ1q62qD99E\n15Iax05qNStblmnXsq6OIYy6whr396MXHLeoqMi3QJtgLSVrSCjYmgjlYSij\nEaUms4ZspGvk5XZX5XcFR7oULixd9WtaPsQEuTg7ADqlqMrMR55wmA08bcPA\nH1HXZVnA+bdi8jqwZy1aiBtjWChIyC3JED9qCkpSXg3/DqkxX8yMpZLjquSF\nm0CT10Fm9aXelhCH253JEfT1735lEdPjs5rfjcAoE4VYjcKtynZiocgfbdHN\n2KRftMCOMI+Yrrqa1r+j7MjV89mYjY44wbZVxqHiNN7eUv19FT+nFUcl3Ifh\nEAixXGM/3DFJ1DogJTIMGVaqvDKq4KPbbKOI0YJaNN+4ALTWoUsKgmVLNY4v\nnxvx/HAXgFPkMG2KcJU6s+sVSsiWfSQ60fuOZGC50iue2wFdmOe1U/2lTLc+\ntKMtqcx2osbEegqFNCAaGPeWjD5V8PEjwGnApgVeboQCuKhuvmPDske1c5oJ\nfQ4f\r\n=PLqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/touch-target":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.811fc5d24.0_1594228547634_0.23663929586650734","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/checkbox","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2dda3a6aeeb3dd6281003faba4d94d3e8ad83cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.6ed717ddd.0.tgz","fileCount":40,"integrity":"sha512-wTQYepq/0nAgJLEC8t9dZzTBJWuqHZsziczWLZr3FIqKcPWIZoR4In2cfHV0anZ1YGesC/y3MQWK04C6uUiSog==","signatures":[{"sig":"MEYCIQD/ecqyb7xTmHdEOny0ou0qAAlzbL6w21sB48AP1RJ80wIhAIEvFZnvJLKDcT1vgQ4yZJe1i4W9WqAy6gM6KIQFsTp7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIBCRA9TVsSAnZWagAAZNUP/2+q1rPS6Qz8tt/Uilg7\nJs7R4Ef8IjQyt9JZsgr68uAoFd7iyoBnVpplUfnrna1jpXPtlS+4aQcEae0J\niV9c2goQd+8Rarhr/936YMGfnVl9W9QllnmMwAec8O3cSQF47CTqSaR9kr6t\nlzt30bzzLEwaI2F37PcAA3WgbJ3E4KvWj8nPgWBkC/YcIeqDQTAhieLg3EbR\nR4qLPYM3+v9Lidke001ZZtQYAjCO2Q6DJNwbobNhEoViZinIAUHZeEC504wf\nRPA9nYy2tZlP17Kn5D+q4PGBxJ6j+1w23/neXGlZKXEVqYFhbhyAes8j0Yz+\nTIlpVXQjYLTOaj7rYXwXcUbypxEtTVYqacxVw09PEYHdrZG7WipuVT+Z5BUI\nTmUENYSUNbzyGMtpqA0vu0/fGlEnTz0QnpKQkk0ezcto9LqvLss2ldVu7deH\nezfb8VxLJRIdehUvV8rL8bLA5UeptKzy09KRXCnG3zAx/2tc+dGysbkENb5U\nU9gBee6dhn5r9Q/4VhetUr33CUwUoQPSwQVfows+m5MWtY8NeuMpCtMjgQfH\nLwajmCz3yGxQDiMvNZnFAlvtxxlC01Wmhw+cfg7dUAg6XmXl2ITqkmOnhKGx\nXtX0uFavwb5I45WQkYf52Td68h3SC7RcB2pSMVvOFnZG+R6xyQGv5LJm8aBZ\nVrga\r\n=BhLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/touch-target":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.6ed717ddd.0_1594237439503_0.49262521686602434","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/checkbox","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d850de590.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1060ab5df74ac5e3bbc0fc94493ce4a22f54402","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d850de590.0.tgz","fileCount":40,"integrity":"sha512-k7xGWFDelR5LD0brpY+qK4uhYoA6xYdzlMAxpPk1uux0GC5FBF8P3L7Vixb1kQPVG/5j3yJz2ITccvE/n7PuVg==","signatures":[{"sig":"MEUCIFPiXyh9TXP+DqjuGBoSNaVCjS8juPJSDGKWXWsPwlQKAiEAjKlugNwDYi8aPt4caxfAntBMhh+4gsKHHXuEKgRoqgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xiCRA9TVsSAnZWagAAQtwP/itwylIOmU7BT2FsQwGN\nD8C9aCn5YqXguS1KcfGFG3/e6SxsHGPLFzElD/6l1Su5l9EpRHQNzNWt3xgW\nGgvdZxFLPkIs0lHz4+bVkmxw+KrpYxfZdBIpgkcqHHF6wAdhlozH4Ac630vv\n4xYoCFdMS2bXQuynJ1CeV2aWwiwwjCN0PLY1EVwWX5v8kBeBTyo/aIABxkEp\nxl97RA6K3HHKcaxADJevky5cOTc48Q0bVAF2/TkGW3oBQh+Vkbh7849FtHi7\nIK1M2nDe+M0i+f59/RSK5ttd256S4oYdNAXmcD/IhtbBaNIfEQ8A0w9RHaBc\n5ouruyFftvYmzC2ntbZbsRr4LAfIONR7W5zxJ3OVf0UN049fi9OODR+9XOm9\n9rZXK0QDs+qH8JkdsrOJL/gnJlwwVUJK4pU69Pjp0FndTn8KnL+tzbmdFE5T\nZAEsYCduyT58//0cuX8135znh5WZ474nmx+OWSsnzTZUhtjq9Dh4s5MCsLLS\nfN6yAuaNcAimu3shyhEbl0ILTNb1ksoG2xZizQY7g/D2BbTUQeVAmNFYJw2/\nqo2ahCRobpjR1811tzGGzGR9F5JGXEiteZ8S5y5sxSLFkijwm7rcTfVUdyvy\nJ9Z3+W8+QkAtMN20t+qIV2c2MOWfUkE7lpNWMjUz3iVKPvfofBYTx1IuwONM\nLsqV\r\n=V4tC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/touch-target":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d850de590.0_1594317921577_0.06208877073541119","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/checkbox","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e07a70841.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f983c41c21b714fe8e8bec976a8b2f8909b1e54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e07a70841.0.tgz","fileCount":40,"integrity":"sha512-jdoBsoPq8TFSKfG5vlbxGCv1FyFfzqvemGOkGPqjYtaGjQcgJ9AYjNZNDnKzmbzK8S/LcJW+/5taBHMsH0dGKg==","signatures":[{"sig":"MEQCIEauoVHrcg7kF4Vd4TgYOVYSJ41KDEiVhs5vJ4FA9s9nAiB6jrFquQOPRPQh+9m2PTjIViRG9NBySx7M6HFf/iPhTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NeCRA9TVsSAnZWagAAlGsP/2IFquYDMalfhvPbQ6bZ\nCjK54HJUl0Q7TvBrYRgVYqTkqwutKJMBip9LVyfn3KzwNo54vXK1xuz2G2xI\n5Sr3DxsDyF/tSiKDJlZZ2xeeXQiJGQglJcnPut3TRU6aH/LUJi3qiBAVaFCJ\nEzc3GdAPI6MEYDhWPEHGjUQDFiO8GUyub9bqbjErhBXDSexJUKwFF+cpNCyc\nT+7k/TPEO2qm6Nd+AmtGAUmRGwBJoW/lCB0aBPYRoodApGARGeIWX4eWJ0g+\n+LoZAFjnBthx66kGqVwfuLhiKxC5elp4fkzt6Mi0p3TmOT9iJ4+EGFdYFF2f\nhE/BigR27Niwfyx9bSrF3n4AaJWMm2piFQ/hr+u6Cl2RriWKjrhcglRrV3pG\nJNH3NcN2G8aHlyCYp3Nn7lXpM0R0TL2Ork893lLbFNC8NidILtnv708jANJX\nZSzUhNYzxH3jlvKUn9ON2J/wTOXC7vceZU/tSxsKFMQpBk87n+iTTCYVTN83\nQf7fhPLwuNnr58XIvBo23vhqjk4088irtAf5xk9Gn27Nrw21/GlABT8bxCEj\neT6NUtTMymUdwOJs0epirO4FZgEDvgFucgnStaC9lXxjYDQKXei40xab5XxJ\nvAa3XKADhmTFTmbad7FiU8FxTvzrAZbQOgKBn5wpB5d/hBUCa8XKEJV6RiyU\nBqb5\r\n=EU81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/touch-target":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e07a70841.0_1594319710068_0.5286864190065272","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/checkbox","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2443b441a6bb89775e0a634af4a4b9efe25412b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.37947ed6c.0.tgz","fileCount":40,"integrity":"sha512-xcW8QJOeag8TkDH937gjdaFwYxZUeS/jEqB8O89nFRoqAQ8el3oU4cbxlF/EnBjU71zoZSnEvx6qxrbHeURRqA==","signatures":[{"sig":"MEYCIQDRU2Op2ZizQy217X+Kedmeg3mtZaGEzKUxcNbBL2ESbAIhAP19GmjXqX+hX8r1Km5lb2WhHSOzkjbZgrrQWqmnGFN5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+6CRA9TVsSAnZWagAA6IwP/3e1phWOhOFKLvyoHHAa\ny+skDHAGx5bWxPVrVL9bcBCjeaS93MyrLvBfpa2HpZFsIYJgxjwuZT1IMjAg\nxEVE9xVHj4QFKkzoIfzMD8ogSsd8ulH4UoyxLzBJ/Ecq8lsBF75nqsqa88QW\n+4ekEvcaKtC1DdpeWPfPGwgg1kYYktjnh+ofl/XVfHyMvATeXQoEOrsMJTu2\nh6e3i+VTSp+v5W5pXsYxuCPHFEgw+7AwuIyCu+XuOPKK83QPo8xJWTp3alpU\nhNy4HnRx42BJFtKD5kZEt05us5CmxDESPCyy7bqB+SLVBSBf3Bjq2aq186qM\nItpNxjOYyeMp1CciX03E0U2FBz7aUcSqL5oe6yER+6kAclzzanrQ/pS2BqLH\n+fxDmIZ29cBWXmmIBOgfYXjqQ0F3nMWED8zb7+ARogmTZRJF+J6gnVZxFu+1\nArYf9tkxST7xOE/L1Axx7TYrxX0PgVFujzgaRFHMF94FtGKmhsqVjbDaO6NY\nv3gS5k7TcWjpgk0vVpVz2RFO5SdN6PWYpDEth15fZ7XF3UIZtxjbKx5YAJZ1\nriBJqKVRDDf74YNkra8NysccXZn4f2TQHUVVF0GHZya5PwtGSv2eEM8qsWGn\nlTvjxp5C5AHe/spVQls8gTI3g1zCxxqxMVrK1tQ0bHKZFWtbr1uLb/u0C+wM\ng622\r\n=k1g8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/touch-target":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.37947ed6c.0_1594326969978_0.027458639449562394","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/checkbox","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5d443afec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47897b1d376bc11e0ecc711c1d5b1aa06fade28f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5d443afec.0.tgz","fileCount":40,"integrity":"sha512-Ey5oSFd3D/z2yvdi+Jp1HXBdxnjoMNRdtAeqiZZfo4zCaTEuV1xEWft9QQFCFPKyJVm6qUS7LMMzuXTicS/tAg==","signatures":[{"sig":"MEYCIQC5n8/vXVmVQNcb+agRzUPQwezNBtrPZHSlngZmquaMyQIhAIQg+g7unjJMH+uvl8BWY/Jl5pgqP/vo6LYBUWck50dC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NgCRA9TVsSAnZWagAA5VQP/R/rnCtYUG4wZFrzKbG3\nmoGk3v8/9YwrCsI+YND+IoJuy8oIgsrJpXtVaYkSB/RO//kWzD2lzHjK5lWX\nfINnKmUbNwbl6Rel9wFW4KIfcuDge3m1TBXVdCwwhfdq/pRaco4FopOzlXhY\nezaLmC/j4H6CIAErGlYa4TLBe0Zr7KaHdv5n5AU0x7HvGJHTderbAtS5hkKf\nTrd+lBOo4qZ4EMqHoc8hUA/J7jb6V0aRxQzL2LT4HKALZPuWOs7sxXrLFiK1\n6hi4TPdEJ8rhU2OKdZrIEl+6SxcBnMxRTll3/+1bYZgQyyhOsZ5GwSpqD8wC\n+QgVmgnuOMP7aNZXx4RjDUOLHwTh324h+RoYOeMlXp0Ah0xoHP/ACZKdaeIE\nYAZXA7bCufBPw2ElvoxWmNM4MNjKk4wLFF4k1O0rv1OZc+zeylUNORrJjcuc\nj203Gz/b7pOgj2fihOzB/42rddNCHbiuazesf1xpOipJM4mOJk7t8qRQHZ7/\nMeyTpYh2gpjTVXneyUmNd8I4a5bpZjC3xk3/XI+4P/2cALovTGWk7T4M6nRq\n+nBFywTG6v8vI5ggB6UQ6I1A/jK9N5bRW/jvx495acg4H/s0SZ33HD8yNAR/\nwktg1WLaAnor6uUnqJuPSjfe6rz7JHCH3ggOt6El1ekSTD8C93HHGAntChO0\nI46F\r\n=WPNF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/touch-target":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5d443afec.0_1594327904052_0.5633183828443624","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/checkbox","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c4a40662a00c5a133749e21dda20ac9dac16a35","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.9ac1ed914.0.tgz","fileCount":40,"integrity":"sha512-sVt1YW2VtVZ5XlecAk9faQAOFf4KQJI0s6jAttsEWG8F5azi6t0sF9ZsSq8m8E+9YO6nDNhKQquNlZrk1n1RZA==","signatures":[{"sig":"MEUCIQCUeHP+Sl4HJ0Qnit/i+C7LIV+92rst/ojFY+PS/nQPoQIgP0Xfrk9f/UQP7DKROu7REkA1z1kWfU6BboUFnyfoxS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oiCRA9TVsSAnZWagAA8k4QAKULmqYxn2mIw1zkoxMH\nAG7GSgC1RVQ/ohhkmriHtjLlCTyafN7mYF61KrUozDhgogEeLwQN5xUBEb/k\nKdX6+P8369ojiZPaZ+/7egeV+pOquWgfV1eXxhl0EiPUsa68fPXnWeqJgrXQ\nH/kFXcErRLdu9LO6FHr03SqvJeoGFKHnt+o0xHHy8p/QmLsY22811BpzJh8h\ndx2LYK0ux7KFS+3U45Nn3aFs9XCUc/RbJMjGdx1mPr8XwztczG3XJUboyrWM\nc5XLDVZQzSMvxv/wJElpjFD31yL9GTa0v9mJECiyeYuGKo4dnTSDoSqStV85\nKCEq9xTAq9wAn5h35hGy/pM6MMg2//6TnKVTvAgPcSwmvoKvryYLZJUL+nLu\n1ABMZK5XrgfCURx78WGZ6b25DxeXScmboW65gBDjpZe7mjDQ9g/leH275Hdq\neEXucTV7Kl3J83BPKXntOlHwNs3AepU5CpdYyLEafXxCReyv1Mvf/u1iH5K8\nF22hOjuIiFQqEO6kRCnObPJOiJyr9PgE7RSpUnt02pdmP6o/n2y9K91EmhL2\nMdhE1oYGrRzaVkE+OSTTsOcPpt6genPveqhyrY1xJAHPuKYCWtYFDBQHdCXh\nqeezaEFZyOjvvQ67/oNHHB/v2XqnSCFejF6kMcnh/pOsPHEEN3qMSnob3Edi\nPS2R\r\n=WtTQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/touch-target":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.9ac1ed914.0_1594329633713_0.2469278017037677","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/checkbox","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3725952672ad0af3b02b2bc320fd8b4273569680","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.1e7cb6198.0.tgz","fileCount":40,"integrity":"sha512-386+0TCGqvvAvyAQlwW/7rcT0FElLQiR/7nqS5fbyD81uh2b+PJTc257n9xGEg8ewgGEOj5/2qJUxCYFfSwQRQ==","signatures":[{"sig":"MEUCIQD9oNtvOQ82juDALiBUN6ZbmXXb3WVEF20XO6dciX5fFwIgNzrPyrdXZ7y9CgClFm7DX0mmF16nkId+MyCOmwgkgZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5Y/CRA9TVsSAnZWagAAACMP/ixgE6BHc2hOPrwuKpQK\nrm1pKxjcRPANnwQYy77cdeeRgNMWulrR8kGjLAoCyr6l8LuUYlvVJKzu1NqI\nIMP2eYmb4+QeczivniRJ14oMs9JmNhZIDKzaYmGoTtvvTyjg4utoxQuxzo01\nEnW6WW1d5C35zLu748YB26C6foJBxu17Pi9Aj520XWs0Gj43LJNB4EQl4ZJK\nVbP0g7VcSVgqWuM8W+53vd+0fdqlFwUKlIPAfh/hX/ikTfg6p6LAkA9/Yi0K\nK9o9ymfJzS8FGRppBrJ1kjV89WtvSIjElTeyGYtk945QH/80fI8VI4uAgXxe\nwfoNuL5Jj/GE+Y771nQshBxClz7wG0pQLmhbbn054QecBcnV+oklTS6rKCwQ\njq4KYq/6+HUftTnql+kZQyaD8/NkUTmh3gHFFbjx1zygaM9kAiJ5g1C1CDdb\ninMvG1vg9Pax68GXKkyu/YszpZEV7yiOAa4LirnVav1HflLemLERMNYoCOn6\nQLaTo14gm7XMtphLChHoj+5+LNBGvtCaudlRlPMLQwgHX8AhglajNfunIefe\nIPW5YSdJPNS4LqAWHyw8W1Ff+mxkp/SvvHSLaE5MIfv1hVQ2SEQc0q/d0x8q\nrvakUsYYTX9GhcUXxofPlb5T7xlFbuIzV706sbSVWQh/dg5F8doyRrtMlbME\nFFkk\r\n=E7sU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/touch-target":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.1e7cb6198.0_1594332734689_0.883127721723546","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/checkbox","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.843f636c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"805f5cde7d5253941dff9c9437d11bba44069031","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.843f636c0.0.tgz","fileCount":40,"integrity":"sha512-ojVIZeHRPOZYKOpokhbHLNZXkCnjuACQzX6/1XtMYNz5erKm1F8tQA2XW3JqXOhCYijdoJfe21DdOSX2s21ZPA==","signatures":[{"sig":"MEQCIAJ7gzyR7gIZWwm6l3OadFmjbJZT6BgRb4mi0WDt8wn6AiBzWH9hJqaEgs3L4J11Njh3POOUcRX9rQBl0/6qOejMGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiNCRA9TVsSAnZWagAAiJoP/1F3/lho0XH0rsQSPCmB\nJfxhukl4I+/RFkDLxvPyOeyEIuRepSqoUPw++dVNfb7lK66oXlNJb24VovMY\nwdlXW9yIC6jlelFM6uiMEyarAkTdrPVFlN7qtcVLZwaYoSOIfRvE3bAc14C0\npSypOIvfUK7D2mGH9YodD4t3r2epuVRI3fGfRi4iPb1JPGzL1xDunP7pONmW\nME2rcystf1qzzK2fePdioY7xzwagDPEUTDwU+uwbsg1wOI3dMDYh56oNzd6k\nhh+SLupQlsI+RYlWVqV2PAwhDIrV1JimDo2hms1zmqLSbDC4QN0Pw3PWhSwh\n9Aicye/KvM0dzpdRNjhrTw+d36tZVB2PD7ux7wTq5myKmmkFUv7h+8CWQOLb\naiRNS0FEqqzQUPEq4/3l/jXg4ahB7U07PdvwBmfRtTXmx4PjVybSWNHNj2YS\nsBvTP/MuktEdG3UIyszupW0S49eMuwdlzjpeUatt3Lgfe0kxBzhCpWMP67Wc\nXhpw6E68nAdJxWjxrHaYUw7BjHx7dQ5Ky4CpPOfIZoOnK2X7Z6p+7O3aKu0x\nDzEY7YzjaYapPWgfImOakY/SqNq8avYGVJjOA8A1vvylpWhNdkl1d6G+v6eS\netX/K6+cyQ7k63oMQoIWQVHopH5IX9fQzq50aG1rmJGwy1vPyQ+z8jQ1OQTw\nmVg6\r\n=g/QG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/touch-target":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.843f636c0.0_1594402957332_0.8772254491147391","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/checkbox","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df0efcd5f97d9fdf2d7a653badfbaaa8c6a1afe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b2edaeead.0.tgz","fileCount":40,"integrity":"sha512-jT3a4fO6xbAquBaeslRzenLKQ0tspbZ5sP/IySB1HdHtVgy8hRkBwQ68Tj191K5uZG0z82Ea325HD8/rMusy3w==","signatures":[{"sig":"MEYCIQDmlGPthOduWDBuiVzlqvsoSNs5QFnBgdacnExAFXthoAIhAMDzHq6UfeGU03JPvmfVz3VRRQ7DzYHZawggCZNkLZ8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5OCRA9TVsSAnZWagAAtVsP/3oHYyfcpVY6aFq+j7l8\nsMcNGpDGT4nw+/vMl3QDPnqp/K+1Y8hn7vhSYLGBhh4HO5VV7zTrjGdA2tby\ns+k9yZpDaYZDCtW3xbcgNqlpLfrIgo0LDS97mFDgTUVmYQOk2FC1C2Hjwx/8\niTl8KeFEJMm8Y9XgF2+AA2IOTDh8TqTsBPz3Xs9dYTwzKvCrry0KCLIJWcLn\nwxW4nxmqyeJcm4nIOjx/V+w8V1UyUSIqOt2J95LtR6AWxfXHiS77PF+5CXow\nKnSi9lK8DssPJB/1CU+eqgu+z07HwiwsomiBkXxOR/DGY2TT7CXfLczKDMjX\newB0KDc9ugSkFvm49b3sa879WmQd4mC727ksHBbn26WOyJ7vqMUhTmnDZ/2Q\nc1QEQNHkL58aTV8NEwmuCI7kOD1P694IoTjDZRcU78KMRGNG5Sr/KfbBbi3a\nG72e3iD0YGbsWFXKv1kqc1SGO1lxuVGjFwX+tYrAXLoUopqLQ7hgTJUZrzqY\nA5bq/nDUh+qS26Qxheu8tlPhSnjmac7xp36LckJY19AhSA4O/CdWu2rnEaWS\n448wlRoXcF9GIzSVpwyxRTitYJCVslhIc8Pkj1TF8vzmDWOjsuM1JaPpYwEw\nm/3GVLus/bkJXkD1YpdII6mtF/69sCdINv7tCnPN5sdcgMYiz6MVm/nNw1k1\niQg8\r\n=PoDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/touch-target":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b2edaeead.0_1594404430193_0.3892350680896508","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/checkbox","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0492946630837973feb8b981fa668a6758c51630","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5dac1f624.0.tgz","fileCount":40,"integrity":"sha512-hHDZemWCmGVyrOJGo3GV4niMZYCJSegwY6ovoznEVkTmSbeQKfee+EbMVDrN93J7rGTGcC1hoMgGLbsC1mxxSw==","signatures":[{"sig":"MEQCIEpJIiE+GEBzQZbpbMg9gmtmSwBLgK8JBN7Y8XZga0qXAiBvzpG+9gRAo+cDty3bQpG0Sr0MlI+oItwpmiEBywRbHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0FCRA9TVsSAnZWagAA3mYP/iVQG2TVeUWRx8KnyWIr\nvPLkqkbcqWSXnETI4uDya+m6Py9FXiB8qow+VYAF1lk1ke3PEL1e+ddzUV+U\nOhI52fyL5dHhOncdoFSQ2TI0EzGcXdYP+qHM3KkFfNIsdQvcARKPgR7BN38G\nsLARaiPPM5YLl3Jjwdnu/1wAZ6YpPP643zZHBimysdXoFAJO3GPGKHt8+ntg\n2z2XAjkMLoNrnAMwyNCRDGzqd9M5/8jy54sIarzANcEckxKnuvj2UmuvFRUl\nP5U0xW2stUy8uDAHzytbAPwix0kpl9/ApERoKdtgkqLviVkAbWX5ZJ55n+hM\nMbMntpYEWXOakRhwIjirShMCUzJ+1TQtdvECKJbnnj6e4znwXH17kc17byNU\nWaqy9x/pOatCi0nOQ3830Qij9dokmhFA3owkZYahOQY35ih6aC44ZHfuRbBJ\nH1imqnP1Da2u4RjtMGpL84Fu98K9tQ09YiWo8rSxcnZUVBDqTPMnMSPza+NW\nKfJdFJYq59pbRidSaNljnU06buBkDQ6udioItOcIZJ93XaeuQ5L1G/L3rgIP\nqJFSdXQ6SgTk4oc+pXVLwGlVEl/YfnwRtMmgAALXqhlnUpueMMwcgVVXSZrx\n4CP1/CD1aXZej4wMyL6M+fs6B3thoRbVXbOLZwGNsCftejWlFu0LATolTGDl\nPsVp\r\n=ilNV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/touch-target":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5dac1f624.0_1594658053357_0.7858666965327437","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/checkbox","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.4497acef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53d9190f5b082e3933e4abafe56d20bddbf296a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.4497acef8.0.tgz","fileCount":40,"integrity":"sha512-SYSZaJ3gWjoh7dE1RyHFrJrH0GbX494sZ/gLTJ+WZETs85xq7mDEnWMb+rsYqmeQJC8lShPqidCDMHthxKG8Mg==","signatures":[{"sig":"MEYCIQC8kGgn1CJulj/1LDWnvV5/bavXQoq47WqwUnBIlPnobwIhANDjopfAm2l5m68IICha3Avd9gQ3riR69hoDyp9MLJ/X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8UCRA9TVsSAnZWagAATCgP/jLHzZGnJKCQ+emSc0FE\nxrkZ2QzmCFt+kvLq6uqv95mlYZfcq37kQRa6UfFuoqJmrL+Ma7IUXyTxTguZ\nSNyr6ZwVEUEl0GxeySQGibV2lAwg41erXZ60V5Q1IsWx4L8NCOTkBHwJqlAW\n+aigqXkGkB9fgQM3pQdt3SwOOA0AbkRAUT0pywelaZJKjITQMZZtXCYArsYt\na72tF1lV0CkY8/U78nBXWydGzUO2AghStPGS2qJN9WJajuMrODmk9vy3MZRa\nRQjRuN/uQnHkYS8uNW/iPBdzglF3Oc8lLVI9dk6uab+yl90bMY8xX3jTr+Qf\nwNIh4bsOhL6HwsY+8zT6dmxWZH1aqVe1gywu3xX8rpXR7jV2azwWsJO3sv9p\nDzKuNVt98X6mfjdB02HF7lycQB5i1ihDq5OJWdi9Qn/bKNtFaZ749NBcVx6R\nzlUAKZyIw7MKoIkjghP7uWcUm5QVXY0SI215TuXvnUq1UZFtaZ4V/kebcyEU\nV09ZHjXUCvdLmE/vvOv1rUXC9ydzyBx5WnzjL6rbJMXH0CH8Ne5T0e9Z3iry\nlG00zgfmq8sI2YBDSQI6pLBdYPyHvUtjJ9e6W/CL7LVIWRb22KbwY2CbCbMi\nePhVMKXIIkWFLlmyq+/NfoLw8ruWL0s+vBPrxqRiS4z7YtUnXJILvGyHKhON\nlzf0\r\n=t0xI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/touch-target":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.4497acef8.0_1594736404133_0.19940049941311022","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/checkbox","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"124e9f494235b26c7bf900b7b195d4b30b248f26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e6e23019d.0.tgz","fileCount":40,"integrity":"sha512-verVkE03XcYhHembgo92TMKwQHPrRQ2SziLrqy5kEG7cxu2V/dImDmNACG+37zKXo7DEXKAbWxEG5/Zjv8iMAA==","signatures":[{"sig":"MEYCIQCAarqy1/ujwGMZQtoQRatE8xcDiQWdCAMBG0yvlGW3OAIhAI2j79xRLo8KrwqzhegzQmmWikkBKR1H5VpXcoOKp7MY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhEwCRA9TVsSAnZWagAAYusP/03iuEBR4AqsnQT8GbBy\njdDdfZVizDkMx0gDvGddjxb8COVs2UNHur+KAqlPY+uDhirMxXR01vXEN1nu\nH1+50A5zmz8s1GsPvNsCk9BXd7XZpf2DycgC2vi40kp4oiVrRMgDLz338v5Z\nnf9zXD07slHcJWnKjipP1aPRq9CTYNTmOxwXK7qnuc3Zv0juq8sJPlFumPL8\nfjyiwwG7zAPEVOvODt8dWN+AZ1X2Mnq4m3jGcqR0E2z8PSFFftPWjYDP0LOH\nzV8E8EjiW0aolSfKb/73mPBk0QF9J53L/s2n0zJ5O8OI6NGQAUSSfYrlVujZ\nBjcXT8eKMMFXdDYUTRYHfpyWtnjT1k7yLwPyufqMtlZfv9IdligcUOU6EE3u\ny5QbxvvX672i/Vlb6xTth/2WSR0+B3Z7ZlMvB5mF+doEWpJZ7xrSPZVuDPTe\nXzooTFVA0fiUChgBN0cF3H8qo3Bz20rvqxhu+V9e/V4KMg9ifn61US4ndVuC\nmvnGHdbflYYH136gS6HfHEutQfMfzKouiVJVW4Lzr84Q0ZHflHf9lCv6wjj+\nx7INAwbKEeLK2K2ZIkWuw6U04AI4f0iVEnXBJ+2gqadpDOREZJLAUiv2NPTN\n8TjRrwv35+iuPYdKR9brhyRxhKU/lkFjQj4DzUYXyVJ5fAExwBKQF42F9PWM\nPOzq\r\n=nCUJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/touch-target":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e6e23019d.0_1594757424206_0.9929307838625308","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/checkbox","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ae534d510b6cb2aa8b6c93b0a05d01a145d5011","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d548d7a92.0.tgz","fileCount":40,"integrity":"sha512-4jxTSTgN7y79H9lK2IRsZigfOTOUJdzvDv2bbBvj2ynhNnmC0GMsqWiriKQLWbC//RBRo0DztMV0d5MLwan5hg==","signatures":[{"sig":"MEQCIA/pqdObw3J5j7ceydcAUM57pYRTgzs6WmuvTSq8HqKOAiByAUJT5TaF8WbGzfpasvwGqI0I/uE13TdjMuq9ZGHgIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/aCRA9TVsSAnZWagAAUt8QAJEAgz21aNX9vsw+9u4c\nUk6smGqWI8KuxBWfGYcZtrIRd5njK7ovTWRM4DVUJzL3xSEze238TMXP1RA4\n57dvImMv6VlHE2FBJT/+Lgz6AcedEa0zCk5Uk6v8K6zryn3m496dMtqQE53A\nMDPMelLzPvCAIqxtf8BS/vaVurR01E6J08IbZlCjARelVAVis/Xwy5FzjUN5\nocE8lR3hr1uuaAiSadHn5yhw2xYDQN1pF9AhV4JdOsM1znKnAFV/5zDZnfhk\nJTvCqK8jN5oyZNcCmMvz9usfzu1rdHBHQxbgPbZ0ZI29lhXDVjqaTuTSuvrZ\ney4nWuWj5yO0xxSrbSVzA+gcsOq9bWG9p9LxgXNo/h8yKcc+gM3dKubpBwCe\nZsb+8rGtQYHhC+rytCx60R4Uw4WUQlLSb1xix7gFVxXvx9GiWQbxbq1Mp27Q\nAW1XiMhWQQNOLwL7smN0LADInZZORjJ1BYodL4aPRcjoMT+M3SAAmvKk8p6c\ni/RH86J7ALskmYgAyeRJAhL0WmcnYaTJdQkGjeINpuheDQoFNfkeFDNeVQAT\np/J8PuN2cKvS49hy5CjQXawrOu8a4VLLwo7PiHd7zuuUFTwnH+TtTkgqocxY\nPIiNCZF5wIuP4RlM+pH2PZIzK4oxBRQX4v+cNoGb1INX8OP7cTdaiWocagk9\nmgb4\r\n=r4ga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/touch-target":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d548d7a92.0_1594761178045_0.6918728659846112","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/checkbox","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed7b131f9f9a35a9b00a06b9a157010ac2588812","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.58ce529cc.0.tgz","fileCount":40,"integrity":"sha512-qEB1slxKjwZMLGx3x3A40bQyDvqtQDSFcPHC33yMV8AcLx/iA9nIJQrSo6Nocwr3w4439aUL3EGNB/Q08m9Mcg==","signatures":[{"sig":"MEUCIHBEnYpDOcxrvY8aXZ5uh7RdMrbHttTH+aQt0LgC5jy+AiEA3+PtfAcb4t3P5lkHA2ZEEB6N/q0QD/eb5p9Cwbl++xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBRCRA9TVsSAnZWagAA6IkP/jOQAcQjIEtTO6e0b8Tl\n4WLG3u5JjTJV/YSP73pQDVB2dXipdrH8ESfULD6vyo91R8MzevVjAQbxUjHw\noN7PwnyjNWJ9bO7L4ccjFbsXwZgNAGb93eaZ4hubLSBWT3+3jpxWTNyL+YQf\nldEtuFqmJPIGbYOP5ncQMYqph6+pTdk82F4bnA6kUAWLVU2qSknzGSd4XCnQ\nmO85JtRZNRZ8XIHhEawpVVuMhNOVIjuCr2en+NWFY64TmwwxM5vU4r+NV2u4\n4j6o/qtQ/ntSH4T+AzJvpJ+1ePpY2IIDPxldYgRsrxWguZ+cskQrAzY7irbx\n5Acx8E//ChOL9M8TOzVgt/Io/mBIuR+ALxQwln31/M1FadZ/yRGELKeYZ9I3\n5K/OP8zCb2aW07zHxFxPpEqwNAPnY8hUK6RQrCYIP/+TAtB/ifcnWFtPM6yq\n3A35r6FxLlnQMWRb/hxbjcY3peMrjI2nEslp51beVWbmgY7aAZK9NkI1YVC7\nEhO9sNu2i6ZdDLSFJlkcRl8XqSR5k1Qa3CixN6lziNET9WPGGJLO+C5lqlVu\nQYg3vpt80gwHobogvq9INKIiRwuggGDefE6td1mxSCE7v82JKLqU9eEpZFid\nbakkjdYFIVexNCnGR1na4tbafU5D+6kgDwj5zqhUObOAfpvhS0+vJjQUNEvT\nSQ9e\r\n=/18T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/touch-target":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.58ce529cc.0_1594761297213_0.3599951536652013","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/checkbox","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eabd16a725bcc291778845eaf226dff2c91a041","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a0f1202dc.0.tgz","fileCount":40,"integrity":"sha512-AWU6tD3eBt2JgpDzAwVWa0+ixrXg8FGI8HmgyJvzuYAQ+o32pGw/W4lsDqmFC3JRMpawZdD5jEOJhxvLiNFqAg==","signatures":[{"sig":"MEQCIAHe9V+w/yrzqzeWv9BBSBVBtQL0ZC7uv7cl5tVdoqPKAiBbqTd8t8CR0vfsVPTpUEaavQmIGVD8mOXznQMcPm5H1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTVCRA9TVsSAnZWagAAkGUP/is8/eQKW6BWnNqbwyUf\nR6r//+V5duBzhGZU0bKuff++ZKwCsZZqYYbf3geFpOPZKAMIwhZE8V8in+AE\nkc8RsKJ3xYgTErq+ug149aOqZhtaWU4chgQug+B9rMV2aRpj/PdD0U50vc6h\nXK8JL1FRy3qQFvy/hYn+6WuHYVxWBqejhUKJa5ZIKk+mw5zkdoB9o20gt25Z\nnC4qkVvG7ewy7j4DDFNA9Zo1wvN/zOYKCHaB4uYl3FuGv9JIN1EsOeVRsrnu\nZ+zvYzHwLWcsmrrTGnAXM0m0IoKwzmd//I23ADt+bShA1v3U1x1oy7R3ULHc\nKoTSBIO/pMrxHYUUFTA+0+ly0WyOlq9q3+L6/rLoqFNIP+NARE7leMbF2pC8\nVkHVlkatMoV0oPdzQN1lpVbx+cyBf8fNj3BR39B0PEerxf2eoMywYzlbHGla\ncGTKucSStW7BRLJe5jMcrmRLYN73JbFWa+QJcekWkrybrMddwx1sNRTJCCx2\n1ZpCFUuuKgJDpkNpuU1au6e9XThezFwi6JrLzGDdRn21ijAm7y4jOLLQjQ+/\n0jWga16ebyyyD0ESe3VNe4DKEH0PdT1AJ9OwgXtpxyOIUAh1ttP0ATGqL2J7\n3eJjHhRMZ7GCHeHnllR16kLm5990VSPnajgRu600xReoXVrK+2uMLcajsclU\nuf3t\r\n=V8Gl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/touch-target":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a0f1202dc.0_1594762453302_0.8515523503476166","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/checkbox","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c10f54754606b1f433704da7e59e677698b99fa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ad4df58c1.0.tgz","fileCount":40,"integrity":"sha512-IC19BXdrS/nLXjnif+avdlKnOn0Bt+IqSDMDVxEJygvY6aHjS/sLpRL+WFD06tUIAi2WI/3nOnbaH74B6B+YMw==","signatures":[{"sig":"MEYCIQD351OUJmSOOMerP92UaTBixfq/MnL4O+/bN76LpzFGZAIhALudX40Iz9qPgPDFOi/+cM1GNEZkULMzdP5ZVw8tWaaX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkrCRA9TVsSAnZWagAA9Z4P/AjNTZnqqguLlhOPVm44\nwU4L27h+Wrn7M0M5igXNpTAWL7q25FkJfb0jthCdkjbkJfO3uVUBxJCNQX3B\nI+FgimcuoHR1xjHMdtvZV3Oov+Mh5OIy1E+EdsE1lzeWi5zKhXeLxMUfuw9V\nCRM6wztDpY5Wrder+KRxJcdtCjnpbnLrdVnWBXOXa5QZPLsvC2dvm+ACHGQ0\nyKmJ7Y1HOgIEJexIIpXU/GpJoyAhgzkUkEEtuht3UTjuiEDCSAfARUo75NJC\nrH/3F9dMJF5oCgtK0mYjG8g9EevzH6TqL2sINo4liQzNm4CTcOLh/qfxE1iC\n8FLAmEaZWX3TUiZxSAzj/HPwnQDEuwE9aS/FAIU3fCYLAwRVAyveDmjinwLo\nz+e8XM6FCSEAzFSi/mLbnTiTc3UehzAjXVCNwtThPHFabXvKkoJebdT5bGaR\nS6ifbv2DMaMU3Rz1NbekyPV/VY+nQFSnL4EHojFHhBALZmyhsLk9CLKwQKph\nOkLK9KONBVYwHFGtqczyuKEWqJey9RnM9zjoyQ5EaK4yMgxS1yF9UmE9sh1r\ncb0vW6rcijHyYdP1MaZmC8kwlsVvKwd8vVhnwoxRDqjQOdxhfK32ivXOg1v7\nzWRpDPXKCXXPVtJnp20kWLPrih75oa3ZRKMRtDWeRaSm6Pl/brEY2neRyxGI\n2hJA\r\n=vUOg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/touch-target":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ad4df58c1.0_1594771754711_0.2849418540180455","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/checkbox","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.01db89053.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ddaca6718e99da1c0487fddb7bc6cb5e7a8549a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.01db89053.0.tgz","fileCount":40,"integrity":"sha512-yEgqTZ3FsRBdGW7Y3lpuSK2erD6VHCBcvWwpkGKQOTfKIy6locF2rFuL+4xs0kUPXS5IU9DVHtn5jdE7GO1p5g==","signatures":[{"sig":"MEQCIDZy9ynNWcS43QX0PS8SV3BVaFlJ1o/ydzenbKL42+eBAiB+oZBLkiVNM3MCWJ/+HCN1XYC/1EhohVBpIIBOY3vSIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKyCRA9TVsSAnZWagAADIAP/1MQfw/lOX37Mo/P4VW7\n83sJCvTG3a6ZONp/gy9rkfYAFm0NGgku6Vy/qogvnRwK2AuS0oxwCjqz951m\n76u4PFh4Ep0xQtQycbK5WFPj1RULVSn7Bcn6DE7/iXQExYP9uhlj+UtDLyWY\nYZnN4xPvoEZ90NAU4wbczEtnlTg4l6XVYobJm+w2bnO5oSYA+T3VeUfB4gEo\nc5s9EzjnsJhWX95tPyoKCXOK2jnaXZ1ywT4oM4cBfKk9zQYlDwmZpZp1js+U\nq4ceWgzOoj+fz5+IiIjYmkIICeL1OaftGdxbUqradyMPP9pkArhcG5S2rR4X\nLjRzuRNQb76MQtMjCqX9NOOS9WoeLUdxo5O6onSkQwlpAxnm3mb1VIxD82RN\nThT0/8iahSyWsCYvuXEU/SAsN4HrZXmrgHFMVYmEHB08G1IobxMNX/UJsDdT\n0mlJT+6wdyoaUPvuHG0A5IxqCIMYwERvVcuOrvEDDF+89RxSfdlJElHnpZtM\nOoxWhxBmmn7Ril3S5f2ekQHVq6dIQSTHvEip++vVKDUF5yAkAXKAyZ5IEl5+\n3YS3orW5fJ8FjOgyDzsFmb+DTOUiB+L84pCVLFcrCslB5LERJVHFH6ydLnSO\n8u8z9pbZF3U8x1ROzC0/OmUo7ZjkDtlYBgKSETE2nrwLyvwsUy/HjbsaOwn/\naNO8\r\n=il7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/touch-target":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.01db89053.0_1594917553804_0.9481859315643497","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/checkbox","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"531ce35251c89d3f984bbd108e6769128ac9879f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":40,"integrity":"sha512-eplfzw75TtJkcZ4LnEIRZd7rZFBSlrhA4khPaHfM3R0zsukBVjCIsULNWihi23tz8mdjHOT8r3XJiM+kpc9rsw==","signatures":[{"sig":"MEUCIQCU2XIlytjiL9G4elVo/o6HUVDxwdEHZcgG9AzdNMS78AIgd/JKfQ6+iKW8iTX1slXmu7S8Z3b5/Ir6CWFTW/etWpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5dCRA9TVsSAnZWagAAyxYP/3H35bQc4TmOC+TFs3qv\njWP9BG9LdVPbY7ES4jVzcpHlrvbxcbYWyftUaq0HW85l1tke5HlkmVWW1f5A\nrNMxjgGTI8FzxKhYIqEuFclqXUqPxk6T/zhgOtPxxzriToi3oUqACuhX7WUG\n1/o330afVsofmMlAl7EtNa4qedJPavSqPX47GJd2Rd05EuaK1CPOp4+vkkk0\nVuGl4TEeej/VmOHpnyNX7fvQeLwBytBb06+t79cAC+6FGEhsnmbLu2vb0DKq\nnPhuXa+iama+mUBqkEEFfUbifmgTHOYG/UACcSRn3iFw1P6mk7VOclDamzuE\nvWHNQ9ToWkyQnwHBwMFvufTeGPaP5qrx5fGufYVbgpFp8SMVC8Rx9OMj/v0O\nT6rcnD4Q1kGsG3N43tp3cel7pBNTmYcFyAZUSZGK6ScJUa4qmNqX4fh6VGsN\nnhesVPvwIsG5a0K/LeaeXJ39vTLKxS32E20YF03ufiEQRdVJQCD10I0ijrem\nN6UDGrLzz0qgxTFD9o13+KSZZfpQxtjvMFtsQNbKuRdzoBAMx2xhwGHy9z6R\nZvj5RnHayxugbXiqotO6ka6FFwnBQNxmxXrl4yWo0G3Z15XK4QE1UQlnfr4h\npvf/uXYAsC8t07Gv77sBx5yXCVAsMvRrmg7sAXylK+Cq4MtlSnTbiFWlSEAa\n0Ip4\r\n=1vtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/touch-target":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fb5a4cdeb.0_1595272796792_0.4115499809060472","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/checkbox","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5496314599a9c372c53d828e9e11757fd6d25d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.8df0f517c.0.tgz","fileCount":40,"integrity":"sha512-wMo/eW6O9phOjA07uuqyoBKQyiAv7SvnWv6lB1Pg+DeEKPbDDQUFgc7KocWQrirMjJqUHGNTva6Ywz63J3oXvw==","signatures":[{"sig":"MEYCIQC7CAcPoiynFyyi9kTJJSrF2Cyr6mo22whWtYRnamTe2wIhAI9LLSKTDhGEzvIpfuR6Y8wrp7j/dfke8lkd3q5fgs6l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7zCRA9TVsSAnZWagAAH6kP/ikBVUY+qagT/sPyAa3Z\n0+dljYHUUcjgivJR12uSYcLOIiclgyZapmbUw7ikn8/+XW96Jcrs+rxS84Lj\nszY8Swnsx40d8MUwXR7WchOKdeKlbY/9f7QMj4rnW5oi0AkslBXiTvwUWYS1\nK2GNPgrwM5DRbAPF6R/U+cb+WrLBa6io9vMQkLmAXXwPxEFJWzQsnZ0/Rq2q\n80qwzV5EOuSUS1mjXaUBjlSeTRtA49dSQ75vb6y7q1tpaqXHmhIIpYX1GrdT\nZqLbINQWg4MkWHyYExg1ah8vNn5oRLx/xGrS+RUsc7/k/884/waUrG1UUtsn\nvvpxmUKa617Ib6seCsZyjJL6LGfbZ0T7juCZFf+7P/2z8g0dkQmfWBgYnWTI\nKQ4JsHVM+TVe5+O2gwbfTvfKJis7l5xWMK2y4TUW6VmU3gIZ4WeGZBiSQqcT\nJOzUupuKm9zNgF0GT7EHYHOh+ODn4Z/lQVnkh1Q7QQn0ImhHDFpOaxUEcDP4\nTDrv8UbC72NJezzl1lMF75XDcdd9blkThFlCuyD2BBpRItyR3T80l9h7maAq\nCtpN0Gg4Ppgdd8fOru0Y32qS7IpwbHiAsW+tXIzUNPZwtAQSLITWiVJpvFB6\n0pnVgc4CueYeLe/q+Y2Gy5phyG16JmnkEmhPkCyxffGZB88aLrBMlu/yB7yl\nRJaE\r\n=JGfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/touch-target":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.8df0f517c.0_1595289331438_0.8813044932939784","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/checkbox","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"326b8042735ab7f79fef11754466fbcf21e71e40","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":40,"integrity":"sha512-wdlWIOhk5U+/ICN5YZJG4JBgOYBDdn3gahkNoTOJqM+ib1HYilLujuWfC0AdMH08bqPMXWvloTS8923DS77+AQ==","signatures":[{"sig":"MEUCIQDS0nTH4T99pdiwyOR6ZF0rf4vEL3rU6NJijY9Mx8b97gIgcVElgpbPib+E47shxN74EQA2VxmhvMgqp7AOAJsYPLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFju/CRA9TVsSAnZWagAAr9sP/2p9zxJIG8EVlMXh5Bia\nvwmEfHYjigrlgc8upBv19eVi/68fL5/Ooos093tjApM+HzVYFtgKyPSgdCob\nVrCC3VuAklvHwqAlMz++BmmPQUt1v99Y62cMS9RK9rn6LSogEbt8Yl8RNw7/\nf7VLH5bO8TIWZSvXkCWWn4WHXSW9w45ZWlEWy2LB9sfk2VrDhuATfwQ3Dc7V\nnmdmF/jT6yO6RGwYurtHixApNPLX984c/m/8j2SpW0Cj1M9QSChcRcxBYUNR\nyWf34kcnohYmGvOFeHZ0rlya5D/GR4WmuxEx7C7Iloz3v1ABjzp3eHlbzKOy\na7UoL5ArljIqf85QWy8VMkCgDmA+2Qy4GU3ckA8530Qyekar8fW7mIg+xAg1\nI2pCd8GYH8XXIvgRMqvu/L0l6rRNt8dQ8vpfFMu/6CTY8O1Hes8zgws3FN0X\nhhY/OlYZN6aa51oFaMFWDlpss/dvwq2y6GM2jMG42Ki3v0KmhVXIqnuvV4DT\nFq1fKG8KAZk5XhWItCBIygn7X9g10vN0KuIVuJAuHZotu1IMI8467l3Cgt07\n3dVd4BgP8R2gCgLi+0Rm5ZXfdt6cEijHV3dRNgGqI9dCPsqx67JIN7Lt5xu2\nYgshCSmjcikc+LmQvc1tRednS1jomXyVeCRu4WotXKAVeKgWpw692wfMXCvy\nfVPm\r\n=oKQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/touch-target":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.abcdbcfeb.0_1595292606898_0.6629214808630193","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/checkbox","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55de64b496ea8c0eb06ad65644d77e70a301b8b1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.7bd5075de.0.tgz","fileCount":40,"integrity":"sha512-IJCI9Y2/W2JgWv2VTQSjA5Vb2BgA9amIiloaNuPySeEdSpFyYQK7VNpPwmr3BnrRtldatlAexKSGf0FeQYqLUw==","signatures":[{"sig":"MEYCIQDZgtsgA81mhxr9M6lH0wt8H8vp9+VYlpofC7tDMywcEgIhAIOykLnyQnTjnYAcHH61HyMUPxdwbOaZNpqFV23gktH7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgoCRA9TVsSAnZWagAA9OEP/jss7z8YQbwd6+N/+TGt\nSN+gDRsgQKPMJ0tvYl93bB6TpnCXbxwWIz54yMqtY3G2MhbHCt/4Pd1MFOK2\nHB09oO1H0xiaF60tvi4JXA7o0oiaH4caqFip3IF6KD/Z3Zzg5wgJ3RTE7qsO\n8oIyzvIEdGpwUOuELMvT8NjiPHmoT319hECdNajTuVZArS5yn1GfqPNOz6PM\nR/OT16sGckZZO57zRNiwn6qwCk6CGqXPcIUhXw7G/dwOK179/62LTpx6sdxt\n9PkCYE8xNJBLbRnlI/UbSFSrUmpfwgdQcLyqB4w8c7faReXFXuD2cWR+SJpt\nsA4Z0FUR3R4jCX403qxtaxYj5mKZR5/aqE6w2WKURc6jUio7370sUq68yvPX\nV+fTGADPYg5gk1vOyHX9MI345Kxmg7YjN8eXZekRkDLk+7pudvz1J0uNDFDW\njMD/NGdBfDkVcV1DZRtotc7jNQceKOM/vwrA6uj3hex97ihzD9MJnWvPtmLz\nYCJ9qjQymBc9iyvsZmWYq4nGdhEmrDzAf/kcgTamHsToSv/lrKuFA/S9DxbI\n6nFYcAtzXcWBO54ivjuj6xyU6/nemWV5R4AsXtb1PeyZUTGNGf9+m+1CxnYV\nYQC35r/AqttPp/zKYuOCeyIYG0Zgn+Xk71hxHvwpXmFudMMnCna2PTaf/f2i\nqgl1\r\n=/fNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/touch-target":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.7bd5075de.0_1595357223941_0.8271696140754385","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/checkbox","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.405a29a20.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ce2b1d36b7c71dc7eabccba6d7dd642ff61253","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.405a29a20.0.tgz","fileCount":40,"integrity":"sha512-H9qufhSX6IoxEYQRpvO1JiOw/T2M4iHpFT4jOp5+PJdEFzL7Y3w0eB7qB+xmNo316XUjgvMIXsVPQjEYmQuoXw==","signatures":[{"sig":"MEQCIByyhY0lmR7zc4MgnR2YJtCuheqjAa5vBBw0MQtlGv1gAiAQmk1zlXeMhX/lMS+/thWgdMWTVX+PcF52yyIwzEZfeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxNCRA9TVsSAnZWagAAOoEQAJMEOMjW8jwQA1MNJxub\nHrZw0oyCgZ7Z4thQoVlpKABTMUYgJ6XKLOpe79GwYoSGGxMh1Rmqyg/qOUrE\nMB2pC+E9RMW9IWAykuqJRjZvrO4tPGhDadMnxq3f3j7/+87+33Ledw+OH5f7\n+ohiVgel9gN09TE2AWtnOxF31LVS3eWsRkgp8KdwxNPj+YLhrJo9UqAwfPHh\nq23WzkWLPTsc7MzhazlXgVNs/50rmajzA6teoGbybhFdCFyiHRFfzwcQTp7k\nhv3IiQPfkxbFtUXBSZJTn9ADe2Tn0S7c9hTD7go3pGCUSL9Vht2Lgdp4vJAM\niZK3aCdlmCRbJnWmYQ+i+C5xm7ZFDlZkfqaY8XHllKyKoy7gFbHMDQoKQyel\nkusQfM+vFBEekqqTq9hxBPlgdxfMkwcQrLBeYkcVKOBZwVg1Ds+x8Un3+JNp\nVEC26TfVSJrTqiwuD1ytWFPFvn6H+6d8LXMFTZoErZqsjbyBrhu4zN9j+CUA\neUyAwaTuXA52JQCtkkKTgCWRWMKLp8sWTev5U2rVW5g0/5IDWxgCanpnji5a\nZIKUiwoFQfcncyMepJNhrDaYApsDpXy2Blfgua9lApLzhJWgl35iG/9v3+eY\noy6cdFvoN/+K1ME21PcIo+Wca3Uhru8DVwYdklLoLeYJJSxyxegkv6maVBTe\n3x2y\r\n=Hbn1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/touch-target":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.405a29a20.0_1595456588704_0.022429091982174132","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/checkbox","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a60799419e6989a7124ae716733a2b54b64fb1f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.f3693ac4c.0.tgz","fileCount":40,"integrity":"sha512-HJFJ7ndhn0CXyNEhzcMvbs7BaXHPX2e2Az9ZQdBP8sV75ubAbr4e/CGz/BSuP7rXbEskr446/fzo7+L0UyxsOw==","signatures":[{"sig":"MEQCIANvD4oLkMx1pcCj25cJSbY4nF36rpvOtOkEjZh3oGS9AiB3GDjm+EP5YwnDdrZi4rmyP0AlHl8veG6T0C+FytvFcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":655968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7HCRA9TVsSAnZWagAAYnUP+weCfnllt0tTqS3+Lxc1\n+cx/uCEANeWcYP0avfHRdmZQwoQvY6Q+jPIe7/ISR4cp9wvyQeEA6hWAoyzR\n3QMSx/SNJu/SK4anf6GaVTQ+p8/KC18o4Kp6as+MhTGDgr79IaKZH6WwRqZD\nFXs7WW3QpOyW+yN4SVBBCynAdJRGGrInNYaERxk0lHC2o1dwJNzN0E9A7Vnj\nnDptDk/L/qlnkYQPlaP1R18MAFjaEQ98E1bIO34suA6sNv8bvZASCK9WShcJ\nZ+23ilZMObEHR8Hz4GaRCxbX1y9yil99dVgRw89K9CyhGTfYk+K+9hhsMR4+\nymatNfzmFSLNPsuFB5Q6lsUjUoRuZ16qjzenJXOGKu4DEl3JOW3bwFhzEl3G\nSjdHcJW5+5jM1QtDwzbUmZ5jjkVrYpTohzC874gYSESmcnKgWZ2VsfFLSIB4\n0Ari1H8VrhpJPEH4gU5OvTihzvdWlCqPa3AKgMye0OJbcXr+T0zmd23qNItv\nK6o6KX7XujVuNLtMWlSCXvnaT5KJ30KDqhd1F1wYSz3BuKwhcdPbUuIMBBOh\nmfmCCUcPna+2mx3wfY0BpYgck727NVZmddJ/UXI1EMTCMT+5Ovlj6wnw7zW7\nqiAVVes27gIMRgAM6SNYC32HoYz236VRPtj4tQt+91QlzSYg1hVk1RSoh+g1\nJmwS\r\n=zY3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/touch-target":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.f3693ac4c.0_1595457223037_0.9429062590965755","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/checkbox","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.12a109680.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4fad0455706bd518dcaeca31eede857a3fcd22a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.12a109680.0.tgz","fileCount":40,"integrity":"sha512-VZEduWUDIKV60hDwGtiBCHcESxoIoSq2zDEsqesQa6tHWEZhRL3OlkRPsDfUdIajFIPGrMQHQOO2voBkT1IFvg==","signatures":[{"sig":"MEUCIHjT5veflJJX2ruQCOK/WcrFloJsuAeiOOM5bJjFciD8AiEApDX2vg3KY/ynbYj9vDbMhkS2yrhs5Lf1CmAX3zIi5vo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":655968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMW9CRA9TVsSAnZWagAAV3wP/1krtbDKeMLkX8ij4O3E\npxYlStgcFId22loFIwmXXyZ/DZim6HwiPpsQoLYSHA7f3RdLQmcD9VSkXFfz\n5KzWrGoMUR2RaHjL0ZKXRacF2gfW293Y9sNk+8LzdcfDNWBfWsmfn7P82Jw9\n0eFdldqZGfgdBqRbdQ8JXPDKyCNOv6WugQIVDqmT7loTOQg0A/Hs5kBb/eKI\nNS/4NlTi6edCsTTq/+kk/RBs91+lhn1lm7UjQe4NXLLzqMbaoLx3l2vTF2AY\nhKiYPLzkjvBu00Bc0bxPSvOKik6S5EjEPkaibVuNqocb0ufv51Vn35pxjBGS\nUSNa7QTPg2xh8WVqZTmnib0g9ygTZ/dZvwGbqIw2V0DPDGBgIwYAz7DL+h+p\nP/O6p7xm5f1m8/plS1XIfx/DwkHA8x/ws2pbPfv8vaRCyHzQtYd62YDgr3zi\nyuwPfa64adoqyOaxhXLD6Hpb1DfxoLPNLGBcDycu7jA9SC7kNSW2EO8vtfk1\nqG/3YO9PC6EkcQtLZkLGm75bpweSrs4KI6duvDeJFMC4COyXXiI8b4vTyS5c\nmO8nNqdzk15QNaEWC5Ho/2uxUKsCjk//C23KWjuksr/SW5orfjuWJXniuKym\nGMXsY30gHnONC/82T6TpXDPAcN4YBq5vmXsbXxc93bAkVuG4m9va1nmPjWps\nPsFG\r\n=smWb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/touch-target":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.12a109680.0_1595459005010_0.7663135145917854","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/checkbox","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc7761f48e5b28df9c7e861f905341c8ce5db0a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.bbd06696e.0.tgz","fileCount":40,"integrity":"sha512-YJPdK61be4qkxq08awEg0cOA15QJEJC46qVL3sOnMbIg1727aRLW/Q4PTwTsQbLGxg0jxQSsdbm7DI+QjsCGUg==","signatures":[{"sig":"MEUCIQCO0P1ztoVfGLQMoYV+dCUqxa1BAjKFGFy4aGKp0NUXJAIgTrq3rsk67jbw5/sBkTmWQWseV7iBM6gYLe+ybuJMmmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFRCRA9TVsSAnZWagAArPkP/RnU8Q1oNJS/VGH+muXX\nzDRVwl7wS6tmHmXqbYdFcVSCexRKlZEzVmNnFhM6zJTqg15kIMh3hqeKNiqg\n5bqYaxxyJFpVKz8FtuJ+EMHgP3Buebp7p1EyKchtgqDOvFKyyDhuONhqngCU\nJYTn7V2lSLV4wIwDRB55GDREsG5YJH6M+OyvyCZyOygCv7jLCaCZdntgSn2+\niih7eGMxjmsptT+8EP0Djti+IFQPtvOOTU5kBoI74kzkEnFNkxyyi9qFczNh\neZyLcFhfJp1YWEWb7qXtkC+6a/WT99oojumgeFWDkRQNAtE+gXCOKCoEe10N\ncK4jz0A7UXuqt8nZBHbKVnQbq95hZa5O3jIiVSIWiYwv5KOzOcEBLEYY29lE\n+aIcb0IelUVgxsANCjart+2ThfL0NnqP8NyUQmSypcggveJG4BoMOsej2wIb\nLiEOkhQ4T3iyB1ZRGkzDv0QAgUe5JdSQUdlFSDojTUagCvDDjHAVb7bn7jTN\njq2if4crwJBSd4VVQ9ktawAyCrxQQeBXH9G7PdNH3TENaUV4DIj20BXSBggG\nV7i2Wgp+4EuqzdCuGmLEqOTHd6au/tf/cXphlMQzH/SHVknpbrLCmOlAVyce\nY/f/iNst7jglMitrqEggOqoKdx5JMjdd4DE1TShZdJNUa1CzEd9wOETfwPft\nlwHm\r\n=GFEt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/touch-target":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.bbd06696e.0_1595461969171_0.021220200965629488","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/checkbox","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.4951e7651.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4c8e5ec50d8741cac0bf2f3135976e7e66017b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.4951e7651.0.tgz","fileCount":40,"integrity":"sha512-5lws5pZVL2EQEJl2nLNczulamsyxQDiMX9V8zyAXRBcEMCFMEVU6gSZRKiTKLBFjo76Wtz3Wo9N1cMm9kqyYVw==","signatures":[{"sig":"MEQCIELR9AQwFe7WNi7s07c2rqsYNQn5u/WFKBJ0cN1CzgWYAiAuttoBTN0qSE0WgoIKSh9fkiaKY941EmAIT/sPuYm35A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyuCRA9TVsSAnZWagAAQksP+gIx6s6nnElrNdmc4oqv\nObWRlbSZsP9iNFqmIXZotAD1rDO+2pRyWV6kbmYpDbIeAO60byz/VXKvUY/a\n/V+3WrLdEiyl4+6M/rA42u1JlY6xyf8Phek9hYBrm3CJaEfhB0uaTHqF3y3u\n7N+G3diRsm9DSeqD2bQh1234F4o7vT6J2n3+Z9+AWW8JLDGEYJx+4hblLnS4\n5vh1MG7c5PMx/26bAoXspn6oglAPhuZkztkJZLoykV5548BkG7HXy2IitXaR\nZYj5Pa0aP9+Ojqri7yU9pIOgmwfn4GwUzRn7k/vRKdPTUj1ur1A9GM/Dmuia\ng68FJWmixm4yEp0kNFxl7UbI/JGyegNWzag0WER0qiYl0LQWRTOppo1enCOt\nvvmBycWP78m+ubTHSMsHvtqsV3GQnW9ZH0UG3KBcFafeFZ4KK6LV/B6KcRna\nLcpgGEUf8SmK0iZm6hYjMZwYXRqCWa+9nZPieGe2BJz+3GxF7PpfiN0HqGCQ\nf8x+uB6+Sm+XJxsY7KMyd4BNWSho3EIP3w02bTFfVVdwmEzaKcxGmA/z13Hv\npZSz1uYRnP3XXwYVKGE7S1+rivFDlK6mKd7Y0vDWsYlGpx6zlX1STXuizFYi\nTyWVKup7xfXaNK9kLGfwGF/6STfQYwXUK7J5NXzM2gpDfG/eLLdo7SKpPyvK\nnC5O\r\n=Yb8f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/touch-target":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.4951e7651.0_1595468974383_0.6371584389728295","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/checkbox","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.75deebbef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9edab1201790b63b125296aa3bb725e433805a75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.75deebbef.0.tgz","fileCount":40,"integrity":"sha512-YjQBnO4hpPCF12jLu4wGH8tP5JQcnq5POYopKRAwPZSlYPzR+fNef4nuxOMUhmew6+DDjNDIzjDflAP0/+zRHQ==","signatures":[{"sig":"MEUCIQDyxOc9fR6FNypWxRie7yyfm6T4GZjRSszmqF6CxdN1SgIgcjM/i2B0Hs0ORIQPqZfDcJMhIsV06wh4/phRicb2+Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGczOCRA9TVsSAnZWagAAPzEP/1UGTx2/sb1/GQPlFq8p\nyrqwvYaydohkfuuiF59ftTjIfah17C7L5Ap/N/hrSZoJ++Y7kypwaRU1J7tp\njKp5hKCU6+jnACASWHlV5jli7zBvJL5Dpm+e4nLGBemagNiDQr//6zxyligB\no2NhEoVPEMZqky2L3t7s+PxHjwlHoJREh9qd992pQIoJUSodq3EhOsoz50CV\npHRTy6hLEOr/tzslPqu42OCc9/g9XrB4YWIcIMSa/MYQonqvTn1KA1SV7t2b\n7GBIyLCNIZIjVJer3/dnMLvFlNcE08vpAAcgZrdkAQppRG2UKE8h2+PlsaBW\nAACtiTTQlspevKyNOSx+t8nanw5NWLIVe3ngjzvKQGLXNRTXsiZ+MAC23iQq\nHDC+XdV/vc7wTxqrbOj8aWryLXu10HD0lgkY2BCDIfzfJA1sljY9OHdZGZW1\nW51RnX2YNYAVU8hSeJ0zodt6PALHzbFyLrY7G/4tvNlL5if+YN+DoedD0JN3\njHAX+FqbN8IA7NNHI1zlMqamVRjPexV/xq/SC3hz8cJBIRbxAx6/yPzJEClE\nPY3lVuWGY4oDSVs9DM4HmAIE9ArnumAND4QoXJgZXtX410S8d4CeZQ70mWyH\nlZxQKBH2HqeOnUn3vnU1s4QYHoudfdZfuNqS1gk1d+8OfKXMzmmf1BNlSoKS\naKoq\r\n=jy+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/touch-target":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.75deebbef.0_1595526349644_0.43499523571487564","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/checkbox","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc2356090a5910bb5a4dc081224db4f2b0969a7a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.95aff33ee.0.tgz","fileCount":40,"integrity":"sha512-LnhimZeONS1nTrHJU3G7eIIsCF5XNLMc4BXSWx40CJuxviAFOesxMva5Q8A0OPA7yyzQ7zV7M96uvg1cy9ydHw==","signatures":[{"sig":"MEYCIQC4XUMgc7ad6vw1O5R+9BX4hoAXV6b7izCFGq1A3sFh1QIhAMDaWSS5E2XbDThhPuqBH17v34gd4JAyfCiWL2r5l+VM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGds3CRA9TVsSAnZWagAAGdcP/j7TTd19qoOjtkvgsGQV\nouZ1vS8YuAIDJm7uMC880eVqdj3USN805KBtlDpzWEms2LgKtI2Rr0vACPEn\nWpP7Qx/bi9LE8ickEZlnpX04r1R94+gahx0OfSteKYGHQCBeWun/dSHLPFK4\nVDY1myVHgovj//TUBhDmuaRo8WTEKMe53LuDEP7CxdOxz5bWetxX32hwImiy\nqlydZEJQIk3jIJkLegIHTXJ6xSTCNTGFlKzUjlf8m22YwNhszyWsDMxbkisy\nsrx5g92DatOCwxRDwRZqC4EFh8yHrETM7+a6x1LM9HLXexEI+NUf6w7fKG4F\nb7CIFwq00fessRAOI7tdOLpxs5fZjX82J/smwAiNSAtj6yHusAqbuK+AyPB3\nU9SJMpOM0AtqpR+RFrzMkY4AqNd554v0Q3wsS8XY0WeKrPo5Gb6N7aGJVk6I\nkkT4LEt/8WAR3L2NR/nbbll13gBXL0lm5v1iE7DjcXj9otcf1XW5D16PiQFN\nlFQixcEW//3CUtifyqQl91iJYcHbeHCp66sG4UF9PhphdwPJA5TDS7DYAmtD\nBnIRgI9eoJOtv4keRBXxwnCTM17sxLxDo9L9Ea8ayaulG3BTexJzD7lZDg3R\nZGY7DUhq+zJk3oF5FY8PT8drvdHLsipfPsbZn844zUVMm4+O2HH/1ZbroC6c\nMxYf\r\n=EjTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/touch-target":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.95aff33ee.0_1595530038496_0.5145286146019248","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/checkbox","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76ddbe7971f1cc31a76e27795a1614552626c3cb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.9d9f47473.0.tgz","fileCount":40,"integrity":"sha512-F9+qH0j6x4yFSDqXOzfQkWfoWGE+CfdKVYIkCwO82tzkbkRSRgvx7nO2f7RSXzSF6VVoPzOW+NDwV8raM3tvuw==","signatures":[{"sig":"MEUCID5Cae7QWFnDN7ZwissYa1ioBQ3Wvo+eb3vI7DEZD35NAiEAuP92iMvcNKl7EU0zUuh8WzR2wOMZCyePiDSVMnxtzB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevtCRA9TVsSAnZWagAAjQ8P/R8s1/sV0AZRfa3tviD5\nJPjD5DHml88hjdoZt4FmarK66fraOUKACrDkArTwvDZwDy6MpwNahoeWJ8A7\nysJBQp8upYxsr3K0KY5v417M+8OUF9Bn1styH+UZrmNGIssB9pqK83lvbNMh\nf1JClk8WyX6woryalwzAQMZUp1btqqJ8nJk3mS/L+iyNB4DtEpVLpiFktGaS\n1qXVtXD6XSvtgRmIJtpHAppf1UWHvJ95vYFP5bJiD4lAxIBv925F+H6735Jf\nF7o1Y3+Unknqauh8e2ckgaonKS4/zVxdJz5nbkhid8EotmmCFLALe29nA9p+\nBfugCKweBDaZcqESuzYjWdl/NP4nZE4BnMgiSqxycteekvIfprGWSk7RlYrZ\ngqp9L42t89r6EaPC8YgpAsoqTbyWr/8xspr3HalhOQQ+TFKqmLLqPn+8vE1K\nTR9P9ecq4TOy7WKyq8a40CPKG+vQ+Wdf5fhaWW6gI1202+NAxcKlTZ19kPMp\nHGXoa5qeRKZxVdDohB6dEwOKrd50FI8GQCtVn0J8tGfgegLksj4kVfLERUTe\nAS5X1lSb8WCp+bsDTsy9FUssMK2bnm15OFxBw5N72B/jsd+d2CFg3Avme7Vp\nqZIPdFQzJpO3SjFJl/CXX+gbkPm25cGV0DHJcHIvogfvpoxoTcsBVPZiT5v0\nqe+d\r\n=Nyjj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/touch-target":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.9d9f47473.0_1595534317201_0.5137619525047281","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/checkbox","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc17eac06c3114ee1fa1b35737845f83413a08b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.00dfbf6be.0.tgz","fileCount":40,"integrity":"sha512-YNRvrlrXw34quLA0PPi/Qxjrrb/YUCrynXZkdvCEp0j94cUQhCLcqpUE7H6j6dQznbZOhaEczeEIX9b/9mpqwA==","signatures":[{"sig":"MEUCIDMzJekF8oty8noO8TtaRA65LsT8WY28hZih4PBJGPEIAiEA02h0J1SG7h1ajfScS6DXbM8T2k4PsR39BBEkxGKTC10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfozCRA9TVsSAnZWagAAA7UQAIic6l/HREut97aZbTHG\nck6itWXvNnP91KpJLo0lyvmzCGJ5s//TNhVFsNTXiTuar4qWEPV0VdyCNLe9\nQuwHlv4VYJfgx3eiksrfpEzjZ5BOwYHhr2w4sOXrdH1T18aZNWIpGww13p4x\nQu1pSJKp0Ipmlvnt/9AV3innp7WrjcyyDcjt9DyZ8WXkxXL2H8JwaGCNEfAu\nB6BIwxz/1oS6UWdyCRVcfWkg8N4Tb4xo8g3436Lz9RZMZOvIjXopVVZZQ9U1\nIO3qpna/khjNxUT2ipUOaoQfuTwlKVmlejEkRDceMV/CUXphWSv+XMhxLWr8\nvRxhQATkCmN670R8kiJ/C3OGybDK5MELaS7B83LcA2u6/oBN/YXS2P5jYhwW\nd7nFZ+lzw05trUHLi4K4hG8AfCi4xcaaMmeRSfrgHseAkTqXQiHMJLbp+6eN\nGW3nK8Bymm7Yj3TI39zar+zmZgJHASg3LklPlvHyE99hUyI8kRRKM37rlE87\n6cFoKakkhwl1na5Y+btJyopMrmCWPohzEmuBVkBojqcPM6wQUE3nYZ/Nr2FE\nh4kMIpmJgyuAG7aX/9TU6+HnraIS5RaJYir5nKP2CwPqs+WFW+HASrI6VQaF\nFDHK9bs1RHviUeOTzy26gUQQc+wOq9h/ulnHdmYmzkUHpGU8qRnhqWGy5wBh\nk1+6\r\n=iMsC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/touch-target":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.00dfbf6be.0_1595537971103_0.4818949656427056","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/checkbox","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"535aff86fc25f5cc88f6dbad97f0cd5ebd70df0a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b87e522d2.0.tgz","fileCount":40,"integrity":"sha512-aZ+6uygXRcF+cJxMrbMYJTQW3Eze3Zx6WpPa30e6wTFKKrlBtyZsrr0JS9T91zhLzXbS9OguAsOMuEUFB7PHfQ==","signatures":[{"sig":"MEYCIQDswVeiZIyQaxO7/74oRDjEMHU18/QWIuk5a2ofa8kWCwIhANSMsAAhmk6yWijKtSKEIVy+S0mMZGbSpx0CqWdLmB0Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/aCRA9TVsSAnZWagAA8sgP/1VCZzGGyOBkJ6zYAYY1\n6RmpiUbWmG4gcWhiaNMF/Mh00r9GNw2T/Tih8/q396EwYQRfe+KfvujEwWCj\nPZKnVGYbASnK4Oy7JmCbtNWNLpMIUfFCMqaMy+UDhhNOcuMern/A+lD96A5B\nXfS4yla5lwTvut6V+fPPYC4G06b3jmQ3XZG58hoOEQoejS/ASPOwRe1+3p/k\nDIcgJc49uDfVpC7bt5UNN6QwxiZWmqQ+se5gdC8erbIunWLHmj+D1NobxzUA\nv4vwCx0HSqEacBIJJ3D6PCuoxT8RcxkLlirXO88Mm/zqe2jZhIIlwiA3aIVC\nNHvlDoyJYw9Ut7qBmLq/XzxSjYrOqfNg4/kt3E9IaQhbcLPwaLBXkiZMnvkR\n9u5p3ENEomjr06i5b58aPILuEjcoqSZLfPwyKDyp2RAFnlSUvxBj9uH7BZN+\nqJXn9YZT44KI/USVzBgA59Qj2KcA8kw4vjksV42pcTmgvDXqUdj0c1aHw2A4\nEE+x065AgmCsxVV5uNP+xWffhSXfnArzXiKKBgDLZIkW7uSePqo40ypWlLz/\nnRrR/PdelNguJP2Sw8YFhdPg90HHm+y6ZQJzqJyAvAAwA4Oetw/IcbACWiq+\nqcY2oM1PNNRTLYAR+QsdAssqkEK+Okt8oQBe+P4nBjv6F52mu0tDjGddnRCv\nmyVa\r\n=e6Si\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/touch-target":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b87e522d2.0_1595539417517_0.07145111928386072","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/checkbox","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9b583524a12d971761a0532d3e9a4378df23c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5b3e150e5.0.tgz","fileCount":40,"integrity":"sha512-0I98wnCUgSFBKuaniXN15z1Pa2PDHm0DWObOoEoyhq+g8ZGp8yt3PkzUVMz6T4GaCdJO7zHkjphJHgl87u77Pw==","signatures":[{"sig":"MEQCIBWTo9iSLOFcLUaWAG2M3W2RAt2tRxVBpMal0JtCf+xNAiALbHydFxHBiezeHivtgpoTo8upgt7a0GDuL+PcNakMsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgpCRA9TVsSAnZWagAA+EQP/jYUNSpMfMnt6TmrAIIr\no24+2aaWo98KlNQWkJOtEkgtUAQUn/CX4nQoDf6iFh8+IWl2gF/JQYNyEwVQ\n/J0zQ54nspfplHeIY8v7RHS6eGY9je50jx36gR7sq9SO0iYRMU4d0BlqqQM3\nM9G+48QW2t4odhEu1j7243pktyfAiQmvN/4+BzLFWHB6ks8AfLsggRsjF4xB\nzoOCLvX8PqZtIoUTK9NYCXg9bAvbeDEFHiV/otYmzb7dZ6Yv8uo0OL6BgfxF\niMF3K4KbO7KW10hkughDJVnsLFz6m/pTtYOHxVkrjvHumTs26NAfRFmnXmM9\njDYtH4IJ4ciXOnRvQyMkXIjWcDDczyKF/8cp5nwY/QwTe2WdggU7no9w4d/T\nX+Dn2IWwLRCiLM749ATvQ/9X4uaVJnx2bz1VPqIjnpd/3vEykCnPfhIHfXrh\nRGjx1jiUMTKX1y3WUdQe5/piJlBukCE9E1nS6N9xdhYb5qKh3Xl+Ozy/9P1h\nFz853JpoFdwT5Ki0yqEBhguYlT6V/nSm4xdgCzhtsqFbQJmieHbRY8NNht73\nrtCdmyYDYrd+nQdBdX7kuxs86gHvBG1xD7YWerYdngdMBi5TEKqbTcW3zJzv\nLsd0qnhE8DXFvs5XPzKpCJ65+32vzFSAg8BBMrlOUddfrUSpYZiU1IvNmZPj\nfXKl\r\n=wI+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/touch-target":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5b3e150e5.0_1595553832641_0.1111352436464399","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/checkbox","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ca279272239b597dcdc48ae170263d8f2d9a160","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.f0ae11786.0.tgz","fileCount":40,"integrity":"sha512-8RnEZeO1WtswD9KvHBDozq/miHkZeQr6QbUPGZa+6wOTPK4uh8GDOOdBFapLIGDnUsz2vQw+MwGDJMFszT5btg==","signatures":[{"sig":"MEUCIAuz8K1HjcJ1qRxyUJL4/rZB5s64IN+3i8ImkTkjFL3nAiEAh7Rtp/q4og8oJEYyEnQxB0zx6LM/K74W7RyYHTanIHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzHCRA9TVsSAnZWagAAs/kP/iQfuE9uZC67siRFJYc6\n2LDR53mi5UCZQOfjxI6Qdz39+dMOF+D853NNsSqHdRwml5DKPl+OwEsp2IdF\n39Mief82VdwOkQFvd4lCHCVpIwiSWU6tKob2Z3+Rc+dT/3gO+JYOhyxVG69z\nLul3jC6jblvbmClA0iTDc5qv0wQn2VmgzUzjDMq3K7I56eBvIXiNEkd4PuAM\nzaHOUUM/E5sWVgE2YggWfNWUnmRvSiMZMkYI3P5GehRLeYe2Cj+ARCplVLAF\nxWjJbKl88XFEg7qqjGc00wqzdQ7VX8yPELoT9qtL4LjNMqsqEpu8HWskOg9b\nZhAaLsg7FR/ZKTnAEBR6MD9dF7DfEWRC3tSHXjHtf6FAGtyfa5U5rU/Yhyl4\nsgSYjDLlw7xqcjLVJbJlFUnNhdqxB6nUHJzsT5x5q+6VeNRYPnIaTfHl4Cu/\nSD/WCs8W6/1Jm2G/y4wuedgjPQUIF7MoLJanTBXaNo3qwEw8el+SEgGbEUYo\n0eZietPeZA2yvKNUULKXjN6xt4dkIwga44RQVlEt18IHaDaM6SYLx+q7Mqex\ncdJiuWV6/QxkS5WP1V4R6sfIZHOOxZQnkn5Xx7VF5piDDnnelNE0h4KUyPe5\nmGo+uOEpVmAhLjpPTsSsh6JRT6UNkthe4ChTn/pZhQIiI/jXTaPx5ag6mQsI\nc+xd\r\n=mn77\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/touch-target":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.f0ae11786.0_1595555014285_0.9172795090643571","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/checkbox","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12cb6a2a3197f291a7eefb6e5061a6104b1e5a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":40,"integrity":"sha512-iS8pHUIcUcxUS/X+slXrR2iiUkHrmCKFJ1sFpen5AgzfqAfqV5+1wA3TotELg8ZU09PZtTw2Eo3aN3EUi3RC4Q==","signatures":[{"sig":"MEUCIAKhR03kx8fDZb54clXBki/kJGfZSmH78cXvk9duNXNeAiEA1jIMY5Q7bwcXC9yfg1Wgpu74IUVcUKKJPNbCUYDYGSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMjCRA9TVsSAnZWagAAmy8QAJc1j294jjLvGk2m7ynz\nI+zDzl0mQGWwFMZS22oU42baJGjMaCW0/qbgDApApLzfMpPW2Nv1htybHh/L\niUb8qxlHOdhDWttwvdJCO9sHngZJaZI0uLb24NN+27JRxQvJx8mMDI52dC5n\nTpx91pi+4hhfirV2dJYsUumgkhFkHzWnK86PJ81/UAjeTEfv2CHacQkLw5Bb\nV9vTi6mt2aV0D0IfSv/VLqCXLZJWKAX1nXOucEYpf998MbUaD3Ltqm9SAzjb\n5OnesTYELZaZxGmwij6eXmLD4wdSxMHr1s85UTbC6+tsdbQl+/C5fNj7Smbj\nHb5GopRNK1m34+N4vTNBHwrHiKzeWpD7PPQbGO3bxPxY6yZxJUXeUmNiiQwa\nlTl7uETu/blT0tL/YHaRvW5x4zPl+t8s0lseioUhyOiJQZMqu3mw+ldMbo9/\nlsiRIjshWxs3oO3mQqe4BO/jIvIwakGBkGKA+55Sh4ONawMvSA7d6pluHpiC\n2LexFR5qFDbFOofdo0aQ4/V8mlXKH3OElLHwlA5UF5qsUZuCSWjh9LCrdszG\nRGe74MoIv786NZPrEQKTc9BWnj92cL3ExGNEokhiao4Y5K2USMcf964sOpAy\nvUH0wvJytVP2kL5CNUzfAHpOfc7tOi1ncuuMQ1VRfWbp1zWTgSCdvGUudn4l\nFC4I\r\n=eOB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/touch-target":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fb4ee66c0.0_1595556642612_0.014401259374454689","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/checkbox","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7848f95858aeae4f3c086783f0dd27961ac533","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5511e0aeb.0.tgz","fileCount":40,"integrity":"sha512-LcuSipoRX58UdLK5rQU61ZoAsoYdwR7T7GQ9E8RawKQFrrCflMziEMxgbcQhKO5c41eqTV9aEQru8e9U9lU0ag==","signatures":[{"sig":"MEYCIQCXlqTYHwsoE/63Qn8gcnagdd5/M7YYC+rwdZ1DHVf0zAIhALyXLrFtztpQTfOIIY8FNdYlNHf15ritWuSkxCDg7q8M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLRCRA9TVsSAnZWagAAaT8P/RcxUl/WBmCWHzcNXNj5\n42yfHokWQSXIuhfgyIWf5IJXz0zUa3mb7LgnJ1Et0tf9Oim+wvjSeVJBkCRb\nrHRAUfPR8aBH8O1qbZPK2E0FI3vHh2yQi7m5+jDwPlLL/2l5fiKC60nm7GmT\nzHe7uPjmArM7JapxnE5QNx1NHKyB7p5X3VIZVuY4iBzSdSY7VOAzopym1Y+G\nVl4l4dsNN9YY8iQi/CTN7oGxjPJR8GsOM4OvazxtJMTTJ0DzQC9F/BoCGCNy\nI18Zk/jgubjO1Fvpi+IYP/mGMWxM6x3J5QAXF4qm3J8dLojohL9TiO2+Xp3U\n9P4HnsRSq2v/VaceBTTd/8q94icyzhgT5esTFIhXIArDcBHCctMqkDVEDhet\nmOT6xKsMC33f87HZDaHuq3LhPUCG2d4DAaWPG2OXqZZ3ShpG76O61HdYZJUw\nNmh7xgjJ1TqP0sVLIxoQW9tiRYxOtv8ov75Bll+OhgwOkCd+hp4u5W2p9iTZ\nPbyv80Zy+0eiC6L74Q/SpUtbuwrikJNsv9eZnHorPwV9IWTnPxGS3+rbyGh6\ndcGWCVWmn+qShuzx8c21w+3GNf1MGbfrAJhIxYjOsi7phsoFqyDduvFeV+/Z\nN4HtES/qRkeoL4+E2KdCqfjWgcvYlZcimFI9rAPKUbd/jgjum/eNnEmrT3wH\n3g71\r\n=MbSo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/touch-target":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5511e0aeb.0_1595609808760_0.05316973107026279","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/checkbox","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a0765ff71c88edf3875cd059392fab2ad1465a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.8388a9bf6.0.tgz","fileCount":40,"integrity":"sha512-l9+C/DwdiVZVuVah+V7+jLsrapMYPqVYbOWmM6C1k1o9R/AnkTuIzAtBmDB/kGIZ+xLoQxO8sW2xqqLU8sZKAA==","signatures":[{"sig":"MEUCIAfqylaApUpvM3oTX9NBGofmvT1njPr7973IYMB0wRAzAiEAph/yBmtEPqqPWe1Xx1Mk1kGUyMHeeEvZmtzho8niFLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DVCRA9TVsSAnZWagAAmHkP/2wCfPJ3KPHPACtclPAL\nEqY3PR6LwOeHJvzd0WTWmFokTqDUtlEKhpQlVLSFRchsNTiWfupGMJRtBmkX\nuGga5+TBIcTyiL6oBBGLXkD0PEwSoMtSbEKeigYOdVpuhteyUoU3mP73iUAU\nvPnIogkeKwYawE/39Lcc2qJwsr9hdB9pGlRW6Hyjgt9oaMWkrD1jYuOwrrIa\ncyCL63mvzEp/9Uat/xPLh42srqKjQYatlvMf80/SQ7lRywoETSRdRCgvGcoH\nIJrFhHQQ5WCvcLU7jdqC4qyku6bpvVrYY7oK7VlwU8zzR6cZOJPi6P2mcsl5\nOKaPiIjCH0Smv7GQ9BLFJe/Ge923lDkndlPiSPtNM9WDFlbqGmt381CBalDn\nuWNspoZB15GWbFQedsbraT0NnxcMp7DhexolVHehWBjzm4d6SbK3L9crBG0U\nEc02Mm6jY7rixGyeP8oPooop+5BU1WGqI3/hkmtJDV/864A1Cio79vhhHhHQ\nf9w5YWd16C7M7+oVmUhLwQ2lqc1ihFf7kwVbrpDEmJ6pKHJdZz0ed+CmmsM2\nDKq+qOtUxei4z5bAhfgk2tkU/CKa/jtupX/Zw+vJnjXr73uiNm77/j71LxBx\n46mNmOMhNOFELkAkRXjfLwXLerfZGzo9LqJjkxC4uCDLI3phsZy9iGor8OMA\nRtPJ\r\n=s3D1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/touch-target":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.8388a9bf6.0_1595621589282_0.2620937541519872","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/checkbox","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d71f54a914ea8f127650273d62a8dc1fa703b0a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ac405eae1.0.tgz","fileCount":40,"integrity":"sha512-SreYwU7xDT9Sdj48sXvczVYY1u3ppIWxdkCn8Z+zZQ/qUWB6a3IIaBNbsoKHcBN2Zr85sGHQjmcwddNzgZM1XQ==","signatures":[{"sig":"MEUCIAT9HoJFKscegoAtIxI1HtpqBaVkaGFFm5/apgrUF4xkAiEAwEaIgiBCj0DBEH+u6od78qsIUKOeV/ba9kzH1RV1qsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1wCRA9TVsSAnZWagAAk6UP/ROcejYm7aqN8/BFyvDV\ntSBMKBPvUCMEONhdL/JKG2DFj5zQhtCQxJl0Kphz7VNbDa55JQhjEjLNBfUJ\n62XO0itCsQPVqZFEpxjDNzkr8UmR24DhlSXcL3bLWrMdZrqiIGvVWAffZVOo\nxBagU9PfNR/WK6jiOaM9mz8OKH3IMlEV3VPLlQEKSfrF+aWq179e4fA5JMg1\nGNL6QGoNt8bZvLTu4Zbk9+U0mYPbvI2CpGQjmXZDvwpmtln2cNVWmHqVYplL\nLkJYeuF0R0Tocwibwuh+TwijzqDIFjjERI5t8kEaU17gd69+8gsXqwFm/ctq\nLBM0w+EQjkSuPCA2uLdgM2o57w9HeRm7TWAZaLTWgjFpQUqXgZZA2ISXRFPj\njbeon32g3bi8fH5xduBPcfg1ll7v7TVx4QZ7xE5xqhqiibt7qpYOvQQT+d+Z\nGU4mlbGAdyo2FciWiwP9yFWD64iyLH/+5umPzoUm0sWZZly6h7lhwVJSpR76\nmuY6tdeFqeT8A10afg1qa6W7z/Rb5kArRjhMo6KY5l+JjqvlAV5g+EICVWC3\nLIYrSMSn6o5sTtTVpTFm700fF18qNM635ESk/2Uk+uVlUpO5tzDBzIa1JJPv\nc7kZT9+Hw2sk15BAzIkDYwVCcgYFTj8GB3COU9CtNbRI7bcO4C2MyYJUspKJ\nlnsW\r\n=GNIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/touch-target":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ac405eae1.0_1595862384026_0.5108434153649957","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/checkbox","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.75553837c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3aaf0dbf7e714fa20e014fa71411bd94a1793499","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.75553837c.0.tgz","fileCount":40,"integrity":"sha512-eD8SuhFeB1hCSbI3khlRCOFDlIMdr9qndqbs5fFbvknGlGPZFq16V0w4YCY0Irq0k+180xxu9NvrYcF4DLRxhw==","signatures":[{"sig":"MEUCIQChATMLL0V72L8mfqxcmXnr92e0JmcNBvG71GFzQ0C32QIgI+bm7Mscp59pA/MyvJeY0G0M1I57nZCywOtDN8aqvAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7XCRA9TVsSAnZWagAA4R8P/11ZrOO4lAWWyqD5+Czn\n/UjvoKM34hcT8SrOroSa9gvsMZ7TacfKxCnY18BGQ4F2ghNP33rK3vLqn6v5\nXUs2L04VVd2jbgaWcb0NHhdeZvGhow90wSF/do0ij0Ulqs5hfXXxPNrxCjo9\nFxWOpO9d3lVXu4fjzH8LBcKQs+4cYHg9eylbAjv/RFg08mnqG90fe/Ed2cSE\nvwqNZzV0kogVJYFfNKpCsC8iyesSTKbeDKTynRb0MBSLcve7tEnHF7uVRWNb\nVb4QtYF2rPtk4aVODCNyLsPntvTABaQ0OjDYcOjjvlLb0ya0azNr1qzKH3m6\nFNAzmtcsI4GeJeXK033b58XAI93gb7GJ01/IbqF2k0m5PnvYzk76wLHhBkwS\nwgxpK5LNEnKn4APrKqslJ5N5OJ4RCSv3UcQq7FtdUrH/KJC1Mf/vCRIIvhEe\nVPLIr+yxvT+ZLDbPbuaX0idXlSKvaNjMutW/GxtBGWrDMQuwCYIa/WueSfKB\npXo+VwyFsjn0qAVj1wr3usSmfLz9J0l57jAx1gj6cjW0IN7hswqSNv7kep1V\ntbSoZIooinGLpBYVIDVYLPRnzhUGZKTu5UcAlqqetkLzt2y8purSsZDZmnnn\n/wSm3hUAHiPYbxK7EEdTG6aMNCRQKzV50kuf+1Y0NSrhErZTPsfi5ZeSrRos\nHYM4\r\n=6tlW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/touch-target":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.75553837c.0_1595862742887_0.19996494133775977","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/checkbox","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"397c5d9c5ff30be76378729b274116d478d54815","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":40,"integrity":"sha512-ZZcLw3eTUQXvoU4EDyv4SEtY+u8INcdE2zv9M5nwAZ5yH/4JgR6V8nyQ6I5lA95M/7xnJiXnLRI0YO9i9NRBKA==","signatures":[{"sig":"MEYCIQCulA+7B5PqFtrGa8un2Uxj2UHEU1+dfnQhISfsz+fSCgIhALnrHANnB2MArGeW5pUYX5HYZfmHcOMl+7zgXG3HPEc1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTXCRA9TVsSAnZWagAAq1EP/0U0zFstEqdKU43Gm19r\ntB2P6WCXxG+kSYMhF1KhbF4pMBABK7JqN22tCfP8YOjUI/5ZZyg/2H0gRZgL\n8vmHP0OXU4hktOiHgl9JEyne27LDHAoWbEe5JSuDf/ZGCbO+CVahS0S4SNbe\nly1DPNoDg3t49DB9jH1rPNY7sCvKguvHDxbCn1YTXya6zP1xiN0BhzKJQhCH\nRhnKS8+sa79xIiBAJ9YwnsCnZ02rzvmXRaUOQ+UORnrJt+FLU/fKzpW+/dfk\n6vCUfqC7yROnxeJFkY7RN1NbnJ0Y3i8K2p1i0pk5RAm8F9Sln2ypZ+5nuVw5\nSyMUhUDZdIW75Whu9OmXJmoaeJZdqJiEDNAfg9kGbF8d+B/9DhDE5D/sOUb3\nodaZfRrHsDw+EoZB7dxkJGfNUszVW93wDrDPMmQ5srrYmCqVvX3RVU3lHTHs\n7orjWZSdNaJ9Xc1ev4u20DVfXo+x072D7P6p6F/zTOakwDQwJsVK1nQiXnAk\nn9UQCP8xsJVJ6HcXlOhJVkdC1XZhkAUxHgE00ARRqSpaObY/1krBM0hKr1Cj\ny4ZqT/LAE/eJORZBhMXYfIBSvZ8G3XF8LnQV5C69MtPBkVj/6QNi/lg22a1m\nSJVNmWz2B3Z9L1Da608CEHiIfo6U8cqC+/fyUNKxpiU+xS+NViaAbLE5DxXp\njLlC\r\n=sntd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/touch-target":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b96fbfc7a.0_1595864278889_0.8071674989150899","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/checkbox","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f23e5bce70417c86d552135da4a6521def34180","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.61f1a8d85.0.tgz","fileCount":40,"integrity":"sha512-glUU9/el/JVTrGq86BlN4OgX49Wz493H3kQyYbzrRyHZDd1aK9fFhbINYgiLoWcu6WfzXbsYi/IsHyLFVMH40g==","signatures":[{"sig":"MEUCIB+8wCvFK2SfgjmHAJTvp0N4vreKJQX9KF6E37bVdDvHAiEAzVd4O0NhoHoq6YK7ezsrsSlzbYFj90VpmJ9wwE/MM5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvb2CRA9TVsSAnZWagAANbEP/A860h6ev5B5YE5MBio5\noAow+bEGZAeP5v/tMuOH/T4mnfjyqnDCy/Z/INd3j0AOFzYzMO3ByBSpYc/O\nc6C8jEAX0eDyHr4WAe4imdFVovQyhn4NBz/bQF4i4yQOOs4idOZOJsl6NcUd\nPzTbwbcEBPCgexeV6Nt8m+3PbljVRQlMJ2+/EmNHhMCVNPAMQSmnrNiKLg+q\nHiWNj18tzN6oVwf2PfHElmKUHaeoI+XG6rF5nyoLkOAJzTteGhbCWmhdToyy\nROJNZUvLJVi0N5/7H09D4fCeGK8HlLgsn2qVvP+W7B825afBm99glYHuWMLK\ns3ZqIVbPcZdg4KLz1rh23u32JVNI8JHGFfb7z0vk1eUYt6tXFRbLbQTtY4oN\nepx4V5gv3yMFhjYSNQbgfIJj6iYMsvKxMneuCDN9pNwD4twfeWNLSgr3UeW2\nZlLUS522c5iLStL6Sz67jUAdLQMekjgsbnqRQ5lvMnhZ1HT5+vgzdq1CMQ1D\np3Fumpb+uu4Pupm6LP1vqhrCa4vcbnapwDymFAJ63U3H3+tUjyVD6CkQUoEJ\nJo0nLeVQcU0IukIE/LCmoyZWVuooTd/j3bdTTIE9h9DTKdxATQ3/vRiRoAXS\nVbT48TTzyaHkio0Rqzxix1s3+ztv5phXwVJeT1WHLfZTXOU6aLgfDA8vF8A0\n4//B\r\n=590L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/touch-target":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.61f1a8d85.0_1595864821988_0.8666436817140155","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/checkbox","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.81dc33377.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"089aa24abb01b070cc985ffbf5122bc03e5a2d0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.81dc33377.0.tgz","fileCount":40,"integrity":"sha512-OxF8v5Y9T1asGfWUscsEv3hZGWJidDb6QwS8Nvs1WqfTzr6dlRnk31lrnUVICxl/XbatAq+hrEjd4wLwPocKWA==","signatures":[{"sig":"MEQCIHXzodArKpWcviGEvP5w79CB12/8qGJIWDAdcYJ2mjaDAiAsvHHwNpylgu1skbIitQw+7MUxMIz6WA8ZzOWwneA28A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnNCRA9TVsSAnZWagAAtaAP/2fnkVOO0fvGsX80kRv8\nyLobkiV+Ahzg3nwfW7wDkUdUDOr1L0W7TEfnLS5gAVoczfvdtcRJUGXdsgPN\nGpxbu5rwv5pMug5UdbDbkDYLv8S/4wmQRY9M1hVbSpkGexfN2fvim7+Qqga3\nWuvAWIek1omrpLr5WhU0++dJO04VsNNmEnai/oWEqv8k6vsdrzO8ZKVpCsP+\nwHFHaj8yZj/ko0M+r8uaWyAAbNj6e2M73Epp0mgl9TTJtqwhv6IYWFz5VlrL\nALbTPAenD/tY3yqNEzupOWzUTESmJ0AIPqSCm22pvmt7hviM5QdhTzM2FtA/\nbfWobLuaEDj/Qo0L0pJSeQP0sXk17Uouc9Zs9nrkrWDXK2z28krFr04EjPri\n4gaDf4E3Px/oITIdv3JrQzSp0Uq8lLc8EWuJMdk8cepDqZA632+ZxMiRZW1x\nkftw8x4lpj+011E4tdsr+UkQ1ziciihS3JUbOE2dTKnq2FK5ipMzYz+/pEFm\nOkFN7NLP/uF8zDc5k4Y7xpyiDSJjJozoV9CCcOpc6BCeNXNSBf+x+Cm+WwNz\ntb/CMqqOm6OTzlzrJSNie9WSmHvVOSfFbVmOU/1jKYggki+06XSwMuDfbpAA\nZLX59IwXnzWnrU2HZuePct2o3A+HJhtG7avmK4X8GMEayNaxvuUJ0aiS/1wY\nIlkc\r\n=1vSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/touch-target":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.81dc33377.0_1595865549141_0.19751006469782983","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/checkbox","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e44cf75986ec4b62d5281eb21045597a79a96fbe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ffd9ede58.0.tgz","fileCount":40,"integrity":"sha512-/D3I1yPv6iSK34IoWQMpmvPAoUrcy/hbQe315BiD8QQNvXRUhBYAdyuMsIdwaCUEZ1+Bpj3HgKTePNcyAHlpeg==","signatures":[{"sig":"MEUCIQC0ah5W0fdIpKwFon7lWo8DUhqVHCELOfOmJGzYPZOi8QIgKZFC2wnzNOHlP5thO3pLQPsKrh5xnXd+iQYq5oEOxqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":654558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGXCRA9TVsSAnZWagAA7ccP/234WzO+9As/CD5zwJov\np/yWTGT6Dfo/BmIMcqMUMjjIjIGzfspdqTlbR9BTrsYPxCqW+2uzw538VsTH\nRk1DcH+Sw0LdRSRDJB4t4uMxLA1VV0Z829WEtGOMDq/GCwrlZDPba8mO54Ns\ntHoaxv4xPAGJBuVwqaSMBUuyvnW+Au49K6oAkIJEdieONR7srRPLcJmY2s3K\nryw6nZD4xwRz4d07NH4NtT2MisPQdkTeLdPTOGiswPLVVK+07yQplUSuzIvw\ntnA29WMTpgO6T1DKaKiSUVd4tKIRggJW1hpC1NjBlDB9Uc6l+BTamMSlbH9p\n/74KqpuWepr3d6gCbzATkkoAYcNyEoDAJRrZ8iX9v9UclP5E9iwDdm9tdL4l\nNTB8Fea0m8YdimGmFjlA4WYUEKxbctpGMivU6AFrjAKT02uOX8OwtkVqa/ty\noxeb1f41WKg4pBIgFHhNOm+lyPbM+Z8Rsyh1GsQuIrzG5OABX2FSwgztQMjY\njiBhaYg63QD3MZqHSd9UL7oRZ+D33pOrjGIeeRgwZaqAauDmylDDsVjAe6Cd\n7x50QiPWnJxvURttDgqnyimKMqcyWUCNxEPSDwF05Vt/olW0NGBMO5fOWsdR\nvudkFlqZp1fi947lUKJhiFDxj+Mn5ReBY/x1Y3lzZeTGkC3cKBaNZhdiNlO8\n0ZcX\r\n=cD3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/touch-target":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ffd9ede58.0_1595867543102_0.31499049453001726","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/checkbox","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1044654ed1fd6bf03af596767e69f6b22044a497","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.52dc55acf.0.tgz","fileCount":40,"integrity":"sha512-Q3KSRm0pZ9hjGKR/++wTIJ39FyuDlQvpJ0JR9JgilzZjoKEclhdkBe1oGiPFRbRyp09sILXgswj6Ppxj2GXNzQ==","signatures":[{"sig":"MEQCIC68Txce00Omas7BtDYM/9/OHK8vl9BaHPekZCENZAUQAiAK7UnabllYOs5TJy3AiIAPeb08vOc/8uTHIuEif9ee8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":652041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoLCRA9TVsSAnZWagAAEr8P/i/lZQurX0KW4wBJCa/X\nipgFtGE2mupdV8cAUAqZNWiYSecnyAxSWg28c11BJxHWJnS1fI6zTXoo9/XR\n+q7ZaLuV6C7vW8xGpHfYcoFQMDyh3N+SffDSWzPEa9I7Tcw4f9onudzCuvP9\nxL9a7da0liHikT+X/5SHhqLajlDlumkRrb5SoWg0GUFl1s9P1Uc4hq/1b5kS\ng1KaoG8Ue/kbwx7w2VonlBEUehBbSjE3fpiK1ongIXrWx1nQCul+tK7/fu78\npADb6s7pQ0VUgGflsj2r3rB8SedD8ojb9K1/CHhMOxE79C+vQyUiiQYRFRhK\nfjcTeiKGP7SdE3UpE6745Dz51SnnQ83ZRbeo4JUgS48SS6BVLtX+PjGOSgxm\naMAXqA719J/abHIl9qVjx6RTyRWnc2bycYU2OnxyrsTQc8tjJZPqjt4PCT57\nmAdskDKCpbhpbauJif8szqx+3o8NG/nx+6mLPr7nWcen01AzUFHUf9eucZu5\nt8m51LYyoZfdmtamryridV4cpsaR9hR0R1o3JRaI/gp7W7fK7Srunb7bUlI2\ncvmvJTF/wjdSfrfc8J0E/mE9pgHVjyqkDC4oLFBk4grhzjtxMg2V01IYRX7g\nazJzdYpdns86a9YOFw/s3czHLjFiwv3mI2TlS8xsXqx1rDC46y7MTivT58dB\nsWQ0\r\n=jR7U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/touch-target":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.52dc55acf.0_1595869707266_0.08109879814551246","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/checkbox","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b51da09fc28e4cc5b6929cf3701a46801f0e368","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d4274ff05.0.tgz","fileCount":40,"integrity":"sha512-ZRnTMiMbnvzdH+In8Hx2QBwGeIS9OrdHEOkPIcUKsUzffG9WJo58xnpqhtnPouQ+f4aYpoWSEqsv3hrm6lfX9g==","signatures":[{"sig":"MEUCICY2GJ0Zhr3R43fbCItoc1jlmU/UdtkPpCtw5dIiXJEPAiEA97Q2j4k2k6oumZNHjm1BvRcUzcmhLM6UwxJCzKdLUFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBlCRA9TVsSAnZWagAAmpEQAJB3R2CdJ9pA4yC8yZ2h\nQkkKJGRSYQVg1dKXl8zOzdcm2uRqdEKWfWR74AyekFr5IoRxYUUkIZnL6her\naCU6ANB+FTs6HNPxaqmb2T1NN0qVpKN/lqVLJgsPTbKt9ty33bzIADmep4Vt\nKW/KUaGS5ZaR3QTiy3yS1Y/Kvaewq4rHKy8VRhR29t6tg0K5t69ApgGzyrct\nvUY8xVZCKsJuKxEY4aG7BfqB3ZcKlJOEki83XVZDxBzlkJ7WrD+nLawDzq1w\nHJj7KssM5I+9ZbbhV6WV/hLdMwQvJ34Uet3TxzZ46TqYhIgxSZqUknHM1Z+1\nhUxgzMFByEoOeTgutQBHqbx/nD6NHfX3MeCLGqlkh3eDHoduIkXQDc58RrNh\nliTjJa4Ey/eJqFkBFOIu4H98FoURpx9VaWlm1TrTX/ctoCbgwcQpCrgGErLE\nnHIr+KMvCwL10mFP9Wgf5OTTiOZjWbZQkdZ1hs7JVe2FSPm6CgQPNFL0ocnn\nsh1D6H4CuppqQu9Mc8d5fgoif86+8lirgHjaZnM1MtxnhfqTSwrpDHajey2t\nxqJVtIgkJzNeeDGx6Lwpa5pguSo/lzBQWFE5eJTNrdyEsRN0fqao1aT19ovS\nNluh6zkUR9/nxChaxc5Fqw993XHNdwhwy9fNLkd3LyY7s1ZBD+6PZ+STDV0Z\nJBR6\r\n=qs4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/touch-target":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d4274ff05.0_1595879525031_0.5955253002322825","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/checkbox","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"132d081393ef01b3b4369d0cb534190065c03650","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b82d0696d.0.tgz","fileCount":40,"integrity":"sha512-1yJ5F605IW1mVotBLsjrGxtxgpcTaBELkQmjiwNFj33Pc8uIVVxiMlJafu1eA8t8mceWdFJ/ew7vA92T7ZdnHw==","signatures":[{"sig":"MEQCIG3gUxRcvWVIGXNUDAz6kdyQrlTRt5/mParb1waqo69+AiBJC1ce9zkcOg31NGMBv7fkQQYj+qqeYviKRP6cIDSFnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHKCRA9TVsSAnZWagAAuH8P/0Nb642oxiDHNjAhCu2Y\ngivMxw1+x30H/EVE8azpy1fPd6MUtzL60eTbp19tjg3ezHtUE1AHshXOWfiM\n7rCoNS4JZpVvEb4VDcdJRGx46UUyV1L/oNwDEb3LffGTeRNoKwscJW/4Ldki\nqFRZky1fVzCfZwu8HwY2+nHt23bnJmr4lxltD/lBoVAcKU0EumMpdgeBfW0K\nkQUFEIoFYLIy6l8ll5S6ba7dkqAIrT9T/5ucmShJsSefn7CSr/NBCCF9NME5\nctWaKyhw+GdDpT6wS8dHOMDzi3uC64ksg+sdLbQwmk+KM44VARyFaOOSyF6o\nIbGRoW8TYAdUopy2RX/sMEyUqsl3YY0zS+tkF0Q3kwXl7oVuUG8+8IfEmRry\niMSwkXJ85QIHCkx3h+RoCV5/SfSJwS3QMCkym67II2NzjqtbwflxhwfiFhWB\nxzoyyo70oFbyMOIKtytL/g/baW6kVv5cLJ8vvLQ06ZJQfQRQgs8hriEMoofe\nuPDmFrFyltuZveDKxx8KM/M+1kaL4ox7mgZSyPeprF3kumOmPk7WQG1znVT4\n30hZOGEz4qRBVeVzoIj7DspY45RZ0Z+M7C5c0kCA0KJZorIu2x0nDBRZXwuV\nvpQlLOeqRSkOAM3h+r54tbg56tXZ7rToQhdWsYIb4yewH/n1Zh9wD8hBNlW9\ngK8Z\r\n=UF7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/touch-target":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b82d0696d.0_1595879882414_0.3602671152372183","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/checkbox","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c2852000d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b9e6ca0e3d4dc672e96f5b100adfc5ed10f2876","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c2852000d.0.tgz","fileCount":40,"integrity":"sha512-Mg36ZdzmRjYb8+HCmzDEQDdR/Ku2JrkUrMnHn4EMlvAHWGf5UxpMsrIh+jM0W5cNDwovuRaiKUeCIDhK27aRtQ==","signatures":[{"sig":"MEYCIQDiJissGZ6LA3QeiN2yC7ZAgH30da8sZ0jBVxO4n/oHiwIhANSuAxabXYLaRbGemBXvFj6eEXIOhKpM/UQjQtxKyNOj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/pCRA9TVsSAnZWagAArVAP/AsmHInfrb46OT9f98Ix\n4RKYSNH1fjyZC58ZYjCkT3SAV2HAu8bVKMDZWNp5Iqh6GzcVcFvCvkSVSm7j\nFCaNN6e9guNLjj2QTXtGD2ZA1cniVxztwgnKy8Zv2Fw80veiTcSw8BQGu/sb\nc2yXIeo1kMui2qnpvdXdlCXYXGhsn+9HzTOpOkD99935pgIT3zy7RCi5bJRT\n26NVLNiu+UG5IHXf2OE2FJaAJfuI/lItEua1ALQhEVoe/cFZr2fcY9FsEkdR\n0MpgzdNrIfkZHcLvi/G1IAEPQwXiBu0ZGgbG3zQm/V/NM2MhdSK+QD62YzN2\nJDJOEN3q/gQ00nJGcuehAKrTBmvb82xjS/7pWktT6xwtYmVX6T+x5ZILJ3v6\n8u/tBUB0CQXTNr3pdNg9ftVff+YcnNuzHwgf0fZt9SV9E5eorlw8Htxhnk6o\nVylLdr5BvLLynOWWe6pxMgZckAaTiTZf4y/8dJl4nBuXAK80ZdOcvglb/bmP\n8OHRdX+qNA+dBNQgbJ4iH3H20DP5Q8A31FvnLujUMInZ8yXZoy8DOhLMBVsH\nzUNUBtAcxEryB/KZug1sXCJpGJYEUyGbpHX0uvMzVKCCuIxe62szxRYkLQs/\nxiX7cTdC5AL+dgCE6ToMETuGGUN8XRPilqzHu0DKq9df+nw8BjY2YivH+N3y\nFSuZ\r\n=inFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/touch-target":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c2852000d.0_1595883497250_0.9681128953543572","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/checkbox","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ad117b0e867bfa6009d88c082cb5159cf4eaf8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.f86f83f54.0.tgz","fileCount":40,"integrity":"sha512-KPqWs8tQsvSrXUDfaoJK0sqwylYDNvvSpwBewmPuA/B3y+l7NH3EPl8kwOABt7aUgCwNjRr3PFS/AvyNaRnsAg==","signatures":[{"sig":"MEUCIQC98RNtndJTL8GS6+bF6zmmJmcy3OlJ/AsxNcH7WewM9QIgBIJZTFC4WunmFgxA7unc8ZbgiY2RkkUch/X0mGfqXcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0z8CRA9TVsSAnZWagAAEdIP/j7ut0D5ShTCHO68A/OI\n3GwKFsp9pEDCK7oFc57TKjBLj4gJnIt4XrmtFYH3j6cJiSuIuRsgF3JgdnRS\njrOn2kLWr88DzpSG9wCaoUcN+Ppg7IJZpZ425PHYKr26OVwPVigPDmzZSvn9\n1oaw86f9ZE7MH8VeaePMn34Tq3h619gGaokFzMs5sa05aWHb/xvDnRgJkEpa\n8zrGVjg2+TWDsHATT7z16/fNFIv9f4hJqCnd8nwBZSriAhTQ4qA9BOPQgSKW\nQoflxOlN65IDPTlrcxWCo9EGa53dz39FyoA4z8NslsJr5U7X6GawXljRnNfe\n22Lu+CTbNxN3uH+gPktnnLWuQNJ/USNN1nyOEegM3hwWdbzkOUOf1BRCxsxk\nbYREuvUJi/XjWEy6OFCw7PumEFXk4Gidt6IkHSWSsMnfNsk4xRFKaBtkQeya\nXAslaBgSG3C5oOqaM9tUj5Lnh02APW4cKVZPlvtBuoF5WeITUujcC0jP16dC\nba2+RGIXCGGDpFUUy9ZRVTZ2gYceG9YWuSrFEpZ//8cU3c42NmGs98XsBcPu\nLX+iiD8Z39OAXS8TEm7eTlvhc+A5i11BmBx+3Rg/PZqbZH4UlMYwBxFglab3\n7RvobYT3UZZCY1bFBuBZ7e9pqLjY66rXQC/FYfRgCNVMIALrQjyPiI/9HjTo\ndz+S\r\n=2YdR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/touch-target":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.f86f83f54.0_1595886843385_0.7239744493594698","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/checkbox","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea29856512dbadf343a2576b1b9565493438cfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.41eb1684c.0.tgz","fileCount":40,"integrity":"sha512-4qT5W+YvkbQzA0KSz0CTnbCelgcHa0Cvjiakqatu5U/i1DdxfKGnhBU26JFJr521+w07h0KaIXYXkbMWiXR0Bg==","signatures":[{"sig":"MEQCIA2/oC35cpmsjeu2EQ2MR2olNZ76d9nFHVM6bHwAeiMQAiAPQ3tGOiXEMaFNoF7Ueqd6qih6kDa5KZNT5C2M15SiJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVWCRA9TVsSAnZWagAAo40P/1L1s80vrO0Xalcb6EqX\n5j3YQCiEXsPVpBlG7va3oFt/gwUoPuqrAWuuealKEYnVrRffh0VkMBBODaPs\nUO2tAvP6Yo9MUChJDkvMQmOc3CbkGw7aFyJZXxWO1/rXwFhJbrNIpVbk77rK\nbMNAkFO3hFk/K8uyihcYcURXSAPiqGKbSlvOy6X8pYkvlptSbX4OVM/nBDqj\n4BU0GQWvssHD3zXxjesdZiTiOOZYf1gJLXErkN0fHJag74Mk+hAbdgr1F1zL\nJchLDEmwwuADifJkLK8AN11HMw7t++XocGHZDy6aIEqAHqN9lMB25zYLXa1C\npE5mkMPrj5g23qYjgAQfQB4d1b+xn1Y0C1pzeF0mDIQd6pH39R2GOmCq71EJ\nVhO0LLifeEjGmpl7ZJVMpy5PqhBc6/pwCUM12ORysO3xlU6KM4O9FAkYhjIN\nSjlZ/EW+SQk0b+xbanITwgKGyQhLhYJQbBuR9ksOVIbQ+6TUTc5hPgd2rfsl\nZwNXEAwlnMRu+A0vRxsVhgCdxwpsgiq38BJOEh5c0XPZUdxR0qwSvXfMWSwO\npqACK/ENdoXU19rX/dbCtKtS18resTeU7wo4Pxsd54ZT3cBHQGhI1ZfvQWQX\nbTrwb7sklJoVqy5LMtAHldcH+3B2I5Z7OFLaFjsbRl6rcGGHCCTbjniVGrVw\nPVDX\r\n=8yVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/touch-target":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.41eb1684c.0_1595958614135_0.657629475361512","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/checkbox","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38cad558a0f4adb6d21298b6750c7f592a404f45","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.9e2f6c450.0.tgz","fileCount":40,"integrity":"sha512-DNW4+eMcg9ZtmAPR14yF+rDtLKy3AHLM6bcL+gSGsLn697ypB3Jul/FykYRSepfo3ZbL2+pT7QHsUpRBtCvScg==","signatures":[{"sig":"MEUCIGD2e50DykBFB7IBDTwp6Q+0eQ+/wwpSHiySrVSB3zEyAiEAmqDoh2xgM/BoC2ACFOYGPe19bQ7ZlmD1cnLEL001noU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkQCRA9TVsSAnZWagAAF8QP/2VvJietz9NB7g1qb7F7\ngNyvG9ispeW0G9rIL8HFY0anjZY3Rf8PMr3JAkADn5+ydPXTVZLcspHr3sX4\nGs0WtWN3C8xlHPtDSmQEgeQH6//h10D2FQEfZ5qB/X4RT7t/9N9Q61gE/+w3\nZ2fMvKuyDwJ4644e+l608xc83FnTR4nPjqNHhjc2tp7lOo8TxcEiBaM3LhE0\n507FPWJ378XEkUQPxAVFdLc5YMNdnME38uOTBrRGBu9i1WQnHB7VlOdgqgWM\nENCxWKe7Cd++Ta9sEZkzcbylV0nrGboSud474lM1P1F8/j5hyHvEyTwe33cE\n4xFMosEGC/0dpfutkJBJK/MRKqY2CR4MXdnBFrBGmkMGV7oeXf+q50lT2MfM\ngdkcc13gjbaE6DEvA0wF7zejw4q0eZ/pCG8YaWeJdpWN5ynlkiuZhh7xEb2e\nqwhVP+j6AtzoYYg0UGMa2Gmtxg1Ir4444qwhPaZ+gKySzzr8Lij2eaL7Zse5\nN2XEATtS3JgHNsZJbDlKOMOtXOoOYzRDaErojUkFSKNzf1HScpfJmkBfuBDT\nsHmpG5iwuc7KzKxz+/rhd6K3W5i7U+uU8dZULrF9ywadGMYB1/GHvWC7bXgu\nkMPuqU+1GU1horIr0BJ6torNN/ycYAATCGJ24nQI1pQs/5H8pxQoKG0X685p\nfLDU\r\n=56/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/touch-target":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.9e2f6c450.0_1595975952259_0.9311083117408483","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/checkbox","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"704758f3ca898183785b3bacf00d1f72a9630b37","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e6950b55a.0.tgz","fileCount":40,"integrity":"sha512-VykS5cDndDagsCX3s7ikFjSG41dGwVxuWdjQdIfTMoWutbdnqAynBTn3gDnj2cEpYmg1LJC8FmrjYLZN4UuzIQ==","signatures":[{"sig":"MEYCIQC1tXmJaayFj4eriPdlSjuFVJMOmvZQmoUl/L4cBnltXwIhAJ/4tvAcy39aub2Lq7D2eGYdo8VMBxx/EhccK/WlShWH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwcCRA9TVsSAnZWagAAvYMQAISRup2OQZJSEom2Esgg\nujnxo71NykswUP6IjP5+tSMhu+38qwZaPImvTb+lnApg92ICoAbXz8/t/D4m\nY/pe2bXdyCS9VAAo42a5G+W9r0Fntf/LeJyIQzecMqoRBTrQaUc9IqrKcI1o\njg6/4dFE4TJ8aV9SgxEGM1dU+LeXFmTQTWtWlCRB4NoHtxhiF+4PHyaFriCr\njIq9enPUNxsCpOZLsykyg44GgUIbRR5GHKb+JEjQeaz0f0Pme6x2VGrrShCk\nFM+SnmaS2kYG3ZG3i2c7EpbS4gYg1pOi/nj0MIzEzmRNqwsBaPHpozr3gy49\nEi9fkMB2pRHYlGA6HPsfkst3JXnC+7jacmt2sWzKj6bhOm5/068DvyHmxnqg\nBfWDpwAR/v/fzAntsOLsmKDZ8Z74/b3wUYmk/5L5kEJMfDnf/yVJE4KY54/4\nhbPlHlO4801xnfyapKR/4kBlO8/7RTamwXjGKouxyEv9aKRWTPIbBl8BtCkJ\naSVWUQH0TIIsr+V2qqaMEy4x0+iXRXjz7u/x2Mo7ow2act3sqjcP/eNlpP/I\n1XKVdK/Ep1/5cp533Dh+m2rv/J4QzHnBy94qjTW8nhNlEZ+Ot1NT+TM7lKzm\nP+IOd/TdC6OHr2qm5FkxviItODMCy6Lsj5aS+9G553nkMuOhQE6nAP5Kb0Zg\nkVYS\r\n=5JWx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/touch-target":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e6950b55a.0_1595976729703_0.8118408075514025","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/checkbox","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10bf245fecef3dfa8edb860d62b3c6c1ffb7c94c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5e51ee38e.0.tgz","fileCount":40,"integrity":"sha512-4z+pwykpgCQV13qtUQnabfyPuuWsClNDz1OCbrni1MVvKppu0o2mah5gu8BCTMYF2Y9m1GX2H9vtT/sWkEwMKQ==","signatures":[{"sig":"MEQCID+9+p/V1kN00F3z3YzS5ybZOBcR9N5sCIpTZVuHtRH8AiB+hJumzd8nl6O+aHWnkUtTZ+4+22AEMzM/QBew2TVpwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGoCRA9TVsSAnZWagAA64kP/RGJIpx0vQc5esoPb/wM\ntfabDMOmPs9aIpWdS+vAIbNec1h8DcKIS++aSe9PFI3DCldHGXXCGKEQJTSh\nSakeEk1BTm0d9KApR8l/F/MsddHGoDEtK+FwWzu5W90HSssyitdWO7+9WAAF\nFdjlwF8lbhSgi0ck9osAYyno46w/Ot/Uavf9YdI88b7J+eD5+qBkPNnqCs50\nXocbZWRxSjgTFz2o8nEbsuELgQkWwJanC++VP5+1qBp7ePhBqtt5I3uEZ3Qr\neAmVCk1VYx4fKvq5tBW097P78GVutJ013QqmHgX6Pum9wWQ+obvHSTD25XyD\nvpN6sHhRjoDEQe4XiWnfGqKV71lEwLviGaH5tYABs8cCABv5tuhDXxbUFDoN\nkiZ3nsGAqhC2ZCTxb5bB8Jn5/BA8MhIZK7aJQGM6FsvRG/evvRztPbjFXmWL\nMdRqniMgvQmzlZSgebTDEZfrYdmWCnv5rd+7N14TA0VdIIGx4qpYHflhz/ZJ\nLjcQg6eEio0+prp04Vpl3zqlkq3euOWXBPW6plXtTvtjdXu8jEZ/u0rOBgKm\nE802duW5UJtHhEVo6IHMYOqQnU3Sw/CqqJKOUmhXlxgjhxTEfv6sWGsQpsGw\nDi36bjbnttLJ0Wv9oVKX/yS8X9m76S7qXnxPtImB/9Tbu1SnKE8UT0Xe1Ar1\nDC7f\r\n=XrZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/touch-target":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5e51ee38e.0_1595978152021_0.31861709112881664","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/checkbox","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be5b849db23a13fecf8ee1c2a5c83222616a6f06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a3898ffcf.0.tgz","fileCount":40,"integrity":"sha512-rgHz9yJR7CkbPMMpc2ZntzxVxpyZGPNSYZvJheAn/0u2XTRuSKZsAnZLeTJpzXOvz3uQBhx5kdMf87ftDR74PQ==","signatures":[{"sig":"MEUCIQDWXgw/yr9shN9G84ncynvtNZhdVUDlBz+GQeTBoU16dAIgMX8NSWczngkRlYLJuMJedvzTzJxFSTPlQt70wZ0ljYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSFCRA9TVsSAnZWagAAUNMP/1vSTgYSVsqITR0VmAbP\nEmLK0vZVUe0kSAg26fcNCj/d552jc9a3toPkKGXaUp8G8UKgU2G3oRVKyg5g\nDwBTuk5rvmj3syWCHam8GOvo4whFSpCyCj4RQa446twF+khdImVFvpH2GXfs\nXMFe5zg1kbvTdud2p2CyqIhSxl4ZkeyK02Ev+Yr2/D3b/zIabWPWwAcipphX\n+ZHxnvhCKeBmP46niyY5QXTZYgXkyJIPFQ/DhjXlQQ86ek5utVjqzH+7vvhz\n+zievqsWv+BpKmpe4o+9nIBldZFXNmcdqE2EM+eytPjf12Ks4t9N6AWmitzo\nQCp2p85gdjZrTlwERjd64SDyGE8vFXckB0vuAP9Vll31WPW4mdw9z7fGpXOz\nt9uf17PwDgQH58+luslyFlCtG/eZb0kY/0Jyu3Y5gMw2JCzdnmeakUyOEU8b\nDJL78R567bbsDlGAEK6yqbzZ1W9j2YdU+BHFnITXxTC6gqIycgtk8qXapV+f\nM2HLwHn1o9XWz71vNe3Bro3JYVIzdsgUqAWzvF5At00luApHwoonUKJWzFE7\nJ3ramTh0zYdzqtmfAvcPV5Zytj+Ja7uNDl9srHoT76suZ40K6UjmkEGeTaJa\nl4yfDmNb3T1JtBJxRFp4+/PF0XYkEjrzkdU31o0tg/ugoDO74+dZYicf5ctB\nXMti\r\n=ULVT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/touch-target":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a3898ffcf.0_1595982980679_0.3615959024395079","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/checkbox","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b293837a53c470ebae0b1fbadb368c90000773","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":40,"integrity":"sha512-D/YnhpqWzyzu2LEbR+vryAQDb2vaoN+cf55vPw9gHjNUX5G0D0SAbVsGPBclOySmqRxWWjZpnC6ijG1IMOKvMA==","signatures":[{"sig":"MEUCIQD1gDAk5hj41DiujrM3azbz58WCLjkiJ0JigsGoSxejzwIgIkxAhVvpG9iYytHI2zpn2aiOrMRoCWKbA6bkE/4tJ2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeHCRA9TVsSAnZWagAAn9IP/3xhK+O4JvCkjcjyXQ/F\n3nHSTDLCenNf5iN1pjifs78TIuu6VAIV9YpZXQa12BAxIqCoMlkVygw+C9q2\nQ7ZsPOm/QYI1C69NOxFqQxZRkHx8fywoyjUMcLwqo38U3fs3p1d1seygeeed\n8+ydI1gNEfBIi+0FyG78LczsTgD1uKHi5HKl6dZHlvrpkvOBo1L6O+bxZPW6\nWG5F0ZDQYoP4FsILu2SLDA1mjJ1l9G770WexZnGPkfYK7wlLBhl1erwunVl7\nGU82ZAuwJbbBYUsLyfPNhfvhOqBrjs2KjxP7A5IubCTiaf2HnarGAcmYSY/g\nNUk3dPPIXDepd84c8cX4eXjuPvESzf/9B69cWqkvr25JEvz6sW1LBfexH1PN\no1PW5ppXRVCOlXSpTsCe1I8taL9CLWVV+fT41NrYYDXWB1HI/shpbnTU+vgV\nPCOmoJA25GnknSYer3S56tvwjkJ2VK/ayeTZ3SJxh6taInNkIAtqiu4Jh78U\nltvrHP1U7OGnsktzSc+4VQ4AVK+nmkibO1mg/5cYLnGqmaoAGIurWoVsIXyv\nlq57e9keuvHFslUy8o2iPr7LMqR0eoc6Mg4WHFrwwvpu/4V14e5IIknXX+TQ\nqfpUaxxtUkjUc+2msoXNIOOaeWJS96o7xD0GJRsB5NGkV7q79fjSlQalji/7\nat/c\r\n=zjRq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/touch-target":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.bc5cc6c96.0_1595983751099_0.727927257494245","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/checkbox","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"702ed0df7e85af1235924a16f72e1af809621dfc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.9bdeaf928.0.tgz","fileCount":40,"integrity":"sha512-1TaitKFD3DhFtFkmZKHHrsbeVDL4yv60OM6lOzINzhAlaU7ZCVLXxa/gk8/eqXxLmcB+JLasj18KNvGfcQfNoQ==","signatures":[{"sig":"MEYCIQCpwAE6aUtaW64rthh1PTa3VmU42V1PS2phnsFZiDuuwwIhAJCUJZATkkdC+ty/nj2qxn+YyvqJEtYUKBhsBISQgp9F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7mCRA9TVsSAnZWagAAo9AQAIcmxDMjf2b3EtjExSlC\nimHQmO0XPaVh4Icv0mGTX7TPl/UtUnOLItHtX02rGGOBOZpbHx6VzW//NA4E\naSQjC5T8xXPkLHdOvVEsc1F1A6v4G5apMCKTp2sjd61Wcy3hlx2hzAZWNBWo\np2DyLsalz37HYQRAlAAwtrrht3gkH5umkknm52ui8bTyJmkU+Fdr37lmSg8r\n7MYnMosebXcwg7QFC5zDDZy5ZHW1COCi/mqIJj21NowBprMQzF+oIbjiWBDC\nGmFseCgDC4Devev8yeqQtTTQagGjpcYwnl32jh0CZMzwmx5LHCWLqBKBil/K\naGsqv2eEZNgv4E8ddBX+D/SbMETVqSjs+1AMD4cDaaFD6ugv46LEKYETEFSc\n71Y4dcoYTzy98PZOPHIlLU3zX4wCnWrpMa3mrrHvbT2PhO/yqjAtJEJSKhSj\nAbmxvK/GgdC1S2yY6doQ6cDSrmVXgckp1syLS/7xdKcr/j8A+gwXRqtXYP1m\n3ZFECLT9WDbBuA38qn7LHG3z+dIORBeEiBXsK2QpemxjmaLlu/9USs5zqScg\nOAWhSchhDXjotqXd/0om5L0pljbEEELjWyvYOK2PC/fVMV4IoLvS17+hR7j0\nfnew2FVRf8eVoxwDfd/Imdo/uTV/an473jqqpyJk4OcnC11qH9o5sSEZEWMA\njGD0\r\n=Mrzq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/touch-target":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.9bdeaf928.0_1595985637404_0.1596914134658194","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/checkbox","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e8125e0bfec6550da63c288a54a3cefd0e7b27d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":40,"integrity":"sha512-lbxD7O5ECiSnap2IF5bCZpqDmzWtcGbn5P6OV0vsJvrk5DBoLS5cDRIXEWXmurWc1nu21RDEAHhc53Y2rs31Iw==","signatures":[{"sig":"MEYCIQCVg/25iDTxASAgBp7WqRPxOYNUfWQ3jMq2aOyhr2vzZgIhAKOQYL/dWuH/bYsxt4jyWUAZqOZX/pJehgsUUe/VBBT0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJACRA9TVsSAnZWagAA1QMP/jkQVOqtdznR/JlJDsbw\n8O/6TSQr957MFPbYXp+Hn1aCGvrNqrFCgDicdVUaJnKTieseKarADMU407ue\n4HDE2A08P5txHachlQnTtF1ES+uptpfq0X3Zi7J9QCex6qnxcEw4ugnJn0ZY\n8dD3CdQ5Ho3TA8koCDJ4XCw6+ZIJfweCXPvXSha6BXPHCDs/5A8oGpOckWLs\na1QDrabmO+sOyrCK7vGuquhPIs6eXXsGcJH3prOz1ZymesDSF/KAxhhwFPAB\nqeFtIpRnMXAhCBR+MTeJrGsS8Dvb3dj8gjFF679AUJZrJ7sstRBVkDbRK9w9\nd8zODe94Nyuvn1gooASsbq1m+10yD8tMn17UwYLWWhqvYEcrNK5hJQ/qiJpZ\nxJE2lSxJ9V0heaYFyJpX/mS2CvENLzX8+VvrawZdX0r08RiZxz+XeflGGIxh\n6gJ2KcTZZ2AAxY+kiAQQTGAysuudfjNXC8aExHtFJrhqp8qP8UumTKeECgHk\no1eCplYEgVBKIsq/m85UA1VqtpFyw39Ns1XHnMk1MUgyVnzb0SM4ikFoui6M\nN0Lg5NBzqR0Ai/FwwB2ta+iYuT4fPLRnEhigD+BhEAHrck6H7JNE+C7Nw0Yx\nzpm2I0DcDjEdn4gLncyI/9WJvKNJ2waR+HF4pWZr5PSVQW7p+/TjQ8tYoIxQ\n8hA0\r\n=H7ZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/touch-target":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fde2c1f9d.0_1595986495766_0.4079618422323035","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/checkbox","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fad0fa7edd5d918e93403b68e655a8f668312bd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.6b3876d5d.0.tgz","fileCount":40,"integrity":"sha512-Sc5KTrcJGclhaMzWiJ1D7sYMHQI0UkJPOUDXxJfIJE/82N9hedWJeZ3ENSRnSPHN47zcCaCW2sMkM8VquWAKhQ==","signatures":[{"sig":"MEQCIFVDYqV85f9CYUOk15Jo9nukxCxBsxZVXYj2xuBR8NHGAiA+lauHf2i6muG3UGLeqC8/n1fRF4SinoyRRpALGI38tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMiCRA9TVsSAnZWagAAvMwP/iJMDMy+CkezTCGcoUHc\n2kVA/FRW+bNS9Io9HvVvrztDT/w9lC3NXVYnU2rA7+1Gz4JrtKVk+xu7JH+A\nYeHn0VJp9EXoEZX4gS7kNJbYauoP3+fR2BniBdxWkJb2PsAqvrYKe4ZTmmAL\nOeeDEq4k6Lznx2XNloxrzPBm29fTPC9ShjEJHsOmum5H6CcwjAVIB51+SinL\nsJlOwZbsGBa7WdagtwMtO5gKWfLlFYFdWG4/a3h5P4AB8/5doIXxmSiR/+Hg\nDKtypIj3VncMXCOsg7pp2HmXcWwxC0kKTnOgN1ukjcmz1vQ1wLWiIwyGB3sF\nl78b3SoasZ4RJoBVfp6zv9YaEnvEzHW3XORQbKXkEWJ1fISw2ojmdsqg7BmF\n4NdxtXMEPDl6eROIjIZ5x7cuA8ElTw69yPuaEmigKFGUBI9xULeCZEvNe+q7\nJtnYq1Xz6l4E8oRBuh92bZME4K4cdzXLCkJ1lsukq0jwZJbDHPfkPgwNa5Sy\nsei53Vt7LyxeDeWu6fs9+k+8e9tTIaNggCovBHdRCkqVlejkD4uZjIjjrm5D\ndz0RHet7WTnIcGLCzMM3/meo27THZPrt4UNP1AVsVEXC1Lycqfbf/ooHsYhT\nLurKzsS1N4sjzVi0oQ2cK5utNHDxRLSjjFfjDNGWnqyLWTMzNjVFaaKl6sFV\ns8qP\r\n=OEPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/touch-target":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.6b3876d5d.0_1595986722361_0.1357718323981929","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/checkbox","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.30ce17873.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d34e7689219ee965ad6a6d9ee3908f0faef168c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.30ce17873.0.tgz","fileCount":40,"integrity":"sha512-QNVJlxKC3jrRZ94l1DGUm4zuPP1Ir/8s/TrUqkiYL/iaKUnnSWaPLwajIU7Wz/deXiEs8q7LUN/X0r9CWBxErw==","signatures":[{"sig":"MEUCIQCKxRfPbyrss2xSAibgGjmcRAvOmEGWxf1SuWWlqBeHCwIgCm+U4ndvoSJVlUoOf37HXgLg+h29AaygJ7DkERS3YCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":653053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6GCRA9TVsSAnZWagAAqfkP+QH55TDxiUbX2d2+Libr\nJG87+BJeScyozkX26uRgkOund7zk+NOXujwDJJv4LjFccB/uYKixtEySNGco\n1MjTqVX/SVBz5Nmn2FaacEiCmd9u1bTZZBL8a6SEfN+QNxDyuTXnsDmX4+Uu\nw+Sa9NmMMXnMldhsCo4p8YhlShMzQTHUTuryHRJ00KpNxP2QsR723wwxx519\nRl+NDf/XUzvUC2xTy4gqbOU5gPrsoZtShvBVXYoVbEfPu4sHcGy9Ekf60MKy\npXh5qbrvBYzUqcFK8GwF5lWbtFPjXVpoXPSOtYvYjxQCXTSiEOFbOj/5MDSg\ngAqQiRm72VDnCexIaDcB14aguhp/fBVxsbuE/L5XLKEAAkDtLDUpeAJEU1YH\n5pq/Mh7AcYs8kIiATPuz9cG4qwCdZvOWKetid7LjPueZh4zmwpU8GiX2wiMy\ne2mo5iEjtddWHWKfyIKqPeVQN1BYgazCnZj3qCW/Xz8Nn2/fPfNsxG/qoSnw\nc2kJYAuMOoelRz1VItWLkRFcskiWRSx6pxLyYV6JFnpQfcqFMX//lqdvE5OE\nkBz+Bj1a2iHmQrAHlSbHZ868eFNo4LwhxQKQaDJasIYuhrX5s25lTuFUrhtD\nmIk036YCsQBtWePMtJ3rU3X4xkjTBcCOWlqU9qOU4uj1e5j6RkKp8Qt+a3Ms\nhWvX\r\n=FQX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/touch-target":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.30ce17873.0_1596042885691_0.18705313892694342","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/checkbox","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2888c06b2ae9fb4b7a49ac9ba5bb77f8d6e39f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":40,"integrity":"sha512-tTUnhhauGkAlt49xj5xRuNWdqggXJEUNGrYURs3qbuWgpMlyyrW6rqQHDZx1ihWya10QLtFezIG4mXgduId70Q==","signatures":[{"sig":"MEYCIQDy5zdRAyH36vzioJ8BJvE0jq7PxxMJdGZdQ7wU1wO1iAIhALHSlzE9HmK4A3szyTvQqb8hos15RD+FmAM/zCDE4s68","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":650453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8SCRA9TVsSAnZWagAAfGEP/RRdJg/6pZc+3/8uOHZP\nYga+r4PveaRKozuSM2iJCliJ4HaY8Op0EXcFPjizjLmHCSKpSi2K/ZA2S66i\nwmCNpdlg0vBORz/SsRlU6iAMWjSZ4f57oXnsaMxxfcZvSOWuOi4SrvDuDRiy\nCae49MCTeakbLDxrTvIa+uuf6lXduHVz2mivOx97PFloqmS+pBzeFIT1W622\n2Ta3fuqgYd29v4nIZURLiMEVsFTF0YEnPYddBOVdzInWHCFve8yjWujj75yt\nmNy1LjEW2x+YsiPzRfK5aOfhsHjY7ty7dd/BVAVCQbEO7q3ngwLZs6Ati+EI\n6bpuMjPXP11eLMjj91PrYLx3hAMz5lmoQcWoEVa19XAHs/MO4ARe54Gsw9W+\n1ndNOAuu6/Zhps8Q0GZUs94FqF0Uv6G//em/oK3ELjuaTtKWL5tMmZTKtTik\nCwvjXmj/0DX0FkLbGBpc4OXsIdO5cv1zcs1F6XCRbtiAoUvI2sIfNs34bOY7\n52W8ybaF9txQ+gkzoLrGMSY9bYxWt1xzEGEl2rcv7k/ejELvuWe0nWMMPHg8\nSOS9krhp0zHjtNBzslJpR1e3uT47QV+YBG/hLoQqZ8TuYlDGD2FsFgEnpQvz\n7OVJCKWvvMWftgfxKHaLGvBlCyk+ixCK9rAQou8HK0Nn77OvXltKtd4VTe4M\ntExm\r\n=vCw9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/touch-target":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.f6bb43bf0.0_1596047121753_0.22585566819612435","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/checkbox","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dbdc6f9daadb3de07205e4cad8f5b4c6b63eb23","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.6af75f6ab.0.tgz","fileCount":40,"integrity":"sha512-ch1SJGEmbY3wuQVYa6JMx+5XLR4aRA7qs6lffAcyoUymUrEcvLHovcVFoiMhLqo7l1JS+fGvFxTXAFBv4RpWdg==","signatures":[{"sig":"MEUCICYItPdxz1cLtq3Fywj/GUqwCPt3wxHL3EuA4GAauptSAiEAqM4M5/5Vmtt1gX4hgGgwKXUiLZwfJ1rDwuJbGsq37+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3MCRA9TVsSAnZWagAAwzcQAIju8iha6HG6yosdEgSR\nEhkgsKSK8WChQ6ehtA67nh0MH7p/3IbvL/4cFvzmQyhiw8TFRSbQf04jS+D/\nf3HxzoGZQEmEh2NxIulEgXDIKFwKj4n/QqRBd3TT5zQlSmP0lm0wow+b1bJy\nVU8lyz5oxx1MgD/vdPgjwb+U0zy1zpGvi839Id/iUHXnymwUmzMU+Mk69hwk\n1zD3HdlYY2I3XT1kNEwcN0GBScdSRaXizwgN9As2lqQZF91akjEu8wixStwF\nqM4U6z8MWRQ+evJ134ft+ILISKNA0t2p5/3QE91a1DkeBDG9I6Ew+75zJtX8\no3XVPXFHHs/w5igLGe41NPV7e/Q/PV23I2uOOmyrh6MI8HytIETOwQuYh9y6\nSW5QIG8lQAZvp3/hJvgfeocYF6QUvFkNM1cWfBGYvzagLB+8YiXYLSNuJL+S\nuwCToCLq/4LxW8LtQ9ToVqkANvSFTD85iXHOnXgpQomwKLcBddzixFe3MVjj\ngJw33o4TOeAwgGt5ssljNcUKVgx0nsMQhYS8AJTnoSxCZfaDW4aweeu8Hf1+\nC11CqBTjvc5LHTOT6esBlon2qx8vmW2TBUUvH64hFXrKdaH++Bx2odFZqTlk\ncJeY7LJFLZCH5vpd93N0JDI4CFnFTqjM5wHKGrQvQ6JeQR7RuLxXU4sUEhew\nD9v0\r\n=gi6b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/touch-target":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.6af75f6ab.0_1596067276116_0.42331550152229735","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/checkbox","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aa42985aecaefb00133101603dcb75fe8f0b4c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.42d7a65aa.0.tgz","fileCount":40,"integrity":"sha512-4LxrLfDcCONRnjZSjyrIx0OZ0TcjLlB7UIh4W9d9B2XjHcrrxCZYZtpoY5ACmdk1SYVQU5KB0f0UVLvvfzjA0g==","signatures":[{"sig":"MEYCIQCryXBLJvbqYU1sfejfklLbTortFPi13CmQWvSL9WWm+QIhAIXGuunbNdIdOzmXm9VVUA10HLT8ndOrLbAtYRV8Luj4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/qCRA9TVsSAnZWagAAvHgP/2+/gTJadaHVcRw7KVRU\n6mm41daNJhkVC9eEyzjJzjORbfW6O7WMoj61TOdRUBtDseaAWUe8Ydig6k34\n4jnxeWGP+0IwWhoOX8wj0D6sN4rXum6pnfSWoTApz3yEXA9V9JbT61cDNxiZ\n3ONiHWDY+5qV+2QTJ/KpMN2Vjm1J8NDfGgjgAxTVi6+Um8D7Oc1+DAQzl9GN\nQGOX1Hwzroad6cksE+uWT/PI4s9rQYG39TgE3rulrqB14c8zoGC1zfTpJ2SS\noHmc6LHlk3wMk5iGKXOk5vWtSTiTh6pdFxUuni2TkzQVjZEQVnZoURbNdz7+\nXpBoUBoeshkBym+2D8mnlH0S33ML7KPlDtZLFhRyDMqrJWx+/LhMifICnhuj\nRuBbDWG1EdJksUJx+X5pNm+YCh3uKtb6BIwbSnyqWpT2TSFcIPKkS3o5WlGL\nUJPMAB5wG9Kb5LU5TvY8OE9xtN3UeijtWPQukzTBZBY3iQGC3Kkux3HlO6ws\nHplhC6HMNPI3cDCDkM/Vbug4zN9LNYKq8wyCjs4d3+vbqjlr5pxTqd16EJGi\nQD8Wv+SW0LZAz1R0Y1wjgw8gILpuDnuOpT2yChUqUBNFWNrGwHNLO1jvwX0G\nDYF7mVxMIIoUQNO8k6p/yqlcEEslqtSrYuwFJLFa5vF7P6s+sqdd+U+WyXAQ\nXtY4\r\n=HH/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/touch-target":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.42d7a65aa.0_1596067817823_0.3942958899395701","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/checkbox","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0412b39f69b6a02390b48e6b9a273cb28b245f0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.85abdabb7.0.tgz","fileCount":40,"integrity":"sha512-7crNxmvrP54EOOSO2XrnTSixVOXCh/swvzS9gWK0vS0nUhZl3KkHInHes+EdeCb/z3K/oDAemKDPiC9zuzv9BA==","signatures":[{"sig":"MEYCIQDVBkqMyncagkGMdx4J3F57m2CAOYrBMfQQMoW3arIMsgIhANad6pCTJZ/4cygidf67XDmPtRsLEN2eg3ABf+ufSabb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEUCRA9TVsSAnZWagAALmEQAKB5bYen5Pagkx+PdoAx\nBCsBGgqkCReF5Rgy4Jo+fmppzdZBaGtS+DE1e6jWj7eVUh4FMUqBND1Q8/dj\nkTGUOmuVqKwXW21iaZT1CpKpLWzJGR2kFUHlJYuk2W9OFWXp+pAAPEpx1Au2\nXmHkjIWV8zYEP8Z1bw0U98j9akDlJyr7BQZsLpc2FUv4jKiSg+5vBtsiPiyO\nOouZGkGzP2pX9fyMCqCt6BUD94HBKMZ3FDAgDCz9NHcZhZZGyaoQKI3+x9BE\n+iGco2cy2gjpbguDgA6AovwARhqbHzIaymas8+RUlAXHp09PvRRI/cKuYcSG\n03V2ioHzY67kvjNvowRKZG8s3vs5iS0AcNtklOQ8PR8MYM3SB4TxIdWZqHvb\nQRznLgn8Pa8/M+41MYMt9kKzs/Emesd/86T/FXOffrkUSciyLHnEvOTm2hWA\nc1ZfpRTtpACe/9cHWLPiLWmeqH5z6m7scAF6nymB/DzMxyr73oHLoGhuoJla\nPTrSucpvmQp08F6CB3Vq+gvY3Y0YIx8ChOP6geOKde7ygKVe6x6r2tkONp3k\nybTWxlt23f5N1O9tGlYpzDHKRprIAwvIKjfoW3E7mXUZB6e24RcNvUPxikc7\ne052wX498QsVd/LYRmTNn1xxiFc0Thdk90T89/pGpHYav4B7Czg8UAwHamq6\nXQcp\r\n=xRip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/touch-target":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.85abdabb7.0_1596068115968_0.18513887059211798","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/checkbox","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada8fc1de8f9d20ff7a79d9dea78a7abd7f7fee2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.49fb20ca3.0.tgz","fileCount":40,"integrity":"sha512-LERTliJbds6aETyo/ROFg78RHiMTOHxi1qAspkQqIaFEk/jC2BbAvGmk1WQxh8MNHVNxmLNzhUi1Qgl8O2z6OQ==","signatures":[{"sig":"MEUCIQCExe7Fl1nHTFkBz+6KsSAa6ngYeqnz22nDej4YVV+llgIgORC/o6eQE/cl2tJW8OHqRewsAXxqew+4K7L3ZBBVkI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIHCRA9TVsSAnZWagAArfAP/RDd487+1tN2gNxRu2F4\nafS81vB9E/WzS0e22siZg2M+AuSq4E6UgaCF8DJaXY3OGGR7xs/DQt+uYfXq\naUzcC67gMeL8hdPVR5/Udseo4ythFP9/4Dp0TyyjIl+r+PW6NqrPi1ABd2yf\n+pT8iZhNNcP7t8kM7PqvsvBcvFWxGIa3xuQjxMapMgyFWiIBuX80JOy887+7\nGhV4l57JBIZDC8M2xcECrQr7ydLu+15gYyBJjKtEidHhXscHVUxGdZ8wN4Ao\noe32iqqqSR+z7r2FKvkSgvFeC9lG4ld1XSocl3opv9kUxDfL3lCRp2gve8Qf\nuoGtTLIABVVCAXf3GB8zBOQ/wA5Bmf7C73uxvsHuaZErPkB9o0t2taVpxRWO\nBFoVxoCP34KFncgec25zpwqhiZXZWd3oa6uyPFgBDCqWimmz/aTBUAxYQxbT\n+BgOFk6gTCy3rU79uP3INnocBDKPWq9PyS8pSdT5tBfkvMJRztHjKRDbRfyC\nFcEcgiPNSR0zlfNX2U7rbyircQPB0Vn+6XVT5305nZRB2VJKmujfBmby0BMb\n5m8etn08zbVWivwmvxPoU6Ua0dsc104AFW0n5aBIxUagclgAVsEpAhW3eRRJ\n5Xd44OLHldmhd/7cfvrBGVderr9TgauwfIII0S+0fmviBT2wGsuWj+PBjm+O\nWIeF\r\n=xr62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/touch-target":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.49fb20ca3.0_1596072454986_0.9340387851907044","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/checkbox","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26a639c87a84d64eae77cb57a835c964751b9607","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.962d4abbb.0.tgz","fileCount":40,"integrity":"sha512-rptT72S+gz/hakAU4Wrhgp/CJ7Ze1kXCb4mupff+7Mk8JT4TK9TwO0+V60ZlNVNWDZeSWtBk5DN+wERSd/aE9g==","signatures":[{"sig":"MEYCIQCLmtnABQ1hpWRnaZO8dPxU7SEaOT5i6QsVFOagh0wK7wIhAL37YnFnAt//yCIGqysnSYyZdDV0QaGPlWR28gHFysFR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDhCRA9TVsSAnZWagAAInUP/1KlceAUmG/wReHLzC8V\nzPXcFML0Uu3YbEna5C/pJJbXUoOwxJ8DvHG3yV7EJyKcDCyBaeyIKFX0z8aP\nJvYbqgcK4NGBpyJYXafjsuUsjqiXSusY63lpGiZyHzOFT53IHXWqXNFt+CFg\nrllhC8lvJYds43LjOU9q2UFJouEBcxuMigHXabje4Zoy1sI4DPLMie4zayLb\ncSiTKLuG2yR/o/jPh5ceXDDa6aAWk9Qxoo4+1CXmz1LpLCdCCyQgB5vqOeu3\n6TmJLVNHfQVJzV+TjlZftCOgcy7gfjLvntRzpNaCsGeNXMDDKvSpt7TmL/dq\nfBjll/Cuvx+QBl2jnGLGDFfa2ZFNLHjBeCvOCQbyeN3mvvZ5NaFHR9qJREdq\nasGMvFDggfQ5KbxRFsBRpeRHN7dKbNGZaNYpS51Byj7JYEFc7k8sxfPsaBv+\ngR4WM4GQQabKfUMY0wYgXb+reyAQ4eYANxdkltt6VVmYY+fLs3KEVjA7X2iV\nFI1GH6kW9veLWfbrjz10yooASgnYo7ZUGAl53xyDRWp9lGMT1ungp4ubhhik\nOewfmfhPsPmTEJAlUYGKtY7BoRz6/nXcSqU0XkOL2TeT2hG1y1Q6zanbQ7Ma\nu/QrtQuI2UeuqbVU9hIHKlnK925Ngwjbtx9yL1T0hbSEg71UjJSS3+RCD0bs\nVFBT\r\n=94Xo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/touch-target":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.962d4abbb.0_1596125409122_0.053433065424630444","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/checkbox","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45bd6b691af28efd56950a8893583a7aba7d9b5d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2fcee40cb.0.tgz","fileCount":40,"integrity":"sha512-7Rlj7sh4d9LaNn23sRYjOKTY+BJBtgEFtHxZnGfs6ZSQG7+ztCtPIfMUPjFc8nkw+cQQBRUdoFetRQVEMpy9Nw==","signatures":[{"sig":"MEUCIQCltI5M0tEHcCgIUcygPq+yOVVhwW/lBBQkmNNdpBmxyQIgPZZj483d/zFp+BTto1j80rwHA+kChT0pn2sXGox12vQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGZCRA9TVsSAnZWagAAM4AP/3rjoIt6a90F4GeVR7Ks\nia4qKOQmH0Rth1lSnbiQyZAXKTyNPUK2I2xkLTaVvEqm65gjoSGCw6Mk+Hj/\nS2UaGHW+QHVxzhN7vGs54NVog7w8uW71bhBybgkU8O08lHjpjvmJS/m2U6Ek\n+WwH/mjZ16BD++tQIjOeQ3rr1+FMmHnDYxPbsc0n1FG7vsQcPmKZVUQ6zGQy\nEf8BmZuhCmzLDI2LaPYmSlQAs7/xC9432HhoDfyqm3qlwFt+gs6IJ28qOJ3w\nii9gX8wX26SIrkalapdLbXoT7GzLIXbPzeBgvi6sWVpCYHynFRT1+ief52AZ\nT9dVGQv5VtvmsFtIUyjg2vWf30556cBt9CIQtMz+onQJwgsM2lZnT3r363er\nIdTE/OpMOL2nYOwP/4NBYNlEsAHt37l+Q/NAC0mHk7T78saoSPN4+8QkIl90\nYNx9LH+qUQ3cCLsIOP7v5D5tyYANrS6wi2/9O2QBGj3Y27ugwmEe0/bph9CA\nC26dcR7CcZQorRuj4YmimELrmF8UTidCL9bxOmBZhP2TkZiqOoO5D7a7nVt/\nLmbJcyz+pGgS6ml3x1PZukh4KXGnR6zBZBN/fvPHIG7lzql8aP+PjHGW3cUv\n02iKNL/CdYTQi8qNke9MmuYjySGi/NEeu7oYWZiR+E1OvSTH5zw6GznU/a/9\n+L4E\r\n=+FkK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/touch-target":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2fcee40cb.0_1596129688601_0.5975547610579852","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/checkbox","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01e771701f00a168f5fdcb77b224d30a8744c1ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.bd5987f5a.0.tgz","fileCount":40,"integrity":"sha512-xdvsRV6bBrp/D4TTYKEeFZU7xv5nmSqgwGCFR2urr9wp16J6m03fb5lZvX0kTU2D4Vvjs7RRAKeqlZflxnulkA==","signatures":[{"sig":"MEYCIQDuu+MYMBDJmQsz/c7BknEjoAece0yUZQTyTQ9n8UvnNAIhAPh/9EyYWZcojawHgUeh/WDF7A24IU3hC3jaxiUrflck","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdfCRA9TVsSAnZWagAAxKwP/0fj9O5nR1lfGUvYAz5F\nmcm58yRu+3ZF49E09U8wAyA8dVB95PlgVMiNJD19+Ijs93bxISOYH46C6fJI\ndcyrE/pnLClLqtW5Ii0eDDJRpknLbhpB9jzTQocF1Xwy/bhwEpKbO6rmvO5a\n+rS4MMMtVzwgPnumugWR3/QP37e6PaixlBekUOEPUT+xZHDCQc9CWaA6E8gM\nGwhw+o1Mlj9LKdF5JQy/w99qkLaw0pXZMBn1E2hs+kmQWqS9Bmkdb3ezKH9y\nckCTkYf4EmR+enV8WVLyA4dMDUeZGL+Cgbl6x7FNHKxWISMhnCgkrmS8EvIh\nLCbwtVj6fbsP1pSj8xrbJxB+8BwqfqP7CAzUGxg/p9oJZR3It4A3Hbzm32sG\n9A52SVZa+GGAxAaZAoldPJ8gs58S13X7lgY+1v+R48qvYf8pwVWG7x+buMUU\n7mGLTIQHBHtNxkgdicPbGZvhGg6PXhtn4FAp0ETjY5UvuCLrzj9nBvb4AFv9\n8/Tq7dmsxcAvNkAnLbjnmPF/MuaPeTlyuwe6iKV4zfX3NydG0LFWMWYoDK0K\neXx7EBKm17a4EwgGkkg18IofKXZdMFxTfBPmkzzns9oj+t1PLjNW35bJPLbV\n8FhjC2nORdx+0HCtWdarPuJaYf+LggAti1/z0CYAyfiyfgspNpZjKJZyGqk+\n97Mb\r\n=uhN/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/touch-target":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.bd5987f5a.0_1596131166871_0.5091562818664745","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/checkbox","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3102025958c747767264189273afe5f4c3d98cf0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.005e86a9b.0.tgz","fileCount":40,"integrity":"sha512-9M2nKz9x2pQmVPZ9p6D4bl2dBq0SSLyWoF4mMpn9VIRL/Z4KCpzpd0SIse3imIKZ2/Lfw8XpJrfQUccslh0FnA==","signatures":[{"sig":"MEQCIHPsr1yLojXJi9N7JBey1mEmHSkfhpcTnaCLSrttPc74AiAStMXT7izGTp6A5l3W42zBQ6tWMQIHzDhAejogNBEXmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqVCRA9TVsSAnZWagAAy24P/087rC23b7uOZ9b7ls6O\n9ab6XsQh4rZFcbFdyKwtxbRWIkVJLjEmDnXXYn9ylf2hpTTPbyRG3LuTj2WK\nbWyTrn6FepfYZrRofXthFicj2wY9sC+y6cjw6J66e9buwK7OqOFfi33uyTb8\naheRaMAQlabQrB1H5haRulu6qUzFLdLl7izx9PNI2+rzzpJue3gmvx9I0Ryc\nqGinLBt2Yc4p+wngmrlMDRaMNgsbHonPTtat3IXaglERE6aoM1CYLKR2chNp\ndYjQmWEtY1qqWRIcyfS5/59dCCG3VJ/aox9qg6qCY/6uuBebx+NiuMSM2+uc\nwePGmodr9/Xt5PNiEvuwc1df4nABz0CE3BTvYFZbcIvyUP12DbZPNThBwyDr\nQ7tX7lf62t8TYsKYCGTyi0NIKnqGBqn5JUbmymwG8C4zDUjpJsiHKHGjniBY\nMI2+H22OKn7GA3WeVItXABWVKo5uXv1BlE+TyAsIviwuEUmZlg2maOjMuxJi\nxg0e3MtTrfZtCYHHhknhIKL3yCCgz/qdL+ZaKk7wg9XJa2FqZwhboOQ4vcNi\nw8I5TcApkLS2uCZ81bB4AuhJzGCalMUPkHKfFgopYJ5bzfdrnkh6faGfCj4o\n+k1JtmWL41Wb4/njRMeOzhfZZFD38wnd4pMYVyNn50QAikSAhrGWiIm3c6QG\nJt3K\r\n=kBAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/touch-target":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.005e86a9b.0_1596131989182_0.1511027652773449","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/checkbox","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa583648088b679411d7d13f71594f09d830a020","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e309c7c68.0.tgz","fileCount":40,"integrity":"sha512-7llD3a7uQe2XbOV8Ub0isjLFsXnB0Umrdr+NmT+T94baAMKYMUsn0OWgsWv3LDoqCJLrqKHY3mV65gSYWEdz0w==","signatures":[{"sig":"MEYCIQDQ8TFOxLUu+mYirt+eRp1HFxO3XE24Nt0xT5CszcrmEQIhAO3TYRbNTLmDyRsjgEOLRRYwf5D807cB2kzHQkopwgf+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwyvCRA9TVsSAnZWagAAMCYP/jiTmdNeASDLz7ijNbPk\nDv1xljgKjFHsYbMMmJCppN+IZ20JwHsXxYsOAiCeU8KiioYccXqKxWwpfhjw\nu5cNJDGG7Q0EnAGBW9kp4wlBPnEmMGSJjL337t5DBqlQ/Gj4SPYBAb0sRgZY\nGJj14xh0NP6UANxBtDe/KFCPs2VH40sEGOxedxSAQm0ofPpEE8KGQpgBEF49\n1tC+oEE8RM0jA2BLlcB3LhkFdmwW0CTCdb1YP269NHR+ikWRmKmTxBkCFSgi\nAza/XXNQBqVvvNGx9xBGkhg0A6JmssseizMzgjwt9ebApn45a7Ge66d38i7N\nqHrKUGUCSHWCP2gDQAXD2p0LntObpQ5DJaATnDiscDmNZy9GC1oTQUcQGStN\nGN9P5/Wg4eNt1j2A11HSuMG62VxhBm1WcbU2y06gNe/gidKWB/1T8vEu3eAo\nqj/sqRvWeaHCkYNPMpixx/kDykV8FmijZ1JKOZO+1A7ROWqtENTHGNF2UeHi\nKcbIcLZFDDYoVf+uBzZbYZ7ElU1xSm/H+FPj9zTMWwjiqhAqXXsXPOWBYLwz\nZ7muMumAY9gDKLkXEGS6qhKeSU4ghcfa7CnlURh9weUwlAdvcyPmMzhbgGkC\nH/xF94ko9GPzA+jDOgJtZV3Ms4N3y5wswltq5f9OkxqgrpzSECA53fNe7nDz\n+kAC\r\n=hGVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/touch-target":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e309c7c68.0_1596132526688_0.8416688405802029","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/checkbox","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93e6603fe1f333f29126050bc9448a25fdcdff22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.935a51cc0.0.tgz","fileCount":40,"integrity":"sha512-C2CTNsAK4hMOe89om+TSl8d4+mX2xx9Ayreh09kR/QJHgpkQ8lDGrVTxyMPBmAk5DwUdr+9K5XDSbProToisjw==","signatures":[{"sig":"MEYCIQCgXNCmCWOpFCA1fpyIlzKuMmt3fJE3sHlL4eFdPpT58wIhAMmxfpPO7MWvP47lOdrH4gAvIIez3UFyo7CFdrSj+ZWb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9mCRA9TVsSAnZWagAAIqwP/jpN1HAT640hfC5KiMcm\nKYkSTCDzaydaBUR9dB3Ww7eqYJEHOK0fT2dHAnxffHMbcTLI1QNvTKwP9PGb\nl1N8cKiLXn9CnEt2DijgIzqjqO5kwW1k/gZ8twDBQW7bUUrF7CAYTsNJVJHa\ngUvoIxzhdmwwsViM6ZES4/vqUDMIksGFqumN5THI/TG5SllmZHHCl6SP/zt9\nxetbOx1WC+0fGLlDbpO/l3fgc1K0aRt+7OxE/yXhM+yYN3QhjIg1laBGoQ3m\ngD3lyg4r5XbJVJ7Ci6Qh14Ck5/40k0ooYaXaB2tv/iKMUt52YvptptOKLe9i\nT3PhOnIKJJHNdBBStm/8Xg34bsJBjYubI5Ooyk0lJCCyl8AF104rndOkU8nY\neANlfde9vIcJjcGj7n9pdQJsSflhP43rSZbctEt63mxORTgJ4pe2Nmcr3s37\n7mauUErJoCBmNqRGcpcl74Ua+PD/KsA8NAHlsHXSwIywLA9Jc+CprR/Bw3lf\nGr7VCqei+lBpHdEmS/AFcINrrqdWD9xcsZrHSB/i/itAMxlIImuNDZuoQt/n\nMfosdli3zwsfcwiR1YaFg420iLe9DaGJxXb0GrlkK5Vw1Amef3ZqW9F0ORI7\nuZ3sOutp8oFRPltBhtVKTEJceEm7D7F1nNWGrIKV68uIAQ4xcSJ9rZ8ImeHb\ndP2g\r\n=idds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/touch-target":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.935a51cc0.0_1596133221214_0.25703220132969906","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/checkbox","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.74839da7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f22249c4a6cc32e332917e82a9765371fc0f695","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.74839da7b.0.tgz","fileCount":40,"integrity":"sha512-2ufqUK5eE3p+hcPu3LSYIxeLCzA8ZP3T8XkP0KZMh3SJk+ZoEbDUa0O+8JHbC562RnrPOcpTg4KsZ/kRYOGbgQ==","signatures":[{"sig":"MEUCIGCk7AG2id6ETV+QWSREOXW9n0JnjvUJ17c7Tw1VupYEAiEAkbrs9p3O8vcopRMfJQVGVpgJQqTBZNpbED/5KaXH/DY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxH6CRA9TVsSAnZWagAAw/YP+wTf8BwclOcay3PJ5FC8\nOhScnWJv+mhbxDGCcdcLAEwjfY5RrHgYxz+WedKEPClLcDis8hS3WdC3/SPC\n1/aEKjtw7AyooxzyLpd0Iv9u6i6RDvyxXoVHy1AwShDZfgcCGsZsqhAYlS2D\non/gXOZO0TPAPxss4gxYprzUaidD4F9x7qCGVCC8tmz7NEDo84dTvCLDl6xp\nCNHFc8cOTLvC5eHqKjJCcLzlq/7+4HIr4ewVSA9AeZO5Ol2mxDo0/I2SUNdZ\n/Lw5VTAmOsxe5OPbJbGMjAuPvTl1JTwTluk2AlBMsPn55USs8AmzjrlVmtSa\nEV37cIwO92D0KEvSzYNMvo9tAjEzGa7dGCWrgPDHGGrQL87f6ILits4n/rQz\nxa0E7GZyFqI2x0mdKd15b4CrHQDDT4lf0Ir3L97o9w5UjenGQ4uthqgFbXF4\nsFczRRSj5CYwggle+6jU2y3Cfp+nUws+CPOppHZzMor0hiXrsJ9baQK0Ab5o\nEclcxUp1GZn/CqJsSENnWEFVoQQF2yoOaHAOEXPYTWbldMwpCUgb5V6I0/Um\n7DpalAitQSX8RvbzKnBRxVX3+FnO4vgExqnXaci/1IgBjkx1KgU/2drxUe75\n1If/0PTFWpvhH9y9naWn36YvemeKOKCw0TyCn0ftFGzCGmIgOIdM0ApyxVv8\nijnq\r\n=RHnw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/touch-target":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.74839da7b.0_1596133882261_0.8207570166074858","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/checkbox","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b82fcea4555629b54fad62a0499a0d7a92870a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.f041a48c9.0.tgz","fileCount":40,"integrity":"sha512-J0hJmtN7EZNIExdm9AIdNGuR0Ne/PLQAfvgGGj0JX3rMUy7da4tjj1syHXOtNe1I2pF7/08GNx1E/ULIi94VcQ==","signatures":[{"sig":"MEUCIAFtSPWw7FSlqmIdpj2ShbGtCEio30KFKS/8++BeGhnRAiEAgux3G2Hy+JV1M1Nnul/ycEhdATqTgSoCcu9vEG6FCOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DTCRA9TVsSAnZWagAAgBkP/3KWgLuYIZc8QUsd8pN3\nCeN2geApWwoaOqzWEvKMPQTcLi2YzAI2gHgd5yyyF9dZH8QHEZgCMt1zpAA1\nfxEg/DpbTpNQtSRdaaMv5hS7E7TIN7+nBa/d1lIgpV0qyr6sqU1mRysfROpi\nriR2WStk2qq4ReGrGrTDrpfIQaCc2ZoR4rpU1dTchIlE4BLYEomUlgesofEi\nREBqUacxmkda4XIkpRWfwXvnQBnCi00/QlAEtUyQFd2MGoPRfktzvWwC1JQJ\nOTp4Iz3gI7x9W9TbTrkxNCmymnLGenkQiO6FnQiXoFcLdyTUbpr9Y9WAwJhz\nJP7vpOjT4wglPjPflbnmUACcHDOqC6tGjg6VjOc/5gkcN4RHbVWFTCoCyRRj\nqRc0aFqkYex3tjdeoFn+D3e1mmaH4sbvKjb4nk4Pkd15XOykP4tp5c1XoNyu\nRkx4AzpFve+3+IGfIEYRKFNtW5/7Nmn6srnLSpU13VjaMy/IAJrcltVquU1b\nFJMRRPQdx/YsDyZcTlA+/2ckGhyDPNQJ6eLsL4zOVxgExLORQwNglOCFe46c\nCRuPZUOfZSkFrR7rrHj7umrZN+sAaPmr3SkV/uNNPzSyWS+Us32N7lkoSsMj\nnS2xjdaLiLm4bPRLWr92OsyMDTSVni7BrvMgtu39u/gAeU9fVbBrpWOcEhsB\nt/um\r\n=OvYO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/touch-target":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.f041a48c9.0_1596149970586_0.720903893045638","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/checkbox","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f079bd6cee8a1cea79e85827a6549de9911e70b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fbb1381e1.0.tgz","fileCount":40,"integrity":"sha512-rKOcuc6ifGQiEmX1roJxOZ+SYOjWEupo7whDUAszJTq9nvpp3ojpqSouRXoj4Nru9T1YxGhwy9SScg8G4hvAQw==","signatures":[{"sig":"MEYCIQDdAqxPe9nAV61znB8140q2C3oz23mDEmG3qxR69IabKgIhAJmk7fyQffnu4azn0VB52CEZgT9h9pUBcclLwSAy9WJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3ACRA9TVsSAnZWagAALZYP/2ZilJheAAjtapdhMbYI\nHEaPqWyFRtBASXvu8OgT6lJAPRa7uZYGaZPTpOH3lJgv0ugvlO0LNzxYD94n\nsAk7RRjo32JhFAi9pRMBOZttkAStanSkBwp1r7X9Q6/8D4hWeATRmXbDRbBP\n+QquhcPrX68ejS5vHEtbpin1YxjJ5ypc6IbsX4PyWCVSWIvrBETFOWsWFSwl\nnGEFS6GyIipYnsh9WxrF+XWX/jDEpG3GLWzdECr3kYTSrQD9QV5JRcnaF2u3\nnW0PC3/B5HZzOrs8kKKU8Tfn0JFqw1c1eHJSOWzgcMg1Jxd3XbzSsYCjmV9l\nsVwhNoUQukUfuUys6XD39NdgjNak6S+lPeR2Q4+x+4RIaCxwA9VeRIymRl/X\ncqxu/KVUeitHQjSI1TyjpiUxBXUkQndQacr/jmObq7r+bWGYnwAgnovoXTv4\n8wOikIN018alxFW29ViST+dxcSko5RpHpV6o6FO1Ez2v1xY9tM9QwfU21IDa\nIHcUidX2qsxKf2zZwBQFYm7K5WCXO0jhrN0wAcUlaMi3BKfA77yftL8tccuH\nxdG8htRSU6xsJkUhDMfGMIsviCSQNuw9bRasIeg8CoHtezg/kHzCvdoBKQ1P\nBXxFM+wuyX59uBIeko8OitL3b6NO4HyBezccZ9rkBhiKnRE2hVEoGUlu48Av\nMvKO\r\n=vkca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/touch-target":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fbb1381e1.0_1596210623896_0.16058120037852208","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/checkbox","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd37e02f0ab2207d08e13f5908d5e83fbbee705","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.7f61d5785.0.tgz","fileCount":40,"integrity":"sha512-k3mL2BsDlAbXSKXrE5Ha5LuodCA1yrH3ltBqjMd3kw5o1WpiOpKskBS/v/7IoPmuBiRJnS1Ae3LEV/ZSPxJivQ==","signatures":[{"sig":"MEQCIEdXe3VEKBww1AUEXq5XA382OiOTd46NTCJVJY5DDeuVAiAid4lnDx+Czz4Vs6K0zFuaYZu3ia9X9Kf4kbhFsHN8zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNyCRA9TVsSAnZWagAAy7gP/jm4mfiY7eVvwLBQhYCc\nUxUdO8KYQKeKIT5g9g9+wnpDb0yidIiefwUANfVJxgsSBjkidmn51HZjZhMD\nbR8Us50cmSmhqwK/LtXFEJX0C6fnQTywBdq6RVl5WRxjDwnXqmZNQBHWWrT9\n1y9zuqZl+RmATiZcdPZH2zUFT8hGHri273tXv3FRFddPZeS8FubN66q0/vEZ\nf6cCAH8/v7ZZTCOHkP77UDSORaEtUDWEuSICY5j6GwTaZhOFW+UobX2UQxju\nEenuxzoNrlazaoY3qi2pPRpH0G/NijoMhBD9InB/Lhrzh5yj665jTg8S4n1q\np01M+JDIPYdHIZauo+M6l9nIUAeEk5PoFPU8WwY1SDuFAihUPj9qudy5x+8w\nE174XJMbYd79dUOzg7IB9bjqEhwp9OtV8jxxbek5X+g9XZPdNieKfdW/ZNMs\nDvFBCIkjc6OKyhocBeBC/ocESachWz1nxjYM/6YLLf9p946WLWKZo/qVs6Qx\n8znNfE78bpJuKXoCzmU6Ne289A7d2J/cdhQ87b3G5/qQrVX+NYerWyjokhkm\noYJZYPpHn6dg3Wl/Tk71h6ku0tIc5uJ3hUiIzipQAIFZXO/XOevMWG1ETrS8\nR0AjHW5WkNb0emaQIcpRwq7rqhwEXTXj4ytfHJlBMa0n6i3BilzlYCKdfUWd\nF+bR\r\n=n3Hf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/touch-target":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.7f61d5785.0_1596216178410_0.2895919186105691","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/checkbox","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b0e3266d70f90e22b2aba4a38c556b20dd6baaf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e1bc84d10.0.tgz","fileCount":40,"integrity":"sha512-HUcZ83XetnXvfSOE8U4toPuCZuyl6LKwm4sxwC5Ijw2eD5bRUuJaoVKRlA2Ncb3XeK1vwjD16w1XC9g5OTS3mA==","signatures":[{"sig":"MEQCIDymc2tc/lxFcOGkW9IaKOWxaMJBOOWyltWupy9pNrmlAiAYVP6W5ZobUCU0KxHTJNcMDm6QYNS3csBuyyUv11zx/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE57CRA9TVsSAnZWagAAMB4QAKHA6sNCc0GZla3ZKXVA\ndwtKuUa957Ew62svgoj0QpkjhuIXF1WSH6FXKSP0eW7dzFXwIP2IdQf7rSLP\n2UootmDK2XP9mawi2Ozp7ISLfebTaX3Xoq7wU53ONYsqE0haJaT9Ou7yXwKa\nm6Lj4PPctZEh5Ufu76/oh/qTkUf5EsQqvBTiLKaqRPQTYixg6Nk+7KyxAE1z\nHuxH6vKIren1mJ8GTBj2twCtWaiKpOq3nwcktG46+AJ+lvESecwDHvkjlWuC\nrEIf1tC2GvlIY1pygDLBLSRdSBFBJ+rxH5WPf7cK5d0nET3qcTyqsmE2P2jx\nG+jGOsnNoB3Ef8Tch5Rtj2wJWZUqpnDxGId8kRC3A1e+sCm+7qV7sKjxHLJc\nNa5YLT+yC7NkEWk+CCGNifGVqoeWk8t8ErubloXoWA80Eej6QsoexW9MpCgC\nv8+zSB3300QIGLcSFPIklfX9uCJIsFEWz1UXqToB8XmpO9lkedxwanbfebGw\nNUSGGygL63HK0HuTQwYX1VXjAELdVptpEy1mfsgeBdxjRI79ugDxbHQWhnCG\npJu5OZ6bdNt0eZVvdugGSToEhgXf6PZxv5RKMJ0ePIR5QZgbMVWiXzcXe3fv\nLhdHQqnV+ZA++gKhzP/YQBXd9NeRkQqoxxB2iAj6F8nR/MuEO9plDddE5sew\nEkSI\r\n=0pyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/touch-target":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e1bc84d10.0_1596477051062_0.456410138611979","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/checkbox","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.096a7a066.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ade2dab797df7a36ff5df2c209dd550326cb9c5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.096a7a066.0.tgz","fileCount":40,"integrity":"sha512-JBp1EX9cXBA4EquX+06oluiPFI1v3pekmryzGVAYL2oB9ksFTeFtC2tNHoOnXh7hWUsxujQTf0d96O9Pql/cyQ==","signatures":[{"sig":"MEUCICNb2tJC+xbmgvAJ+S8epPYB7L1ztsSky1Xc35uaceocAiEAl+49RHCEzPnH8+5+NPaCXbXgLqdennZCloWtnw4oz50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8cCRA9TVsSAnZWagAAkCMQAInJ9tlvvQ+ThUqn1K1K\nxERCgtKwnX3gD/spU1/H07BzAZrljiT6RiUoc63/AQR4n8MZ8d7mIOs1Ye1q\ntyM2KrUCOdXObq71DlSdhabHA+NBREzpDSIme92qPehnaGIc5zHABU5QLeSj\nBLwIf7uQeTARWl3iDJZxmIKD3a+anjtaFf8dbetmv6OHKwIbDkxWiBIIbXfu\nTSt9DFg8q+SQTUYtSgwtLzgKIccki/hPCfsAisQjed1v0IK+X9VvzkUmzIou\nS8f60xjFLtynsqbTtzqOMeXo7I04ofAyrgRn32nkiwApi6U1pdSBJOzG0yJj\n4Njlw3lvSP5/u03rMyvm3Dgt+LNhc76ETVpzyNabRbplNFo5si8/Vwr37yVY\nbJWvc58hRGQVom9whxWagCq9ZCe9ONV3OXq98jHUPodIrl58RCEANK0CyEYW\n+vvSvSR0gbYmagqkBgtkqyOO67xK6RPEI79ulcB4ksy77kg1b6icyHrveDF3\n429X5EZIF43K7bbpV5HQf/gLiuI9Y1wmfBe3SWj4p1frKpMgjawMq9Ab6GY6\nXYw2a0bBktQ5t6ZqLhOSuNNW9XQ6R8gEXQMjM+qFC6PrhlfCmJm2/CQPV6O0\nBwf6pEZie5Rf1J7A9AtgDfx73lgEXZf9La/cg8L5rShuxbZwDvT8yafB2FB7\n4fh8\r\n=KKkA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/touch-target":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.096a7a066.0_1596477212317_0.9460099609031056","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/checkbox","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7973e84d7f6d6d27d05be55ef3677c4cb1bced07","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":40,"integrity":"sha512-u1wFvXMddLzJrhksqK7Tq5Qbm5KQHo5bIVrHMcS2/tQKrFDOAjm2JBBxnwg9DHIODa8Py6OXV4dpNCsJ0vU1lA==","signatures":[{"sig":"MEUCIQCEfHZGLQzDD0yCitUCZHjNigKyPYj+QKvH0hjyupEw+QIgViqI9q+tLou5VKFGEimDp6Hy959dAGa5MJmpu7RDU9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8vCRA9TVsSAnZWagAAP5sP/0nJfwHSgzGswbfiENkB\nkxJRvmsyqhozhBRDtc6Obndij3sPJ+MlTFsPymQDL5lXa7byeolkduYAKz6g\nBXX+bgzVl6yMnWb8BM/y1LXIpRCwC2mTXt+6Lyg5fhjTSP10pgXtV8AgwvmO\nHq10pEKWoL7svHhlPFKG2xXbTFnNt9UVE3MDrf2Tj1UQQgGhXXhwfAHK8VUN\njXMPXJC9eSVjfwfDMGG+BrVNd6g5a/M6BvqOfqGfgmSHQ6tMy9fNkecBKn+N\nr+H6MiWx04GZsTaVXYHY6QSmD2jhSxrhSmpPzZo3EuJ5rhuwMz//AFC1pA7D\n+XHTC8p+dsbUQ/dlz0/j9JxLCmTMG3Zu2uU8segqJ6yxyNzbSlHjrgqO4n6F\nJzxbObuWya8Bt1E5M2hf/0UqPl3lVjxFuuAvHczGLoKSXzA9hL3Bv6+cH5eA\nVRMBn5NqVV/E0Bzg92CHDbwM+DKet+DspRKuIs9+3NzpFycY+aUUGMRrCiq2\nZE/e0EvX1RWcS70DXqGLDsRSnIfiBqscfcTjAdnFEP1W6Sax3Fjy7Eu8kxG+\n38FB3yd8RjjfzHmML9o0r4pONWX49z0p14QDRY/Pe9eK0UM+xWxLanPTuQFT\nYBlYpXBDNy/v8RiYWRsvUsesQEER7ZGYt2rWw9Xfnc85R7S2u35Dbre6r8D/\nk16O\r\n=LHfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/touch-target":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.aa3a3e5a4.0_1596477231253_0.5040676423277506","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/checkbox","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5903d39af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7138c3308ebe898db6e46e8e1ad5d1b5f758304a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5903d39af.0.tgz","fileCount":40,"integrity":"sha512-LH0nteCHiPOLAwbzrXDafJlt3NrqXkMeGJTU8N+WDNOPGrN1k7AykohTNK/7J1KOpFNWXUEvfVYCJ4Yu7kAI4Q==","signatures":[{"sig":"MEQCIDpcYBZ6mq6x7ij7TEhA1157WewxLfziaCHcluiWgy2PAiBk8O0zkVNZXqrZGsEHiNUkIOjhpsU7j+KWU3BY1FpIxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9NCRA9TVsSAnZWagAAWS4P/3P6tXUHbNLEPeLOdiqD\n5kiwrDkR+js9pHeHQRmRwDRNq+xXlR4KPSO0Oz48vwxlYcCy/v1LKZNBS07f\nHYIz6s/ior+VGTyUrrmhMni+hYDBRnV9jTpqHhG//Dnt/+BP4yNxrVmwXeTu\nc4a5cFxALAxaEvDiRRw2VpwhUwZ7t/Yqu7/VZkm/WJgaIfr9lfyIcHbmZLTr\n2OOL31hiHXCi0OjCQoJAsex9y1R09Ko3D8mLJSJJfT9quJ0cDC3+ahHUiciG\nVPErXp5NU5IQczIPubUIW913KEBG8ZlfV8vmLDS85oDgv2MASrtppWFbT23f\n7TkWNDcqUjSU+U3m2X6EAZlodRgG5DEHwAhMmHpiDgiKeck+aHdMGwCYXFI7\nbuoSnpB4QSLEy3zX93SVf1lXm2lM37nOtFolqIjjxrW40AApKIszmE+ZvOlQ\njZJR0p65FLbMB+asJdqX1EjkIGdTf171YYS/HLBDi3srnNrsSQcNkR6r/jEG\ngnlvMyRLxyGNeUv/sXEEDCYXmCqQ8dFdyWhk8dmdYptelOfEfyJTF7iZlK5k\nu1d+tJzD+GjIPAPmJYp9xpf45o/a7syyraJm/Ch/6N0thsqAlaVABGfC4dpJ\nl1Hzdo+vLCAoRQesZClXA6N53Kc5g3QdfRzVW2bl2ff1kLGxqs8irhWmHeXM\ndyXO\r\n=SesL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/touch-target":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5903d39af.0_1596477261117_0.0689969170632434","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/checkbox","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.72258f898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a53a1a6f282e3d7b91b220256f43e2558681ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.72258f898.0.tgz","fileCount":40,"integrity":"sha512-2V07eJlBPz9xJD8YTzZdm2GVx15OBjvcDzt27vi3N2CfdTtkY19Umi6Xb5fsKGmR+4EraaDbfYTr3Vf55QF0Lg==","signatures":[{"sig":"MEYCIQCDylHSTuIrT00m23t1hNoiipiAxs9FSD/gXBcOWrnOHwIhALl57SE25t28FzvU9kjb+griyvf48kDB+jKgrgUMuqKh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLccCRA9TVsSAnZWagAAhPEP/0LPoR0BaC3QuMYAU568\nQfOISJbdDT584f82FQ8LUCda5QA3jyjdEiCpCcCPPXkFhTQ8kc6dYQE+PwMF\nG0fZ6AYB4fZYgDJbNgk58Bah+3IBUOfZVxvlKAyF3sL4PryasRnVWKUF4jVp\ncgNNToWXf/wR250EiLz0EUzYLvvrgCBz2lDTmHi1jYGrZDlsKlgTj6KoVBP8\nCxP0O1ymK8dsEIXlRDef2OdqdrwPRr/voPpeo0kb3/XA6pw+2/y0saLD41ni\nL5ZMPMt8Q8aZ7+oBkxbWioTTBjXyhXjXjebzil3uo2xLXQa1j2GA76BYuCOo\nSbsirtwP54EGxT3TEalzuh0mr6pGK/BoIIrqWIl1lHAZj9L+XPgdjhNPyzbf\nFhfp40AlJkudBTeKo9xD/zTJYOL0YUhuCqv04bHo49Fq4s+12t3ISlcWxbkF\nozu4N2rA/GdfFdYcFzZY7VZZSwWZlAsx2N3/3E0TbQfAKFC5i9mNxULPuLs+\nbgRtcwWnCE1RFcUarAVH0r2HKDJA+37FH9Z4BuOyFRxqjpWH0KXYB7SrbMsX\n6iJYuuJZVD8KZH52HGR0XXi19seLYBN6SySWxVJB2owyEcAzLnb38lGDhL36\nhEkuFh4mFf2ltEEeD0TcoYxNOuaSTY9BpGigpAgK/+3xVhbH9nwmgTlezdsI\nJVfb\r\n=wITH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/touch-target":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.72258f898.0_1596503835446_0.23010701959219482","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/checkbox","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7705046655eae0edfc5dc8e3c586916b5978f27","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.1b44b43c8.0.tgz","fileCount":40,"integrity":"sha512-ptrcrndnpiQFe+4eJd4e81aUw6VSOvL/zI4PALRn6Y6VHXVV2eJh7u/HSCxDGIPy7g5PUXV9rVkwceZy8VVB8A==","signatures":[{"sig":"MEUCIQCKmjgJtlMVH99/+KJKu4zdA9P9o0n1lWxwLn4o01nCEQIgDHfyX4IyQGOAsUu22Fcm8zt3X/eYeM5pR1VQWOgYod8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFJCRA9TVsSAnZWagAA6rIP/1ROgzA1jp+JlxBQWxop\n6VATrT3ngkVISCQB6UM4pqlM/ztLB4vbAN5O0YtpEcXxImCGk9ZkrATxqZh3\n/Gmgvyp7Cs2TiEJirYyQaT200wtNA7ujIyMJzsiBkU2HSaJNBWuX78DDKchS\nkuGr5v/ozuxUXgJ9oWPFLH5YMcSQupvdzYsnjpXO5bsX9neYBqMj1OaTc1L8\nmO1Uf7Ae20NPEqt7SrEJWrzXiAc7SqazO2WT94F3NQEvsOz0jUOe+px+5vbY\nZlpI3a0k2RAiwwhJm5IqhhFLm5KM8BjWRAV/mVKArJljVnEOZrFwfZrmN0tO\nGOrJtW5y/6BnCkvHFHLlAG+ZIb1RyDLUp0NiTi/l2h72srKD2ySVWBQX7ZEY\nQaKgg3IvtIo/ua+kNcMcl1+Ky1oACWvfG+kplrv+G7qnCl1IuAFChCWmYrup\nIF8WZbOrWeC8+oD5b6V5qGTLUdQqgpvyXRk0UhTgVGVf7l+/Hfx8HUhuKRjg\nyqfz63sbDNiS66ZNGL1ExBT8zgsbRKUoMbAZhcGw+Z8jT9k89hghLLSsM8E4\nZIChmZFgancnt/CWYEu4IEcr/RGUxQjywOy4zbiYe3/4pTcX5mEJwccJTIQm\nECIe8TYYERE7S7N4YC7crB37nYTWLNtRGqOZbVj6LQJFHwJZ1Fqt9jXbn0OR\nDnSn\r\n=RGJV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/touch-target":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.1b44b43c8.0_1596559689128_0.725080464554275","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/checkbox","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"499030461e18eba1ca79654728389c02b9e7ae32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":40,"integrity":"sha512-LWjatb8SXZN2RSyYwja9prc5jQBgnu//RD1PClch9410tuF0fWRL60QGoeIXK+YgL01e1hFolzOe9sXJuYboFA==","signatures":[{"sig":"MEUCIQCl5FB/dnBQtjbJb7ifLGatnJvcxsg/2g4KpEgv30QMBgIgCNISirbVDFV0nPVa7KlUenAkZGtWIs7pYQNuJQ6bzyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPpCRA9TVsSAnZWagAAq/QP+gKYuzjGSxGmaWeFkJsZ\nxVIdBoeYv+BBXuTGUm1acrBh+cAapnncJxaqMxGW676zDVbuvecnpG0jmTBy\nb81l8ulH+kbZv2woSPed8X9AlozfnU3b17dv/ONW7fQAYQ/mr2PHPpZKAoot\nSCnG6TJZQ3e2VdZRpl+TDQYouXeOKrIU//WecBCnhBFbndWbVbJUuPsz49H0\n7hhsO85N5PSssoi23vLbOihiZ+Qr71Gq48D2wfzIQseOgJe4i1TWNI+FzLOt\nCBbCi4V0PQI72HqY03pdv0ZaK4zJ/WsOM1sqKEi+eel+p6+HRUhfoEtFmfx5\n5Ar3/YkCCF1D2ohoz/6kdU9FaR3yDyntAO+aYVWWlieJuu5+U8n+obPkS7h2\nskQI0+/LrnFBt4ZwLyAJEB9b9BQaC2pVxoTGl9njKhhkJL1SOI4pDy36e27F\nDKnZMTu7S15iVZfubeB8qS2ASafcfrgV7UUl7I0aHKx/gXAWnkJZIcz6DQX9\nNYS2+rCqVKaWsk47fE4hU2li465/EjiTEGgKwdoNN601TwEnJdhzR9PDBcGF\niaKhZZscQp0d6a774YxV6DJ3KXQHHCQg8/Pu8bjcwO3uKGhnMestD4yd6Ski\n3IiteB+H32VS8ayMcgm8DLi/2t9Xhz4psUxXGlcVbDQdBDEwUuxH283RE9iN\ny+a1\r\n=OPHx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/touch-target":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e9d2e2f96.0_1596572648557_0.22697651419460407","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/checkbox","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78ea2c3e95b9d756c4f30e69665d6fd0f66a9f27","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b9dff0a19.0.tgz","fileCount":40,"integrity":"sha512-t+JcnvfQhQO1tDVvw7uQwTDomzdyJaWV2eamgYQw8Bjw5uH73A0NbE74IdwyEDUl3u0wg5dwCyCndx+ci/XXSg==","signatures":[{"sig":"MEUCIEOD9sMcrswgU2mMT0biiqWmVOQ9cnWh/VneV6cPvkZ5AiEA+SAMdH9rKIeUkfQ1oWhT1X2E2vyFSGwwGOJLcyAusgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwfCRA9TVsSAnZWagAAxCQP/jCc9RRn4ADaQs3SKVch\n+AUWkqAkqu+ukJCA6bRILTivcJMSrKqS2G1Jmk5YI6ADJItaSqEEbuDjZ60M\n3o7qscWydQGKzUyFkbezMRJTjZ6wMoiEYmHMKnGJt1CDR+BNqPDbWGU+HXpw\nGowHrvXtpQ+lSJsHgz7EKoB/0V8NT677s7rCWNNAZownG9qB03pk8Na1YFI9\nED/ps95rCqDGheaprEyBswfle2e5XBlv2Wx93CK625oxOcOGf+GdrVTt2OE2\n5GAL6RB91OEeQn+bNxllNX6FOSpLiJno3JzqKBS3FpGYfzsiHZccNZX2a8Vi\n2GbhSw+/H95z7Dg4oHEr2f/+og7QwcjWr0n6LvvwYypZXZFJ6NvA6keGr6C5\n/jwVtYsYdnyL6AFH5yoEg18Qref/zr6I2XlE3Y8rLjjHwiDRGDKbZYbjI9DU\n6xex7Q39LsQdGAPivfgJjrjYjBAUGQlI9wP03Dm2BBes1nqgHMEtkGMxe1rp\n0MPGOGFlD8YGGWrN2zGiBRCOGwvTpzGOOU5Cddj3t9wrpD1rPdwX9iiZjzAS\n8TJTX15BewK6qhtD/+kxvbAlriBI8pNU1QY4438DqdxqIkR0TAQ9TF74OzjY\n3HfKa23BgeezRA+TZU4jV4Ss8etTDRM9OTVYZGanoSznqwbcxzMPLILUYVBw\nYIZX\r\n=MheE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/touch-target":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b9dff0a19.0_1596599327218_0.5560270505399434","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/checkbox","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"667c51dda11d8912061c58909a4575b7d08fb971","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2bd09a706.0.tgz","fileCount":40,"integrity":"sha512-xH6BTD+RrWzM98XcCZ/bg3JiUY/SZsfnSECPLIk3iIPK42XT72oP8UaOn64jGUGoPZsUG//XMIt8C1ajPtXQgA==","signatures":[{"sig":"MEUCIQC2eT9JEuxFlZPvwn6f/YhDwkRaO3dRYbzQVUd0nAXcVAIgNYHA+wJ+OGaVEr5cQoOYOJpVnn/Ra/tgqY1WOd29k+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1OCRA9TVsSAnZWagAAPWYQAIqgSgohZF+SCYi7I3Eo\nfKaighVU8UjcqGEzrVqthYKxyhPwJdg9/gvUMrFYc2ZmtM4HA46KSB/aa/1C\noIBuJHqcVJydqDJ+H3OAtQkJ3vODdq67X3q+Nx7KT4yYQzHxDLmm2AvQw2iB\nsm+YUNEHF2So0y6rXDVg5vsoQHCKLtba1pjbn1RJeXZFsul/9fuyifYHW+tx\ngbuMG891n54N/m3M0G5QQrWAtwdzK09vhKPf2P0gI7A0veNDL/b5TgZ5/khU\nDIowPM26DcTFhGiwlNBZsHJmuj08uqe37J459PO3lWW1uEOTJq6K11NLLFup\nQhTppA/TLNCbR5fYh90vJXPo+jc5lca0L8S23lgstPiatGrg6JmcqCPPiq2u\nHaikwHPBtER0OYuq9d+C49Qpday3ZtXTKaS4mwkCCBZJK33GNvJceVK9tGNp\nAhrn2jV5o0FU2/4yL3q7AnC4cPvqThzN+hM+7cpOn2QRVkIT4JaVu0mTpoeP\nFgTt7LJBcHU1ouyGwD0cVdSt6GR1UwroWG14xcbsLTvDmJSeKVQH0gA7z8fP\nGJE98iu57X2KkuXhb4Fnk2NIVQFMBLCZnswUqAWRxBn5tOW2iGBxF51WiMWk\nTpHlNhbJ+XVFm2j8UTjIGx1iRFD3g1SP0XfDYmW0Kaw73zlIQ6iyotz2TjcT\n583d\r\n=9sxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/touch-target":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2bd09a706.0_1596599630176_0.31649685253599436","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/checkbox","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e0560522f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe6d606328f47ee1ef40e980fe796af7af2a543e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e0560522f.0.tgz","fileCount":40,"integrity":"sha512-ZQDAHeE3VEGpK3WT6QoKHk0lwjN9e5WNC6/mEQyvrcZb3n/gb7/+KVDEWxuMyPBh0hShpJxKj+E33OEPI+HrIg==","signatures":[{"sig":"MEUCIQDbq3dAGjIL0TScBpxZhOIgPlGeI8ODNUlx/gcDFyIMnQIgXwcD5qbl5Q6VHQkMmchSYPyRg6Htxn+d7n/5dNRLbVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuooCRA9TVsSAnZWagAA1g8P/3RAZr3Xsh8GfL6BjVLA\nNZ+Ewc1ubR6IDMTCnKS90B54I3JfhGvqW+fMH8p+1rui9tgCSpp55AVrgoUb\nChNcIzH+6r4/XD9ZtxYODolg8JV0ZZVuiiWgdZKCUYOcK75xjdD+m6GyPFu8\nW2TjMM8vdJsetl/tCWHLRt7rIswzHtDuRgNrS+TlAuMlQS0T4wV5zmJbAe8u\nT0c+ElqK50A4C0wWWp+ZcS+lYzpAZMGynxMSaqj07VOITPspEsYMrlXKn2UF\nlUPY/Cs8D7U9ol9aEIooTGSzFR9OqOzhki1Y3BQkKn63IhC28IMt/bwYhD18\n4xzjsPVT/I50J0/Di5ZSi95NCsdfc/d276IKfhWu3LQQ/xVyDiQPQsO6C/ZM\nfRzZZE/wAuKPvSH7mb0SDOJpwb0QiFaDNQOVHUlGG12cYd6VWdYvwhm4DHsr\nqB4FKVQZs8g+fSlEQ+V7TZ8fguznFW7ZkJr0Y0aQMd4DExirh+8+GIjlVTCs\n6lyX40JllmJFet8S02BBxbcn8GVZLENyyESnEx5ODRqCWHWdbzxRpuR+f+om\n8JRdee2HYxTWqcM2umnlM8lZWpHOcfgZ630Jrs+fLWIlsMK0ryGhcuTPI9cy\nemSk0SGUWsOjEz0ca3md7Tyc5qJ8u4HP3L95ZFREyvQQ+RC8N1KC0PUmOCKT\nToxq\r\n=62b3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/touch-target":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e0560522f.0_1596647976241_0.4236652843961197","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/checkbox","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19d0e38537b132f92a41e13cdb58b3e83877d2f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":40,"integrity":"sha512-yG3jnTmU4iv1UCHC48yC7fMRckU0ZGPmvM6G+cg3Mkxmu74PPi135qKLeNA0hTPw7K1SVX6SQ/llmAcZKUb9Sg==","signatures":[{"sig":"MEQCIHypIp0U6lnxIV6tTzxkppPLv4uoDePxyhljroj+pDQjAiBmicJKXO+Fkax6aTmqFLlQNTL5ykj4hPSzBXRHydYW/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7MCRA9TVsSAnZWagAADWkP/27R+NVUpU7rTnx6FTIH\np3FpA+CVeZn2EgBAWd2uMAdCvZ3FjRfbTJhhnwE/WviQ6BtQ5eZ1RLWh/13H\n3MwT7h4nW3h38vuEeJ8tR6ZRRB7HfH0l3S3ectLEKm7i95QpVCoHJ4NmJPAh\n9v0axtbzheNWDIP4wTjIYNQNrfVZ/89SV6eCcqy2ULCIMHKWe0jtESchbaEN\nySm7VAeYhfc1GYO59CZckHlj+qkqZMNf7DZ7iKqcdc/maNBOg3vKOoCxd8Uf\nBycmJGHTyL1QCwWmFDhafZfeEpay2vueFV4OYlQVD+a9XEJIed2U5plGkYa4\n8RIFRA9nljTgtpHJ18gp/P9PNaqpPXW3Pp/LG7p5ZzIT7HVOIRRiwDPag/2y\nbb77tcI9La00u2Hk2wN1ua0v7QsiAH09+tttdsSxvQTJNa6jTSnYjR+lT9LL\ngkbou4OutJlt4bFQPYf3EphWOFZ1xjgYbbu9nYtNHFIW3h1wFiUcv56G+4ln\nQdLT8C3U5wmZSoEDoldDkrkkgJXdlFTOkpsVbu9Qt9AEqwqdUbvh0627XCXd\nhBIh+e2V1+/p6v7GU1Okh/QNlehIr2GEeep/7gz8KkUtz1fEZoNyLW0mGjVl\n7nnkWpsGH2CCpflhau6fqLaWTgy9nTWQCb26KfUCxD9FY6jFPBqi+AQqD5L1\nrOIj\r\n=l5Es\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/touch-target":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.08ca4d0ec.0_1596649163626_0.3870997878825255","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/checkbox","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.08090126b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d7c0af153a19a66e2eddf05224b7256d789ff4e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.08090126b.0.tgz","fileCount":40,"integrity":"sha512-S+GVF7KeshruMBaENxv3ZZuKdM3EKpgUHml/u+tHBI9ZTI+Y3ocd5AKk2/UoOz7veTsVtOce0QviyX4+h+MVnA==","signatures":[{"sig":"MEUCIQCAyOJL+3OnRtI+GSt+qy1lx41/3wLzY6k1hAkclfJHfQIgQI2sVQDn6lsilElM5CdFp7nhhKZ+F0qg61054nGrGu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrUCRA9TVsSAnZWagAAUdwQAJx1zT7/PcWema7wqqC2\n6l5ZtuEpinFAJ6YG//kPMduYutFr7kiBbcfnT/zd+X3XlH5fCtfhjuj5X8zb\nk1Hf1V2iZAWq0UxEI+mHVbIo8g0+H1Wk29HU5gBvbXoYCMwd4DIZIX+davaG\nhq1GbhPONRtczgVvXc56fb2zUd34Fw8SYRVJe1R3l5vmFXGhTBzF/sI6sNf+\nCMNqfw5Ka/RSbCMTb6f9uVwsXuPFvy9Gho/AZNHX3zHzrj36RTIEyNmDCq2F\nJ0sVaAeGS0xTUZzGUZTlLJKqSeQy5QxvjWy2j7+tuZ57PuPx8VRn3CjM/X4b\nytevbYbRo/SFwCn6XgxlyEc2PPnnAebrgqzrT/whPEPTxZsVjtV9NKRjw2gW\nrOWxO/GMmh+UxP+zST4djy7Q0BhBbcFe/BuJYRaPMXGcdCCfr2ihHISSuyao\n4F8EODP1EsH3ntGd00HQAu6x8l2I7w+H2SuFmm+mae8dgTWm0L/Ki729Sn9j\nbE7oImeG/MCNGoKxfpaIdEQYhzxq21GQ90iCQzJ6T9KhD08LI7il8LIEYjC9\nfdk1g9OJFE6X1wg24mL09qdgzUL877UuaRY0SddTTA4B8SVQLOcJvwrjzDOW\nct/1zPvDlIkP6BO6Zp79qR5eNE5aLzpGdhFTdOF4ZMVbSnReGaqamHOGiELF\nmC6c\r\n=JzNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/touch-target":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.08090126b.0_1596742356377_0.10939912949486685","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/checkbox","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cccd657af2345a3de554209f32f09d894aff931e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":40,"integrity":"sha512-8AGk0CpvXigU9Pc+mqHLqik9qV4GjplXbl8pykKjB7+KRz7ucRg4T9peqiijXTit4kC3V70m9st7gKtBgsVGFw==","signatures":[{"sig":"MEUCIGQStlwtOEPjIW3Ajam2yGHWEt7ITo/xqdjvudIezbOBAiEA2paRkiECQhuwqP36rzQveuhs8+/UWRfKjbTAZ1CSZZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsBCRA9TVsSAnZWagAACWwP/2/pcV64E1Z9GnKnxqbq\nhft9oxVsBjtZgxnlLSKZtnsnu7mB2K3CFes36KzGJ24bdb7icmjvKKEih8r2\n5uvFdaNy3Eu2tdl75Bk46fXEiPWtGXnynh7mP7GtbVaAhIvpmukU3Tu04QFM\nUsDuGrA0KluQdkt9lCyjEeQILEjFnhzLt0XLBgofExSdjgbyErYsgUVJ6aG+\nsjPOlWzPauyNmhulMYJ7B3IhFO81Lu9awSqJ0kVcbmsvLstBglvvSEToNkhE\nutyzPS/2KcRl6igwJVaa1suzK/nX+UZXGFrOKiPjySGsJqQP0wfOIslPoiVo\nUGHGHzgKg4ASI8/q6bRRf6SVF3BaA+MMNkTh/84fRM6KYK89aLxBJiJvS70e\nbh9lGmB/gjiNK4MVr2NpBhcLCtdVUkw/BCoNUEfIdZCGbzEneqFs+PSdi3Jq\nQN+7EF/u/XFbdSL81hdp2NJql8xQ0Y+2HROclryOPPjosOwF60rmEopCiuvn\nNrWHg0LUX7Wh0aCbhd8rAFQDx4AkvUEPIt8ZRHLuXCF+8mEutg2BGijuRRlO\nreDdnlGrvWCQ/S/SLKKViUsNAnTpDw7YymSwaYCoU8hch2rTmK+kpp8Ctoq6\n9OPp8sf01+58iPTB2T93gcB2h/6NtEAHzOt5pJuE74SNVqRcQNrnOijnAmUP\njdbr\r\n=BMqJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/touch-target":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e8bf5b2ac.0_1596750592535_0.9030139561428225","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/checkbox","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e3b746208.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31aa33dbf035ef60ec868231ef3268b62d2d4aa5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e3b746208.0.tgz","fileCount":40,"integrity":"sha512-nfzOYZJow0nZ6SFZ9G4q8uT2MVtfQWydQ1YTCjwuCmaZECMNlExFs+WkKCO/roggg1dLEogZXBYRtwM/Kqjv+Q==","signatures":[{"sig":"MEUCIQCN6mzhYsFjzTkQBGrkrAgJ3YMjHQUGj8tOTPGivUffGgIgA6NYoSGpN1hmbZCZelZXElu9owTny9kaXZ+oeG7V/tQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":651481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOfCRA9TVsSAnZWagAAodwP/0+MC4HYHk1RiPJUrbSW\nhlZeu0epmgd9PvfI+pv1taRSYr6KeIjD6g6T7lQVaamcSPBjLvMoZyeOFs/w\nuAvbM2q02ysFIubV5cPWqFTnO+/ghx+xaX7YjpzgLCozqt2+TAbi38rUYvGN\nA8Plp8FNTcQ/bfXO6Nm0ak2xBWdNnKUEtBx5EDi8tAqgyHLj++0Omnw7TUab\nf3BdP/4vBkY2L/lKHr8PbJHSyKRXFi/WT6SanDsyoDTYlNVy8JfQ6ze2i1J4\nbRHP7rhOOO8PbTddmq3Sm4TQladByQ1BUNLl3QMX3ALuXTh0srTD7QG4zk8j\nzDXyB022sdjEkdvJi1KoTo8gKSxyxsU2T+TgnyWlqKGPRAWm6i0unt2kBoLU\nbhGjSfyRV0xyXDlpr4gtD+QntFxkFdHRW1RGtoIdIh8te9zvqTLcvBFtW678\n8sCxL7zKf6lX/TKNE3KqZMUVN+k2R2CSNbpPYOBBV9j39YPX4JxFcv21z8dU\n5xhRbzvUHKkLrBkvh4EaQqysSLZbq8qEmEdXm7VdatWdYWpvnXPIqNGaw9cz\nNAVZI7vk6m+/GIwMZy3+a/poQpqKs/6C4f2CSFZu5qoRITJH3Sp7pJtguNbi\nGPbSDxm7higISxhyDFAm95zBN4xRe6JL79lgAmVDnh0yGca74hPjnyXXEyEN\nkCoc\r\n=d53M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/touch-target":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e3b746208.0_1596752799174_0.8698426608507734","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/checkbox","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.96a640534.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a57848468f2433f32dffdd4ba43a7f8b0895cac3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.96a640534.0.tgz","fileCount":40,"integrity":"sha512-Pwo56uPqRyg/Gr4U2m2ADze54uVT9Wdsq+SmEuPYgIAqQVeUt45WCGbb+KqXoXPyfhcAHTIBxyxOFwgZn5hk3Q==","signatures":[{"sig":"MEUCIEah1TEgdYHdA37aaornC0M7lYL8/BwnrqqFFejUehYqAiEA0mgcBFJ73VLTGTMEMMD66nithHKIEjsCMKWvc4DXMlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcUCRA9TVsSAnZWagAAEEAQAIPSkJ4Tiaybr3NLZIxN\nrVNJyy7kwWSslPf1DGx2CE84uIPUZiSe9q7uhDXeI9ikcuARHFseKJn/T1df\nlc+K1AmRlYLVfEQSRpS18eohUNV9/e818uyGrnA5yON6D1WA3Ob1VaR+QQf/\n0pR+B9VcjMt6StGTvYxuWQ69gkxDBnLrRAFM0UdgVkeGoREDEoZ6o0B/vs1z\n24q+Z65NFc4R/oQNIVPlqdV0dfr23dODdZM/HRflR3XIsc9kCtwDDvTFPHbJ\nNL0zcqeuZZdV7QI2SIXWub3Ag/tGcrv6qgBs1X8Alzy6El/oq0CKcf5qJc1L\nJZMYKY4nRYtOfVtZb2F1GDxK6iUjd96w9kxhQPaidtq1Crn4De+D2cuLPj46\nTxhURTveDi+K6NQkHx4DhjiPrnU8EP3ZC0eb1wJ7LUUDxVVU34fGCxAcj0e5\nLfxJH5JHCdYcHBG91o712/CBfih9wZ5uICVtYHrBSUinTbcyx0kbWXuNUCVY\niTUAkgwzaqeyYn/zzPVb2U2/H7ntp5WUM3D4/nM1YYZ14sx8eAO9U75dYK0z\n5BSjm+QHecCPX0lGplHui5PGRCNceN/+O3oF27QM59+yzEO5jOMJNsASHBT4\nwhCo0olCgaMSgix9n0gZq31b5pABpK3JsGtqv3tUOdNWKHJvE5m8JoMXhnNI\nRjcj\r\n=im0A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/touch-target":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.96a640534.0_1596753684170_0.05323134211339142","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/checkbox","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc3263ccca5497f17c796199ba97b8b0af45ead1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.9f9aac825.0.tgz","fileCount":40,"integrity":"sha512-7IzNHZyKHzLXLZPdWptNO5e6PqiLK8Y9PA9iLxF4RO5CXQtaayO9RYIdrpn0Un93RHdwKOFiJmPtjVzuQc/1RA==","signatures":[{"sig":"MEYCIQDo82UfddZvgaA+Plfi7av8mDXQzLeYs0rq5HeAM2OgxQIhANMRAW+gc8y38wXL5RAUHvqPzTkm15LlJv3+WWI2R4Hp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7HCRA9TVsSAnZWagAAhfQQAJNUBcb/J/mQo1kEVtfs\nO+vz7kRpAeKY9Qw+vvXJrlzfUB0KbE7LHllzIW1OhxTER7HGBQuM/TIUIL8c\nwGIDeTm4mzTgFFkMdvx8VHO71sQoeiWhGHPPBWv6jB1fWmT/7Qh3XyZ96+G7\n4417RXy9/Is7C8UdGWzE26/ebDL8edNmkK10AixvkU6QiIZrdAsU7rOr7lv2\n36H9/Gpatv67R2XWB32yCUMNr5DiZ41w/f0YUk70twhxUb/pa9xETO+EnV1v\nZur57RXLj9YUd9Seq2wEoaVti4WbwAT1uB4zN9mdSfbCq+R94PWe1A5KGudw\nvEEs9SDMhABfdMYM2MJi65shEXt0VHmH5K0nwtctKkICE5EgK1hHAcY/2rEk\nLeZecFT7ZFPEhqLRUvtTslua/V/AJn5WFON3IFf5iIOlJPehmMMT2Rjqe9YI\nqHSVX10uTTaiZbJUc5+hJVzgiDGrNCGqxGhLc8tzEJ92KuSjnICLS2VoA3e7\nAhsemYnIFS6DCbv13cfG/8D6QpesR0miWda7MYyH5mbKbRXa5W/RjrX1j7VH\nHaWXhetBk5XG9q7rrFtMvZGan/qOxsJ4JGxXP8AMiStyUGme7Q3KEZdLL4Ps\nBT7FoVAMinQbrAz2/ik5Pp9oT1fJIc8Bh37ylm1D2uU7O+XNktrxGzKambrD\nEBhl\r\n=Xy3U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/touch-target":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.9f9aac825.0_1596833478936_0.4987162482551495","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/checkbox","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ac9ea23208b87c3b8ab425c3cf9d88cd81e827e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fc65fd00b.0.tgz","fileCount":40,"integrity":"sha512-lhsmFB6DF2rY6tRv96iYvW0xXgYZ8pCcjAG5UCKULqzI+QC8xiesIhpJ6SalE0h3j0J1GpSJpELWS8DVhJRKWw==","signatures":[{"sig":"MEQCIBY+yV2QAp+2d57rM11UmKtE4QEBPP1IAtsN20CD9ytdAiBsoHoqQC2IcEuz9ZBZAaZg50T7XPhFlHMf9U94K13+dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWW0CRA9TVsSAnZWagAAvZsP/3DRhiixA+SC111F+1GV\nJU7NAo7Z8qf78VXKDHKV5fWfoFYpA3z1Rgg1Nd57ywMVIV1WcfHwsHyd4BmV\nlvC6VXPTXtbKyCeuHovS8wBApdi83yOdXGv0pcChQlfjlc1iB7ShzpBcYK0S\nqqK4AvVozTE9OWMBjb4ngewFP3AnmWWHeZBtJ1pqPzEhVw4cZZfdfmWLBaps\n61NAITdQqrkl+gtAxt2WAYQgxIXooEQh/mubuZOxOEQkRxiiJzM4odAnzStL\n4rbV+ZxrB80eg1Dt32sZ/AGUM3zE+sung+kHA8RkdvjXCTgXWgkmlBOGmshi\nnjdF82Na6rqyVeoY1WeBhkdpZo3kp0haYP7k8AAbLnPgJ1ZsevxVVQkP/W4F\ndQR+mS9QrlEbOcHvdjgdW5ieZhJIh57lItBDMMUoR33PqOkFp+T/k441qQdA\nDNTQaUHFNBtslP+0+8xbJFB1fEw4OJrnxlvnu5smaCsZ0hD9XazexsBhpx7W\nww6Y1ymiGAnHXhct///3GYVwHS0HQSfJavGwopOWrQwv56GYsGBGdT1tuSJF\nUFJiwC+tchhYv328qeB5LOn7esrNvdQbYIRvICKeS6xU58AmkLieoQo3PsaH\n0S73GHNwrrwwMk9ZZ4O7po0n77HDdvF7gUH+Rjihn1ngNz7hdX93QfRweoTj\n47GA\r\n=QOZb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/touch-target":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fc65fd00b.0_1597072820324_0.12195792974473618","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/checkbox","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"263c3cea61129b69775587c08168940a61b6bb21","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.02e372c5f.0.tgz","fileCount":40,"integrity":"sha512-CuZ4tzyVkLpcA+GDJcOJsb3tv67dCDbfl4/J9GhI3HFueecfDy4vJeNVmGS71QXEVOzjTV+qKrCTnutiDmck/Q==","signatures":[{"sig":"MEQCIHRxiFo6MntpsToOHfLYvNRQTobpq7w1uReutQ9CRUt9AiBfLGCP8AygCdq9VwsjFwbkkaSDKB+zwUCXgtWCqtJmLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":648147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxPCRA9TVsSAnZWagAA29sP/1fs3RbAn83LTmV1JQcd\ngEkfvIEVVcZAnnAfabQPm3XoD1+qwiL9umv6uCAD+z7HFIc72jtW3JBNapJN\nMZEdlx/CV6tqTM919GyoO+pdGS+TD+ICUP18MiRp+yT52+tJ5EXPNv9TXMdT\nP4n1ckC89A6//CABW+q1VOYxjxdDGdy+Lguija/nBw81KXzFg7YEdJcdnt9S\nXWx45By/xF+KyUFx/6WoNVZmC9LUmQSLNgCfL6F+FKo3NBZD3EXb6W8WyWCz\nJgkF5SgDJus6qpKAwhG6RgQbqJYcPIyLX4CkJFdZu5qQJh8VNCcJ4errhaLk\n2oP4MkxSV1hyZrn0L4DU5+fURZQP3aEzlSfyMlda8byty8NDY1prV98gUQrx\n5jl/21aegnm6/FnEfIEIGTUNTLApBMWX8qkGifmRiDG96a6xZQOM0ACSFA9C\n3zp7HmEaSJXbIGZcj1MacjKUJst3rMqRz5chehCWw5jxCSz6mACBmEL7HRwd\nRmEXY/HvYwixXl68XSUWpQ0p7t8Tpf8iQSKGFLCkuek1STwOb6xLrCXvT0iI\n1sRKzS/uZHkHZxQv8gmBkwsLVVJYQiJrIVxN/ivg1j6keTBTAyXLEjw4YM7E\nbUMnmQ577tnuN+Ws+XfvUbsvorCQdV2YTk9HYQxiYB/YTnjs0SP0xic553XY\nZJZA\r\n=3PRq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/touch-target":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.02e372c5f.0_1597074511225_0.06943476330055165","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/checkbox","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a37efa1443c14e20353f820b35b16e08b141207","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.66669e3b6.0.tgz","fileCount":41,"integrity":"sha512-Q32nIucg19EVz+d3KVTtDgUAEqe3IkrxkSBct/YmMGAkYUQqwKPK9JOfjJjOP+GtTaS/H3V1rCVUieRx2ndCWQ==","signatures":[{"sig":"MEQCIFVMD4lZrUkIM4C6ErkdUT8ByP9nOnUhuZVfC8g1k+lPAiAPeR70lTinc8KzWaNssJk4cBfE6jfLvitwLlcqMKIipw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1BCRA9TVsSAnZWagAApWIP/0jq06JmGTODnEYplkU3\nG8R0wX46Umwly1nxZ3awJ2sXMb4v0nvUnYy9xNfxL1I0Je1HmyEpK0KnGsqA\nodaieLI0jjonEnZ46cJ7+CUEXQ/JGuUI44x/jC9kcvFnaHrOiIdperXqHdgw\nOdD6BhbQRwp7HAHctGUjompZCOPZ3P/whKwC6EN3IaA3Kaj84cJRK6Pd/Aff\n1FRhQnyZh3lOk4Ge15hoY/F9DnkLKcSzkJFdN9QLOV5NIu2F4/mTcquJJZ29\nxRovQWFUp3zwOq/HDWg0bp6xADaWt4vgOxXMkbg6wVyrUevWPEUncgzmpaIr\nk6rf/zydt2hPFDJ8Z4lpiekieZTI9GCrZea34bo99C1+O3v8Nd3TgBf4q+Cz\n0Bc/tLmkp2jNNYqWsXx50nQ8Zt6d1lyjCGDOn7VYIKyvj4zylPBXPxk9jVB4\nuNZSWRkkSOP+gYP1tARVLLOS6vXfy2rZ/4xK9mzaoyIq6+FvHwTCDHIEjtLt\nOuhrzjScGiOS/JknlN4iqw5fF6MUKNDtlfBIo+nUsHR2E0jzpttuoUbfteyv\nHZVwLiFCb/O3vQezgxrFmGFcR+l+f8/KE4ZXKIojw2bpCUXw2rkKWuZKGwKR\njYu1TJzuWGm/Ad+k8Rs4U6EUCOsD3NnlwBe2dIEv9DXgB7XQ00dE3ShKl7ay\nZwn1\r\n=T02G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/touch-target":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.66669e3b6.0_1597074752903_0.014492141726242025","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/checkbox","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37dfee76851e4f6bb2157530a779e0cb3bcfb1eb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.6d1ea9761.0.tgz","fileCount":41,"integrity":"sha512-WNOkthObDumsLJ5Y08UMYjj8PwlFuyWo9Qv8usowkD/WneiLEeqvHrR0zbZoy2CNTKNOuekrhBBZ6gfecgAEgw==","signatures":[{"sig":"MEQCIFBXYTepXLHd0I4uaycnSfv0L7Ql/Rq0kH1pMdDUmjtBAiBmG4yy0A/1grAKoD7iVevj/dNFszucACtdbBMkBuRQow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquRCRA9TVsSAnZWagAAUGkP/3RmdG3BnY8UeThN1qMl\nqj7jodlxUSzseUn52sZzOF6fE4b1TifGydmB9yxIhiKG77chUWVKYFijQ/i1\nL98l2/4PyujDqrvjwCpKZ3prp3PQ0ChbGM9Kkf667UMLvrUGntiV1oNjQLGT\naXNIUJdUvcvSyA9xOORGdvjMm209CxkFYP53vpbnUp76wOYEkLlXN7M6ADDp\nMaduvWTmVrCvlPXwG4cnugp/wPqa7nNAMY4Fjwd9nYnP7Fd2Wtz8+68vuRI8\n5eQHPWlj6t0ulvDHPFJbmnxwAff2K+LrdTrDflvpRask22xmaxV2bO6WcRh/\nZdNy0TKoCEPuu+NiyIRMCC04Y0BCRdxOtt/LnkOhmkTGQEGR9Au4W3qjmcqP\nLxaScIMwvD4IW8w/A6EE/NhbZk8LvHdNzasQD2GH1pyrTUtpocuRoXOtuZi+\nff99li9D3VHJq4CbDB7IUQCJaiKUQjDz82zZqubKODGSx/yVyyfMxACuNK2n\n4O7ztp2ol3DFvYW3IJ/f+hOQkZuRRMPFZ1KFKpwS/PZrpqHPhBehPzEB0DnZ\nhBsykp3jiww1/VIRuUdzSOsDFDuf+OlpBVQAEX+t85sXkfqiyd8klbSgubfS\n/O+nm2MsxRsXOeIf1lmwoHFfJVYu2J0HrdpN4SMVE5mfQEjsHnsvRK6UrSk8\nl4EY\r\n=1aLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/touch-target":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.6d1ea9761.0_1597156240569_0.8494443752540974","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/checkbox","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5833d3c9a960a33d4bcae37265920dea8d85c97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.79414bf9f.0.tgz","fileCount":41,"integrity":"sha512-4elazP1Fciu518QYhA9ryjxCIkKoND8LI6MfXhkJf546OT46fRaerSUZNmodaaBVdj8jxytLEhDm8XVorf/CDA==","signatures":[{"sig":"MEYCIQCJ3csVvOVoET1L7L3Ihr8LBU3fkGqYl1DaJoIQX0NkiwIhAK8ZAgb2A8ucipwblCOdTvsG7dgDmV8qK/sijaaC0f/U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusYCRA9TVsSAnZWagAAnisP/2VF0qCkoNor+6Kn3FRT\nng0h/2CPpxO0vwBxSsH3NW+tBQu4w6+uSLq+F5psNczNxPh2RM1Ofdocy722\nXfEjeFe3U3ztOma/Ra+UoSL0sQEdie9ZIaJbKmlGrBjxPYuHxFuBI2OLtGUk\nIwZQC3CND7ohNd0VSK1hzGRfwGKyoj6yWhubBA27wzZ2iPa3Xb1ApiEyc12t\nSgiHWINHYgIGZYgr2X1fGU38CMBB7+trUWM2mnvK1XIJwCYxrtbzteRYAIgJ\n4bM+8B61TyFFNUmb3XGpVoRJO6wa5LUfvXeoKVEbh1Tc0qFvEkPyWsXJwPst\nASbh8cDLjHXOpHi+YDMp9W+GFgu8Nsa2Cdc+SHpm1FHdAIsv7y1s7c17MuMg\nrD33tcYUyqz5AWpKcEhI8mjPrqvPTlRvO9WBlInk3s83ivNgr3NKlsc7ZIeS\nDouif7oNNnzvZqVbKL+Jz3i9FTnCwW4ChZQv//YS2U8MlU/0eTPD62KENd0N\ndrgyWz3RQ69nNv7B87lwR/3omX0qQf1vqoRUAPINw2/dBjtRr3CHKzFx89zv\n8Aegl8uiTmWaqBCcIy/SSoMpOXJo2k7L1jVsBtDbB1fHVl6BljkdHCeYrgN+\nMSK44c8SCLduQEJBF3xiwM5/1cj/oQlaADBXXXe4ZiPhN8feuu9ywE8zSsPs\nXuRV\r\n=Sikb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/touch-target":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.79414bf9f.0_1597172503759_0.16332406096017715","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/checkbox","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.85a5272df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0707fc6e78cf6fa80e90f0eb5c626e3f6aaa8b7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.85a5272df.0.tgz","fileCount":41,"integrity":"sha512-CfVm6RQVsM4rOu2nTInCMShumf8jzcyyXAJm0caXhcJcLce4vaICOqVrrXWyBx96v9Sb3cU1p9UrNJmIPOyDMw==","signatures":[{"sig":"MEUCIQCMn4OVsx6gZctY4IOuA/8gIrql5+uGJFgqwk5g8vD4owIgXtrABKyqQjeytQeR2CwMbjaLhlsLM4vJuug9VYkAnBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqmCRA9TVsSAnZWagAAsPcP/R6xckcWT4XvLL7LEMQD\nC1jy5DpGYAa1LQnCMabN/JJNVAT+Tu0mQkJL0S+YxrnxUfRvq2nuNf00/fCu\nQPS47cVCnSxVpIJ7ApBYZrtmukVOOhVR4u5phuqTRNtTf4a20dMwyeDfv4vF\n3Q76UayAyFuAo3W4gjS9iTBWe4ty8oHu3IZqqZtmWex0vjkZC9KPwhYtpNq7\nQD1O80kMVZHU3qdm38nDknChWz+/27Wlxfwkh9CacP3kkvZXL81VRPALNfcd\nTCL7R71j/pA4cAMuPCwkt49opoMvqVSixP+WQUv+DqQ46RgqgV3AhZfOh6px\np8uopSaOvOXy0C26QHtpM5BxHMVCl5EN5z1RybdDQ/37TuYY1Gj8upc13yYp\nkTVykgcjmexUHlN13qliTmT8w/jL7DH4lTFZc1FyFH1VarvfUQ6Wc1Qaqe5b\ndubv5fJl75mO4OADCEZfc5a/a9BhgU1jeq0LIb7cB9TnHyhOQR9UlnrdMQkC\n51W/EwMOuED/5DYhqrA3/HLQN7eidXE0VD9Q54uOx+pZJ5n9RnatvdPeI0Q4\nVOnBfP2dIQMr7Xd/OlP48ZZveR3THxfTpBYhPX3DuUl7jIpS1UvkOGjAiabs\nDrP708FD8SJ5AGK+uxf0xv3JDie7HhIUyQ57zNCufrxheXKWV9l+3wvbVrTl\n9bPT\r\n=hRvi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/touch-target":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.85a5272df.0_1597176486341_0.436034445852584","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/checkbox","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e02da154573eccf75ed32c9fa789e5eea696a623","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fda053eb8.0.tgz","fileCount":41,"integrity":"sha512-o55Ga2rpxVjJcRmq0Cc903emwEUqjYp+bVWw6G91P3pZYXFIhS4gb7riDIGOGC5HHAPH+7x/2rf4HHZGQGhiIQ==","signatures":[{"sig":"MEUCIQD1SN7jF4Ni/smpZs52bzlnCcYfz8hbmVaJNCf9szCm1QIgNKEysds7I/5byMarliGAb3dNrdWYDyGuS7XlknkZg64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEs0CRA9TVsSAnZWagAA0iMP/3m1U52LLY2O131hhUhh\nTnqhqaNlNYCpCJTUHsOjsdhEiJKAZY5sVOJZiF8W+/7clxsHFgM83ohkUoKQ\nSpqJwttk1ufAXKTXQqnFMSQiyWIny0treSGuoLlKJuqA96oMcBXqLGrEoE+V\nSIn/y41t6tyQqOOkEs2IV+Q2GaSM79drbiGmM1Uj8T02uuXfE3VIkoU4nJpP\nGfeKDoI7SRczquaSicGdM3cNnpy/KfdSKYxV4HSWHu4s/+nT2+jDTptJxen5\n4WX91LHE+dTN5L2RNWZAa4D9y74qBR446gvvKmW5rMRowAjQlh4f+PQZavDA\niLD2A+Gsk2c7lcWyi+wY9kyNKOTft7iY2tD4lO4nB8ZSTKhtkC3ly1cBmi8m\nbIxd0VjoKlWRyAAXQCnQ5bByFgW8wuVPnswUfAUoI1oxyJImltuTMGBcbaIt\ntvcPsQVm/hsUHmOyIFtMGSrNcK2abx3WzebvWW/JC8idFxBkPKXvow4bvZAa\njVah1XGUOj//s8FbSeOYBmK754+AhzyYRBe7otz8t5zu8jvEFP09pr/kZyAi\n2An8WV3ZMKVCpU50qr+d40p8S2A+njuOAC+emLoiCqTBFnq4NyXdTnbtB1pD\nRoZNuorXh8mbhEW2pZE08G8mqZeQiaALYuV2rCxv9vuxVjOU+N7XgoQiuxtR\n9ut8\r\n=b33O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/touch-target":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fda053eb8.0_1597262644073_0.1003903611641126","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/checkbox","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.760873445.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5baf17a3dbf392690c17ab4a9d567ad80259d6b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.760873445.0.tgz","fileCount":41,"integrity":"sha512-VOUxL97wa65Eo0txyN3kS7+mCvxcZL7XCcQkR+No2/orXHRkD97GqGf8N4VcPyjW/s9Uj8Loh8K4ITNzIyZkhQ==","signatures":[{"sig":"MEQCIH3GuyrI7MC2MR8dVKz9Qm7hkaMtkHpQGyiZVAfXpvBNAiAhepBJT549oJtpcKBO1R/HPhFp6oi0m6aWvBBt8xylOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJvCRA9TVsSAnZWagAALi0P/28Ca6kmMfu33yWinIKK\ngV8GCS9vNpfCT50iQnzRwIefDN8+eowdS1NXFXDSWhl1Mn6ZgKgkO6ymYOTd\nPc+aVqgox/4SPW5zbMlTnO6aAh+eP2E5bCwFz9QQfTdsFdNmMqBv3oImCguh\nsWN9SBg8WmBmBWFCxm43eG5hPgI0m46ooDjg4A7rRG02rhGW/tpL8GujF2gx\nU47m48PvQQLRCtZagBWPPYMbHnja8LTBdSqYaJ1I0mciFaCGGaS5KSERa1wR\nW/QRJLtNCRP8J44R9f9QdxXfGAeF9/cZm6tD87OOSIWu9DrTijEq66OJvNks\nTfK02WoxoYeIwGZJktfFMDgvzcWiGNgsEHNq1om8tRhxctSOF9Ip+6u9/Ffs\n7g9Lm+a6PDMqyFi+igdQrRn9bB2JBD6QsRJEmIABEHTJhBwVyFcvFfpie/vo\noVTbzkv/Oa+S7prmk2AoV7sQu/3h9xaGKeZW4+eW08p8KH1ddw07lZaR/V/o\ni3UGySVk4Sa+V8ULaBDcDEi1i+CRO7zVdoKPYwJxwjGt+aUOMT2ZlVTWKjom\nFwa1vTRelDjIDs3SZzg5Fz+T75+u4pv32kKkP1iY5mJC/xJJZ+YIqZzyGtjF\nEm2wP5xVKGgeNQtcuiKrh9Qw2tMx1o4i6kE3QhV37M3i8cyLZbvjYrTztx/z\n6HH8\r\n=2O7X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/touch-target":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.760873445.0_1597268591327_0.38218941892825886","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/checkbox","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de49150e36b44e9171b9fe02bdef1442d367bf48","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2f4711a30.0.tgz","fileCount":41,"integrity":"sha512-j/zqQM4CJCRQgoR1xcNT12CZKy844F8tlilKXHRPE2TZUzbYF+5Mft4Se3MEeoa5QZSHZW2Ce4/rOY418Uk5Rw==","signatures":[{"sig":"MEYCIQDWKn8Tn8VQLOLdR3YiPF40gbj4it2t9pZ5RYO/03qOXQIhAMTdhX4IoZz+mJAVmSvkuEk7j8Q+lxhwwR3l8+lMG+S3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTECRA9TVsSAnZWagAA7HQQAJcZxuNlcxRpJFN0AHl7\nl/EQnPsT1T17nq64+24QzliHz52Wxqxqv2uqD/Jdwle3/YOFCjNP+2ewGpSx\nl9+piR/UNeZs0xxNhcpcMagj0cF3TVM2obBfLfQgymBJro9v2o5CzW6A9HfX\nMzbfKdmJt/70x49j7NKChjlYjJzvReqKwU1g8PGlbPL0fNl66upbmOzAhCpb\nJqmmfPV0XAdSRsWaztHSxAWInZsukRWYB6luA64NZzOwBXc5VBiBOJyXVAzw\n7cOodAivme3NgxkzZd1YIs5nRzyceaDvfQeCpVdSZQUGdjv9OvL690lLXZZs\nrOzPWnUwEUZkvEFS0Zx+nkk6wQW7SxCzxrcYsdc1VuMV+0SCEr8HMJAFRMZE\nUS3lUNXe5uZ0um6QAWwxm9a2fUxKTERe+HSZprmUvgBLpNl+hsTAEpabUdhm\nQp2UcF5DXMMI45ZmY2+VpFVqGb1IXAl0tkZ78qDXi7IEz7lnBWwlRvH+rc3A\nhH4pCFIEIedhTP03kDHqEWNp+oroO4Z4yzWcugFtSHCXmzi8okqmcboKatQk\nqa8sRhE8f4k5uS/WCegtyve1ovZXdzgaFR9fdyVPZBfofyY5spvIPc9WPO8v\nDUJnW3Zymz1WU+OKPKnB+yM99Boq9HQtEg/NgvS9pkMDJY15AVtfOy7Z4Q5y\nNdfE\r\n=9PdW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/touch-target":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2f4711a30.0_1597269188112_0.956528624332218","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/checkbox","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4c09d49f460dcf657c02e074260cd2042807086","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2d72f3659.0.tgz","fileCount":41,"integrity":"sha512-TxS+vCKAbg2f2kq2c0/ueStf6DQ5nn8BOox3dIBeVvKBPjkDrZNJgugJAiLuYofiuyVuBzeuL3Rqe/JS55ALrw==","signatures":[{"sig":"MEQCIEDZWKfJmal7NNLHcmOtd1R84Zb5jjIW2EFR6Odno5SYAiAlQGyAaHS65wp5Mg0aOHaYek2qPQwL0LKgFxL6C6/6iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaDCRA9TVsSAnZWagAATZEP/jwMWU3rcr5K/9KOlmVs\nwDAqLjZUCjO2jKU910CdC7xggpzHmAAhxKyPTvztsv/R+FaC+OsuaSqlKHVq\n2c59Oyc5psUSUC10Wi5gdJlJigog1AESjbpqSkjmuoStZrEHIxy+x0C2EAqy\nMVMMrB6T2TqbauRmaUyiAUlb/6OVSZvqxODiT87yU3dZsCE/RMrUB4jmlRH7\nkkMYYbJ0TIbARGH7wnHUu9KWs5YASA/8+L5PxrZctbIADp+Kp3uatzAzKVu4\npa8gzL9RIkp4GPL0mxqZMJpM2Q+PfqvB80LBiiVvs4WKt67jRl3IOnlKnoOj\nt6JAO1Ckj34e5s+6VaTTG8ZA4yGORsX2zz5uYngpht+l9g3RqBP++CpVAffn\nh5RJKvaMHpZHI6xi9s1+D0WUdFEWzbnNLpcQL4WRZwmUwbxJtNAzIBTz+DFH\nxOKdSFzW9L4L1KHO3ZgqpyrInHDHl39/za3NxNPQwTjHTBzcjdSMOqY0S9oa\nX2Ye+YB+MyUtvajydEptWMAXWoPqAnRosN5WyimWZKWFouU05B8NnPmo3CN9\nZiIHghFJj1SwzeVW/laS6kAOInweFMHz37pwNDVO9JxV81LR7VXzougopXUm\n6JQOkUVPhR6iK5D+Gnh32X2rEvHsUdy0R1ZmdsJKys7Eu2kup4Yp029S3DYn\niXgV\r\n=HjHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/touch-target":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2d72f3659.0_1597269634767_0.39021906406916673","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/checkbox","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a94b8d5b26de23cf6c81d9fae26dcaeaa8a75515","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.1fee70a5e.0.tgz","fileCount":41,"integrity":"sha512-wwBiBEgXmbkGzhZE2eMd60B2kWu6UzgYa5RHUWuTr4Glgvnw0K3YU5/3Qa4TIVFPYx+jNSOgAmhw2bvOBnwhsQ==","signatures":[{"sig":"MEUCIHe5RV8D9XPpgONJ7Z82zJfeYEUFJW3gYBxiHMLbZVdfAiEAjPv9Wzb04Kt6IXSUu02xOYxF4ckPe9zz06n1xG+fkkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHskCRA9TVsSAnZWagAAeW0QAKJ2kMe4EfzOaujgKT+5\nlOtI+pxZKAyZR2hugCyvgLTGsYUbZpBtnaM7uCnW17zs4i/e07W0iMT+tzLy\nHEZD0B1/vy/0459X0mKYxArlSequMHe3Hcj13QbV+RqVOcUp60/Lox1JMm68\nmgbliFaY9ITu7BlMrl5ZAu8wq4LLtg+CzRCMmmVQRVn+sOd5+xjfi9QJGMHX\nBMQTKUhcihcBXkI49S4YLQHqJU9sTURxAy2oTy54iM0D/j959AC4vX2aNx9A\nESCWRkASF4Q5gyXSy3DK5L17SMbc8WaZWuEjcAuWjhAZ95yPpU3PwdKdTZI0\nRcB/SvUXa3iTsHK+oFzsND7rL1MxK5z5SVBXUDZPp7RALWpVKedGIjbEA1b6\ngTY3pnW1l5Qwz5m0Ozlict0qOsnTe+75kBEfEOS0RNGaVAQd+H/XDEU7syz6\nXyciEEZZ2Bb+UKyonk7oTqTP9R45ANEciux1xA9Tl7baVQbi+XkF/Xtdtt7o\nWoGB/QkCNz6GmncAuNdNZZskv3PTBMemjTb3JTjTkumr1pG7qwjHm1+TEDvI\nhC2sWledqZ+NBnHNeyDqOL1zwGBPTA/rtgDGNjMrhgHdyqiRdiLJ0vzqmkiu\n1WDdXnxGz3Q5OJXO+rep4fw4YnCZuQazDeAfolVqVqhK2Cd3ZnDwiqk783/g\nAeVP\r\n=S+rD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/touch-target":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.1fee70a5e.0_1597274916119_0.4143796343489514","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/checkbox","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d23a565c3706a6acc144075865e15f7c1f2419cb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.023f3fa34.0.tgz","fileCount":43,"integrity":"sha512-SwyZbyCVBDXJN8Zp+REkZNlEF5o3un9cTJ/0hC/Pbh9zi7i9nqVQvc8QHqzUxbZsfBVr09sJbIu7ZnMbQQ+4sg==","signatures":[{"sig":"MEUCICsvk41M+u6Cb8pE7Smt5YX4IBCSfEBnZvh9dCY7wG92AiEA8UpnmJnVzHolqLqq4Ws79XijL0xJ1iqykM9H1YhabsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJN0CRA9TVsSAnZWagAA2doP/3Gya6uGhldH8cgntM+m\ni9w20GdhMcd3agXUjoTmHLKwgROocHxlBClSHoPbEnXuphJNVxFVg/SXBdBp\nne5s4M2Y/18stfPPJK864gd/HWA34WQoDrXLGmgXgPAOy1Tad6AoF3DshWDi\nba4+8Uxt5RfgYNvFafNWA4hNT9rBKdzPOS5Uo7w2A4kQlswWCnDjxbPoBvnT\na4+wWmoN8N0oQrMIXk7hV6o7EKfR5G44JFF3UVb+NbF4NRvvkAiuoeXUjJOi\nrKKtyoHvq+IONQ1AlcWpf2jkFD7Xa/6mFWeyg7cnD93ei/C3G6z/38ZXLUEu\nqztFgHdFUuO0nfPGR6EzTm1+23Ig0tA9kLy7HON0BYadNBwmvPD8rmZij92w\nQNwifNpgfMkBmxQMUwj68Fvs4Y8VHU5zx/8qpI0sgz7kmHvKA4MZjZ7QWjSJ\nmjZtmCoCviYEajiAulQtqclcmyl3JIo9bG2oU9h1tYn7LXx1BjMSeGxSISg9\n2228iqu4uNlyfuAXrY+YjcS7gcElGEOTtd9Q6+VbSqZpGI80ecDiSDGEBb4q\n4A94CtgK9DL7LuEwJnjzdLki9p762725gmJ7jI6sT7oj/6HX2fqG9kyq0urE\nyMGY79lx64Ya9vT+h1a24eyXlnzQyAiSQzZCuxDhfFZzrHyboZKrXByZ016k\nMgEK\r\n=DDNA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/touch-target":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.023f3fa34.0_1597281139628_0.8408245397083018","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/checkbox","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28bfe8c870e234b17d12dde52d62b11dffb1ea01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":43,"integrity":"sha512-hoZDzbdw8ujqv/A9ijY12qAlDu5LqMllRUmCwkeYPHDkMHNDSPmYdqgGRoAOK4B7fQX/lcYJVU4mDCOCXyxhiw==","signatures":[{"sig":"MEYCIQC9d0slAxLCflx0oggHSxUksDrez0AVUJMwmh9oAn4iLAIhAKRH4rKczj07k9zuPqvWS8H99DYQwAAPFtJq2K9rkJlb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdVCRA9TVsSAnZWagAAWI8P/0oYwJlKokv4ko7RmqBo\n4F21rkqOJHMJf6lm0y9D/tYyqfJVSi2PyvWnOvn5QDtk3o20x91LzPLZ5h19\nXGNGIJDr0A76w3bCq2KbSIxFe5NNl4GgnxYod8z3jkd+8df3IQOaiziOyhIf\nczpNCgRqsoaTYF9twMM+au7tJYkvXRcOpwIR6dcPaTXS8tTBFC/yIszqXW9I\nMyXPVIzKgVK3UipQSntv2cigcE/zILewII1DF928vTtPCV4ofVjtyHSX+B8D\n3r4fUGjvkayOJCi7gZV2D8QRJjxcrfFBI8H/tmCZToX5xzTPG9OgGAKlcphI\nyewYobt6tj8Ik/mAASbeoqwX2rUsSLKuxFHp5ZGxPenLMEBjCMB8FrfYGTvy\nb5S7bQC5mey58UjhM796bQUdJaFqliuvuh95hWvdYo46pCuS6tKnstBEq505\nLsJ2fFg9HZ3Pvach//lCL1Q/qVNaqEFSgdivUMk5hG6BjAE3OfaqqMAVGDLb\njMvw0qem6ZOc8JCYiPvtz6ZA0zBeMec9JlZf17cwolS+iEmbjP71GtKaZiKF\npc1ZI5myXGT1fAsIi1AFZPDIZTdfZcMnDszmNQlPMzvK0ESZjJE4j+i3R902\nAfY+kBICmdTMdtICrJdb6nrPGD72IzLQlgZlZjmmn1DImorK/HtKh2RCSmBU\n/4ji\r\n=ftaZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/touch-target":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.80f3a9e5d.0_1597282132816_0.7467058807169977","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/checkbox","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65d2968d28cd282d7bdd56a369d9549f46042911","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":43,"integrity":"sha512-5YPQkDMe4qbNWqp2d2+w4mRviUwn3FZAzIKRbcubh5fyLJ3TxE3gZkSk0i7Nbp2wWbhTZkyiKaFAfV4WxQiYeQ==","signatures":[{"sig":"MEUCIGr/pNDi0KRHKXW70CtI1tcZSqyA7OQKj+H+D71NOdkxAiEApHGPDKvKymSVZ77JBZI2eMWy40x1vCBrj3yHfylfQdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6oCRA9TVsSAnZWagAA1LgP/jeZ6tHKVfIcQgyTH60i\nK9fNaRrcKyiLaIOVa0Rofnjw5kjrb3r9HCNjYGuWql2i7IWZI5LNx5poVnlM\nHtQyVOM1/XRiQJ0nxp/EfxRs0mD6jJnTKzzmeNsY9ypFrcexgOwMsgJgrCQt\n/NYO0ricNoIgqljywSg/jK17ndkoMOKKLTzcjp5D82BhdzL9tfk7mqM2XRWO\ngPciavBwAOaOqCkgXRQGZwUy66mtnvwB9xfxQwyWb0/4okblM56EkXrjhuaN\n6FpEgAdV+LbAfLeWDWvHynbLVMKtzS7FixAS+AJlOBedb52avdEDB5OQ1A1Q\nZ6jIYg+howtt5tksmc9i2zn1Xtq3SbyxVjs1MiwzlWV2t44x9jOy1sJGIqpL\nx93iZKGtkfWSEgz0iQ7rSy0wXuGs2SBvsdQ8NQV4iBTi3Kkxegf6hpQ5aSAK\nIU25Lq5NDqcxbQyN52qTt+NrEP/lhDKSs1vIsGIBWTixA9tpQwlBoethbjM8\nFkG9zdEk+YMkXBFxUoUBO4TY98vK3+hZiv25SsGLYDw/jyfR+kq32KveY0Hz\nfMJLL0/kSimDCcafcbFfUgbp+i4wHwo5aNQ4AFdtuTkMd5WgDwGYuHQzkg4M\nmDhN8dFYe7oXgPABYxJN1cBLxSpszHwuKNRlafK4mpSCPYZJlBOCHo++GwZ8\nv/6R\r\n=6Lvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/touch-target":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a1dcfe97c.0_1597308583646_0.08116853196834106","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/checkbox","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.af332d5be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6264de66866ca4d2e3eafaedbb7ca8055d3dc7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.af332d5be.0.tgz","fileCount":43,"integrity":"sha512-ojZOp0fw2270BcHvcyx6PCiNrruXOtlYuobQ++YI/aWxGRl13YXtpImKliVBuuTJNkeZbKFkYxiGBI5oO2BVOQ==","signatures":[{"sig":"MEUCICGzQgZVhHspUTz/7pg9I88zMWf6qFGuMt69RlzjSpW+AiEAhnT4adS98qvPmPgVAihbXgy2TYM3Q3otvMOai64X9+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":667309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3dCRA9TVsSAnZWagAAP2kP/2LTrtKlGs0ZjmoRGAFM\nW5GAUhhC/+15e3z5omUDaHbwznRUdL9fFCylMk+vR/CuyZq8U30T29vnvOgs\nIpwS1MazJE4RkxT01KlHXxgvCvx4DJ1zKSm7K2uk3yM3tPF6xUyPBHrmJ8f9\ng2FVDVVoffQ0wZC8j2aMB2NKQDP8JJwxz/wL+QyEbOE2y23rJSH5p10fM0VQ\n17uL6fw/dQBQj+itnn84sgWabXviT3pR6iAblAcViTrDVhXSV/C9r9Sa0PvG\noJFmM0nIsSwjAAYaKZcpGFu54jeRY4RKcgj8ykZMwBewJnfwss/9CcYVhisb\nHR27uwYYoHSRbQRqnVwaw2bMB+ow7QrAyfaMZabobont1pGu2W+NtOn07wep\nTbSYKgaRU2+Fb6nM5vljPx5nminDLUwp1I3KFtdincEAZSxlmrkzOh21TbuN\neiycghi2YQ6BLhEiBKJplMqo4BAa9cV8tAuMt1kkeLUcfuul/N0VvepJpM4v\nibWWninYFH8xXieXOD/kaGP9YovnnSqYTjRhU4yHPU8BxRMVg1n2+GyX/RWD\ndLTeM2NDFkVlHKdyaPoKgTKR53B2sKp/kR6cponu1YFAzIDeRsTQPd/QrqbK\nvdxxBl5A54vt94yNhYdd0edoCcXlPz/e5K9LsNv7xalHB+FXCCvAhpd0wYNn\n2uuM\r\n=oNQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/touch-target":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.af332d5be.0_1597353436498_0.16800389976736563","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/checkbox","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71fe033074d517a4cdd2cea88b6b1c32bf57da1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.7dd4567c4.0.tgz","fileCount":43,"integrity":"sha512-uStoeLAU3W7lVaK7UyTB8lCgAAS1vLs8yosA8TRO7HnbZDqDIIoq15dutu//iuquKfIgPMkoUOM58RDfaQTPfQ==","signatures":[{"sig":"MEUCIQC4YamLMB+58GM4dSDHidEFMftWdUfXxGddGtp+7m8DaQIgYF7kWq4/kNGGGmtsntnXHnhYlrP3N5Zxdsd0+KQ78NE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/vCRA9TVsSAnZWagAA8tsP/RWuraz+4u1V6Z0cWgcs\nRQRdmFSYzqIvWDuBDnzdfHXKgAduZZP5ZtcOTfthSsSYhZP5VA7/l6nEvgVD\nK1pCy+WGL/KYeu3VADssrIVHx3LBiXt0jLa/Bmd/53aMt9NUwjKNqz4zzHrv\nc1Wp95uHG4cIebkeOd2MxcI163rwYTofDHywhSYWRylT4TKPPfa4WKcYI4ih\nL3GXseRmnxqr9FrFQLy/i2F5Sh82SLCaMjQEEJRQt7wYJzN8Gw+SAD/uv5fu\nwl58rsHZvA9Gj0y4X+/e5aFlMpVgqo/cjN9co3u/tSz1aICQ+9PdhkQnL8UC\nRy7zQZRKIthpDAn4WmnH1i8rjDwSHKnST4zr9G/KJn0grpNDOMHY77v7cSS4\niSNJPsCzaa+VNt67Cdm8gr0HYNn+fYeMcNsGVGgMmAmFMymlFZPmnmkCOy/w\neznDRej14A9JEdg7k1I0u4hInnlagTGsyLezYfGZ2jklw0Pg8RxFjdWZDQWi\nu5CYrpdF28327d50Mpihxfx2nAODBc1khn7asv7f0Q5B/QwcyyK25t+GK7Vm\nqRW4V7Ix0jEutaYx6gFiWGV4mSB+SPeQoyss2QPyQwtUXJHECRZZP0bjYlYi\ngTq1CHljsluICs7+hJPzB0ReaXqlT5qnfdZrF3lXxgSTzmKasGlGoMXc5PMl\nIz6V\r\n=xOTj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/touch-target":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.7dd4567c4.0_1597366255107_0.0746187729327279","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/checkbox","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ff870005a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"464958631a8067c9e9967cbef98897f1e9bf567e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ff870005a.0.tgz","fileCount":43,"integrity":"sha512-6EyDk7UeVLgTPXpnbC7Gi/9zlVtg18I5cSSD2cQwKDA6nDAAa8iwDwwUnRtAL8DYpJUVIOtVRKIbP0Rnyx4XuA==","signatures":[{"sig":"MEUCID4OKPw12lJ8i13zVOiPfRg8yc7LedV0kMPOux8yhBCdAiEAxY7A0m+ZsGR4XdKW1LB4lUR29R2pNOfAAlXS+eOX9hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXZCRA9TVsSAnZWagAARMAP/AkKXCdZbplX01eGuFC/\nPkkUmeRqPhXgSLCBGtKoaR6mYyq+klSmJPErCv5uXzpr9UVY6TIVUW9p6EnI\n2DMD0+/N5Nko5Oshfy5pMY97xXySS3peOYQnEuDZJ8Xrz1axvIalP0zCVfDl\nbqle+FAibc1MoT/B9hmep6wZDCDgPmywLdNwmgkn0uYn2CE84eO/D3uFBue3\n93NGHo3lo6QH7+4AGrfbEAx/O+VO7INRHx0e7K0ld/66SvcJpsoUXDoP2Qx0\nFk+Vc6DTHoUhmVFbchaewfVqSMKkZUhFuYqEq50uI6gNJkw5BujY21wYROby\nJM9mCX9J9E35cE1L9GJekEPnwcMnTtBKUgTHce5z0GiZkgfJ2VVZDY/pki6v\nyuaKuBGgnziBu8dZWDkeqbwOmj1wEJ8T0GAEi2rdaXVFPD78S7T/fdeEqWtC\n1MhydBN1RXjFxs6BwmMjDK5KTsJCv3PyJZIi13sVMNGyGbGgN+cRyYf3dytn\nLgyCJPINDbxwVxdu9TC/NDYZSfBWHg2sgPeVum51BY0rCRAR3fvbiSqolWiW\nmcI4EmHorMoSTLz+HXFXpYap8D1ZzLyzfdEV/vnt3chGEY3SV8mFk/7lZa46\noGSnCijSx371xyE6BAFSI/S+fZkZDOijbIA/WEC00m0j1G1i6oZKjAr2SKPK\nMu63\r\n=EoTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/touch-target":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ff870005a.0_1597367768213_0.5179996741611197","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/checkbox","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.150f427a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5635cabbe515a80700aaec9ae3a2879de7f2aad","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.150f427a0.0.tgz","fileCount":43,"integrity":"sha512-hhAS7V3BpHgVs2Fdtur9gci9Xhx1xNKO+PLH6EMmtI73qEnVnqu1W2OiJltNvWMGgoVpi5o74RO0AhIgtKZIRg==","signatures":[{"sig":"MEUCIQDi+FrANwN9dhiptExmS89D7iDdgxTG2alzQzt9z2cwtwIgUaD0B+0FCsNehWaEpWu4pkhoiv4isG9RajO1fiJaBUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpG7CRA9TVsSAnZWagAA2mkP/jKfIkg2mqYT0cluMDNv\nqBzJV4g7PE/lWWLZI+Wa85NbuwnfpK9TB3y7iktSyfaFyu3AcdCAPv6OEMRW\ngGdujPS+xW3FmjWkeKU7/KHNw8dBa4k3qHGhTQWSw3IgrV+OM3IztX4gAfB6\nhms/KCL2pm8kTaH36pD36yOzVNk41sJsBrkDd9UnjLazjL9HZyXuQ0cA3+zx\nmtiplfNC/TRjDc6KEiAEQqVLpPq+X1C9ioLv2KEm4V07yuMT+Djffg1YgUJG\nOdmE7Z3vinPy+68RuYjtqKTgMuFZhANuW6EHuLgu6p5kqHBO0X5fnVsxlvSJ\nNVsW+G+6tKLsasGH0Dy6ZGOFtJtOS3rEVpE1ps/mAbJj5fY1dcXuLv4lZzWV\nmJUUDW78/9fInIeLdesxLtNSwNII+OE0jfXLZpb1Ht2MA5pHRta7EZggjGNE\nP5OLwzou0ZeuTLAGg88eONkLv4Ap79hlKWbJFOvDiVyOdeAcN6o8+yvYBJ6j\nhOevRck/6P1Mo6fR+/Dh4C8hq4tUsWTlg9c9p7ZalOSEPKkkNIbfTsm7r6su\n/Qq3VIQJYwIQ4idZMX91KMlBPiPc9/+U91eD7b2jR3rOADqkLP61Atn1l5G9\nPZm6AwNTUiTq1VEcXsRnUXfnJLsaDUGe+N5uaTGd302NQ6Y/H1jfhJ+uHgyH\n1Cjb\r\n=0QSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/touch-target":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.150f427a0.0_1597411770974_0.5616399654126816","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/checkbox","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ca06e9d9bd9d8f6950131b279dd636b355f649","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.bcc58290a.0.tgz","fileCount":43,"integrity":"sha512-+4nlfz7LYMH8HyIrFW+FSlgNz5jpRXTwjO8b3IghdRRlUTC9Q8jyBH+5k+2pBoyYxqPbi8kE/yL7FZQn3J4oSg==","signatures":[{"sig":"MEYCIQD6v+170p7G/hNx63U/25bojdZszHkBPVu0EPckUvX/wAIhAKztGIxEIqjglsxOoGWkqXmAgLsMDUl3DqO+P9srXZxp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":663093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxyxCRA9TVsSAnZWagAAg/gQAJcf1pBoZfLnsv2g11TN\nhSbAgU2gwlaWC3TDCY6FWVx8n+BMa4HcfbL1pNDKbA9rRdrjV2m90f+qEtbd\nOmT+uul9JcR2LS7FOvCQBicXoYkWc+w4zptqDkAEwg11VHyftqA48t4RL2XL\njzJt4ss48YWArzXKN0Ncb1FmHubC/BzgUcwdnG0+1sRM3JHxZFUY/NqVG2Wg\n0Ei4usfnP/qTkSu0VyAEJ1GypdR1KHVca6RCtRPTmkSuod1Zu8tP8jRHA+qT\nb0zD5ndLonrtqFf70PNREvyW1PI/IlDrLGJRqNzjNxFFw6KdcKAOT+w2VMRI\nkUkTUtLvJNJ5mG9DMk9TM21CuQ6PEJFnaGOyZjH44AykhdsS2bYkfCWvj8e5\nr4S2tTSc/Ue5kkfEau5wjgJobny7d3+nDkCN5wrojv5BqS6d9qd8y6YXXlgt\nYCUdOcMnZio7eLYij5yseWUB4r2JFvVhPPUbw/uqhImO+9fG99euSU7NrvoX\nebl2Mua8F2s/PHFk7/awajPapdzbVhxRyAiqPjhvRFUntwm5ORTOCbSKfmtB\nZPuklz+yPM29LbhNIJScECn57JrErzEN+AwdKJ95b7D+5YoWoN7cxFgCGz0q\nSUPiRx5maWo3mAEgMXTofxKluVcqW3KoE5AdYR4HMI9/gamHhQGkK763o+sC\n2dJG\r\n=ijDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/touch-target":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.bcc58290a.0_1597447345069_0.1653359796486511","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/checkbox","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"127fc3006eeef8d389bb3dbc0973b04d665eb90d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.4f55400bb.0.tgz","fileCount":43,"integrity":"sha512-RkuW7E+XQj4UDxNB+AbDYpRiAjJ0bRQAwiLKJfxfFyEl1uODamkuY+LPL7llC3yNc0/TWM3IT3BmCYLBwNreLg==","signatures":[{"sig":"MEUCIDM+2EaFl+uXZECVu4aqwL2je2KVIH+B3eIoF7zAnhRXAiEA5Zs1g3FH7ilxnJCioKdvVBFQ7i0S+HdB2XrEHL2SV1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJ8CRA9TVsSAnZWagAAbZIQAI0QOp6qtx9VwQcclox8\nLDWb5sfTHnD301/aSWtT5y41rQ2j4gTgsZn9NnuefDAUvDqU8svYKHYjuxrC\nrdC2ZHm2wxW7UYyLOwyChIzTuzxoNWo8fG964oZ3rK9tXTwArBDRjQQoASGT\neAVl+ouiwL/eHoEevr4vrgAdcRY/z1rL+hhTS6Bz+yKZuM/ImlgogG+mFWFL\n4ig1oQLR9ZAAqnyRBUFl+PmEu96ztdnYnOqON5rmX6wfmrO3UQsa0j7unNnA\nQRAyG4JhF2Ip5OKNK5ehVTKyoHi2yTNmmCzBxQpBJhtvygQ+/4N9J/iUEcxA\n7HYikQTT4tHPNl2UGsdanbD3seiXv0HDJ2U2DApcigcyE/41hKyF49N4yuO0\n2fo4I+AVr4Gk8RQAQp1PazLVmkmBowJ0i3atvotqW/3Uwo0Zy7ZNscItgV18\nRbU2B1pGjiY5LP3ItXR0ZPn9qHvkcAic+1hS+F1V/gWV0qI7IG+FrVbiIeGH\nVdEp6B/YRQ3Ffux7duNXKMwsqIk//6HTRxpvZDPjk4m4FWnEg7o15lk+wlZo\nhM2gpdnjDAmuvvPG4MDGGZuzh9EONpfiO/GECutMpLCl1UI9woTJ8vs1DrHr\n4bbooFY9pvHJGYcFNmOsjtrvqRwGRIIrmq0cEe+IBhC8jcVyXivam/B379Bb\nPXAO\r\n=QNFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/touch-target":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.4f55400bb.0_1597682299865_0.9730212210759128","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/checkbox","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.000d64815.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f855b019923abe61beac6ac23264e7474e77ecc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.000d64815.0.tgz","fileCount":43,"integrity":"sha512-SU11xJ7sX2cBvmbilRKyLVs4M+gV8cYe5UNXuKnzrmxVevHTqBk53ZedTDSaANTqAz5jlPz1qR7thx4Hi/yv3A==","signatures":[{"sig":"MEUCIQCq0wz5junDgVOI3vnqmr0HTdfSPdTJLaEsR3hDjKYA6wIgaURpsKuVRa3D1INouR7NpZE3juQvnfbHPDutWSrhyto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriMCRA9TVsSAnZWagAAa6AP/ihd7oD9sS2eVvjZtc1y\nycOGDnTY62fZJCsI3Bzf9v6ZljO//7GwQzx2pKthpBY7kh3KBkgSUpNkYMG7\ntuGwoVwoHoQcnqdzkXefFa5CVXoDVNKDy7gYRBqO1bso0BEVNZET4PkG6dc8\nw1tTEI90GQuFBfNVmohrx5z0bUaO1NLLzBP/1XE6ihau0S7LHhpQS5yHGG5o\n226MIwLReL2tHX7VoQeWq4FObxMcZwxO3iTHvRKhKcXOKHDqaxO7k9L0m5vh\nS0GNzwHsdSEJJf9tMAGFIDYc04eN7fDYnmXisRigV9DVodUTBNHF4P39I+d/\n9s3o+tcOmfLg3Op7jBGfPmlRhlaYt9FCU4rpKt5sYvhyLOsztwJosjtH8LCE\nZfnsuKbzJxUtRzJbNmqNuFHTABMBjfkjRoJQTd+FuacxMJHgGWOyJIA2nF1V\nQJIxZYp9ApfFI46Gu+QKlUA9pffvuuAdet/lFGF4BzMqDdk6qpZiqFb10Mi0\n0eGMfnvssqowzmjJ1l9c6JSuHqPMyLKd3cVh/ZTaXGkBcbYRZtY5GYBdRnPv\nElC4DR48PG56U3j1B7jPC65mdmhMnkB3yQIGAzSsgFcZHyo/5h3P99Xk2F4n\nwi4ox1ZGVlyxM9IGE8zvRYAjVsfiL9OQKR4kyxCzn0n5gkTjeJ4ZcCmRKZMw\n7uKt\r\n=PuvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/touch-target":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.000d64815.0_1597683852307_0.6949855523552544","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/checkbox","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.defa599a8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b457d24d6fa19473ae544dec462959a65ea1a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.defa599a8.0.tgz","fileCount":43,"integrity":"sha512-h7bZUbJIfV7hPOIL3A5YNbMEzJlhP98KBZYhx3JoRwPNA68lS7E+yiXGVvBmhMgitQACEKtE5+0ERl6zQA7viQ==","signatures":[{"sig":"MEQCIGZukC9t4QNcwKOv3Ft9s8I3+tgrcLjGwlILjsQwMxOvAiAIJQ/Zig8oUX7sDwadMy5iy98HoM0jOcXuGm5j/oW/Mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOukzCRA9TVsSAnZWagAAYBEP/ie3ZTCbQNIQMG/3Ojum\nUfUuTPlf0Gh0SvrEC2nK/M4Uagr8dvWRDTbC3mE6Kt/SFAbKaBn0pXR4PD8q\nM5ldjOau5gP7xT88mMjgZ/0Z6JobBL2V7r0MCZAfRKnLkGM5VtQOegpcoMYf\nUBQtpWmts5pfsf8ne7jz7GXV28s6s2cONaCQIojHj8ClVJpNJCgJ4JbE9E/x\nbmmCd+0oZi+ng9ld22r/ukUb8JIs/ymuDQRfXcxfeOoV/lU6Uzp5QnGQ5ame\nvRa7C8HRMGuab49x9dHx6BZbrOI7qOYQ4YWtawJdKYJxQygIXqr/PbXfhE8i\n8FexzUMmikpM/S9ymy4yhVdDPYOrD4nB2VaoydvmgvHOqnbhX7pBwC2WxacM\nqca+AqMmHEuN4fs4J/paDJiXobr8NDMhyfhI8HAfytS8g81+h8oVSbekk9sU\ndmEMsFqu+OIg0hPWa0HcDTtJ7bGkMi1WFiYzW+A0M1gdbuCkSEw6q2WXRgI2\nPDsqpc8jN7A2n4TMp1es6kYitl45sGccy9Z3BsZ+lmRIAChDWaooBkrI3PtJ\ndfrmn1sbTzW1nZoK9bh6tUHCu81Gd7FYOqv5Q9nbGg9GxY8qnbnWgQMWb6Ik\ndi7Y9G3j3I1ldcW3/XBiHqDody/5Qg93NKKSNMNLrL/9LKc4FulMpkrMnorI\nDo79\r\n=UtV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/touch-target":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.defa599a8.0_1597696307057_0.02389435998492928","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/checkbox","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ffe8f55eb8e556696c9c21d513a895405dbaf29","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":43,"integrity":"sha512-dHBdpFI58Bz1CCSlPcKkL56YsqnTtBFU8pCbQLAz1hmpnAvEgHRhD95FQv8WH4zmkBRWmPjwpAJODIBq1EYraQ==","signatures":[{"sig":"MEQCIEoBUB10NGwnj0KFC/u5COLXKP7cZg7JzwBxAIMog8kBAiBJNed68TxgI1KiVefVL2m4lKLv2miWns1nvf/KZhgtXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+7CRA9TVsSAnZWagAABXkP/RX4Svjp8EUQWMCVCFg6\nqpzr6WJWw7l8w7zRH5xfmGnu3uOUDtTjuMtVNJWiQFXVaDlliqv6/75gq5YL\nNiWmQOO7qTB9nLeWxigNcB43KHBXzRrKFCjwKY9mfXJAyYxsKoAxUcVELssq\nSVIoBbaAMXWl8mGu6aS9cqZYExnAMyh7sjXBTdHoX04ipyCqQZFk0KsBnvRG\nZiM7utEAShYuzhuuLw0t/ZScDLONanriYlq6q6XqXdHbh+vmDNixSXrmLjbs\nVW3XrZjWy3VR52VeCRCIqhBZ8JEbn3YTCkvRmZKEBl4ezQeNJzXnj16HR0an\nVLWHiiNLhKN6E1790s6ytFtegtYt/RpiX2rj6mhppt/Az7nnEKdZqmppeSfL\n7o8Wj1E3ykQevi4iNowoZtAFphvJDDNC4f+egAjILIrkmFFxXCmYOF3E2TSg\nrcYAeZ8TyzomrTfmQqIMuyIqJwNAmulxDdHUkmXA1p59bzZtESMJ8UK9uVLc\ndZOpeAqTcfq34N0AaPw+1LvAhHiXOvnxR/nenO22GHbrxcEG0eZes4rxF3pp\nETVRtckAPJ6cCbar+dpTHdpof97emwpZ2OCNnig0I+6rsxAFtacxJF697QLy\nHOHBLIj0wr/iECo28n4IQ6MmI0IEf61eG+KO6DZ2dTkrTqmnSgFqoEh/K/Zz\njTDw\r\n=h0XT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/touch-target":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.66b8ed7e6.0_1597775802826_0.8215646305840159","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/checkbox","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45326f5398b0bf60f84d0ab9a6110b101e7eb25d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e2b1033df.0.tgz","fileCount":43,"integrity":"sha512-RQzoNWA2lxhHJZyi3DjYzEzacN6TKw9D14PRodqhhl0TY59GOc0r1CIDr4Ko575GMXuXXswWbGYlkDYyNy0zHg==","signatures":[{"sig":"MEQCIHWNCRXNvvVYmYNspoJvGWd4lhraO8aNLggxb+5hlh83AiBK1TCGZuT1Nbt8JMsvfeM9rj0oqijbxRG0PEXhj8DXXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJuCRA9TVsSAnZWagAASNQP/ApLQ6CNW91yTR4JOdN1\naC2N/rTWnDXc4RZ/3bY7S+WOMHNZ2R25M1G2sI3byVOP36BpNZpU/+/popRu\n4lUnGMqghHLikZ7MLhgVXfQsC6/ULIdbw6noQywtlS1BGmaCrHGanXxrR+Kx\n/fyGPZQJQb94unoqiXuQRXabspmIbe7/70vwkT1agIc2XH1QmNEuyeErCl9u\nHW2/qEIUncGo3/NkroQFZWU0uS9lCu4AwYlTksylYH20XYL5h89B2R+BwIIe\nbDifWyorCgjgWviY+XWU8C5f8Nm5LRDYjLTlojltwre/gXd3LN1MCR+MlFsq\nEvwaxkkHRKq4heb7Kv65L1erVgsTag+poFvaX8ldNPcru7J1WNcMI/IziEdA\n0mMjNnoFHgFuSNGJaeyhwEx1lHsFcCrMDd0vBMIp1EZl3J7huAbzRbloEeyY\nNNNkeqqderbGXJmln4JkB4NRgesqoKwT8Xz97a8wKaNXjV2ttqpHcgYuNTxY\nCG+m4iOz5wtw8RkID54x+LSOeiBjiYanbuG2OgmlInN3F9LgGIdBAvXOJWTj\nDCjntkU1jYt7g5f7fJaMzsCT5z5iMh3LAd/kJ9qmAiVmNvubihFZkGI/Hufn\nQnROFFq28wzh6v6uFoYF4qIBRXdzFG1N4gvneGqYw/36pIQhtmkDCzDpB3Wq\nS5hm\r\n=PinW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/touch-target":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e2b1033df.0_1597862510197_0.15379866220165783","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/checkbox","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d55bb02fb85fd5788ab8a6c9600a9f43fd0b60","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":43,"integrity":"sha512-X4+3qFIDZn32OQWjhCPnx9xxsp8GPOmEhI8oRDh2VuOB3j1wiE/iZa24+5lEKpJZ0H4TbLmFRSzwj5Oj9W5C7g==","signatures":[{"sig":"MEUCIDbQn4UFDJAuPr6Ri+Q2undWEqG1nm7U6IMI/3+T6h0+AiEAzqURfklviTSZ4Kztv1CV7ZpjUGkhh5qw3ZlPNDQ16qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxECRA9TVsSAnZWagAAVq0P/28dFBvY2JNwi9d2lCoF\nuxRPImjHLm8D25UAbE72QPOzDqv+BmsPfdzyKFOfAeXzpFQf73QhW0PG0/rm\nmBd5WpO0qDKaLelYhJlIHfxJKJL42YUnuJcmmlU+GAjQaZRR/rkzT6a38R6h\nxop5M8o2aXLl471UEyHCbfh5hv0yRk76wXwxZFeyS8u5xIUqYJ331NotSrZJ\nY8OA/TTtEOV4GRQnXateMg5zbL99CQte0ZbREw3ZuPSbH+L6eIBMbEv8jGq4\nMoSzVtMFREZF/gMitYqnc9gSfAQMVE+LONSeyzL7b1CjsixzuOCPcKLgG7kO\n8QtihyoXPy5I6wbKbTfX8d9lg75/7DFqYdZcd3zN9sBe6NAZvSbAJk5+gRZ8\nz1oIoo+rVnWWlr9t/bY7EZUYAWyXUsvi2UhNkkH2j8KHDqIeXESr3lewbn1u\nYDrjFpgJCswymLjgB6IhSatw8RfSWNblUPYfRk3jRta9C1zdfrdNt5+rQHHN\nf4TbViP/LRhiQFBQuwBMe4xm+0h/GECDhY7b55FoB6yLFOPyHNuvcjqZS4i2\nXe5eTj/bR/HLQnNXV89y4V3g9nBtw5C3Zxec7n0tPI+0BABOWVkpbR9BDerf\ng4OcxJMxD0lvyC696HNRnYjmkeV7J7EaUpoHTtvgBpoeF5BMmoj94zGpgQEA\nTm36\r\n=M/4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/touch-target":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2e8c3dd2e.0_1597865028149_0.5287695501331595","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/checkbox","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6cc45c9747b41783d26a7f5fad2dc8f5ab2b5ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":43,"integrity":"sha512-GTvve5UDndfY2nNZ6i45wlfnIuev5NiCeG2qistNqNNoz+lJRuUBrFjBh6qSazdpiinisOGV+7qv9Ipkbz6iuw==","signatures":[{"sig":"MEUCIQCZIuSxd5gyfCXso163ssqA9OSegH5wA9CMiYPuAOPvCQIgTsk4xzpm/0JBaeGtIvm4eJdVaSnf/9yqG1u/M08coD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXHCRA9TVsSAnZWagAAwUgP/j8b5mEs1g/eXwrlL8Qi\nzjm3xhJBQYQEeGYNZ3iHSptqqjk+Jv6k81vKLQHtt350l1EggEE4stgI8gKa\nLIq7Wjp2JFmdVV2Qvw6qR0EaWIppWP8KfvJMMOd45iWpYJHlInYUVlY77h6d\niRh7W2Slf2OAmaRDYwNOylfI+yDpLgZfvFu2v648RFoc9RIw2W41tqSl70Io\nTKV7BC9FGvhb4VAd+deqveySm5rtEqSBO5US/mOEif+ZABijRJwyBLlGwrMm\ni1XMsOppdBCsuLxPrXn1mTn/J1zh/7ee4rMPFMM+ylOVHP/4xbRN1wX2T+Vb\ndOeLSfXj2gCZSbV3olvwekxvTx6z9eQrySktjZ1q3mSliww3oBMVf53QudNP\nyddTsOe5qvtKoC6JldeD3n7rGE53FrckHXFvhPQf/naTDWzFVhceBGSFAmjn\nJVWcJAm3EGGV7ugalF0BQmsbQpBnhm+piZZMYPnLTw7Fbfwh2liNtYVIp0YK\nacjB0QKWMUQ8v8cKDkiLnSOXu8Y98THytWb+9GT6Y5SQLso+i+raaSD1nHjk\n3tj8bYHogpLDzK4+PgVlBZaXiK4DHfpvlwW+njNS0f1kSnrB2Bg9fqAWFZDA\njIbAHHLJ54vyC8lspSzj8EF7iLjPg0bfV7p3tr55WEYrSGySTVEY8s83c7Xi\n9bly\r\n=TVfX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/touch-target":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b2e80a5d9.0_1597875654399_0.44515472446542237","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/checkbox","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ff88df637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57df5a9495c84b835a5dba4a3290e4646c0ef04f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ff88df637.0.tgz","fileCount":43,"integrity":"sha512-154H8pOB9F4wKIRcFdRElxm6rf8csGN5vryHP9baC7zPBjBB+YWBLSaDivOR19jeGwyzXLXI6lN59Uniy4Zfvw==","signatures":[{"sig":"MEYCIQCzbjjzsuH0eiXMbIl2xx7u520qX3/SdiYhHK/06XOQWwIhAKLYYG6KHRoZ8JMIMNcZLZ34HxxEapft684x0ind0+jC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiUCRA9TVsSAnZWagAA3cgP/2GoDw4NFrZ/4euv52ad\n+bI1rSSUGpRV4xFd5qJNR1qlNHtfEdXmLS99raYE9n0EA4BNE8jKe9PUdHwx\nKMDsjPWOkXlnQMz7wsi0JVm6h/heacLY4DN67bkF14hsPy4vkvIHlYMJmA0+\nFaJSQVpuqJ8jivFznKol/+4Dp2nvu4hCPJG9QQGSAwBWE2prLtpp7FsRDwMH\nFsa/GBQ2DcsrAzCNkJbip1wOy0dgi2XOPwpM6PVyDJ0gbnjEeE2HHWr/tBu9\nhgESE7xKh7kag8w411SbtQQROqTlW3YZelk9pfkgLHj9bmrCa6ApqtHmLvhh\nVJ2+lPbHacQ8DndTqtMeexsIkkDSmPU6CZ/5K3B6O/x7k/KtXESBlFFOPeIk\nCb+FlVSUnnUUyL1ya9Yivk5GIny4nIRYrOsJzujla3PIHd52kwj9ggflCrII\nCmpTN2J6y6RafdvvcipstB4ZTDhREGapvNH/6bTWVWgI+goxVVESsySFBNcB\nDzJiY8sXfQ/xQHSjOMO07j8DuO/Pnb1WDTfuOsnIGHhclMW+3dVjPTaerbYw\nTolU6ruXFeEPjl+PHkDGfCWqzkvvTya5GOX8/VxO1+bzKhFs9DtBq3+pO3Qf\nGB3HjJ1YG23+wnQgCOD68pqamqx5zWXaRH0HXK1x9UT6VwH+8vHgze9HXSjs\nrn9p\r\n=HJQZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/touch-target":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ff88df637.0_1597876371609_0.8346033134752555","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/checkbox","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70b82f9ef395781f323633700cc12c5a04d43cf5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.32fb314cd.0.tgz","fileCount":43,"integrity":"sha512-M5FULGnjhMQK/R0IUesxtqWGNeixpCnRiQlu9gTksn2vm2v7qqW3AinatxB+0R5ALDED0FelrdA1VxR9QJSZ9g==","signatures":[{"sig":"MEUCIBRaQlWmmig9afoImEt7YxSE9+lqYUlWUJNcHqZRKRuiAiEAst76BjbBd/2CjuXcOP6ZWlRRfZOgOGzbcfQoNVHDa48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJrCRA9TVsSAnZWagAAQZUP/2sN0mBVus9zXQbY2Cj5\ncSCUdrumVugzG4ybAIdipN8D2lAPcnsYOjSnRJ9qgCzK9UAQtt0RQO23399q\nVJwIvYQhHEwTE6Y//ybHacyDdXLRZJubzHRXAz1aqoiW7eU7Y5RDdtR8yYtF\nYkgOiMRDabIiOmszcBuVuqzgZbxvt/Zk3WtcoK4fOrAbgFGHKijy2nQODV9T\nCHvwVN6/GEkjA23syjdtC/pZcIdszYMO4N2eiiQJHDxI4sOnLJEHNbel8ZXM\nt1JEd6Z0oTYFDgFIEoM7u3u34mFHmV2utsUEXR8TBvNf3BSELAz+FzpBcplj\ntcH6btQIAk8XaUnPCLbpIH5VdORvP2H5wSbEDDB4DGaKTJn2ZQvmkhpmS6Kk\nHlXQxac2/peNEaJVAHpY+FJ612b16mdosnvQW8Ii16NZRQwCsti7P/F2dngw\n54SWQ9LLW+DIH0gvnW1rGbxYTr7hFUt0kqB6yroiQm6NCCnhHMqqsN3o35NA\nlXqm/b6xrqWd0tK6Vrz9OAsSKDgSuwQDiIhREmwo079NczQ8Ez8eb3eQowQT\neTi54jc6syFsB485bn4bjyFqtLtwGCcnw7u7wiotOCyjcNxp+gx7uBYVGq03\n3D+Fxs4P61DtjRhM/xn+nLrpmt/AXUb4Z0LTV0XelI8ziy9xtT4X1Emb75K6\nsp4x\r\n=vVci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/touch-target":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.32fb314cd.0_1597919850738_0.40544573108415527","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/checkbox","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.546277d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c89beec884b7850e33fcfd1b1e815a89aba6f3a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.546277d32.0.tgz","fileCount":43,"integrity":"sha512-pYY7eYwPNftqTHJdvcW6old5lZh1OfF2uXf7Ne7MOZSdzY4oPAlQOW4MS0XT55arpltEXjxt6FquGzW24We0Zw==","signatures":[{"sig":"MEUCIHhTFlRtFGkMR+8E7YCoTl+l/N42Ypk/JYXpiYWHL1qEAiEAixQWZ+gtMpUmNY+u04vJ47NgzG07SxnlFIyoRoRG5Cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgXCRA9TVsSAnZWagAAsBkP+wb2UCchX18RpDt17cAs\nxnkuezTHYv/BdN3UeVpzFs5Av/6o6jOQbFf7GW80Dby7fSIRJzyoUvVdX6xp\nW1PrDMS/Fw+slVY5obNBoa0eGw5dfpj4K77DUE9DLRbDt+mxImLsS11oYX5M\nBNS9m/9fUde5VWSoOpa0MUMP+HyQ3tQsBpwrPzPyTBinBDRRV2tND9srDVF8\n7JlrgILTgOqKq6w3vSfbev6i++8OfxbGZ63pynVSpkmD2clTveG3NpiFUaSu\nBYU0Sa6GdRooOwYx2zz9eZPDqWI8ky0qWJ4R4+bPy3Zv2dXnj3+QjGrjU47b\nmIqSXrBiNDGuzNtrF3aJQ1RNI00hux9OLQeUChPF60N8YEqHk8f/L4oh24D2\npfpxhipye7iC5k0S0FPOHXUnumGdcQzUPTlGtJeXeEEDnDBp12Moi4f4gC+N\nFpZzUWEFUd9REJFxAR8EKC59C9/FztbNUGHmM5BsBFvCecU+VhPkUIlq5Zrj\nr/wXD0QxQC706tdZ42xQ+QgcoFCpb/smtc2onNqHZ2PNez0j/aesX+GOcWK6\n6K8/lrW+NsRguYQAor483iIZaIDhCw7A71bcthQrjhPdAJiiyA8InBpKVYZH\nXMrgW5VjFqXQ396m5wxv8tbuT3J/CqJlE/bd7sqmdu4PfNIkFwlQWMAHzHcG\nArnY\r\n=6lgl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/touch-target":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.546277d32.0_1597941782821_0.25181194128697215","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/checkbox","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.da72839f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3210db9ebf4d34561b91c2bd55740cae8b846449","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.da72839f4.0.tgz","fileCount":43,"integrity":"sha512-NeEcnen+9zTYlDqgpxNk0/D79r60uk/PYUERmpGEY7jn1uOdJnsE2PAfivtUgh3p2R9/dH362C2YAsCjbIpTAg==","signatures":[{"sig":"MEUCIDgOBuAmDg6zGaRThdViDYwMXrER5bRyCdVie7/zhWtoAiEAjEtdTpwbTosJGs/oy0hF5h56c20dxYEByxsNR/Q4pnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProTCRA9TVsSAnZWagAAB5oP/1uCS82ygT3uMrR+GaSe\nAYBFOJ130ENoaYwibeCvh3iszWfMuHdLJ21GgoPd26trb2OQeDj3fO5sBTbz\nLjb14ti10og8aeX6BYSxx7lvGYiBn/XfWoFDFys/tvKTeDYa3xZz8ma4CfDy\nUXp7NMA0wk0Bd3Z7kHkOH1xZY5TAiiaBF8njH64An7dvVPm54R/PCrHVgfpY\nZdgDDeBOT5g47QnqnpMzJgPZqrNURq+c9+2bbbhKxjGtVx8TA+54IegtwFUB\ne1Ya9OjUGyeZFLvAZso5XeaA6lXwtyb48Pf6XI4t1KE9hvEx5WGBJ0KQ28yg\nCOUzQ0Ji1ABnI2qQiRldCqMLIIb6rJv7X4QHLQ9q/f+AABbtBovIh8PFqBP+\n7dKRv0RGaaBUnyfQqDivLr8Py6ctZKXRy39l6hPw8a+zJmOT5jxEXXZZK2La\nFPAVeL/vBCMOsCig7CzuqFZOeYFYgaR/ojQczSwpYfEr7U1EzFqGVwC91lEw\noynvlWuHsBsL62tG9aQ587Ec096TQxzymujfjD+kGdjYUx71r+esMGZpYomr\nDmruQpD7GxWxmMZ9JWhjWlFBqPaWDyw3Eb2w5/mm3oZgLrqq0l7z9DOkOhz2\n5C67FAE7oOWaf044TmVQ+YnBNlOoBd1bAtYgeSe5Q1pfzE2dH1iBSW10gmNb\na/LZ\r\n=Ywdp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/touch-target":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.da72839f4.0_1597946387368_0.9482059245350114","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/checkbox","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.346069ccb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b79a72b56d93119810c11e1a404bb2cb5da218d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.346069ccb.0.tgz","fileCount":43,"integrity":"sha512-H+i51uj3s0HYFceObfW00dMci5+3DfFtUPPfp/4s52ShyrDQa8LVaK5u9rgj1z4SE3q1P9OjUbM9sjCC4XVAPg==","signatures":[{"sig":"MEQCIB1oT4p5cuSV3ndO3Y7UnJC+U/qG0d9m1iMZAKSHx3KiAiAZFwCYRjlPDRVnSb3MlR31cHzT0LWgolBk9DFM+FwwZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5qCRA9TVsSAnZWagAAEr4P/1QKxbXsblqrWIZK4cR0\n5XCnMHDJ9Dlql7qBGFoTWu1SAidbq3+cUf3MFPvrTdjjvANhoWiCFneyWqX8\ncgApqq86gZUWlKJ2jOXVJ+BfIMiVcxmceD72deOf64dqWQNbAiQKG/Nnlngr\nhe2x01AOn1Alvif74ddnFjCyZD0mrmqEFWHfjYx54FF+8sMLdrQQTrMHv2Zr\nex/rEhRLiLTU+QESXjJkt6NcgxJewOxvxBU/CfqMsWhSI3RpJqIzj2wdEwRD\ncT651BI3m5qG4TgYTNOglHPtf6qXgF1iO6rbsKmlYx0BoTKKN60VsvGCSMtq\n4KJAUxcjjcAttZECDBf6lfRrli7LZ/RfHdDJnNxLpdb396z6mFP17TNkjHtM\nI0gKd/cTt6Ryb9Ukhi/MRKTGCsdYZ4mGdXsYmNDDHE4dfv3GRMvRoAEaMII4\no0B8ouWavLKo9/nlbWtO0ToKnwU4iYaf3kOEBS0M+QSyQBnv6VFir6b7jOZD\nHjq/C8ZJ0bDuEdxWpm6Hyv6pYHdawwPvLVvpznSw097HgyUjOY+sNiKRLIfB\nsMUS6F7/fmNf8wPhcT3YzTDwuZzPgJxjIs68FtTLTuBWhOPwm0Kd0LK6/i1E\n/UHiuLpSpqTcYf5XW5DO9QDnVvR0doReG3jlFcjWNxlLAF6inonj0A5xazeP\nlQIL\r\n=ZA0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/touch-target":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.346069ccb.0_1597947498408_0.5552983787255645","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/checkbox","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e0bd0cfe4d98fa0eb1da8214838986296dc3851","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e27c5802f.0.tgz","fileCount":43,"integrity":"sha512-2Aah8AGGMA/8JIEVMDbnC2B8mFb7jfRHbT4i2IfeSfV9IjLj/2lnptl50BxEhYwdZnGpnCw2f7wRGxgl/Qe4Qg==","signatures":[{"sig":"MEUCIDV0ept/JVv1RL8dKZJdHwimi3Tb3uqtswy5/zw3x3NqAiEAu5KkrbJSHX5MzP8iu2JMoi7nQb+UHn+7DNfBcgMLhLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsu6CRA9TVsSAnZWagAAk+oP/AxXyHw1Aslu3FAJuJZU\n8j3PaZ2x7QFcd5g2VnououDAO7gGYbMS8TIJNeQtEYJgp4cf3zBglL1Oh8yY\nltroB/M9jWJ0H+h7i9ULxtcFPunEPQ/N2AQGymP4S+B+1BTdg9bsXGdfCvvk\nJXYaOb6rYj2vLnaA8HUwOUBKk3CPBSsi0a+Lwlnx9g9n0HxpzMSMqv/JEBTs\nFTKZaeuP8QX2oAEQ5Dzl9AkJD86sbq90unKocDQ9vcQ1fZih7jVBHKlScpC8\nItg0EPmT7db1SJdoXCgMciRLzwiTbgOQrLNkRz13FWoJlPYf7NuyQjku9lj7\njatukrAM9JsEMknV1RrNkNl9rWbF403NQzMnhBqhqGa4J48YAAOqm54fJ0A0\nRhmNdfgYnRMGnjnrdyPsSGD7YJccY82KAGs5eoi1Iezax3tQ0hmV1IHqwdl3\nzxqDpqbpYOQAPcPtuVKO0udfmfesG3L6RCPbiQPcLWiToXEQZSgeWXv+vOqU\n+ASlhQfqqWsulkBM+Z6TaiGobCulFx2WyzjVAGhLXc+febo2WAdk2/MFptzJ\ne8Hvsm790mu9sBJfMdoV0TmlX9xLQqoMP07aKWdTPhYkWlbIav3CiZx6QbmE\nJvM+wFsbsGpxQxDu/MJFFgGcR2LGI+W8hwHg3NUcU0ycuYvF+t/XDAfQbp6L\n2Otv\r\n=sCFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/touch-target":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e27c5802f.0_1597950905845_0.2600758939193888","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/checkbox","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c3f3fa55996473bea5a5a3ea550c5cee179631","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.f4532b9c8.0.tgz","fileCount":43,"integrity":"sha512-TT4+Ba2FrqfhH/7FHuG9kdptnLGCbriTY7bo9mtA8qWGb9GBxRYuOClRww0qZDtTe2b4NiUKKVSPc0DtFmWKCw==","signatures":[{"sig":"MEYCIQCG7i+ont0aPK+l+lx5jap2JIxju+YEyO9zoiZ615EmBgIhALIb15RVh2ml6yf0VPEbkQkI/2pI5dfaRiGQQrX1Qt2p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtW1CRA9TVsSAnZWagAAsIQP/0EPtAdobFaROdRLhNOl\njZUNnOhG9/VuEcrg+x/lpcoRFwIyQPffURtmLst+oz9so1KQj2jlphnwrbaz\n6VvqVV8OJda8xVXIVsM4ei94E9Wggn5d38iDmGOl3djqcGevg4unNdsobE3e\nRQLKpsnPxIpspjlSGJWhIW1fb/93HPskPInvdIdsmj7w5MoNgvQRPc71MkOT\n2K8f7mg/lRZhkV2HfTXSVEeHThY2WgnfPtiXcZ7OfRz1/6cyJNkDxwZJ755O\nUs4EhdPPMlrZRWDQu0wNbkSA1FfSTG3EVZFFDzJwyUgvFAMaofiJ8Db5KKXf\niNu2Viu8ZiiQSr8zugDVV57oFII1GjD1OIocnjF99yaKe2u5l1IukISAAFzm\nUqDGeViBJJyPORPq1uVXSEVOA1Au04Q+Y9ihMUmrL2cKhOXO89H+u7kC9JSe\nu/uJ+gNoWisYBigfmpIfRDhSBkEP8rfwKuSx6tZP0rH/5xEdskr1vj0wtrbX\n34TrzZnU/8pH7HJmTpIqc4MxqfoUrVsprKV6vHfKhxwJd0wvtTSJ48+lvXsS\nZjxkiAFFMDgu82mU2ClsjGd9iWgKP6/bVZrLTlt/Mb5iameFYajgon3SkWBq\nJ76ljoM1XrpT8xy65u3AqhMmHFhnRhBE+SuhxXnFCEKCpHkoVYV3T4+lzy6s\n3iKA\r\n=CNdf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/touch-target":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.f4532b9c8.0_1597953461268_0.19818985383559218","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/checkbox","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ce5dffb5ef6e163024cb114e360fbd08f048a56","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":43,"integrity":"sha512-vCXCza0bnZDBfkdoVCR5LxKdvVpXxHy9tiUmfSXDgKfWUpBXNOWzN/8ELXjf7/qeHlfiYfRGnreJUXtNBOF4Lw==","signatures":[{"sig":"MEQCIBI6JCVW623t36gznaMrlRjjsr6QyJ0/8bN2aGQliNhJAiAyBhCeR8G4ZWyAqzkOAdfVEPCUt8DztnvDDNO1HNz9hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXMCRA9TVsSAnZWagAAa8kP/R4bTZaVPo3ywg9dBhGp\nhbWPsVRz7RcSRG+RAEbWCNTkRN5YevYx8dd6pmRLC52QK9vmFauezmRyz8V4\nzwXMVTIJPe4PmjsZRvtEdH8MyLAyO9TUF5FG7ZNDpnsfgYX9XKRPcGXozsdj\nmv8rvSB98LzJHHwlR129PgiYBGzLNySzbx1EQfvlc95bk2eaFeSFU6PxwU2v\naBWI7CH++4syrAiHLFKSQa0chVyxCel5eKrdTtppnO0+nBxQv5kH7/MbJ3wJ\nWQ3ABcKTvD95EuOGyPRVnnt4XUNbFGYRUk9IOEghroWnzedsZMeerHGM03H3\nyUPVOyKDQ+GmBxBwgjXkD03QjDOU5NKI0S4Oiw+x7sfsOx/xgTqGDL8IEJPF\nmylW7RjRJjH49ZUkeC2rax+4qgsXegZdfgismEejiOwxznTIzuw2FLIDJBqG\nihlN7YicNP11CSKC8Ln/1tsMNLfbQyEveRO8j5emPeA8oj9EBiEEloZWb5a9\nlcoHnkBHDONPPdW0TmTP0CSitpIDcUOXnH4mHyOcyKtHpTZpMIIbomPSZmYs\nbSUNLQEVlWQr/rQlnVUH1mEUVhQ3zrPsQAVNP7wNM6ZVNVLe5A6wKOKL2N0i\nFkZmL21xYSulYGEhZMg5CTnIBzdI43xm5noE/TmEaTiziNKbps8pd7L7K9f5\nmmRD\r\n=wKTj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/touch-target":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fbf73c2a6.0_1597957579619_0.37720795646544536","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/checkbox","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.cf800124f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbca5df217b0c5cadaebd3e6d05f40ea96827952","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.cf800124f.0.tgz","fileCount":43,"integrity":"sha512-tTWclF5QFuYy97DGx41p0ny8lJJ8v+CqYf8FuOiP3oigYyvOVgp1WEwaK9EOTNLinisFPEesFcnlHoG0TQFEoQ==","signatures":[{"sig":"MEUCIAzfHuLQP0LdA5tANTqyL50OMz4rFt+aRfXNVeSLCb3fAiEAhC4fSkGX1/0+DN1zsDSlBcpcgTHO0LovOmjtv5vhB8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvChCRA9TVsSAnZWagAA2ecP/3VMfCXLG+LLGzMouoKg\nfQxyqNzih8FvgxWBq/GAzZiJ1SPtAsI4NdCBVJs+JIc6W39zOxrgbRABGz5j\nKw1f6TTPwrBdniHhX8gV/qPEedeofu2kR9fL7j7yaOiJvlYQeqzOxe7ixPVO\nLQ8sZVNWFezfiNuW+8XoNL70fVmKjdVcPbslNoST4aLqCKMjDJJIUdDxmSfO\nEkjmTkpEnHAADu3dceBvm9ac4ypIHKZHeax4IwoLGXByURydiEuCZoMyFpSR\ncWNe4lfMmjUwwTrq4Vm1N+HTUndFHN9yG2+8z65QecNyXhE/StPV2xdLiAYi\ncp6cI7YLfy37sx2q04+QLOfg8WcXOMREdhtE0Iy+lYS/SOvbNd+Plqz3Nq1i\nZon+Dev6A+eNYFmfUdGx/yYfr5Rv4bhJZeOH4NMbVT2CtsNvKeSX+8VUuUNN\nRX2edWc3cpTyPf+bknMcfDoqE3KUlQYfIlXlNkHkVwNtMwzq9Bqrmc/+Pjfi\n4R0XtiVkxA7i2iIsL86PrTl3WINBqSrw49CjSZIUXcIhVJFtdIFEXMCO3JBK\nmDqUBgIEup2K4BMjdS8iK21UhDI5yriTV6j/AANEWFP6t4+NqT1cxtAs8mRi\njLGNJ4gmBiMe9M3jOG5+RZZ8zTJYD5xwBbHf3SPpAZb4g83qMqltxLJHI4JB\nQMDL\r\n=bDQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/touch-target":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.cf800124f.0_1597960352478_0.7001267343482458","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/checkbox","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38a0c9ed1ab20b27358d7098763bd7e98404224a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.95e4eeea7.0.tgz","fileCount":43,"integrity":"sha512-mMr/j41YNl8TytQPBZzMmSeE9hpmbkeSju9MLc5pzbt4TqcUW4MD7C1rOlEly1kc03vrKoSL8AfPuGFQ6sjchQ==","signatures":[{"sig":"MEUCIERl7W8oX/EeOFUw3z3waYceFV2N42zn9sjNP3690BxdAiEAn9y2xderItPbZVi+k8RdRNVYmBAH3FnIKYJOUqST0eQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwctCRA9TVsSAnZWagAAV1gP/3Ta1z5kBMByqkpNQsRl\n1efvDcBzMjnL39aOfm2aCZ98T80LhCckeHHafBbCY0VbwvX45o8eAEKkImdb\n365A/u0Eq5eWS7q/mFPCyCUETC2Dwdij5pvKPbUuqN/1FmPUx9iobeoNfS5A\n9GDfyHU+szbImYGHlrKCuEMf+nHnMBRyT6XZUvrGvgIuB9xqA5yBqn6HlnZ0\ngnlix3cxco/ZPH3ZLUL4J1AHJPvOsn+6OLIliFL84ACp9tT4I7GItx393IDo\nO9pTM7pHWfiHePlynAM/hvsxGbA7E7TnJj0b62NHF9dcozGn+FqvYB5CGTWa\nqjzumbmCwhVEYBgBWGtn9LEeAWOesu+Ari3lwllg18yr1ofRmAM7KbagYvfr\nwgQxlsMssTmLe2uthmRJclMhRl7RmaSdo3Y1kDorZj/7Zox+7w5do5aHREzS\nBVwp3aaZs/8VEwuuBLA3E+UrGsYsndmjH1nhxx6ZZJ8TyOepUUVwtnDRvUHk\nHfozxUpEe7hphTxvc55B/+sum+P3cdMY06W9ikLa0rp0MXqeMWQm1t8PhYFR\n/DHJBJnJAOwRtVnmg1fVOzIrEd0tX6fV0V7JD+hZxH4Ic0HgmeOG+m/kr8uy\nBWbe8DNaM3AgMOzsFP1GQ3zTrMnSIe2ayoZZaz8jRnJGO5GUdcyqtvnGmGNm\n6RNx\r\n=rfBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/touch-target":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.95e4eeea7.0_1597966125022_0.7517255665890026","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/checkbox","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3988db51cf97e69e46b528f04fdd33fe3070b4fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.91ab1c62a.0.tgz","fileCount":43,"integrity":"sha512-JJ/+5z02G6PB4Nu+7YALyGBHIpdo4gMAWd7WC+X2grYmBxoJvlXVitSZ8WTup3ZO7gU+YMcth3/51DqJmHlkzw==","signatures":[{"sig":"MEYCIQDxEk4tjuWkO4d+89JMMyAAfHGwyUPGPqtEa78U95Z1PwIhAKi2PKf+xandfvRII+kELacI2e7027gvz63E07jANoME","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":665828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QtCRA9TVsSAnZWagAACfcQAIO/cfR3Gw/G2qBEZIQC\nxTt1RCopMSXPfSuzftXaVITKMzylT1Dd9YBuZDXHlnUmPocFBEUQ2ossZebd\n7zbhJjnfGBwpgtXLdasRtYv6KeplIW7vcpXRDLWKJjiu+76FD0GiFiC8E1BG\nu5/8SKbF0hpOOGFVMFDtzHh8P0w9GCqY0A2i1zKEKpTZ5j09o6thunXnZCuI\nHPDKy8adfuMk3Ooo3rpAF1tWuMFJ5rhnW1QaotAkJG9uS1yE1KXdLOnuX+WE\nciw2HAoQJ9d2otuaGq7y7I+BOCyiCcvfxr9FqW/wBIZUJFWD8xIFzaGK/2hp\ncWIr3E/cJAcCLQJvPQeY+fVjywjaqgUgp5TrnW9+fjSym+aHv45snbqV2RlM\nQN4/USMJhJttih3HbQpMlVbgSBhsInLryfXoEpB6cTkrNj8txK5+rWVekuSM\ngiHTjJ+Bm6KihN/6sGZjuKmzHYsv/l87s0vj2R1YbJEpgjJuOtf1g4AWqQ1D\ntd98yKxu8la1vWCmcLd3/s3vF1FHANw1q+1L0OpUIoa7eDUKuPAlebPO2IU2\nnifmsSeYhTy/gLTcdwTMGY971u6F/sZi5MUb67DAVaWbfbHl+g5EJRnTxq69\nPQT99NHFty3OU+Yc0EyZyOg5B5mj+8LOiUrp54hmZcG6CThCfc2aJCuwuuy4\nR2rd\r\n=WNBE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/touch-target":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.91ab1c62a.0_1598022700763_0.8832015031125402","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/checkbox","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c3d1af0eb18fc2a9d1783a73fbae13087a5ce81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.58eaa9f02.0.tgz","fileCount":43,"integrity":"sha512-jHt/aOxSPSjxaomWihf0jhUkZNEQ0qfxWX5u68z4h/hBURaABlsWC4wCo/rw6Jax6VR3nRuYecORfzaooJPfbw==","signatures":[{"sig":"MEQCIHcEF4tX8LFu/bNo0vhE7M2MWCLC7MmgZA7rEq47TpKoAiA2578hcxhuFX3i5z10vf6MJro5JRDKBuOMGYVAcsWFgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfQCRA9TVsSAnZWagAA9L8P/1iRiAlAU2oKh0bytNw4\nd5XXBfO5zAsiCkKumGZLsJJ715wWbdFa61+rlk9jau4O9nMOQ7tlP+lWH9w1\nkTzuubOe/Ck2/IOQ1e27WZGmfe+s5rPs9jYa7aNM9PUz0v3dkm4px2Bg+yfF\nwSqv24Life7QkGbjcRsHnF2QC+PwbeYVTfPLZEJeGOOSeCmX2UC3/GevFvQW\nXaVkwP4hhc1xS8pWDuyJt3k08EtcUjYsuH2wPphwqDLvue5qm8no2k7LHoEI\nzNuzj3bjiWzwyNLqDC11MIn+PMMRtYIn+BP8GUo/OHijXDgRBv+jtlwEulDH\ndQAfODe3UX7QOMCbN6WpfQEEeTWYfI2hCgoB5GBVLHimMOo2WzBz3SKrWty+\nv0Ihxk4oxzSrBrKUnyGEGQf5VFoYJPSTOZrlaz1WKMjG/6pnQZpVhuNAjSgq\nKf140z9X9gov5NShEcsgcyoIo0cIbH+bQGK2aLywo4kANyDDl3EQNTrHRHbU\nL72SBtrw2cIMUMdD0oxEAUq9oXoX7ZoIQt90kJI+lxCd62qImGOjM0QRQ2w4\nxN86lNj/j8m9MmTUvTQTlerZ48RR2kXZ87mZB3yT19oWrO2ZkzPL2/bHsL5P\njMiXlCCluz/2NGd0JBZT1Y5WcZ/SClJq56nsiJcf6CdWZ6bP+bKKC5wc5g9j\nuP24\r\n=bHmY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/touch-target":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.58eaa9f02.0_1598040015783_0.7699265171903877","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/checkbox","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.238216fc4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd9d817821ac43e701f8e8a199ac109b3d2003df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.238216fc4.0.tgz","fileCount":43,"integrity":"sha512-MC4BxIWWetbxKHRym+pEXVvc/K32eL9/N7WBZjJ+xfWm9niEypJpLb50n9ZxHHoKbcWC160sMe2MfHS5F3xq3A==","signatures":[{"sig":"MEYCIQC2oDgu+3JeyoGxiZzKhh4RvbRNyU0tkYRoYFY9hBLYUwIhAJeoE1Hm4tzVA0JBvXE2VPah3oIKDjhNjtRXWA67w0jB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ999CRA9TVsSAnZWagAAzLIP/0RokPNv9ehp+0B7OAcJ\nygv16uHZY9ovAeGXXP5Y8F/FgPDZHlYiK0ouK4YWtL3dlFYHplH8Gb0/7hJn\nAF0kIV57OvSPeje6Ld08sIp58tfA9vfl/w8f8bUPLlsXF6fSdlQFhWPK7VRa\nxJQZ/7VGgaFJ/EMxMYuh/Huqyo7oG2IFt8HHyVEdzeXyRcczP0KcZKFdVAf4\n+InW5p267RaeamN53VELukKKxBjkblwOMuaZ1HSHAEuJlQcDigpx88mlUnRo\n5vLkfurTMVWt+FjoVyYVWBNtyoX7NcqqSBT40FgxsA8KABx/mjDynlLKsTp/\niquKk0jNBFlmdUC6Okh8Etz2g31NHhnQ93yMD1vXO3ISJCmAttlUiB7BZBvA\n8gWKh4uVBHfBtXOGpTZGikjT3RRovM3gkKjr1oPy8/3LxWbjz6xFx997ZYxU\nhojgxwcV03JG9sJEPFvb9bng73DGHKDGejl2yGYJzYZUMNhY3+Ntn5eydqke\noNu2xokBu8IwtqQoNYNaLXLaAYxq3UvmamBBaajQ06mTODKphhjWSH/JxAz9\nTV4zdFaad4aRrsk87nqIm6cxwQFC2Wito1eg8lBE15tR56t0RwUgGu+kRVxQ\nhCLTNtdZ3c3n7mNTstZrs35srgLHpro3SMaL0qnw3pBS8TbX/GnJUUEgzewp\nqpBX\r\n=Ydgv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/touch-target":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.238216fc4.0_1598283644509_0.5705745773202466","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/checkbox","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"198ff6ecb88aace5bdbd8a9289b10c46066baf95","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a1c65593d.0.tgz","fileCount":43,"integrity":"sha512-Flu4xjM0KobdmY/mnM4TE6hPZ8Rk7Rm8hfyqkY5Y/hNdqlj9RarA3JF7vZkqndXuO8FYVjuPIUoUl5q1XnkHyA==","signatures":[{"sig":"MEQCIB/sSHGVXs3YeR5l93E3eD2XAsZFOtGQaxaIH/b0kIn9AiAfcYi1ezjQVzqi17FEFRiuqDJ0Bu+r/JkLEYrhS5h2rQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+TCRA9TVsSAnZWagAAbW0P/2eQIXR3v31oNWLUyGPl\nqv2zMyZOOP/bES0d9ZnMgxsj/X3JSf/BtZS30jz8nSoQpqWni5pOqSajx6NK\n5OBIH7lNeneCzSYxZQNRH4tO9TCEmUTduv2g3bn4SjFtCDfdtcC2DEH6prVJ\noZ7/DOKy0pO0Wv25m4QalmQBuL4DTTxhPFkBaY9T6pZoZipfZdl34A3dQD3Z\nuj/88H4zEyZlfaCMqXaZv85IOSmtN+kunyKrXSt6JBgfis3f+Ll+VnTu4lr0\nFaegiyEZCAu9Ka+sxMpsDQFAT5uFdR/maGavKXXA0sm4OOsEJWqLHV2taP6I\nCuS4RtuyBipyJUNT4ffbDFN4jhwQb16FDM4/Aun2g5Nia38NEgDl+JJf8zrj\ntjtK24xUt4TMTaDxV604ltux4t42yE4dIyuUzZXxC2ukCcMIpraugkHQ+toe\nKMcPCbOLTThcvynEQS/Pfhtx8j5KW6ceLEOvHeVKkM/pw6py52vfOa9HJobM\n/Dlj9qyb8jZIHizc9O+FmV/rkNV42ifroFU41GdnUXRsZjvjOMudZFrAdtVz\nxSRfS+A0J4p6Adt6hwqN/YoNZSHdl52L+KfssV1V36xmpiHEPn5A7vSv9vFs\nSBCAs41NswPs2p4z29m4KMVy37zJILc4GT0NjczKJVI2/biblXOx5Lm8CXUW\nyVQI\r\n=1Uhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/touch-target":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a1c65593d.0_1598324626593_0.8486251564341836","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/checkbox","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e95b3731479c122cd7bb5a9bb6731399f102fb5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.708cc09c4.0.tgz","fileCount":43,"integrity":"sha512-Xn9rm0MuyGGIx2uCWAaEp/ZnIYgFuOW0J8jMhbEC/jqZUTPjoyNGr7IanUwM0s/qSV1h8Y2MWQZqwXWezvFL8w==","signatures":[{"sig":"MEYCIQDuS0ye0TdzgJQdRYExuKRJOXtjqZfK1rhL4/7vaHv3FAIhAPo7RJ+4DttSOC2x7eiUx/zvT48lCSF9+cKUrJP6Lw5A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSkCRA9TVsSAnZWagAAMrgP/jd6iih54IESC1hI3sbA\ncPftNNtgBd6JmdD1J0Hs8vt72rsj1e1Imdhr81hcHZySo5ikrTOtKTp7ux+R\nQx2510gGwFXYkmuvQroeBlFV7Vf5zVz8pvy45xQiJBNKbiW2pdZ4AjjDMNPf\nia1ehL///pzwKCD1kule0b2u308mX7PG/NuSveK86zsGmgRAVrzpPJsjKhGu\n25tNFd9Ndq/iQWHxGB3EOfi1K6stAQiZPXb3+vq/Q9w0w2oyfxgsmEGjeKmo\n+aaa1Zd3wuxHHUFvgoCAiMhJiXDkixzuvDJiXA4OiDC++JPM1tH9r0XquuLl\nYWjKeYaJXKJZhnaPeC3q82D56xfyVt+ljhaN0s7zaYksCkNleOU2ca1kRcxE\neu/m/10vdEzvzVnkJgGYvHW1QSFS1d3cphecza3+1TihZ5C4MJdc901e3Kf+\nRl6415BrncxGP4yT0tczX1JNVx00a5k6rSn3wGNJvNCbouAJE7BdUBvsp6F1\nzSCBymefpJf+RRgy3WOTamOsMc82/vRkvihPDZOxqc6bNDeXU9ZjEV+eenju\nNp1ZBVPnq5veqsa97JeU4UyFiL6HRjNtisPb/ftfmfhdcSChKHWGFbp6ZoWM\nT1oHSvLPoWaZWNO5b6uSTBbdhXprg+U1Qg0S7Ld2KlK6uJ4JHZV7/MQ9r+Bm\nSQ/t\r\n=leP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/touch-target":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.708cc09c4.0_1598370980061_0.31202004993744636","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/checkbox","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebb3790f729acc6bba62afae985341d83d8489a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.19bea2ad3.0.tgz","fileCount":43,"integrity":"sha512-gyWdubzeK/nUZSsZL4nhRCvO5VxlwrzlmnFesSSmceiQtKUrqMur2dhvpHIeq3891l9+kXRFHZjFfp72bv0aPQ==","signatures":[{"sig":"MEYCIQDHw5Tkv39Oisb38Ra9tPeJeu2tnZKDlDytSOXhmMcg1QIhALSggRcfr5bk0Q+CjS8n3rlQewOatZ5mVuOn6twfaPQr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6tCRA9TVsSAnZWagAAvmkP/jiUOgFu9fEKaVTZGPyW\nwnroXN66ZQfj2ltv2Rure/NAJibgUEosaYuaAilIcyCclQXeYy+Vy2WR5wEK\nTOFoCeD7PpOymcpOXg4xOqGLPRvcHYpUn0Y6TtdSdJdP39eoRCkt3bn2CbJC\nIRe6RIntvVY90kRby1Exnmsq/8IflCeuxwT8IkvozDQxLZp0Bv9ewMOu3m+r\nMJHGmd6VcakQXrhcc1mEw2qgEs2PNXU7dBDKmnQTolhiNmGCAoiq9uv32awO\na6s2buzP0O5jAnmLCuxIv+jGAifNH3LTnavy8fkXUKOt79T+5kUYGam3VUFh\nT/RgtY7WJTDmW92FryFOrfKlw7lkaRz+bCsCTE0d0XDmYfmPJyhLWhOdAVBs\nw+tk36scvI03lIYLzwPuWlB9ecCzdUzkT3NQPXMv879S9GrGV77b2615MIOh\njMtFbA5aW5l+NpJgqROscsMUhESn0h973CavflaLS49wRMIcAeNHuPRTafdD\ny7DS5Vl3hs00nBGwW3oEj8mQF/rXIGoQpwaVlXafiUETc3dIqHv7zUBkyHJ6\ngwJeoP9spNAJrC1yk7+bVDffx6hrv/rlMdlfCJpu0jf1HBm7ciD4o+6P5joO\nhr6tSybelKR8QlPLkZ60zw5lK0+L0sk+BiyMJAWVUXfjIYj1kftXiuY/KgTb\nZ1JK\r\n=Q8FO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/touch-target":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.19bea2ad3.0_1598467756973_0.3090829832479982","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/checkbox","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.911014711.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39424d626f34da100c623cd8731a371bd81e430f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.911014711.0.tgz","fileCount":43,"integrity":"sha512-bIslaMkp0FEIC0RNUIfAyUhVKZLmAARK2NyKFaPQO1ukUaGTYP3H7xtBV+bg7JDmkoGyqR9BB7dViyScK5Xc/g==","signatures":[{"sig":"MEUCIQCyN3wVdl1bq6En8z8lE/CwmSQG+sJU+fNMVVWdWsbjtQIgGhbVB1xv8zsHRQBcjwPisK68cH5swAAhAaItcLyK8TU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pcCRA9TVsSAnZWagAARV4P/3JrG42KytEj5JlylQCh\ncPcdNBSbKsbhlmiAHm1ukTwTZue88JCGae024I4rQLdDHt+Dnt1RIixjG1wg\nCuscyRVyxlPsC1KjAMfrhH4s0r1EllfhIyXtvWNntRGdXn39fyaRDUGo9QLx\niHIrzWex8X259d3ZnhFgQMoY6pFTd/rFcUrBzCumbm6Q/fz8PRJx4L0amWjG\n9qeESm8syMXpBrss5gRuUV7Uhdz/y6w1qbUpEJRxT8hn1r5IBonCk610GeDa\nHYk0AtfP21LcC/qUlua1UePo2msLQor3Pj3yUCoOGN9i3PF7fEAjjlJtbKMT\n5CR7QVjy/XUPQK3U0D7uiMZd5FrqIDQ5PA5O1YdF27MDhVAXif8tD9VL+MFe\nB6sVZe4OJvZ7X8jfNHN0eHkXu/t+0dMvDpdXVUZq0WfCOfWj4J2T9HVcTiXX\ndYETuj4pbEPLUNLmrFHohQiDi2iyKrlLSy27kgBlCUihzH50Bz6G9Ywlj3Ng\nWpof48YXPyYslSQO+Rilj0cWXpN+rtCNFO4Ue6OoWOXY1fzGAkuWGEFuAQS+\ndPHSCGRCeqHnsgdS41XadLX/2jJBrMGOQVknKRO9AZ0tst99ZYxcata+v9Tw\nZSrvOfj/epkA1pdDDaSNJWnlHikz9k1fOvz8hTNZqdoZ/OQzKt6kAUXGbEZK\nxfQr\r\n=RKxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/touch-target":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.911014711.0_1598544476304_0.6705479728704902","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/checkbox","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b21e4e3d51298bff469a4b7b22d198cf0ce418e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d3387f54c.0.tgz","fileCount":43,"integrity":"sha512-bjxfuMkU3N8Hws0ZaADNM7K7lbrjMsi1YBbafxZDwoeH9Nz7/ZsVE2Q3dLxtXC8ZHs1YJ3cXA0arS/Ot3VPPeQ==","signatures":[{"sig":"MEUCIQCB5RBfVj1kHLmg8KNHrD5oNiIYeu1HxzFxgprKcsKMuQIgA+y2u1/Q2jiEsEOU1wsbCMqaGEzWXvCb/P/qufkVo/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgeCRA9TVsSAnZWagAA7uYP/0d23xmOa8b5ZVfaD3kP\nVQvZP6nZeOFa0XRfDLmmDb5ODfQ3B/V+dZrPw73+YLXB3oT0h3bbJPQfTaaz\nJKz1WbZfpEBmOlePijgfLoC6NrHgmFKX7ie+tgJV6FLNFm1UHkU5XJVU6VKP\nLxtjrwaym6yT57miY3mifkyru3rhQ7TQuh6OZhG5fOt3jQ4CUl1qNHTZQV2N\nk0QMr9k0CUm34toZtGtiAt/X0LYwMsfVzhNDmF6u279KIOfJATXM+MpdGrxN\nU1fxd4mg+gL6KxVY8z2SDkJWG8HBbumSzwoEp+MUcEKWxHFr5bJ7cLGOYH9o\nUFEM6mHHQ8USrYECE70iXl7NwDPf6nl74hUPvYnbWRDTcVX3ZVGTSUIALFoY\n8Z/yFPtkbT53Ek6QRdwElRRGUbzeqCJjWFN5LNNkubEE9ZQGGwL4Iawzlsgm\nUTxticpzR6HdeJV4QG8wOn2kwC/HLomDz0+chL4QCi34zlce7T0kru1uqrmG\n6kJbzGALh4hzalgA965T1a68+OkbCSZgasc5FufduR2p4mRLIIhB9SfNX0qa\nOmPtul0SLbM0FqOXctu4jgpvYX29ek0l6qJMo9XjBlzwxaJGsxrvdIjDdwZX\nvaaKzgvWlxZbyhfms7UQIRe6yfJaqybkU2nZj/qb3nZ3GRhCuhRD4lcoJCSs\nDSTv\r\n=T5Hl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/touch-target":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d3387f54c.0_1599166493538_0.14300069515201375","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/checkbox","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3856e6601f8e3b57e7b5816b1fb9b28fb0f9a87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2ccf996cc.0.tgz","fileCount":43,"integrity":"sha512-ajFWzXo3wR+RJQlQ8CDuyciZbmzokcBatIT07Ky6JvYhuLDl4AMl2mpcmkapxITk5C1rWXMNwyEh0J0x904dDg==","signatures":[{"sig":"MEUCIQDG1BHiuiLltApXhn2EQLBo/ye8ShEWrM8xDUaI1kwJ/QIgbrgFr/ulqex0p3UuHNyCeYwHmttEpmStk7A7WVx0FnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVg9CRA9TVsSAnZWagAAznQQAJMq2ufLLP+5P0wW3BAr\nb/2jWQ1GyP3iqurrq5aJN+5YxmVwJ6UXjgF6urFNcnT/t7e2gJN6LYIt5kTT\nsf1drFV6WBN0iEBbC69lVvr+5A6cdtURN56AjXY1lNtJVapUVgFH962J+jhz\naiUIbmekO1aG94r7REshrzzBNOuXbqncMknlx85SF1eAsHUYQKk3xZ13Jgk9\nObWOA2V1b/qfGVTK1yAIw1MO1PpkRtOZazrtHM2G6f1UCQHb4RIhn5as7w3U\nA/qPPwOXTlPrUGAYAEDaolj+iOQH5Zb3cjOlgsaJhri3tBaDNSE7PBo8TrFS\n9D0JcWTjjpq4xC5ZVg96XtK+cRXAo72NIMpY7ebmVk0ZiYgU2kqWTFhwtaP7\n7NaXk7VnR2XGul/Ze4yZjlNN0RbYxrZj5BI8TRs0N/Bf53b6IubdxgrgSuT1\nD2NgzNUpmWNTuGKGseBc+XA7d7XHbtq9ni/lZGYdXsT1siJpXWqKY9beqUbW\nRct74V9I6krdwAN5nU3aNRAWKXDF/SOvUc8ffOFXpNLmjWZjH1oHVd5qWSDe\nxNs+TdN3S4gNJ6T2RNZUYQJdX97rW2Shd/FeyT+00NP2RE5990FlkIN2oOTC\n0o/wTUu3ArG489L3QrDnRWtcgnORObsZMq7r1u+yo/cgOE1OI9fiRMTuq6B5\ng9VS\r\n=inHw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/touch-target":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2ccf996cc.0_1599166524355_0.8044874324201479","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/checkbox","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f9a76f0317a604471b6699bcdb8125b9f2f1cd3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.744bfe5d8.0.tgz","fileCount":43,"integrity":"sha512-5ekZXaSAGhNmCNbf1/VtV5wYCVJXzKvRXQMyNF0UdkCx8qEi6zoT7DKV144FSA7sNrmkzOm9Jd2KSu+i9jAJ4g==","signatures":[{"sig":"MEYCIQCwZVf0NoeVZ6b0Wt5g0549FELN8MpBehCfu2uecJTMVQIhAO2viF0u6mctYgTt/cIcfyPRLpNZpW/hJd1pTeInceBh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhqCRA9TVsSAnZWagAAsekP/iOntA4Eh7M1SU9tzexm\nA/ZSS7q671vm3dbxQi0nY5GRjcLwHaHKBltBzSds1d+Srm5b5TVkP83BMbbI\n4OlaZUTT5Y+4yqCxnGzBgsCfR3DWTeX0H3CGbKSOsCAPH00Ucm8+QlXbVt7z\nwbXcCeUwi+LkEh1REzHeKiWO8YYXB35kJYWc3+6zgXNr++digsZh5I6sWO43\nFGOK0itvcaeZms337WjBZHsFG49tNlJaa1MyG2qDUlo0BOnVRyo7qpLpzYsh\nPPCTYSYc2gcj5Jq2ke6RN3C71e4aqwKnsTa3HtI+LVgZ9ljMnyOo0XrZAUiX\nCXoX7zTmn9sGiM7iQVrmdjQ5LE0opYk3OhGeeGjF2MwoyXalKKAmC/EYWlMU\nsshpPwipvTmnCK2AT8xKQoC8mSkEEtNKSHW5csixO9Y/OXDMMuQpF8O2IKnL\nx+8rzGH8Es+DjbopOeL3rZ7+o6JI6ZGUraEcmau3RudIeFr5b7ymry3fyapY\nG35Knah3RksRbgKLOCT7Ml6i6LXVLt+PBvOwZGSmeoy2EGm+xZQvDfGh2ubo\nQg1/enxe9/py7G0Ud0sZuzljSLZyJIe7EwEQE+iXvVUJdcb1gtxyF5hQkqVe\n61hGsWRrNsApcDt5dzPriy5Xd1AuwAuPI1fIoLL/Lp6UDqO67ipeXaYuDF+S\nkD9I\r\n=11qC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/touch-target":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.744bfe5d8.0_1599166570197_0.40449939471973995","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/checkbox","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fa21e4f6e6cbd4113701f5e23825ad909f27e13","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.78da96eaf.0.tgz","fileCount":43,"integrity":"sha512-aneiFaDZu9xjRsxl+IHNIOpNgoRxA5yLvhTVl6U2aw4JjCkMsTihz9zSMlBI81eUT2j7zkKz68olDP23XCewIQ==","signatures":[{"sig":"MEYCIQDjgZoLiVAPdvTEIBb4aQMdZXlXBBnlWardiN3kWZboqwIhAJTwMVFWJH7p+xEg1tykChrS6va22/wMwh4EX5ju1UKA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9etCRA9TVsSAnZWagAAyL0P/jnD/PJPuulylH5wYY5I\n6STFJwn3DZofhhAERSNXsLBHBYGcq9m4ES+7RSDtz3pnleK11l3kdghRwmvP\nhQAfxV1BtaahYv1pmWSSLF9RXUBaczKuWNTROEonEwt88kn0RBIzH8N75OYc\np984XN0AeR61DXA+LtjJeZyZdQj7uJARAyRoJAbmueEGMmKYo8Mss/0XbWsR\nE53pIsMNCvPFDtCy67PGATxeQOkhEkC3g7M9utXq5Ne1I8ByktSyNEnmzfmp\nN8W0KyCRCVfB6hkuWKbZ6SCIStGepCe78O5ikyFc4z23J5cTbGD9Uco2N+1n\n3nak/QVVmtrtzeyERZL0a1whW6cOWG6r+2Bw08D1sETP26WE6+i9igUgMO7y\nu8uRhJhXb/lYLud1Hg4uXUBVGQPhtDGNp2B8MrlOw8wi280oF86KV+aTVbv8\nwx7coikemby/82qHintLaIkBbVeuY51V3FZBQVuG2lhHf76MWkZdBqcWYspI\nX46kWSVLr5xZAmfXhlj8TMgfT2s7oxxdIgeaEzPb0iCKBBR/HBcJ4vmXbJDL\nyyOrZ8Ad+vHny6NRF5Wi7cwjQCHJ4g2vY+KjYcD3qTFwNFkNEkkEJOUwzpjT\nh/zkjPAiHBdoG27Cpf9+5e5sri3Nc6PC3RcvSm/tgHhnkE8inKw9LzQdM0kQ\nPet5\r\n=25W0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/touch-target":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.78da96eaf.0_1599592365002_0.28686884889522823","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/checkbox","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea6e00638f713769ecf384dc2ec19659d15e044c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.b0ed593cc.0.tgz","fileCount":43,"integrity":"sha512-t4Mt1m3QHTP3oUuUaNFB7PASwB+Oduhi5nYcsUE7T9X+1+Zs9uJfS4wkITZ+U9yx626Re3vKsgooJJn9ZLPOmA==","signatures":[{"sig":"MEUCIFQRFnaEDVIqYcQrYOlqbElsyi1fCrbptcZD5rH6bnjzAiEApMOuVTeXU34KPTksi/2HfeXCA4AUzjvvgTdC/nr7ULc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMeCRA9TVsSAnZWagAANrsQAIaJw8GtAReNl+aHI1c5\n8TDaxG/7BHITG1R4SYzJPXtS7yftTkpYqEumHHi6SdRb6VaRhH9uc3Fq5vyJ\nImtbPfG8dS2eGCfostkk+I2p3AQZCIfgRGD8+ytod91SdsyvDbpt/OnYi3YS\nzJnnekn+qkiiQIwpnz+akgop0C9xG1P/uwgLJRKocPAsqT6dgQ/B3PlW/PA5\nN20dQuTu7xmOaI8+w+wLVRLrPosH+8RJtj4ARA54bqaI9Zd1VE/rduCKBf+L\nzJuxZS7YrHaIUsLo3wFHsOV5mK+eId8rDYCax2MlAiXk8f6T92Fu9f0QRNFI\nKfzdEPB5EngSSuiiR8U9BqpsDpju6OkkVyZlPUp9xYG8AhUJIKvA6mJjNAxY\nD0Gdb1wzJKjmcjCd6mF6DYm2ett+Q0/UeAdeVN2nt3N/kIfDf1KnP7FJoC+j\n6CCK3X/6T84hFobtM2vs25vZdcYGlYuROKJrxQ3hCqE0ygLPc68MbMvwxCgN\nFVuprTWdx6e5Z0agbVoDSZ5/05/dRgA67mFZqRgK3Yn/d+J8E1WGtC9ubaPA\nMYOdnknOSZxlcnlMP0fhnzOcXAKTuFhwjaNYx6nDL+3JvjnRMO904lW4FY5E\nYfF7VuuixUkDeWnrZQBpcCoa0An46HMLjALmVoR0HdC9Vbruzq1va/9RnKGy\nibv3\r\n=tNnG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/touch-target":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.b0ed593cc.0_1599632158282_0.41781649126365084","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/checkbox","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac6fe56ff8a64e4be68fe3a1b05c6030e93089c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":43,"integrity":"sha512-Lv7e1PFxQ0t8o2BM8LjBgbPkcHoous1mNLnSpDsTv75pkCe8DTr32pDCSEl7AtTOzHTiuefVPYSKkFkNbgHRHQ==","signatures":[{"sig":"MEUCIES1gpAmoz9NyK8pHuJGvDn47NWdD/7fVzEAG3fXU4CnAiEAjwI1qa//5Jeo6A/APZNU48uImQArS8QfVTdbQz4XKVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpY/CRA9TVsSAnZWagAAVNUP/RZUdzlovHJfbuRjUX9g\nr3jDdzBqJ8l2ssyWD7A7ZJ3Yb5/5gyGD8Ra1In2CEQVy5lSIkLv3iHhTjis3\n0IJIAe9QGBC7RGEIsH343P8h4D0hE2bhLdreDXOqo3vJBGZvwLyHRCXFBf9q\nWbppobxRRBhdIseRNJo39vXFUZ3Hsd1shRE7HUP1TsBBtxZa6YOKELBxcbT0\nUczWrjjXYt60XMrT9pAn7bfoeViorNnNMRjTQ+patj9AKVJSRKfeC3PMnHfC\neqXjmvgD+EmIRaeSg6IJjlvs8fdX0saFdx38U5bjDVR/5e3m+mxrDi+0qZA7\nuHXwGqPtgf+VSvYPVMFC0QbftfFK8NbgtqIs0VWYpOfvMfNnUtofVnG3CS6H\ngHUzObrsHbF1MlDKjETLTuXguawq5X5nipvvO9JkuTeecwexPAbAQ2LIUO1N\nZzFlZHNFwYKRAkI/4xYg/IO+es8tbe7Blyx2++NYHv/1l0LtlbVB26CcChwI\nEfjN+0MHhL7cn1T1DohGbDecVsrMSapsuOVEUY8uK7VCAGnQh88tUJvfxFcO\nxUz1U3nvHDZRLXBrj3DSSCtiO2689laKm/8r7pw6By+g4Fp3n2N7LO9eF1yT\nvymrQ3NhLkKGHM0fNm1AE4Y7WEeti/C3yv/ilWPNNkyT2BF30daB0wKX/L8n\nW1K2\r\n=2fgG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/touch-target":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.85a1fa9ea.0_1599772222401_0.7247513301074673","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/checkbox","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d500a8922e71c9cbcf67bb818d45f53f2462acc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":43,"integrity":"sha512-ZDpFvIdb9G3yGMWpUjmNqVZhYy7kWAVbJvQJKLLpHJ5ebG5JNEsBiIY0GSsQAoEXkckCh4T8OwkXLWCh4sAYyg==","signatures":[{"sig":"MEQCICKsBjnqFY7AY/f5oCYR0+eB6v3dUvxcLJasOrpjTTBBAiA5B9+1kqQj9qWuLOWBX16KPoHJ91ED4cfo0PVQtzS1sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7i2CRA9TVsSAnZWagAAaqYP/2Ply37Gqhk5TM3zvWRE\na38OknHUNR7JCsHML2jdQBBdyXHw+OmPRoRiLqphmLEtThUzQ0rZ1KnhQTF5\nfwPK3Cfl17aqXe4a/iNRCkV75WgutYq3d1UiFrixOazvMbWhsAeuu6n9bEE/\nO+JOhij6vHk8rssTAgrvP0HwFJPD+a/bnmG8LAAK7b9jeUjGHrDtjS9Kbnfs\nTFffQkJR56cy87xZYYX7qIdSPPYx+wHkU4ohQcibQm8LtaUqGe66+CWIZU6m\nSdMKzxkNP7U9583Rht/8PRFo9jOESLWZx8RoY2rSkSB6MGHv3YvL9CiZRN6Y\nyAFb6+Gn44TbajdVAwjnxAKPVpki/5umecjxJZdU/7WcBDCGrNfmjKS/1it+\nPC6XojRTxK5P5XHjcvf2lf9o6N3ftyUlotV+2RGAdbWI8iLK1tcBoR56Mgng\n5tH3AKO+zXH8I6OcanM8UZFx73jhJbfsaNN6UK4VCktbdPfV5j26pGl+kosj\nHagKQolCMUiIoDzXyQgeXM/XdEX7XDNQf97KrOCgnN/CGGEVDKJCYWoQNBKp\nL1p2fBYwvGLkMX8kagsBz/BBcviEpjbfqPuozt5Cm23s3umO2byjoU9bpkt3\nmoGHteGRvRdwp7xPxT//+xEslOd0Bzui+XG8UItgQNikAvt6+8M/Ie0+LbuX\nZxB1\r\n=sYku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/touch-target":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.0bc41a9c7.0_1599846582271_0.7090105183278359","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/checkbox","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19f509d763ea4d85b55e832c0628e204966d5b6a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fc0eb5013.0.tgz","fileCount":43,"integrity":"sha512-66gE6S1LlnL+xOiSXkN9/Jx5ruMkxIHrgrLIRO9MeHrlFFEtLFfviXvz7xz7l0WtQfxDbpUj5/fjiRkI88kKmw==","signatures":[{"sig":"MEUCIQD6Z9uwwbFMOkrH2uzZGC2VahPtTPYKcO7WkAZ5blFqoQIgEaZ3MrljxhyWaRBuAIviHxDY1+k+jOwFcG1waxZNHE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9YvCRA9TVsSAnZWagAAqG8QAIMd5VVj+g4JGHAaHsYz\n4QVf/8qeSwD05VmJ8Pb7wSIm77BMW0xhJGWnMEjfchDmwYO9GKrkADPJP7l5\nLsHVF7OBksJhX+QC/dC9bdtWVdb8jrWtUEAnOJP/bIGhMw9MercL2uzmFjyj\nBMTgmec6Xs9ykyeBDBPtNIfIba0i2ZDYcxVJlUbWk/h6eQaNDEAZQJGKyivh\nG2bj8qMJXR4DOXnIlcpLvqevlJWLDMj/c5DDNX5rZvOv5XO6VSpOx1tSCMAk\n3E2HXYocPywMe0usYVxMHoROSFXz11e/Vs4d7XqSmyMA4WM5H1tmb7HAl2WV\ntsSPU6LxCWhA3o798eydY30CycYD6pDVaXqoz7bHuJ/ARoBM7aTWhW6ChpgD\nK8wWDnqSiSRWON16OUrdkzjy1gwiK2yc1yCvU4h6lPMJcHPH+ZzUe2JEGZHy\nQudM8bX+yqpii2Li69C9V0LW7cj833MlSkooLn5cNYMA5DSoS0bfbRASf0CX\nUR1SU0g9srpf8GrhL3rVW7tLTeoziv42lY5QWYSzcOj43e1w7VMY/tBitu6D\nxyPoGUI4j1SiMXwu11dKy7BPyMNDDoUZs5Q6h+0WOVk5TH3/nFvt4K64f/Cc\nX9+UXsclKWbl65qz2DU0Z7iZPUrQP12lwtGxX8E8i9T/I5Aa40wWwjo/rywH\nL5Q6\r\n=gtXU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/touch-target":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fc0eb5013.0_1599854126485_0.41579340479847504","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/checkbox","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.319bf66de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93b431e73dec3e70619425f39c6643ff7a57b0c0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.319bf66de.0.tgz","fileCount":43,"integrity":"sha512-4AJEriRmksu7Ks/8MQUc+gA5gOMsD0CnygPT2AzALIAPRRaKQz4mmfqvZzqJedbYng/nfGLa8jWZfTBf0cDicQ==","signatures":[{"sig":"MEQCIG8U/ZZIj/tCfpOxAyEWD36zyHjs1bi0DL4DahSd7PmkAiB43LnSFQixm0cetWZHdc7DtgtQnj/q8XP8saFaKc0E0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPPCRA9TVsSAnZWagAASdIQAJkUynXn6RjcckvpRILY\n8ACy3GyPy8w8IEhd3EUhdXwPDDcow4CgvcDAXk0knlfIpqDdM5oMQ9z8E7Nq\nrAQu9CJ6fndM9V2R15Yb+1+KYztJAi44iAdpu49Akadg2xrK+9mCRYCM+6E7\n6GO2xSvFEwCdmJ4spw+dlqnR4JITb7bC5t85F6B8XOPyQj6pMb14sRBKvxWX\n6fVBB7vGDkVzvQ+/AzYxS7FnZlQyXm8q+SIzRFe/vKawePngYerzVKFFqN/d\nZLsstD4ZL02L3iPQrgT2X6DQHUCHHeoznRv0hrNimzKpKLzjweEEYDYjGafO\nxp6g3bXWrc0vZbV92zM+FffPx10SCFw1s2/njd6fncfncXVtwhGM6se2XeX8\nUETRIPT1e4W/gqJ9IC8TDLQNf9UAUjMLQeZyJMbHmiHZYnPwpMEtSspsPd2V\nSktlAqaqJt511YrKeLSfYTMCbCOTW800yLsVW25RTkDNsFeZKUNxijtD4blg\nkon0PWr+s05a7feBlrxBNFZ1A112dm5baZWy2NTo4wJMemFKXJWU/ahXQhiD\n7LTHuBl4FeE7tSSpFZoJWHRWQ/WzXn3sqnem1kFvjS+mCYU9RutW79YPDskg\nWuq+hC0echsaqQcrW4T9fsVbqZ4oFxhTjJPHE9k5yMyp0JZ1G+KMhx+9IY2A\nbBof\r\n=eNp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/touch-target":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.319bf66de.0_1599865806851_0.4817576763282312","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/checkbox","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884ea3cf24934da4ab6bc3d024f97d8ac8692566","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5bfc305ec.0.tgz","fileCount":43,"integrity":"sha512-ZU+zIzBsn95ZuZejf0/jymDqCYy1qOH48gvUdPTbd77SAxSkaTxFcnRc8901sQRfmpUyF3A3rbVNPT9uGmcFtw==","signatures":[{"sig":"MEQCIA++CvmvVqzK9tho1F5zf/xTIq7KVVaMmW5cvPecW3UkAiBm5sxtB8pSONwZq7fhdrUEMjFCklxhQuApcqrfujC2Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqR7CRA9TVsSAnZWagAAysQQAKO3Xl1/5czKigUTbWr2\n+P78Z7qR1FIn3I+f4gYj/9a2xOiaZQwZSdB8Is/xxOgBQAidHpzHucvezOsp\noXNWXcb0+W3VWQlB6fPHTSuQNKWQ1QkVmJf5/iW0TbXXx7bvMAUcKrRquq3H\naS283GA3PqnQu/L2tF76DBA7PmEJV0bc1lhoPHDtn+qQAlqyM4K2hoVM7cPD\ngIM1xEwwXse9T52XhbKpG1l5ssvDe6X2Sb0QsxcXh/wbARykpTkctsMSCVIy\nxzlFflDCKcNMW12hQpjTooMt3l4ZgikcoTxpiZgnoJllzlmo2dZ3WHgxxq9v\nIjzpbflVQY8pgdb2kIx7nCwhQDpSLMtNJbrRC7piyXTig3jgmgWzgLxljJl+\nW59oFKdiEBMogPZTK5uW+vJ2z3IemFvu1Hk9ZyprR//kB2hjcVYNUrhCw2PB\nf9PiwEsUpWY2aRmgZBJ/c9eECeOAUQ7c9vtyPyxD34q42Nvi57N3GP82DVv3\nQQiXdhn4gpTBVZz1wqetft58yVFFwZNfJI23l/Krn24TOfvDiqJUMROVXTsB\n/0a8h8Q+uTZnMoTk4gPSB8qp/8rHsmtajmuPvcAD5aTLUHkc9NSC9AOHB4la\nh0zgcgAhDDIDRLfqUnIreO2csmH8ZHODWsO/yLzxeJPa1I5tfNoGUA0rDnEx\nWcAP\r\n=xR8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/touch-target":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5bfc305ec.0_1600038010634_0.31991469935479966","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/checkbox","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.83d83f131.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e4316717d4278a2180ff54b1e30d89c20e52a1f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.83d83f131.0.tgz","fileCount":43,"integrity":"sha512-E3wRQSHhwEGVvuT47n0iMneJeTGXhQtirJDJPcMUChQ9BWvfU0nEjZsdLmVbl6jyGmFfwcG4SIcidqHHJb77CA==","signatures":[{"sig":"MEUCIDImSnu395Ow296coE6mrqHVkrFhoeuIRbpqpwA9pNxSAiEAqLBt/kOzJFf3dZJeyUU4G2S5kZHarXp6OITACAToNBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrolCRA9TVsSAnZWagAAE2QP/Ay4Dlis24McGC2mR59m\npOYrd2sGlNMCQEdE6suw3lLxCwujBqJ5PLJ0J/nZRBPMukkP6Q8z6ifABk53\n/zVVyfifRkNZ7UIVPqEHlOL1LrMC0EKh59H7ndhRNbswCWzn6k/Y3Fjf9jlQ\n2XUESlqFl3A2w9xgVUwseyYMDg80uVLOgsUSM2KwG4brfuxf214d6r14w2dG\nS2Tgbs+DMlzz20d+t6K1e63guAhrn1oHVlwHsQTVmsdn93PhxtZ3Ho4WjOsY\nYsYyDnMzUXuYVqcr3hQQMJTv9vRNQJuFx0KuZV61Q6anchGYtPDg39JfE6iy\ndbWELx1kxFqfK098TenjUFud5k92qZQIvZQ5sEOKFReOjUST493dETf2Zuex\nuZ/KtP5Api5UJX+7uPObl2emLd6EPhP6n8U3tg6MG+ptRKrscGvdTQqqQz0X\nckCU7w8C3jE12B4aIrCyeOoJ6OdZWe/iTLxmCY3qz9CvrWAzhVollRgSdEzm\ng8nwxbGsIr7m/DvBYWJOooYzBotQveZIH97tjzyIHPxvIvPCqdpDNihY9WWG\nQhFBPNNIcCS/C168CMuQ+Xz5EhxyGoymH1rPsP1Nhz0gP0TIxcG79oDFo1kG\nWdaps/ydGKmgS+Ta0iKHvTcWQYNH1CT3VSLoq3FjD1k8oXDzAwLhjSdeJwia\nUp+y\r\n=dntX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/touch-target":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.83d83f131.0_1600043556567_0.7616118076353833","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/checkbox","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bf7ae33b3ec899d457b461d298f84ba9b2cfc5e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.40d8e4726.0.tgz","fileCount":43,"integrity":"sha512-GFlPCfQ53k6dU4Xk/7bvv4enMpi1yyVW5o7n+Qstld7MDpOKbtrKwti1t/X6uVDr1py2VcXXzEviXxTWOc3kaA==","signatures":[{"sig":"MEQCIGxV24fsnEj0MX2NqWLoJUbCz49UF4yNt9jHjeVRJXMPAiBbU+VE2U/Z5adfmYLiLgXYFmAq+1y73YWIKs/OKAyVQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/zpCRA9TVsSAnZWagAA13UP/3snyjBNd/GU/I/tu3nq\ndkoOgPtEYJV1U20f1yip9Gc+O1kqwYcqP2Kg8IQWS+l2umzqwgdA2LOAKNTD\nEdlQD6K965dZvDGXgN8AL3/pdWyjK6jyO67RZ7CBcMP0kS3Y4LwBF1hFSuVv\neDS9ij3oj7H8Jw36kmFKEOcrkuJBlTYYDUHWSyQgPblEzSycMtMOzG9h6EaJ\noLoYIZO85m8FGgozL/LjlYExiANj/Og1aO3ASxyBpC1h5wWxG7GvPFyXmh10\n2N3GOXeiKyD+gDwlzCYIF3qZ0nVypMPrVvPjDeTrv568816BcRhJY+ReMd4r\n8S+iNngCI5e2BbJY8K5jxTzeaRQ75pAkxYt3O4u3Gy48kxvbzAeSDnG5ODND\nw3+8f2Cuuhw4gGM0NlHjulX2MNPVTk0bT9avFrKIRx3csThq9a/HTV52F2C2\nfxuGjYRWU4bYbJJaSONRoFHG0lrMHMAf7WWmGyASxggtSNmtxQ+nxlKRw4Oc\nRlmfzChpUF1k1LW1r/Yud8Mnuli+QDQZkOgCwtahPTTYv6NOfA5gNnh9teoq\nkZljpkcjtiWYxLBfoe6L14Yg/yx/obABHF/1qIC8xvGhMUb6fLH3LD692tAI\nGr0tKe8S6o4o8q8IOn5r8zs8E44/IDo9TLysakK0QLngcNKBj0QKts3YPZ9r\nj7cK\r\n=B196\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.40d8e4726.0","@material/animation":"8.0.0-canary.40d8e4726.0","@material/touch-target":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.40d8e4726.0_1600126185247_0.3067655948357706","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/checkbox","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9fb49dae772dbdd4912e9e81e18b0b1dcabe6d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c25d70a31.0.tgz","fileCount":43,"integrity":"sha512-DI6QCOfFXiKjy1P7bSJnjhcl9EfLdgoF9HQmHTl20syZ281OCC0WDJrjdq9yxB7FVnMN57hCl6EnWELi6uTvSQ==","signatures":[{"sig":"MEUCIQDwzUjhRujBYGFxGiN0XjwwcdIEMr6OXB3SmTtdsmwHqgIgKelxPLw8PzyQBE1IbAcwnGOLW0on1hIjfUqiM+TGVEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCcLCRA9TVsSAnZWagAAj/MP/jDkO24UMyblT07mxf1X\nOe79vJgbkZl5q7Tr3YeO1SBaA9bjV8h2p7O6r6VWdoiyzza8Gq8YxbXb75g+\n2hikvGqvrdHLQNWuWLeriF6SWZnIw5qPYwu03EtGTClkbuXg551LxL6pQyGT\n9IvkquP180X0vZeGdFAzCMpW3Zb0QfiN4y2ryAfhJ95RByD8/8JorPmoECPt\nE+48TVujokaZL3HuicCBrCQo9zodkWuOZHlQnr9lm3N7fJmAtw8G72TpSKLk\nkVu79jYbW6aGzuU3LnXG26kYA/AcZnG7PHovO9R11fa/hVTKxaVU1cmKRsyZ\nRomtEJcbpcWKUYur1TK4eeMJPxHKVSNGeEADsNj09VsDol7tnu1SFgUTpYwr\nxBtgXoDNmf1w4PJXRje5hkddMbbxAMxXiImVWA8kShWVXT+Jv3S7mWlYIb6B\nlhqt10peJ0U7WMCj3gka2gtsEvm6v2f55b9iDKdZRj0eqE6/WxXGFUNp8ZKq\nuAiDsAuLcbRLf4zG8wtvaCGVu79XfQ6GEN1twwNwWVT7ZQMeYi1/A4Le+LJz\nDtUoplEerZXwLCnhOC6NoyWqWX78SBPHfDGnfgcOIOXwYtbKOScy8oXUTA1b\nLIcn7IBIkpcpsUQZfsRaKCSluZ9nVDeRkKLsQ66a4KjOCVM0iTW1qrV8rcop\ngTVf\r\n=7ADu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c25d70a31.0","@material/animation":"8.0.0-canary.c25d70a31.0","@material/touch-target":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c25d70a31.0_1600136971187_0.9519441058848213","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/checkbox","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18e53337b8dda394ebb50ccad6b6c8265057237d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d52b165b5.0.tgz","fileCount":43,"integrity":"sha512-0BSNpRygiKyYfIo17kQUsnrh8BIWjoNt3Yq10n/uBK+l1d1ODB2lPbovkiqsUuvbzN7Zrw7PBpPuTLsEtHZDOw==","signatures":[{"sig":"MEUCIE/NoFILfD4XpLIdEj/gH4fZ+xZh/SoLCflEZ0qfVVKmAiEAwGp//ViH2rTRNHiDpK7P0PnA0Pt/oDvPvgNkagMIhzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWYCRA9TVsSAnZWagAA1ggP/3ISFEmJ0OXfG/XB7ssW\nYbch2+FwmY1y7UGm4QHGfMQ57dTHxHeekiWB+o9iwQJ454VUEHJWVEuN+0DH\nDwaKbRIedrXomweLFeFB9oEw82J4/mGm5+UA/wcv+8A4dkrp+F0WRcUYZBb8\nhQn8d3ZjMWPMvY62ZYwhhOlMOMoruKS7kjYny4gDCUUICFnkSKRxParKwwmu\n1B5tWLPCb5JMn2F2+kgLJOwxycqVRZrj4Sh0MRhKZ5wzBgAN4VnihZaW4QbY\nasdV9fl9PK4BpOmQChXQ3W7XggQeYSbCwxQyAuLvolGOuvRCdNERU5FaMRx4\nJIdel3Yu/HYI56JE0Q0zdJnAv4GP6Va0Gjuqthcnbxg1p7T6/i/MV2QSNdBy\nPJaKV+Dd0sjxAKymlFJ/oWU/3KYayVWxzb0Uf8zx3hRUo2/JE00/TWHmrc6V\nmBJfr8g4JGeFN5Vu8O+M0rGPeHS067oCxTvK7jqy8k0o68xOyyt49ziY2PkI\nAVd+nn1xomO5nT1LOziXIJIiOqx/6WsRRaIUC4f8phiyBVQbDtoy6LSjf3hR\n0ChMn5BPtCIImnr+EyvjR8DhAXVC/yeYmwBBfoTJMqA4rkN8bnMT4WkWSOmp\n+xwziOufhNknzUVs0xOX/FVtDgoLHdvGIa9/qgJKtwMC2cy8iYHksZVjWSO2\ndL9G\r\n=g37R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/touch-target":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d52b165b5.0_1600181655959_0.7692996989087628","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/checkbox","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a831d4799.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0254c39f0f57c6c2daa444e315076c9d2c95bcf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a831d4799.0.tgz","fileCount":43,"integrity":"sha512-miAPrSW6L4w+xeKSpYokS9ZE3SYsJV8tGTiXGca8GY8kjLsWjPRGmhVFtNQPmy8mkgM/oD862rKXg91HgOarwg==","signatures":[{"sig":"MEQCIDFJPlZfqIsBz8Au1ZFJbLFoQZJMNvnZ/IGZ83bN7GjtAiAqeubaqJTFrLbJUBdsMeICOHG/4bD5q8CwYYdiaHbYiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP82CRA9TVsSAnZWagAADc4QAKKbr/472MhA0+g9emBZ\nreIPhjv3nZkdDJJvAvmhMSKNdPIl3rBLF1I3iuhfAMzqWKZM+mzel8LEo7aj\njF7jmjinXysiUJQv/Se/H6hlUbtu9Gc7dqtgbaTwXWCN5F/WDayS0QlfwGAf\nIDfdXzVm1Evf8Ih0Jm0NG04pSizfC4yyyrkJDIDTh69s0yPRLCOT0sLernSV\nw+an0HIfe8eRvbhh0VwYrY/3RGYgs5wfo/MH2C85pBD8jWHzh531W4oRGXUt\nuYiC6H+6wAswWCA/tnr+NWX8G21CHGwJskcgmXK94U7isizv2yWtDAmb3Hd7\nIHuwToB4hQ0gQb3O2jQjK4NFezvTatUqPMwaUzhCKiIl4odvMWK+SlcEZvqv\n9EiRNimjNBhBQDHl1vyJ/y8RGQLzegJHuJ2WYP2OJGc5nvSh9AFGdV5VBtbt\nDHEDj/yH1GnT1WtGNjPbdg8QVjcp+b5kfdmuH/KTOnSNxE5kv285oJK+gRg/\nRAUv7t1QwGJE8zGuwFf8uEFILHMTIcKngwriDS/PTCSH4iWGrHgaIVpbnOIg\nPrRzZgrHTe6RSHRNh/TN0FZgxxGURijQyf24FFxAefmZ4lWvotJqdZvi7tTg\nS6Y1RsuAkQPJ+JL9eD1uxmPAbrRCGcbhjiSj4Pxw/N+yg5D5/iL7eH5A9lMg\nYt4p\r\n=dKZM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/touch-target":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a831d4799.0_1600192309835_0.5203572848285092","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/checkbox","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a306aa488.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0728befc2db2b9ba03ce71893aa4ed36ead249e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a306aa488.0.tgz","fileCount":43,"integrity":"sha512-e3gj7XYuCjv1pwRAZrukaFWH9OiydI3Ayui0M3Za2BITMOWuIMuPDeE71glut5aCjWQWRA8D27BP9PHTBM1ZAg==","signatures":[{"sig":"MEUCIQDKzjWJlApLHek73mqSyx8Oor+9WAQYnpX+nie7cnU9CQIgKh4sroooHnGX9ypAlOUe4GHwMkAN9lhY54rMY1uSKdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTBCRA9TVsSAnZWagAAhgAQAJmorOfwGxQdPmfCT/v7\nBMlC7bEFtqLBZQ7y+/DxzNYSKjB8frTmoi5qQq5qAZxyv991dT+rvR3KqjA8\nmtLPevNmGkdhuXUX9hy0M0smxJ8ql3PtwC5wmlm749oadAUqJFIOtZl83Q1X\nn7xz9p19LP9PdAK57icrOJt8XetJUyPvs9ROk7hV/w/LCo6AY1SwE5VjtFxH\nOen8Y1C0duBWntp5w8cCRlht+y1d9zOOX5Hotx31oQviEBf/y3/z4ovrnOGP\nFkqz1DFYC0p8XVk1kAyk92qWx9I9MMzydOSTNq9XpIQh9yLMYx1MK5HJ3ELv\nbJJ1FCU66dQOj4jNy/8scHYuoVpeR6oXQ2kzi2D4UIwIHuDAtY0AiaIOY9BZ\ngJG15J/2kq2dlrUSjrLzjQ5WuNRhrvG1a7qUR1wWjnMDdhReebptwMWJxRik\nIZdGNMAvEwq8xLLEkTPkv1c3duyRdHL5fRIjeZVYYfuVcmkb8BvQrJCRYYQr\ns3w/UFxyXYWX9QuE3AD0hnChoCig6+66QPvcpd7nhtuqb7f1hpEIHxCq/nPF\n5vBi4zLxAvuup7dBZg+Cb5nhGWEa6ih1mZ2U8q/6Scr+VezKk3FYXYgR90Mv\nbTzgN0Kn7KJcOBS/Od+z5oeJ1sQmfkBoVtaRvcvHpSbgiGKLsGLklbEKDztP\n0p9F\r\n=S9t1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/touch-target":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a306aa488.0_1600304320363_0.4683333451380607","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/checkbox","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358c8b8b11daafee3deb17b17e69799656140cde","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fd608ff66.0.tgz","fileCount":43,"integrity":"sha512-L2lJYz1zcfEsHmZzuUJKne57mwgsTDzkgeEYR0kver1/HfwY2DjIH4mtTVhbjp3OFzI8VZaxT1tcjDhhLnY8Pg==","signatures":[{"sig":"MEYCIQDOTsY+CM2AW6R26qL72wW1iGs5CgHSNj2g40UPqZ/mEQIhAJdwlQKAw2x7m9lK/CMBJZiPr1FqmgVRc6TkkLz3Fnk3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HhCRA9TVsSAnZWagAAW04QAIIVBUreg+Tq6QQQJMQK\nlcaNraJrcNZAih74NmzfVpnUaStC2u3tTyv7MEBPgTUSNlyDbL1tAZt0xNTf\nLyBF3tAkbjafQk2Ai+aMhiTKssAyCHniQBjfSdaHWoQKlKfuPHlB7u8z1Mjm\n9AxYLQuX/8gwg+xHpnPejknCFE2tBgPyo4QxZ9os3NMSnrjhFoGW7kgJ8zwm\nEtVeZ018BDCH9FBd8MtaxnZX9fJyj7JiPVOjx1ZawK9+c4k0c45m9klOM7zd\n/5n85+DrWsyjQWldNBrc1jRTeyutZFHUJJsTGJgP0M4vxphsJOgbPMAmQQPN\nVjM/oMKPZ3VL+DcdnGj8jLSJyBOWcuvBHA75QMnhHVGkW6oxxt28cJqTyEvt\n4zti62mV2hhGJLnRKkMtHnCxh5ULALNo+/4ALd+eI2jLY9W2E7uWbehQCtWT\nJDOnH6Kmvmdlti+dYvV0ZLTFXd5FIouzqIxEg7fS/Mv/dZE0aex7wxrLsuvE\nYc+2FqDSz8XJr0YT6XrJpNL5XBKw5N5oKhmVgczc2EOG4tl1mJNzlpdpbP1q\nrJUrsycoToT6lqfmsV/aMnfhkt1ANE1epsbNt3GPaJKsaJr/RaIlMVLxaT+y\nwhxKssYpahJ713sl70qAZxT8yzUcY38q9kDfsV14wVh5rgPLt2zxfiCzcusu\nnMml\r\n=jpr2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/touch-target":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fd608ff66.0_1600352737017_0.8446139439033593","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/checkbox","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"378c058508378b22b77a44377f412fcbff4dfb7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.3e435ba57.0.tgz","fileCount":43,"integrity":"sha512-OBTZBhmqKAv0Bt+A+x4EO5TP6SzaZiGSFxLMo8IMD/m2EERaNxhQzHz4H6RxtjaR//VucLAcyF0t1uuChQe/qQ==","signatures":[{"sig":"MEYCIQDelKc/vc64jXn7vtzoufI0Xaiajwx0sHxbl5EZG44FoAIhAP+pJysZP+KRMF9HeyUfUqxL1yK/ucYYB03io6dnTlMj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3XwCRA9TVsSAnZWagAAFrkP/ixCTRv3dUTdWq0Eu6P6\nTrUT94AZaN+aiUUpaMTPgP7HnlpzcoxxyV9/CdRYwWtoxhKgI/uPfEK1gKPl\nGCkvky2Mqis1CMFeJVwq2XmalgTUqdoE/wZM/03SSvdign2uE92PlBHX0YtW\nZ+eCsvDLeBLu3IigQdDWtPFQb4psmnyXkb6tBtK5cDmv06KzUJLwVQR5W5Yt\nolgYsAV10mUVUXydaZi25RvUqr0V+VkcOZcPnsbRPjXEAI24IoxYc+9eRfor\n3gtde6gDz7dwin3W9Z2/9CIl2e40Uu6tcZkLiuFkCe/VpUCC7c3LnsnhLkfS\n38aUIBHvX9qZICXhQ4MWn9MG3XUATmHeRSus0SbYKz3az7Y96hzZzEsWzGCA\nkBF8yOQijqdQwes39ov64YcQojtY3TCScEqXuTkzaAXjCh294raowflqUYi6\npkByshG8oMfAzgi7YX3Pc4mSYcg5zEUE6IzShrjcPSDR2GRHIgOSn8G8Konm\ncWHdrzWBbAqXP8hSjwTKj7UTU8I7Ira2fdBh/3u171ZYQ0ZX6U+9ArT/psyX\n3zwlmqoav50kJcenQWJJhc+UYe5GztNna069NGnWTLdz+i8GykdymkrBXkzB\nOFbw3v9KMR7zNynmUCLNjLp3ajOSoY+ZiYntfRTgjNAFbsZd3kfCPp9DYk6t\nCqjS\r\n=feSw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/touch-target":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.3e435ba57.0_1600353775838_0.29161124722153575","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/checkbox","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3a1617da5b79e1c12f5bff584daf84a1b6786d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c250ec52a.0.tgz","fileCount":43,"integrity":"sha512-2/x8HQA1OXYV74N+ciExS/QVVGa4fMgx3IXE2YWMkQjP6blgW38U5MLYhqLHdKvWCAX60HvkijfQQJjRE1lMsA==","signatures":[{"sig":"MEQCIEwdmtio8opFgLJxR5nwoQ4W7ocQ1R0LrVOEyblLrrvEAiATtyFQpptAr3JAxQf2lvRGJAhMgBWao8b6tKErIYujdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8K2CRA9TVsSAnZWagAAuhcP/AuPjKZV00tBtxjH0ZeW\n5SAgpl6llVtdIXFHV/6JCfhMMEFLpJOjFw5NuqBiYzRbqFoMuzsF66rR9Kwu\nTFXcxxTUma7A2oGc2QcWwBystNgCSPDe+Fl5+SIeZMJDCU0IFgbyiGzgd5be\n7zjrgl7KYjT593asa9IvBcmUwTJw+UifOW30fnh+01OTUT7+0j/SiU3DTq/l\nhkeyKkSpB1TNyyUMQziikp+zD1gaWLVQBiyO1/fuA0MQU0WrUBUE2+JQDIPD\nwqVWuIyGIAqZxHEhfefdsIVrdhu78mzPemOR0ixLOW05oztf1lNieiZOE3Kl\nvsqFVKrByzPGTBv+YrbmZduFjEcvhxTeNv8O27S96F1WZtmLY9W7DoU/fscJ\nCTRddHbbO/OkT3Khr87G1ctPginEsyEybdLgl+pgpfUK81Eg7BmnINAx2Aor\nsB1w72vhjYBydoUhBHCtlDmwk0fX2sjr7Qv9hlgPg/Pq0Rr69clSfled57au\nx8RTq+VtyTREKFSMXa7fQB/kSOC04zFhEicWz1DWS2ijdgI6tqAgFF+GekrA\nh5RMMw7lV8skEfeitiP7xxL49w9bE5H8VBOynZASv7xxonCRJiYDQ/pF+Dkx\nnLepgcU5OMpzCZV6qfypxyR77m1sh1tZjeGL3XRdz2YhIF8W3MCqkK/c9FlT\nrbBs\r\n=AFY9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/touch-target":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c250ec52a.0_1600373429882_0.4267778912310851","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/checkbox","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f13e841798077284cacf86d068f15e13eded23d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.e34e411b1.0.tgz","fileCount":43,"integrity":"sha512-/vUhqFbCl2LJ15PvLUqwiGiEtbPz4VObc97cwe+yAVxZslEhRGuR0gXDedf40FOxc1Qt0InRDYqZEcSHbcCOMw==","signatures":[{"sig":"MEUCIQDerGITQ+K2TuF1509YLgdhHtUimneZ3B9vpDfBq3pZ5QIgHxBKTtO2zBhBViAGR+zLOPpP3x+UcAwpq4dgpxyUOIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RxCRA9TVsSAnZWagAAp7UP/jE7XUtH7A+OLaV4c2/t\nSyce/KGoTY36Air8aV26OF0jQT5CZgMdJaTEYLGzrbWZWCkXS1cmjcWl5inA\nvQ4x9CwU0IYVn/DU4PiLUuVeFt5J8xGDCj5oWy3ef4UKBkTwtyhkiUCPJeMH\nBzSEv5vczsnUHEK7mRSm90jE/6ZxYCbmuHsJnD45fahfMN/C6gWQJ1hykS97\nP/ss0TxTNyrSHQfj0108ULArBPtLnCf7oawmZZzVirX7MpKKq4IOYHdy/BzW\nxMukF+RK799zRZS0MLxAWCCsRL6chd4Fv06UlckMWbS65ESh9sHhMHpuc0hS\ndpX7El1buwKNlx18mZ7ogq7EJjt2yIp7nSVk8idNlxBY1IaRoYpe4NYIA62E\nP9WJkRxvbhu4oRMPXOAgZ6vPCvg6Qu6Vm0KZFJAjlMNf60o87sk+ZHXWMqgn\nOkpU498wToyghottCC01L9KJlwQqlksmUsnnzMjL4cLD9NzuX5fQdcU/gefG\nMXqV7pI/qyAKCXTf0rX+CTlok28RUUmfcjmLGjAIiTXSRYxemGaS9aYcXQRa\nV2EBXRXo+8R3ljpPIML0gLSl+r/bheYw2tMAjEzGwDjlxMJi0L7Km8YjmKtK\ncy8NXFQuLEvSVpW0j2WsOwek+viEj1iAUyvsRxgDkhiCDDNHn8RGwCiKT+k1\nIIRJ\r\n=HpZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/touch-target":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.e34e411b1.0_1600373872562_0.16799488890598457","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/checkbox","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.4e9343929.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0320680bf120490a6040fad9ed63b274076dae73","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.4e9343929.0.tgz","fileCount":43,"integrity":"sha512-bsGfARRo2I3asfqPFUOZUqMYZSIgpzABlAxLwcUHmsemtGT33VUUOIJ/ULbPyfoFWz2Jupb1p/oOgtTJQ4gIZQ==","signatures":[{"sig":"MEQCIF6ifB5qxZz79gnehBo/FvqgTGpYBlOcdx6O7xWStpJeAiBwjG/A84EFNSVvYZDGyOSwXMx5eIyykDg2kYqbywcOVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pZCRA9TVsSAnZWagAAc6MQAIiBzDzEXF5F1FM2ky/T\nQkip6NpjNKHMKJEyHFg9GedzexiqcxH1BZocQ0DdssZ6VFO35rnAAn9JGm7O\nxsptmrARotrYhuM0vIiWve/a34Y/mqiuXvnHrZU3AmgsrvMYxmrSDRsPYja8\n1HVk367Agu6sojHXTutHP7RVIXebSvV5F/8gpRvtTUxnTuOwQN947c+LsePm\nrmeQNSXUXqHI/W8+v5olXx8AH32opvDNK57EGlC/stMrDrHQzBAMqWbtzJNo\nZt1/L6+y1bzDmgztr1jU06nrQGL1ZnSKfbrApNRnKFcmYeR5dZoBPwDfpr8n\ntcCwrJkJi6+GWS5f14tqxTGVKOxjMPNZyqDgORZ9eDUwuqjcsR8pzUx/tC+P\n2kyk0s2QhH/cNhBJdE+DaYTLA4Ohvp9Fj2P8GO91N7DthyZt6pV7vpUnZq9M\n1Er60aON4ZdBVTzXQhdfQwJg31DbLzq5qxoSSQ/W7izoiRJv6lazXV5wo2p6\nU0LqnMGxrGUMp4VBomAayM+8n7ikqleacfHoRKzTbgKAQ5U6W9s7tVeP/zk3\n+lGRpoSv7K9LhAYNvntZCPITQnZEGj56wHlrREap9D2oUr0DOTapV0nS9tBZ\nCeONksZvxorFUGSEQxwoJsUYvnjXKc3Qnh+ceCsXaPmHVVTBPLSY6sIPk4t6\nNcvy\r\n=tjTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/touch-target":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.4e9343929.0_1600375384534_0.4231226423163075","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/checkbox","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7615e194c45d52a8dae5940b0c81bf2b07a95e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.4e5c350c2.0.tgz","fileCount":43,"integrity":"sha512-Fl3AbAVgw0ePb/om7TXyt7GGt2pyCMkWjAL9sPubrlLsp/vckElroiv23LM444s3Able8FUvq8UsnY+6/A1+VQ==","signatures":[{"sig":"MEUCIQDWyt/pTnQMRkj7HCGhE0G4Sw6lJ5eggaiJYVRfT+ux+QIgBFHPot8AiwKPew37hGxoLrC7nF9Hswc8Ql2k7gUJwZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaReeCRA9TVsSAnZWagAAbREP/A551T86GlLmpv7bHkmM\nbjCERvFCTeHhtQIgIKHBSp0wyRAG1aVn3ilLPfKWmC712h/M+LnzP6F5M2yA\nR1VJoju2slQmxOVBtJXMuZms0pkaBzvFldhF52UprAy714f7zDonc1hMvYHF\nE1QXtlfRSx591XXtBm+rEhYF/pRVVaGSm5307XM5JAVGZNR8ZRdTAS1vTYp2\n9635OwGYiaZWVCNlaS2xJZTDrUss9C53qtSoWW1A7uQ0nnGHSubWJ4wYNGMQ\n9c4to5kSRWJhIIIRkYdoqzIO6i7lEEQk5PJBAJOAmi+RjHMgI4DEevgj1E7J\nitH//u29PdkUJRVvxj6ZpTGCMFbL6dw6qFPfQSfgMHJgId+iIWyXRFD4dsTH\n3h9pS0bkLmmfaTWkqRo7fvOFbJgtxRqWbMDZ8fHms/vh+Ec6AtTXoDABu7k+\nc0Q/oJehIuA2SkdaFQ7UxNtxatTjvRSkMpb3PsxIk2cOFfCwboZfLlHqKqHH\ng12KOGBHZS9sNr6oG5HjTBxcPVQl3ZzdY/Pz5EmOrPt8rqO5zV4FRiTq322Z\nnwNB2NfkrXOQO9Qhgar4bpZf9oq4XVHbEPvds+fzV48YLkKRvbARCfjPZBU7\nVqd01lhAnLlTQMxu0DciSXaN/cGgiEQplS1yYEAyAD1v6QRbajIL2fn3ukzs\ndP38\r\n=3mHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/touch-target":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.4e5c350c2.0_1600722845540_0.37483700106919504","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/checkbox","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d164ba42e7c348a4ff03a3cb67a30c6faf1963","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.16c563ef7.0.tgz","fileCount":43,"integrity":"sha512-AzUD2vs2+e2ctgaNcc/b4soh3BfDBcetgNHWhT7kxFpvs9nsDMEuRx1NFZ75Xt8KfWmXJEtLeXb5099sF/JvOw==","signatures":[{"sig":"MEUCIEfmdEqme8yLvA3yndrBDQhCa7Hk8D1vxAKYEETvu+crAiEAph+7K2m/KqU9X4oBrSzJEpeHUAylT81eyJEmDmIb9m8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSCCRA9TVsSAnZWagAA8gsQAJOUixvTv4XybTkk9XRz\n2XVE96NHHwSnFEHbJFCDoQRT9Nb8UjW9kVFhe/X+Q+Uc0GE2w+dukqI71KJn\nkfxdrDGA188QbWcDN6mLu4HpcUTMoco9XFUpYTELBGgO6SYJrGAhSW2K/X4E\n9qQ5ADSgxtrb20ala5Osa6+IVW1Thnbkn0oKoTqotYaHtuV46v4gEtL4xXx/\nJDvlG1R/Cu+DYFr7LIDBRLnvFcTkXCOF0vmiqZcrfr7SwLXMzMEEjHWSTJ1t\ntcQUlJjpxnqp6rcJ6CYSVV21GJwtZ5qEsJRXcP3pFI0BNHsNEHXda0R8/Co5\n4XRVF5cM8ecfqUvfyeXpfu5mGLlX2dHhE+jJUY/IXdVeq1FOAuKh9pgRoqRN\n/VJog8QfV9pE0ZJFihyOreSUUgcSz3HCzcOEYUROW6Sx+DPj5WH17ZX2SOkJ\nP30fBJgxv7Nn6SSTIhSPYLrLqv0MzIVavUsM7o+Be5U2nEQRFRBNWUMgUVpC\nz7APnZNd7+lKx25EXKuQunrh0IlDJ7zv7Wr3MulcxRn+cB8eOMj6Lg112kS6\nCvIalYYsjYTwC1mLWkHuL348RKbGTdse6TDIotlgeJcrjEw73OkaHrf2i9S9\nlYCmP6eZVkqaYTjS1eIooSCz3+a+0OCq1mwrkFtR/SP02Xv3c/9h5vqg0eZW\nkn+X\r\n=8a72\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/touch-target":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.16c563ef7.0_1600803969336_0.8474737417791007","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/checkbox","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2357db1a4b1de5fc93cb78333e40cdb77eeb6da0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.fd8af3d43.0.tgz","fileCount":43,"integrity":"sha512-6NdfPOkdYQ+RdZaRFYWQFS75jwpF/0qORtCMEsXaVF4hI1b9vBOUMUXUUdf377rrRWORJK8haA5oKVtWn0vbVA==","signatures":[{"sig":"MEYCIQC5lzKWEoKLuEscpHly1kTA3FFA4q3xuCNKjAkKAyF4bgIhAMaaaEYQleGuyLJWmuePznjx9E2eRvbVAK58AMt0Er9H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6K9CRA9TVsSAnZWagAAAAMQAIACyNsmTqfe1bvvmhbN\n1ssq0dyGBb/eBKNkyUhn/OGTrSLjxnmspCabpcJg3c/W2lCZCvz9tG7/hFHL\nGlwmX9HpZsEHLF1D7GAk/qIwxpAhGrysNrYNHa/q/dP3hGEj/rYVFMTKTon8\nrmADn2ot7M9Ugr84cc1Rimgtw9w0ZnJWm9RklGnJ7kpgGOHre5NDGMb0D/8R\nhBoexy/mKzFNKCKHhpSkbMNdocXKc7XqZiMgjO6cq2hWxT5gBg193pZA0Wun\nrsF5eL+DKbOAxSZN9i7wDsasbuq3jA7JnqFYYbpAOyb/sNo4poQ7n3h7pJyL\n8CekeD5qgCmDfszGNaCiCfKgtKTTtFsUyC55bcXOa6SLa9okkUanm/wkmBjg\nF08hx5cuQKfLXA6m4xqCiTBjBsIcuuh/hoKI4guuDsmjfugZDdnw8xz7ZWA0\nk456xmNE+VL4ITxM5FVZNbQMSNa+mnXELiuRfqUb2UrMOKqrC0VKnnoiNp9N\nIiSApWJGGZwaLTE04ByXBQ8OUl+tlTGL387tuf3GFCm2wueAL1SzH1KW/DoK\ng7bgVex4BJyM5pSjFMIzdIkoUKCwwvEaX0K6D5UYi0AvPK4hQ9qNvKjydFb2\nj0xJ/M1BwTIRjKr4HN3q/ODDxSkZyxh2EYVcqzYhirem9Anj5eI8rd3HgRg2\nG/Wz\r\n=m1r1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/touch-target":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.fd8af3d43.0_1600889533467_0.9830366417145562","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/checkbox","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e12398ede0f295330801bcd0486194cf39b81e06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d4cd83a85.0.tgz","fileCount":43,"integrity":"sha512-Oj/sTNRSWqTMz/tbtSTOp8G2VP+F9nWXVWaWb8Zck3tfNGaIux5As1dQ9ycbqjx+Du/L9pGP6sePVawGnYcuPw==","signatures":[{"sig":"MEQCIEarC/N4dAb6p8OPT7BBVptrWlofeJPC++kFvQqjxjoMAiALN3He6UIlCAsQG5RSX++KRFkp8zSQz8T7vM5ILsp2Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtOCRA9TVsSAnZWagAAm9sP/3hP4pLcg2t3Swh0TokP\nlb8okleGUQWM1GgUo5S5T/cV1x7cpMnsSj+95xZ+E3uOW8KmEFlyGK1VVPoh\ntsT4qbbscJJwF5Mf45rvdYzZicV3HW4l47UlRRdH8huyChWKZu3UWP4tDGgE\npc4GggnoZWTyowMbqdMvacCtwTH9fV3mLSDKkXAzp93FwaV7i2FVjMOMAT8+\nrBY1tlzvFWHsRmckmuW01bsVyWsau26tUyetf2XIj6XVZPgSfU7YjH0aaAJm\nikGi6knl7mrhWfxMddrpi1CcNuhxRimRumVDS5t1Paa9SWvmZrFi6RglxeYi\nF0Jh++S0ogNxBL9sPoNPAZP6MuuFk6+V/hdXtIqulfUFOiCPbGZ0wC+I2+de\ntOhTP8HKzCKzTrzoL92r193iPyfx2ns7Ixg8EUuijd1onUCgb/D8tpzSWVkZ\ngoSOp1HNgdS4rtq1Au6fNM/3QsZhpeidnukN6Zb3sMSZUsImutWsTgYq3ifF\nYMK2JIE1gGe7LslwvKliQzJUSQGjg9mlszq+13EhaVUae4lSOWRY9bm1zzG/\nhyE0jcW71aiUbNS1al9Qj5QSdxoTk4/lfXb1LM3KxRpCDGHVhku3AsH+e2Nl\n4DgOla5wXHXLbMJKj2uF0AX8Nq3r61dqNFIy88uzeBLfFc27j6jp8FGXaCOX\nms9r\r\n=BoEz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/touch-target":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d4cd83a85.0_1600994125597_0.19711526906279841","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/checkbox","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0a9347f1787a32061fe76471c7d8c7143fdb09c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.199aecdfb.0.tgz","fileCount":43,"integrity":"sha512-J0cWLR/XP7IblcUizGrthm4aGse7xVVhUEyTOAQu5rcLzSk13rvvZANTG9wXRwLkouRRCZT1odzVbOmFVabSbw==","signatures":[{"sig":"MEUCIQD1cZZ9LFWPtQJEUGOiJ8jd2w/2Iw64d/hNV4Myri26wQIgbMyQ5kinO4YkjA7MvycM2pSWRKe+B6uC6kLoY1pvR3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhHyCRA9TVsSAnZWagAAgPEP/AuSCfyv9HPBy8cnUtuj\nGHqYPQ+S4LOaJMZaSlwZuhMOn6POXzA8nL1eMiMApvFmy0l6i2PbYjqkfh46\ne7bC696l6R3XFo8CFRr7HHGpdZYNMyprM66n/z0GPYNWCUnOj/GEVCh51ZPi\nZvyB9X+dMapnomm8eJfXzN8GqT28bvO5wUOLqHhwDwoRgtRavZJQcCC+5wLV\noDVgXBcX5tobYtSXYey13bFd6zS4P5mZ3MLFow4A9WAWwWWzWbXU1d5Kkmwi\nQt3lZCRS58juYaYxFEmUqQFzQlEYoqHgZMhzKnv1nU7gMRnthQJZlXWmfXlO\nKNbJ2PFerEbbJCzN4EZ3BoC4h5n8utaVjnuPtL1DM+GpEfOAVBDqyeE0NKrh\nOrAUcJSU3SjkmwmkygxbbV5F9E8DidV279sxPXXGrkhVqFTHK6sv3Z7n7CEJ\niC/n3qh6BsjJfThM26zM0POOm8wGwvrAo+EeKpmzDxeOdSkG7pOHSRHZyOHb\njQsJkKa5b8M0BHA229TLYv/vhY8ygu+M7ILMTWLiNvpcc1q48Y0Lrb4Kcr2N\nrkb1khpc6vCYFYo9jn3QJ0rWP980nJ38yB25K0X113BymvSgQrugKPqZ7+eM\ngyB8paZlDYbfIQ9IfBnNn6rDSJOphTBksluZU1Sp7szvbqR3EylMZf1RMIxD\nn/y4\r\n=gOMk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/touch-target":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.199aecdfb.0_1601049073997_0.2520132375536708","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/checkbox","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e8ed2d9f9c09569b42b3066e1e63bb7b3f1ae6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.38ef4501f.0.tgz","fileCount":43,"integrity":"sha512-zWrYf1jN7m2TlTaBo4w4MJua2zh3Md34jB+OUKhkriaj/kuQn8JudbgZGQ92cr6PWDaSf6Nin7O5wql7s/lMvw==","signatures":[{"sig":"MEQCIBlKqpC+IeJI2oyDEweonoDXwGciClymM5bezFrYExG/AiBzW5gx2WHbvzydWMr/Ibx4rhoQjWvf8KbwW9A5/1KNkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1dCRA9TVsSAnZWagAAMhwP/ih2Kd6Wa+ZgcxBvVyvL\n1RnLT2vMA/459ZYnPZJEpFoDSuYnSv+NvIoOpLVWSdrTZuIIggODg7bFQobj\nx06r303pc/nGzVaimYNODA4Bp7zTB2O2qpUA8vnxwgCmLUVKAQUn+9FRxOWe\nJGiVPpELk+UTHdPWPQvY1KEaiTbr2aA4hW6aeMV5ESJfC8vravUKldzw7h0D\nl1wgito3iVQqHbKYK8rdwiAcvlXj/Jdk2m/05mnENIj0GDD9D6QMoeGau0u6\nEQ13rtpOH0bxFzBuKjJcgZ+eFUttfE+joQizRPYIU67cRfYk3hL3HR1KgE9k\npPIqulBzbbwcwmGCeRpKsqkzpV6IUk4w/1DrTzDnLRl9jcLVAl+qnDmYB0JO\nDQXCOEB/LkrytLDCPUU9XEPFX45vKaHeFrRyb4pW2z5CZEcsP6COJ+Pu4kdV\na/gq1ohCJF9135TA00rsFYGcEUGXX4FVcWp/q4zslCtKehGzAf4g9DcVhqkF\nIyrkq5cWGOXv3V5NMsz9xGymZxnmLeU354qTSMbLgZ8wTii6Lysp/2kzhLTz\nuks6ZVwtYMaQ53M87LkqVjXO4PDL93T7fmApVEbIi1I/axA/XQvxztkyXAzn\nBfjGS/1dWNNM7cQYf4mDQZDe/LMMU44KwBx3wlGsxXNK3lHFEzK/a40ch7Gc\n6BCS\r\n=pVb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/touch-target":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.38ef4501f.0_1601490268803_0.5617637550996337","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/checkbox","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bbf85412de58a081791269d87d59fed484bd03e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.774dcfc8e.0.tgz","fileCount":43,"integrity":"sha512-S/BMM+Tk/WHcCj5ZccPJqlrsO+tX5Z4D+odb8O2sm6vMMYKePIWv6xdg9S8kNvFnYXtCxN9w7Lmp1I8yH9L72A==","signatures":[{"sig":"MEQCIC7Z9R/AVsPAy/DGlFGVxaulXP9NoaunD3pFIj3D6WyCAiB0FiHhfBMBOSz17AIPYqOH2faqjNJouidSsWtfXINQFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdac+CRA9TVsSAnZWagAAp9oP+wfqLeSy3AhJZ+m4rJPG\nBB0p+to5ZqPxUh3FhAljtKyWhFxkHt+99lpOdNO7XXWNiwSTnPnkdt+Vs7NG\nVQGjr9emT3lPFKgOCeAa0DMzlHbYQ5fHme4UHjlwQrPmQ1SldYJ/pCAqAore\npqSO3rPuzppvMR687rFXp33yeW6qQHhI/Xt5SXfh4CMXgvuZBfKU/miIPWif\nDgkiZyktuLdpgige+xxUyU0d+yuLasH0D1rlPuHXqUDtpG6uMEnZno5XLFCU\nirFQTbP1ndfXeI8DENYxUODiG7EkXtNviSzJqJ07h7WKf97qWMDCE0k93dHA\nzGhiEJnn41D2Kpjv1XddnSYLi2dMK1cd7DdyLJhViYeKN04R+0zixhy6VxJE\nfiqXmkDTKEIocbPHFyJo7OomgEfHeYKxz6A8d3UCwoEcoWLNUYYFgKl++uu2\nTArfOb2jMlgXTEmLgSkHp3NBZwybuErbVY+0keg7CgXiVSqATYlPvesrOuv2\ndEk+2FKKMnSv8vvW7WqF3Pirc/cridgJXkpV8mWvmmJQQumcm+OeFUc28Bqe\nbrv8w1bYrbHoAqODraihqBDpKXNLyopdweTfZZ/lIxIYtiIvyHjV4W4flDyK\nyz9Mr4YW049aQnYWryMnWSHsAkAydCXc/NA3rdxvQRHqSZEw3PhKli/MwtjP\n4lKy\r\n=yxws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/touch-target":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.774dcfc8e.0_1601546045579_0.3491514824530908","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/checkbox","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"158f0a25465867ce46fae449a5d015dae976f554","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.0f60323a8.0.tgz","fileCount":43,"integrity":"sha512-UFd9mEbd80xgoFV2JW4KFhzVJWtTlieCagem3asIlPWUmQA0bZueuYuUTy3J2hIcqfYgx6qYQAd4zVwRu8lLMg==","signatures":[{"sig":"MEYCIQCu1QGlqDid2n0am19TuS+Y3OsxsMR93rOSpkrADBIAZgIhAJQnBBW6DK0/jft4yG3dk+8+KuQhN7WaVHb11wzq2VRG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AsCRA9TVsSAnZWagAAYoQP/0S/ulGqPiinNBv7M2rx\noTj9uLrRCJaCpVFKoyHss0gm/IN5zPL+CE51x9MJU9nlRRA7VEsZC/jLJDeI\nnPiyjHT9mOIjEMr5D8lJlVJGkyYbhVPC51IXkjYniZCrK0cP79mofZVg2wGe\nwevNxvRc4G7dbquseU57UK+pbaH3SyYChICv6H+RTOPWIYyQp9tdyqOpQ7if\nZgtAk3OxL2xLLObcjf0CCunmy3FuvBrPySulasILG+1WrbxGi89MlvaZ97cf\nvIrJ+hrvpvfCGWvKcCOfvVgUwGT4rohu/5L4I7/MYf2XC7NQc02enp/TWwji\nYRRLMlzZno75/lYC0GdHfn/ZnEeIpeO44Ykvsse3KUVuorNsTqyzb0LnKi9n\nrniH3urJkwJ+0tqv+VxmaiO5b4cLOs16YaRuflquhnQ7fTqytvtMmy53mlaP\nKtSMTvNNcaOZcrej45KqmBnXynuq4BU9Kpa9vkDz1MpAn0K7HDkhRVGrD9yD\nVy2raLTTmKCYxFMr5jzHqUKEus8wVuOSXIGJ1WIkSoKiC2vU0fQqmfrUfZLP\nN7+Qw/y34mpCsaBhEpcwiY7/Dngx/FEa6dON2jKJ3oIcvZIrRXoMqSubgR99\natvJltL58OcilZbaaqffslyxeo34S2PHdpiPnczspTLaB6ARKlV7n1GR+R00\nJcVm\r\n=GbCk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/touch-target":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.0f60323a8.0_1602191403777_0.44144421372018483","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/checkbox","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.d71622574.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6039e120c27a885a84624e7b05840a30b695d89c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.d71622574.0.tgz","fileCount":43,"integrity":"sha512-yzuNS2/cyyso7+sBkwe6XMSXb6grnLHPB1dMQRkZTbw2thBrzeDDFWMJJp/zotkGTGCCzJANL9d3LxjRNrIs5A==","signatures":[{"sig":"MEUCIAXJBaID0qDgC8HCw+x61ljvNZ0fkqoQ0RV1YGPMuVm5AiEAhKhWjhFjyNIWKrrH9jlR4Xlsm3mcvVuUJL8THsJYIS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJBtCRA9TVsSAnZWagAAWg0QAKT/fXMSHyHF8ljj+31N\nm+qVOiZOnr0mvb4opaJwLbpdV1vTO7TSAw9Ar7p2kANXBtQJyWgJw6hFY7tG\napwCJRCLHlCWGqsMpOvdu9TiKyLhLJeQ8n4KQZs2sUTVrudHQqZo7kcAiCZh\nJszPAcFBZYG5VFtp++GQM+TcDUtTMSwh75t9rUVxx31FJbIsnNBiGVAZG1VX\nyknr2TBGY9YJiJGy46DyDK7cLwc6OrpRHVrlfoLXR+F68nNjwUdBIby6vqfc\nwkIR/lSK0OyyG/XlvZyj1kkZbm+5jAY7uO71+Mamoi/5TNkE0WW2PEZxiUuZ\nwjWea8r6UbUFg5mW3ASZCdFlD+CttgMPU93srJIw4de+CaJ1vYCyXU6fI6YB\nLXx180hCrPdnZPWPhF4txXozrLPG9gwGY70QHkKnG+YHEmJ+hYTaPh7faFvx\nnd0NCdBoveBMix6pgCqh8DL6pBbZ6/gUDHd2VTcFpQvY08wsdQb2NUWyE1nT\nEsAZtm6hzvqLAq5F/4BECpBEcrvv9zjW9BtKNjWS5Xy3MQ1vm8cucSiX5b5S\n6VyEbaF04K6XKg+5toSELrcDa1hDACBxYJBGHbsMhcmQVRjvBQpH8R8BH+/p\nqmqc9TpsKSLFW0pYEnX7nppjjcoy/gXnxWUsUydBAFxEOzn/s17681AvuyAU\ngpYt\r\n=1ldx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/touch-target":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.d71622574.0_1602261101042_0.7630703388491449","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/checkbox","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"024450d2436cd3545ab08475670bfb7e4a383e9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":43,"integrity":"sha512-jSbHx6SBSHMfnCykXH8IPVX8YPH0x0CTOopAot5IkF4CkEiSA9dotDdGz3D0Y08Jl9D6594SBdoftbo3RHo+2Q==","signatures":[{"sig":"MEUCIFN3zO6Jiya4DFW/+Crit3RlULR1kYFND7kXyiXqJuFBAiEA8+0WKC5O8PHeDENLgw49bI3vgSTmR9a+YPmh7z7jSfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoCCRA9TVsSAnZWagAAIuUP/R4WBMOlkek7piT9bI9I\n+2+QScyCVE8pzdC7aU4gKdV7pnW0IIT9QNnDz5tJ4iqftpSSPm566xe0+52O\nEja8hOWW86einEHPwqWGJ280n/8g3tb/aPdAX2qOd2w89cTfIVq/45sfYPhq\nbd1DOpe5PDETAi42ESamjFFRhr87d7zMalB0upqqLCrHgoI3UAjCJBxpkZNH\n1+B+AIJv5plG60CwTsCgtcXBTsQkGmogZHC0mLVyWIUcHp767FDC84A0FWOf\nwGlm+Uqmuq9pn8NIP2gvyzvBxiDFwWjca7V9YEeMAjxo5nZUg4+fyFAEXYIb\nucgz7PF/PCnrYdtiX2Fi90Rv0CeUh9/sVk/qAp5PPNMSmMOs/LaC9gY1sNMA\nZ6AMl+WvN+iwOZ4eGIOpVQxHA1KlkVXyUUulrNUOjkPxNFvWYvpc2hBOxUt2\ndC1r5YVZw5wTugcW2uGVQ1R0fIoGPU9+tl/giYxs1WYIxG3Cy3XMZsnqlzqP\n4x7zijMarYtpGHRmssxExgZX31PG19FaeLHRjnbrL946FdlS9QQti5ITSwdF\nzhNKufp2PKBOBdIYC/75i2Y8TQy6/EkWRpKZUIu36RfOqyWUSkboXKlsxwRI\nTWdVhsHIyJg9qpB4AGSZbdgn/NiJL2rbj1WRA7QxcPFgnFtHo2UgeofFx4wo\ndauj\r\n=ANbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/touch-target":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.7a9afaf4b.0_1602284033595_0.3631498159503648","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/checkbox","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd2875206f1f34dbe26381b0c7ea11c1b8f73c87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.8a39352c8.0.tgz","fileCount":43,"integrity":"sha512-UaPIb0vytGZcYRK3ySTEV9LwiWN8KMxStULsAFOK2RHOgmQn0FtGRX69qdgzwEId9oPsfUatAhite7vaTguuQA==","signatures":[{"sig":"MEUCIBGAPB1s6swTyqB3Jc3D5q/N0M9jM4AqsxudVQhH3l8pAiEA5v8bX0IQkvCNAJylHytgs4u8gJ3a9lt2EkrZAjb9DII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZsCRA9TVsSAnZWagAA/kIP/i/uS+N1le5SqO5ms49J\n3Elnftv4q7C0lgNpGuTgrkUs8TMmB+PnHzSYUzzoKrLOSvL2mspbLKsCEVWJ\nsuYV4wBJwN8rEwYeJW5BiZ50aSlTYubfyDPwjIG43XZTRlU+deS9AcKYABmu\nAsByYqO6l0KcD+LuEm6HXN/Q1jegwVRJPiYTCcNgyth9wjwaHQoF1D0Uds7W\nLqCq+CsKrVkOAIGk+8+Q2X+ZaXu0+AstJM2opT706xvPj+H2wptyrXq7Oo6u\nz04Yg51kJxV9v3Snmo+c4GXHJTPXw9T8BDFJX/POJdwytzHd+CI/IiRFaB+G\nsjIGJ1DWlE88EZL5Vve5/Xi4Dlgtd269/HuLIZ8YtIoUpc2KCHee2VF7FnHe\nzVL0R++oltc1peAnhOpPYpzzMP7nQe7L52l/EEOG7BtKN2d9ERPWfKpvo3Ru\nh12AbQNXXb/dvwHghlNlRZ3z0kevVxBJ7dL6yT9tl4sPe6V2f6r2RueHKkm6\nwdaaWOAtA0ewQ2vXx1wSWz5lmlH5n5sW0VW6O5dAuo3nEQPoCJ0JsnThortM\nlOC+EMjde/fHx6ljm/kwVQmxR7YhOe6h6LQqSNrDq3HBQb6tF1ROkfWgM/Hc\nEnF6IDQZC9RP0wpP1af6pyL0FYMZR0zY0XqSxpzNsyJNlrzLeyu8M/DprUK+\nLwSc\r\n=LD3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/touch-target":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.8a39352c8.0_1602524779903_0.8960021357893246","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/checkbox","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25cecd9431ae6c71f1d4aabda8b63e95d495575c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.790ca85fd.0.tgz","fileCount":43,"integrity":"sha512-aRWQRc0LQxJ554Ng8skhdAErt4lXv1gjZl+y12saWflrMyWFV2rk6Lk5hgvAXSEt3sWjg5R05UCM4XK0cA4LIQ==","signatures":[{"sig":"MEYCIQD1RCNg2WDBYsuE0YSz2dJCVB17Ee9LOPdNKvfoxv1KUAIhAICGyWg5Mp/7/K9ab5ZaoBXsmyJTuQk04eGGiWwsVsSk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEfCRA9TVsSAnZWagAA2hkP+QHKdFdIgIn7IY7cRDtK\nLG8SxHdtJKdgMUR7fBsG52sAI2Wy04C8kKnAZJ6CWBspeOFWEEFGzu0CTO/t\n52t9ve9UyQX2tk6FwmyPLXEOShCbDWNcWwKM/GIUTCiGR97PDK6b6VwIkKyo\nP6fdwJp5LIaxapp41vYgERLj1bmjtTe4MUGtZJRFZTz17QZOKdMZM5lLX1Gh\nXpCwUVmVj5Xtm9bcWVudIbKhJtDwt1Bk8QAaiua3vUH5NaYHcOLi65pWu63y\nnHV2QRjwyr3fqco0ueeUIOIAsH23tBZtBqIUoHPLkcRKGzUksbVhCmHbVpLY\nNDuTV24kf7sWvr+WIWiHp4BzFZ3MXMxj6qgmMNueCOR1Uu8TS+ZKEjrpkTiZ\nG6PnZmRbpTJSCx1t1ZmrcpB3FCDNJh4ksu4hUSN5JOp36LO7Clx7esATt6u4\nhBQ4FKGYc9/Azny1cJee1/QEiwo7qZOQFET6rXJ0qJKS5dH0GKMlB26nlYzP\nutzkNAjT04zvOAF5lIpXysTnQXlCJ0Us6HuxrBx7rgqjqJlRlu3XB0rADLrc\n9Nf3L06O7CMmNjriJtuhBSDRnsvNfwiAGzS0AU5wgdJKg6B3HpV+YuCxiOwv\neM3PUIXA4lYAhlEWbnpaneqmHlNX+HKxwGNecQfO37iPPfOV1HcvuKDkj+NB\nfN+w\r\n=99wt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/touch-target":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.790ca85fd.0_1602539807396_0.6260456031754613","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/checkbox","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.174c0becf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcdec20c3c6e540ba1de1227b84956f5b97fc679","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.174c0becf.0.tgz","fileCount":43,"integrity":"sha512-GWydqUoEnzoVNwv1gVK7u44snQFAnQ5CIkVB8uKmeU2708+3I+uDpRFnH1bBc/qIvgxnc2BDsxP+GXKyPUSZnQ==","signatures":[{"sig":"MEUCIQDPM+7BzX1VINYGEgi2cn45Ocsv1YFVkNWIihm51633SQIgeigz0U6Lsk2zQsuQTk1wujIP18d/fKrzUAkCKnc+1CE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9RCRA9TVsSAnZWagAA0AIP+wfnam6R41331VFdhIe4\ntij/xtcDMSADxpAqWcMNEiq/EvsFbwOSyJTjQKSLW0BOo2xLPYIBuNN11r3t\npxxQeTcIHvp6BRsdtVNQbj0ep5e60Hiyg/6YN7RT90bz2itz6956Ie4ZtL6f\nNsCm+r43wfoAPegcAM9ukOMA6t5uDAvUaQi9RY+xDoRYm0SQs2q/zkV1w0L2\nZs2G1YhE++9rll7Ycet/vEj7aVcBVm4eMbgRIUIaatxyrD332JIwPyWZMIlg\nQ9afqdf5wA7USYHO5ZjVkkdUz+kLBEkXe8ESr3PZblsUm1Mm6kfE8zb6OGWk\nIH8ryg1cu03d3EJ5GloYFzauhGjWZG9Wu4yMRcnqme7pkYhvS+0m6nwL3387\nCe/jUiDTFEe9BBy0dsaIya1pkunz4E7ayPKvzQtlqv190k3tATcot0p4DmCP\nDrXDYZLBVkmeSXKbBwXFYHq5j1pP3GhVEOd7BLx+pQ6m5CcNE+jg9U+hIRMj\nmbN9kA9FWyKfeyqzq3NXeMJOKGZj+xuNIxXvRt4+fvWT1gM2nP2GMW8rx1By\n72frBAbCQ3BDK2MM3hsoriRn+kS6+AvKMd+pJEqRdOnyZklj8MMutt5SQpys\nrZxMx5XBVTU9zFRGwkyjBkFFdpFcuM2NZsFxLX1BROCzBAFjM+r2fDsk569m\no8js\r\n=sJyK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/touch-target":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.174c0becf.0_1602641745085_0.9010515166132784","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/checkbox","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1667207db4ff85099b8ed4d29053374c0c43aa04","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c71ebfa02.0.tgz","fileCount":43,"integrity":"sha512-wsDefNfdtS/vjlkbMAwQp4rAPhFY4L+X2tqESKVvDJ8yc9FQFncd5Vhcj4PMo1Lca/ukScMBoziCJ1mPolD2oQ==","signatures":[{"sig":"MEUCIQDhXMK3RTxk25ziKWkIc+GyXojf/Vjr9BqmpjqCd8BFgAIgRm2zrDzZAABoeUWuN9kd0TPXzXN0GiMZTXNyFvk/oYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvaCRA9TVsSAnZWagAAD5kP/0/oYKdvki2JeG29zM2t\nrnCuoamI17kctGi3P+PkkHIuSTKwCyl+mmualaeEAo9K42zXjTWY4NqvGLzu\nm9DbuVMR9LiJP1CLMBLXALbftj03JgBpd85sZhB/HHjv9+UafvFbucbuLH9F\nIGnGEZ9xoPgntKKmMNb+ncjXag+DkJFWSEBKOQWlWL0toWextzLN/labm0aW\nG8C60SaRuDvu+9hloMo3mMM531Q5ZAJrGqTd/ryT5ijqtxCwZ6MVRZVp4PcW\nv2R0VQVofGPtsywHdaLfpLgJeadWyDV5VNUlYj+I14Rlq2/fZivfwutYPIbV\nl4tVpJyoZ3zy6fviKqka7B6dYzp4DWrF1lY9t5anl+DVSn/VREcdkBXNOtmo\nsg/DfbYyg/mvZ4cjW+NDYqLDUcyqJnA3NhIS/4TxJHbxOmVOHBqtMVJHC5jF\nLJ96jAKsPzHzEsUhnNDsVOS8faLqr3faMzI0FYJC8APbNjpf97F/oxbDsWF7\nItAi7IjL7QQCZ0jk3+O5CUdH5Etc4uLiv0G1peK18dYH8VO6MAS+R7BXehsB\nVm05F2WPe5w7dzxYJ1uhOahUc2cVkoHuT6am+t0RUqXNoL6sGP/OqlBoB++U\nL6cba/+VO8MGeQwfc9g8Ccluk4VMjQyOBM45n/+IhvQeOC8j99aD5n4vP28N\nj5DN\r\n=E80F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/touch-target":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c71ebfa02.0_1602649050158_0.889504762605511","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/checkbox","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"142fdbb62a9420aaafa89d95b65c63f5d18a825a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.2ab716cbd.0.tgz","fileCount":43,"integrity":"sha512-mlmpTeg/RncZ/85HE/FwxZcw2+qNqR1dl3iN6w2MRA5q7Fvvjmva3XEO4O8Kl4myB+4dS9JCvldWRC+CxZlIdw==","signatures":[{"sig":"MEUCIFf0KEbUYgCKZyUYOVRpDVwWiH83rz0ZN6YIbk7P0k6eAiEAmfcBMv58ZUICmuiQLnsHKKXJDMr6AHvZbkXz/vvBDYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOACRA9TVsSAnZWagAA5vAQAJrl8AS8O8H7WG0uWuQZ\n3eSyXFB5EUcl4LgqEUCEsYzxEpAkeMjkA0/ZFM3jAsNJSeTAcNikD+Mf8If6\ngBANJGwzE1mncsJxqNiEo67jHBs/K3PubxtYCVLaY5Te5PAc/sRSjb4hIgcZ\nyqE3LfPLqZaJlwyaujoxGlkhxi/1JX1otYlO0RfbiWuams3iffBiQslYprnP\nkSGerNI/QDE0Xzileaj0WL8xFstQgWHUsV7UVQOWts3mVdvd8B9Qd/CU0IG/\nFoO492qrBAKEcqUPnSry8JJ1NRiLEP7BY+33xc57aAAdiI+MXkol3Dlz3OP8\no9u4LbH60qjQbyt64SMh9oCmFphUwo5EoouQHIyt7fVRgEUqEI0HhNJWJRsh\nqb/tXKyIxq6lOqzhW8TfEmA1srm5MaiSn6BZE03c/vDk3qlUywdKysT+jjym\n/M4p2UxR0mQXEDELLnAVhDhQbzCqEgIXsoQJ2JUeTq2VMGS0Tv+j9pNJMbow\nMJHWNS+6kL/zN6lxKqZGUq+apxLATmU0x5+V/1tQgFmXL2uf8s1PwSlBCRS0\nxQ3CoXQoWQP3PW20yVet9a2C5J5FyYXGU0qfbclNaGGNjEUdbxWHPuuu3Nvp\nGLY/5ObB+oWuQpCkm9GmFB2zkIY8i8igv9mYLZeN+KhDUZ22rQoxhLrvfA10\nQyh0\r\n=7OnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/touch-target":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.2ab716cbd.0_1602806656235_0.09812046157739585","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/checkbox","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc31bc17c8542d7901ce5a6b8ff68da3889a82e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":43,"integrity":"sha512-bc2djiKNKO76qpLk3ZfIJ40UFvtjXuZKdI1FH8ZUa93oXUMTMRqxAH/sVEFx3YQCNuO+g1VEzI1Rg0X6Mfk7Jw==","signatures":[{"sig":"MEUCIFnEcJShWqDeccD2lffHR8eoKXMe8cQ6NMyNuZKzutbFAiEAhEov4hD0V+Ze8Jit08D1WyWqU2rp19saVaxTvI0D9Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3DCRA9TVsSAnZWagAA3kEP/1m59KzG1ozGoW//cE9o\nIg0abk9tDTatsuH6t9POPf7sptOpkauKDeQROSH7xrc3Hhj/XN/yDpokwNiB\nz94cNoCU9k7uNRnCdvNbcZprgDIu4IK+sO4zaOA88327QlUkN6VJ0EDIOj/6\nKVjOJkNPQO1wEBacszd3MqJOwdf1S45Q0WOX7SGIu6F7IG10eY1DogA80Ggp\n6vJYZ9fRA1APVkqUPbi335hdM1x3GFZgKC6ErlQMld+rnRPfgHv4BjpLGLZn\nPd/oZZc13wzYZVm8AnIBCsZ2hhA6WwRW2SiOoembmcde12ik3et7EEkG9KQ+\nVIs71rOZSyjxhWlUzXc+Jr+t+65KJBs2iiEvpxSRIGZMeKv+ghJ3Px1292Wh\nFphl1iUn4SVL5vVS+PldcnUWKaig9k/ZWBLfN26h3CJTtbo8M+6HeWvZWQeC\nUNRrrWtmzbEVN+iMq0C3hEww9ySNhlvqtrwsJ0e0lAShXFDAqaVRjQCqMjtp\nnZ6tbH0EQOEa0Oe3g9eWPQqOCcPhPYFBgUn/vGVjUh++FMa02bGujFRcVGm8\nULFZvsVrj8KZ28zfU9hdJdkUunxkkmrc16O6++PzWeq3jbm7WAfabjlR7X0P\nsvnBh0Yc0oLCMHTGD3NOVCy5fvJooRgrXVaFR47HBo4ZHRzrHPSBnzOerXBn\nKLRa\r\n=VG59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/touch-target":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.43c1c5e2f.0_1603116482850_0.6616314245452171","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/checkbox","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed995eec6e1645c0adffb0998013a4875f94a3ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.ccc64eea3.0.tgz","fileCount":43,"integrity":"sha512-0zwX8OF8/kRb10reukvMWfm/Hq+RfAneEboNCAeZxqOYnb610kITFhRZrN8upYpp4FGpG0xR9FAQhetVqCUIiA==","signatures":[{"sig":"MEUCIDFmehiIJpQHXu2bTFGF3s8pdxOEafoRUljBgrrhRSLMAiEA5FWUf8ngKMsW4R5RuooOAQsCQYT/ley1hfT6/0pEv/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1L3CRA9TVsSAnZWagAAMsYP/3+9YCfxY8BKN4NhnUL3\nfvbbrl79uqqEoCwEI3zCb7E+2s3ACdNpI4rXN5TguJAOejx3vygy+msh+UyK\nzjFtA9ADVl/mKUqskEBMdWEeEwgrh7/GI+Vae8L3JSswkijrjKzVbbcS6zHX\nvHqZMZGjS3e02aJX8quqv0gjMCxbBkOFCPNSvcYUWVigX1QoXJ12QekGYAEt\nNYL59qc1nYh7Sf6YU/82SRavSVicP8uFXA+fJvICb4lfkcH+tktHbk8KtQ7J\nJIdQod2LZJF7H96IRRDXdL4ezfF2Ha65xLI9j4NN/fPK/i0y7fXAC7tYBeGK\njKR+w870lDu29rlGfx9kyI3GKTpl0X+MMTtctORcLgnwiJa96LKxlrcIrDaH\nerKJDR32JICe+tcGndpJvKPIv0YJ18inoqoR7wKlG0uDBJl2DHbez3jFoKN+\nhYRQ5fAszQzlkax2Ea1qgDNbB4CQxqp46IGbt2nXAbdb9PzgXDKUHfXwhcg4\niQb9NfQPhA4Ts8aMK33tz1VtLj2S2mQRCSX9qqAgUMCbK5yKhHa/K47h4uUI\nWqAWBqbz8lalKPpxPqKNtneTQZREKAMHsyX6w9t5zAg9wYD6kGWVQdzO5B/a\nmgL/ucQk0ujuk8XZ7IXFaVASVywy2vHC1n6ls6WYaXdXgw/QqJBOzmw/8d4b\nra/0\r\n=Xo+w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/touch-target":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.ccc64eea3.0_1603752695180_0.19140886677131363","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/checkbox","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33c6160d1a3a11e85f671a93d258cc75ca53eada","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.a79cdd019.0.tgz","fileCount":43,"integrity":"sha512-lw7lPZAU35yJ2rJSxEatVhWYcp+npguVhaGWievoH6fUVL+M4UCPOhv0fcnZWc1fTEskfMAt+iGRdxOOkTysyA==","signatures":[{"sig":"MEUCIHMWAzo0+KKBAETe0cXG+/4FvEb3qxZLbgSxZKmM2oUIAiEA/pr0jyTY/+NwyUYeIABUurAlMSmFO/jIWD/FcfQiHSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtQCRA9TVsSAnZWagAAR2sP/1VRIHPFoqpJY6fkhsUD\nCWuiZ7HGQGZmV+gnn5eCUnuoMaJVDoLkeyrPlHi8CLpoBuZGAMIZSBTg1KvO\nZ+XFkYWrmHbQ+35sO3hwgGVfCOi9MBsERqc2fX4XstZhnJpKvf/gjTEKglrT\n3zfMYgX+nn66Ph4kXce50w/QtiTgIKQZJLKqTnHBmieEt2sen+FuVeDMAZ8q\nXDugJqkDHp0hp3O/cFtPiT6mo7PaLjBqy2NaR1H+OFU4zCWBDdBDf46Z2kdK\nqhdPIjjW98gYrGHDWQKsvmoJ4s1OnBfZKo27RQnbPGWMgedeEAU+HYI6fmv2\n5QRTVn8QdMMWelhZeNHzn4ZUd2LU0hnWqQmGBJ7QBtmf8PjyuypMEdZQj9IJ\nVcHeY4zVvylk6NiZVdCD610Lp1aGYLscSsDWt3cq6RKtf0PTJstjXsJS6K5C\nlwG0au8Qm65H6gfoDQ/r+7DmRL7zqFl9WX/86BDxfLgpM2UhKeElUPbmlIor\nsVUU4jP3D/8tJ5fghCgyRlpAROc5xTZQm89f2fwU1sT+lU6HUU8mK4yeMiZJ\nQaK6+Sl5HuPc+dGM57bn0CeF+33ZoLTxF58hEGlD2vikfzZ+P0teXb/jeVlC\nh0X5lSMxMT6q3rKTUfAC679Hz8+igt72MLmneXwwEePVIm8des2UFF7Ms12m\n9szx\r\n=eBns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/touch-target":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.a79cdd019.0_1603816271885_0.09675314946621882","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/checkbox","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.596e98424.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6c6b0ce50c8dd5da65323ecbced8fa85b13b21","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.596e98424.0.tgz","fileCount":43,"integrity":"sha512-C9S5nR0A12jeJlWOom5y1vfD+QOCbC8BRB9PYTLQm/Pp7ndL8V2j9PGMQ6vw9kNDHdV3TBVmB8Wcv1+rKG91cQ==","signatures":[{"sig":"MEYCIQC7Zma9GbH/eRZjHUMg7VByYylnaiuVu4eCW5XEIdfWtgIhAJ5B5K9GdsWTNP5kTLY/ig0zs3AkxLZk8nh0KY+UVFht","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZUCRA9TVsSAnZWagAAx/UQAKBbjRnqPRvk2/fSL0Y8\nl/RcvS5crKYU+vRIL2YBVGRqXdAht1Y6CWlUoUq/VX4OhCVltk516BY4dBmE\nFl/fcfBxEXYH6Rnpuo6qHDKxLDjqmvEMi1fR5Gg7NW+TzCe1BKB/XluvhENY\nfE9UBjBhPF98i93rBxDS0h0xdCMePrwJPgb+tcEWvAf//2Z33YfpERC/hdB2\nxP6xChknBXBUxvD8VWYDO8W3q1rvvOngebvpqzQIUWqwmcTzqs49vM82+Qtb\nA5tFgPhH9ErC5qtqlaLWgohBVqyPGZq+9YH5cQiK/ZfH3QBkKtRi80PLdeG8\nQT0XjGvVSeedpdzIMGt5h0T5hA39wKhcHtda9+cS+vo1c8xuY2EMXUzHBr25\nOI5O+yqQvlGm8drtTd+nqBJA7et2SlA7dP4RbxokQeIuuKl76qPaaT4mI2FJ\nQG+s/KE/h+DFIefeNcBpHQpuHJEyfuhMMB4pc3b6nNpS120ruUK5a/nJtZtG\nzSl8trtRXrmhzEEhWs+4aKtF5z35j7SghFoDQUVAjahxfbPXm4Jy8WApTtZa\ni54U2cCdM7PtzP9hKbo4eT8JIHd3Wb8yW7gJCdALLtjpQXQDnZdcrWUQzUqP\n+3Fcaqv2ZLPg7mhSDx03kqLNu1PxY+dKRRWEbXHJbbWzl1XvB29c35j2tQwC\nHQ5x\r\n=A9rx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/touch-target":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.596e98424.0_1603901012072_0.8825295193970029","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/checkbox","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c87750715214c31dd8d9fd55a444203e9ab2fb96","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.05d5facc2.0.tgz","fileCount":43,"integrity":"sha512-fBdd0O1SgxPceD12lkC+sRbdhT4iXOy5EztIv2lythu/pdmF7kqh7bMrm5AbFsZ2OQ6fheNZQg31NN5Wdll6mw==","signatures":[{"sig":"MEQCICufR++ipILSqs03/5voj50VL2m1SH8xwhqstj1G3M8AAiBRieOik2qVqfFxqXc33tSDHyw1pmKbbXfGwEQ/N3/Stg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhSCRA9TVsSAnZWagAAeRsP/1oKyGOTUenKooduvbSh\nrn13RV7uUZ/6MLnkIA7V1alS9+nerctTOb9wmbLfca0mkmO2dDsARZV5G6xj\ndXZBWppZk/Dd/a0936BK/1CIPPhYwbirPUAtto6iZQgiQkp/wVT9xRGQNvm0\n7/EBO7nNWzaM7cNyEs9QP3SuNDIx6ZqkOIKjsmupytqzDQPb92DqbPh0uXEC\nEd2lQ1FcrQKdP1CXv+NWZf9EImOsfSfRHRPGFlYnDJ1tJ/6/n8IfCQZKRGVn\nf4oFvHdNM+pQfgvWbg6gxmUNtKuMa14P4ulyo8B6tNw372a20qxnzVEVw/Jm\n+JEJ/Hc1mq6RffzgNhg6gdqXgo4VOVR6L4mcOSREF1cX8oGUdXLBeXM1M45/\nudOswmolQ6VzXnMJN2AnMnL8kYWtVHhUdgJ6GNYWXhgeFMRE+XU/zDJKBpmI\nrpIGBOImaFPq94G54jj73NXKFdcPwRhefSQuSwQMzdOAi+dUBjrxQi6afFSI\nM9MPzH0uIlkySLtmvEtescGfSJ1Cfphi5csyo3n5P3hOQrMb9MBvzlBW28Ty\n9mb8GS7Og2AUvh3igHT1JY30eJVF0QGAiwv0XvP5Lo80zlF+Rb/JfWFrUY+N\nx1Bg7syR6LuBeH8g8ELIdBMXBYHxG0l3AmLRVx4Y4NMU52tUgDN5HoGe5uiy\n/c5h\r\n=MPnU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/touch-target":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.05d5facc2.0_1603901521941_0.7269140300930501","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/checkbox","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.291b3553d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912d510cbcbcd83a902b9397c4ed475200c4cf32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.291b3553d.0.tgz","fileCount":43,"integrity":"sha512-rbMOk0KhShA9Old/H67vJEe5oEAuV35fKFkP8RYrb8p+PWcCBOyfIo+DwDtoZdZeMT2ul0mPviF/q2uf79G+GA==","signatures":[{"sig":"MEYCIQCGkUljo2ZQBsBDw+Om3Ww++zoi9VEMTbU3WJR1BxuS1gIhANrvPFttiEPT9IuiB8lcCenEQYQ6Rcqa3jnA2ddsvPoj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4dCRA9TVsSAnZWagAAOUsP/AlNYPA6PajmjTEuJrS0\nZYsIJ1rpx2mRMAATweHVIxpPHB+n2ej9RDZI54ICWK8kDdEkJbhOEmf2L51U\ni0DJAYdlG9+QQTygSzlBGukOhJ2Spjmy4naJJ/iuQgGZGCv3VPMlUh1J7uJn\nZF/MKrtrjmggRHRqS6Dz/UrAcElvkdxgal+6dO/tk8z59rbNlRkck/hOQtAz\nuk4TY3d296kAdF/U6BNf91gYFAYfxnjab0qJaE4RktdAKLrqRRduQh8fR/e7\n9hmN+I/25kvrA4PMn8bnCFANdlSL9FTs8knfnVe8TGL1PmVGgD2ledmXXiTo\nCCBFhPvyIZaKdQZvLUmhcGruGHrx/Sj7jHzi93jyDQj3obTtcXi08hiv3G3i\nkg6cPM88KZK8TRgSUm5nzHkfaSCh7ASsX9eMLSDyoKO93j8vNKxcjOW3HUI1\natS4PHUC+1q/jHkkI2klKkASQ4pz+1ToX47ag1dDg1aqVWCTrra9sJCaS11A\nj+/XFapwalWS1+QCvPfrkeSZDIfxh7/uCdVl6pBJJad4DOWhIZfiu/4aAbvQ\n5SDauSKthEt9L8Y3URlTgOqSFL3k/PFiSv/3rZoMyCud5vtTsTVgGOacxsEq\nu8+/bPuKjdEis6GSMdhpQ8wrvWaSXYKeWwTIlfNdb0PBGmILWs5/F3dvPslr\nPbp6\r\n=eKNf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/touch-target":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.291b3553d.0_1603907100808_0.6944087433845334","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/checkbox","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be2efc3b1e2da9182d7d3ca3af4a720d540aef44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.dbc449b09.0.tgz","fileCount":43,"integrity":"sha512-JkOBzHuGwyQ8M8JT+9PXkwiwUZh1dMvDiXWC5ZbyydCL/n4ibc+UuopLqCuY2H4pYSyoBfP1rVtzHUqwCCz6FA==","signatures":[{"sig":"MEUCIQCqFHQstbK53L2Luj1MVnw1cqzxgO5Tl70TiwN4v5jNNAIgHMxIkUxXpjWCdsUejL5wLvPmVlXb0W5tUn4KzNVFbFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSbCRA9TVsSAnZWagAAUF0P/ifqCbl970x1KdYJ5zDd\nGx/MXkDZKGFT55uaPJ1pyiFiCzoRMt3j8czdv4PG71jccH6WEybQMz8/zkRB\nicVawfdLs1KRk7jLjaOFB0FVl8E+ntZMp4j/RVyP2Y1W8CEB9uo7cjgXhtlt\nTyGLjkNUX9HVgG2s2YYsMdqwyDqu5w410BqWYtlu90tFny+I7x9rgBG6tqwU\ndP4GZNh1fTkVsGpB1UQGI1x8rcdOZAnBEF0HERmEQiIk69/79Q3JkW8fjJf0\n2bOq/U71yZqtxK0qv/vAylLr67NwojOZX93a2+aKfhNoFRSoy4i0AF5sbW7K\nTe8fouF8JKV+o0oieqBc2VyDVK3JgJ+InnfwO3EQaveMd+VE3gBINGHJsGAU\n/m7FhPZegtMyEzzjEXBmNH9RYMKiE4fJbl94kXoK+LT9LH84ZRI/amhI4anR\ndzE2vmGmsq5WsxlOvrL48LWCbi/jAJbC5qvVE+rW3sd85h7+ICUsfApbCO1h\nVQ1DMvYOZYkdf6UXiFf92/+8OqGkjdMmmwuIkveYe/kSOpgpn3tbYCq9QB7Q\n3rqIfR/c8eNuUmfUfUgalo8Oqno5nuiecYHN1+0vC4ihEf6uCIrB5/ajqKzv\nY1nyXAmsHdmw9VFF1ds91IDkmMqNS+DpS+HYiySYIXlggD428Qj16brdIRwa\npgDC\r\n=p7RD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/touch-target":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.dbc449b09.0_1603908763270_0.40427425728143085","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/checkbox","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.4794b25da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef139a63714a4c50f10e1075e0d7c6c5bed6230","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.4794b25da.0.tgz","fileCount":43,"integrity":"sha512-jc3QlLuW4VslnQCCgbFIU5+jK3/hcsA7TpDBiFXNDv4ez4UH+grliLLLQGoGPrYxTxhYA6T7dXS119oivAPcJw==","signatures":[{"sig":"MEYCIQCjXLVw3scsU7C05bNQJL0KXPwQOibb0rFRuWjblW3UDwIhANLe19+V4Hb7V7vjTpTfkYPNvvzUmaCXEh3bL3FWLlQh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtICRA9TVsSAnZWagAALRsP/3ODHr8SeWUMnmtutle6\n2NxiLfhAG3Gf1qF5wZh5MNkSMMvx2lY5EkQyXq6vZokkX+NMYrjZ4alyS0Ts\nCkhiEJrf++uMvOtLhrz+Hk/6o5Grb+LlUf/nWjcKAZKxfbCbeY6abYr8zaMP\nC2A06XFwcwmeSVW28fac+1WH3kyZM63nT9Kh9+ta7JFI1DLzZ7ZLw2PnNXxb\nOQujkSRTfAla1rcw5QqBFZnP6lXaGg35Q5O73H9oFT4kf52H3JEpme+9O2sE\ns9nQIvKB8tioYRAySbKKnQE/9+UtKE1ISTkZ06RNy6hOf7YtPFvdbxOn63G9\n/wwOsPdqEcOB0JBVTKkPOwA5eCVGnh8VJhws7DFUAmHJ5ddEJtoRtAxf4FOb\niNuqaKf2DxFbEeqcKDcK83Km1k+NPynG/u5wmortJhksP3v34vamXX4wz3nU\nQGeEf54+0i86cbYgRX297VhzokJw9ocdkiV3+0/A6J8BtDPQhvBV9N/wMv3u\nQ1IlYkW4Bc64NCmL2R0Qlp8lRnZepWxNmpfxHOoSUhygrH4hdyQDWRStoAO1\nFxkLfi2cX+x3PrEtArVKJBCIr0nl4Z2HI0K6kk6M07j9JUncV4L3McGnL5xv\nc1pLIO/khSS6UlS4luM/EizUQn0yc/4NiMeyRf8UMceLqwnq0YSN8ni32+Lt\nnGEM\r\n=Ejlc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/touch-target":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.4794b25da.0_1603910471892_0.4477246653139375","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/checkbox","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d60d0ae7315feb2bde96296c9af668817ce007","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.c61db90a5.0.tgz","fileCount":43,"integrity":"sha512-Y/PkB4gcWYrd5A37QbhePA56tDRnUrO8+tRaQvazzW7fCn5jCDvY+fkhMjaxGK/7dzYjtMZQEaHjbtfKYRcd1g==","signatures":[{"sig":"MEYCIQCs1luWBzSokbs4khebh1XGfxSDJLG+rUcghMkU5ikLUwIhAOB1vP39olC5TFXh5GZW+KGHTXupwTWr+JSmp2tVy0E6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+dCRA9TVsSAnZWagAAJk0QAIjxq2D9uMGvKXp8O/hg\nve/fiVz6/iDW3eqiwrmPVaVt+TN4uoRnEgrZalSG/F9vh2ShBMc0hPnDVp4L\nR3BmfwmICK9ZmUx8cLB5Jm1L42xOT8k4dvhS7UXyzv1BR6E17mkhwQPg795f\nSXjnj7rmXNMGRLFalkRoCw7ThP7C5O4yHUk80I+WqQrJUk6TofgC1AaRgES7\nhVTD3L6re4z33h5hNF0ScPXwgiaN/jPrvvoVGto+pBNT649KXyBx7GTuo0Lk\nu4K1IZ1GdWCRreV8V7LTPWl+kHXJQM1mmELndicGeDdKZzx17I5A4MijuB7e\nyHlMgnOwcLu+BeUDEqNlzjED2mQnH3RzWd8xtjrMQ1k/SfeS3EMcvGE1x2mk\nVOBRINRXk5S2eWj2WkZxhnMDVmTwNqpmE78L53RGhAOMMWtlrz6VzLnlEqqk\nib0bZ0ZnV8CFR1z78wxSVA1Ly4aHHDnqigLWp/MlGTa5yzMxAg8uXCvG8oaw\nmvuDQzqAX4k/xLQo/M/BOM2c0pQozj4avcIKCf8HEUlLyhto5OopZjJUhAcI\nJmtLcBZcBD4x2jOTNAL0Ua+YZO1gQGHPwHgBv63iCWxcKIBDuP8IY6afwPCJ\nyn7Z9RtTFTfTkO9bwVNJPzDCkWy/Cp1XXJMnVqZV/fMUqyQKRxSKFrq8qjDo\nDJsD\r\n=7CY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/touch-target":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.c61db90a5.0_1603911580951_0.33944311706895003","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/checkbox","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5eb3f259d8479067b8b16a334d5706a45acdf41","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.6d9648ab2.0.tgz","fileCount":43,"integrity":"sha512-c36gSkyTEZ0oIznncK66hcUyMJ7R8t0Cyo9K7uQa+JxpGAjVltR5SimBtJyF4vNboOW10K5jQeGjTb1mKx/yRA==","signatures":[{"sig":"MEQCIA6j0izJSpp61tSFcKm46G5rF53UMtM0ijIsISkfzy1OAiBSWKq/+fR5WfJj2/TMHSyNse8kMt9S5UgQ/hP6E9BoaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybeCRA9TVsSAnZWagAArCkP/A5DMbKCUS4aqgEx0ZNR\nrwxFUkecmODdsoJsGMw0EOrOU0M0rKAvzdgzgWEG6dJs+G9ek+b0o8q7q5fM\nSRUoP8XA3fbbUDjSLmSwoPRmtXDjPiYiWx98t1u6//Iw7WNXW9+USdLcC028\ni292nz/7rnGv5lI2gpOhmTVPeQKrW853Kk2H4I/mJGt0ShG9P5tS3OC6Gout\nQTitihJyiGt+VILTpJ2N8djNodvSmREMVzMUyLG7+ZoajpP2tidJrqr6+Q2s\nYIELQ1FY5TRA0X869y5VfghNP5Y+PHfEULBDJNuFM6Y91xxhnuntIj1/Dx59\n6fAwapgBN+KkLUxfcxBjtOE9YuoMm+INur47xr+PYYDIpWTpvjPUheHmjzG9\nQ/2Zs3GPZFFUBg3JiEQowEqZIqnNNx8egrR9A4hyxUdHsGxg4WM51MTx/t7K\n4wpDkdXsVFet+14TFAZOso8UdNv5ePbKvg7w8gf8PA3ouIHJ5z28GWJlnh8c\nOzA59BQ5EJlTWzT7yNTDLqfq7myWtqzPyE1v6sCCQ4cEjDwb4QR75kWvHTCH\nSKZBtwvvG/OMRVp1tf8iA781XSrTF2C1QN+HxGZs0a4CXzCIjfCNZ8tf7xee\nv/GJ1bWAbkCM1Xmns6nZ0+7u+H1cWr8mrs73vcpFhrZPt6DSAwKpWYcIdUk9\nXrYn\r\n=ziZU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/touch-target":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.6d9648ab2.0_1604003549587_0.18675932104037818","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/checkbox","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.5511c5254.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d3085e10fecd760e073544f2c95554c771db45","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.5511c5254.0.tgz","fileCount":43,"integrity":"sha512-AGCPxnMWOl0TIDaXEz+W8ZtS0YRkuqCZ1l3wMqJWUHwzOhv7ovjUfNZrmWE66BIINDepoIhkQHHLKHAw1RYRjw==","signatures":[{"sig":"MEUCIQDPbObIaEOAq0vh4HCdC0XsBM7PCY3qNCQOy3dDnut2bQIgccg46yceNKfcrSmhtEZceYdr1+FLQ73mhJiFQFJ4v6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSwCRA9TVsSAnZWagAAD54P/1vxRXgeKm23t9tTlQYm\n8+Vv4LmWeXb6LTOGFL6J2HVOU3k+67R49tBnwa1mDIPDYZ/iMDHsEqDlQRns\nbfvbCPHSLJFVRl3BDYizMfsbJpv241/8eRufv1++8e6wFIJ2gGquCbqFp672\n1RHMoKZolJ4nHPdQObDS4EwMbur5eFvAQj6aSoWwQFLy3XBTPqWqVPloDlcn\nYeTp9YNatqmoFHwvTS5Tbm/VtKL3p8qUqh2aCukIuD/cWHF49Ceqeleq1J9f\n28FEgsYFr0j2tpgiggl3cvfPZXFN7TqMgkSKQpZAoOcaHHW+BbuRzqfMHRRL\nhPf7FLpYc/SpsiK8IuzR30W4uGKJ5lQbHqQxii4Kn4ZIliw3G+o4ZhqRvv/O\nQc+KRuD67CRRfeEaw7se6vPVUa/DRdgkOxN4Vbo8SqNfRzFWtolkyZf6P4CC\nQwqiB1+84N6u13skpLx4QBH/iRTbk8w2dL/mc0UpwyfSTf31WQhyUFladGlb\nRuLiSTxnpnbMkwq81DdAQmSD0KJEds/Gg4Ap0eEtF8I6P4yf/c4sZg4TnSS4\nmxbzBw5v6fgdsvBibt0F9Yx+i1mIxy437Uyb/c2TxboEp6Otk7Sl5erWcsQD\nQG9GEulqZzjteMG4lG45EpeqKNQjacv0SvpTrXPbofFokjJwMiEOhSm6sBYh\nbt9b\r\n=HdNU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/touch-target":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.5511c5254.0_1604080816147_0.6049988916791049","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/checkbox","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de157e7d2c61c6f8869661325bbd5238c4d55d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0-canary.bd6e302a4.0.tgz","fileCount":43,"integrity":"sha512-vRO6wM1XFh5r/dR6rkfmkmOPaQFm0ymA6BsU6NssGh0p8oHuDnfu3D7z2m7Mqzdm/xUdtGa22tMUf0tcxrXwxA==","signatures":[{"sig":"MEUCIQChxAecikGBEtCQLMvv50Su/H/mgqO1JMNDEELXhdjSAQIgY+mwpdkb5k5OmvJ9kcG6wlq5m9ERK99kbIKyOuwZeF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDw0CRA9TVsSAnZWagAAEVAP/1J+1VyFXylHMt6EaDRn\natgFYX9Yft/ZZJ6QBkPrWrtk9ReeUSx62Wc6YD65uW/NCTAdmsqx0xRqFzrq\n+NiaJobxhn0RHH6bw4bMJ7ba5DZQbjIC39bsGieHqUPj3mrM9Cns/0X5XCa+\nnO5DFUFGVQ457p5JALmPw4ZPonqldLf7qm9hGfnte8HBnmAyvswHtN6UJkt8\nFSR6/FwcRerV2/jru3YgvVUzvTMdrC8Krv07gnpdYZYjsQpeh1yF4JrwEa+z\nkfmQLI8Jee5S8RP7ld/FXF6+PGMtzudo+0BSVZylliu3ttnsEoe8jQDbtddq\nU3cuCDTYPAkLK0iTUnziXhihF9ZkywuSglP6UEJuAicewYll960HFkXZ/pNo\n2xDN0fNryuOgxpml+8Kao3ULLWUqxpCLGuDLqzt5D6qq4AwVzW7+Jy9oNRHR\nkgI0ZJRqrP+GjZHuQxURuo6jPJa2nV93c5sGZq8G6EpAo8fg5X/izGQDOYt1\n8db0vpXtPiE7cueaDFCQyI4SO94KKDE2c0dXvJswpzXvvB4wpe22CESZs3DQ\n74JHa+1WCQDvgdBLsKgGHusO4tXL6liwEcYGQLKaVI4uEn31h92W4bgPk8y9\nUGQ70//KvwRlZFRfmU7XS6TKc4CeOlllrLUwouaQpxMcUMNH3Ea8XYpCH9v+\nO/Jk\r\n=7wJE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/touch-target":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0-canary.bd6e302a4.0_1604336691866_0.3483195687493623","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/checkbox","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b454d08112496e3bf341b6d9170e723f33138bfb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.d6b5cd418.0.tgz","fileCount":43,"integrity":"sha512-UzlQB20ivb5uC5qIWd3ien00O3s6wrC0hnHL6CvicPqISlG2t6hBnM/8+KOWaB9DpSmXlVEX2FPkpOdQ1jt7zQ==","signatures":[{"sig":"MEUCIBwaxC7tCLHr6Lj1xR4UrvdpFO8mzhdFoarLvrujSEc6AiEAoDByF3UUNaxWPM6yvN/Zv5VvX1KMF67Qz53iRikyFpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI82CRA9TVsSAnZWagAAV4kP/jz+sg4AmR0J4vn7t2HE\n8lm2rRMbmt6XONWoghbSEjeAokiTh0CyBGan27BxG52b/zlAVRsXe4VLzK22\nfrol4ncMfQZSVEk58ui2wtD9NKBu8ZrbsVxSCrEXbEyndpQ6qmUxwP4I/PbX\nHrKOULdYHdjVFPzjwQfhcW7UA+GWUBetIMN7YwBbs+iERJT/Z5Apc8hy7ZKo\nu4Uf6g8ur3qc25jBRlgEf4VtUvC+uFyzig6xiNL7aYlNWhGO/dEJdxMDqwv1\nFgIytP3CHG0bgDdKUqOAQd7+0Lh2hMvM2QXMIezHhDKZ79mOOMTOlYbzCti/\nMLloVcVKc+zDc8CyDZVZtsjJxXLlFMR+3KSRC/AlW500pFOArAOtXooUhj9O\nGt0D4ptoQpRCXUGpjD8kSQ4M7IXTY8d0j8Yo3lZxj1anW1FD7ffvlvbhVbpp\n2MSiysBR2pQmQ9e92DDrVbHEwp0pNcTiW3fjaHONSjBZ+E2USw4OtnMFrfwM\n9Ow738afKAkOzNUqGHWX+EC2v07FUGx6TWI091tQOG8sZiQoG2d+G/vBkLLF\ne4fiNLVrtxwAxMwmh1MyRBhjSVrrCRcmw8ZdYU7vWEYNFgNhp3QiS9POKEdq\nwOw2YRO2peSfMkrqCs2W/8lANJm19G/LFBVSmPgCKSbgttKFWNN82TciUT5k\nPJCJ\r\n=cbVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/touch-target":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.d6b5cd418.0_1604357941910_0.8867382463832192","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/checkbox","version":"8.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@8.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97cea98c4b4d728dadc0e658d7cd15badb184df1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-8.0.0.tgz","fileCount":42,"integrity":"sha512-YKe8ZNlR5K2pBXH2elN8btsqptlSgGq2pkg6q6pXbVK7bL/+UUBiB4qSAZKz6T4JwDf+CdOAR3eJWPheEIOqqQ==","signatures":[{"sig":"MEUCIQDJmKTiZjW04BeTZ/rUmJVW+T7h4iN/e1xz6+r+ShmhsQIgWlGGGKy46P2QJCtumRmt+8vIJozSVG6GxHGqkO5wJJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9NCRA9TVsSAnZWagAAhFcP/0ESpMHxzzMBkFBo6dtN\nFDPDszXsuRmVRcAg9pKbBAIZZbidxTZJ9YmLIQOp9v7LK/0AgK6E8JzNQnrK\nJZnq+P3qyRRqcX93a98mxvS6OAwjFuSvwjG00k5PhEQ4iwSUx08fJfMj96xq\nv5Zs8P67jxg5rPR3+LVhwnrXhAfLEcSnkzLle+CBArOIhN0cNp2F1BW+dpj+\nrzYGor4yJNDfdB1U/OvQ2tyt3dVb+aQobldb5XJhlgUptNNJibl8Zi5vW93S\nUTJd5w9XOANeCynHM/Cqvay4FWA7omTSUBlBvo62nfNMD7xS0laEipCAXY0g\nJI4OhjrxDmEgub5ieFe+1sU3L54tzCNBGNFa4Vsa2bvCeuBBKqgnJes6gpYb\nRUwk1DNKlbXFPb3Wj+FaJtDrlmg0x9rKHfIr4TncKsSgexwJmws4pjdvMOvm\nWTUbXlFuWFGcJFTlhYjv6J1qUNeFofWXljfcBmq5/YBezTGzV6q1FaYvH5kg\n07tNMyTCm000pIz7W6sGInf2gxh/qfr+wOIL8gra9F3l+6poRua/6ii92+BD\n6CdA30dgA1ZmSiL1OcQJ50oe2r1GwoX86vr9qJkK2+CLZwK8KytaJOJD6/mp\nbKEKRFq05+W2DGwBIkFtBjd3FFAjyP9mK8OtretNN3/Ibus8ZLuvz3t4ImtR\nAzJ8\r\n=N7VH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/density":"^8.0.0","@material/animation":"^8.0.0","@material/touch-target":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_8.0.0_1604357965193_0.7890710251050246","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/checkbox","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d8e5b103138ff10c31172557c368a83c3192f07","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.fdf9a2634.0.tgz","fileCount":43,"integrity":"sha512-E8yFZwOna10S6ZbCLyFdT9gXDQTGuwvhVTYFRqyEZnKOiyfDwmjSRvSdWWjiyFPBspxSKIA3BXZ6aOSnil2JmQ==","signatures":[{"sig":"MEYCIQCEWyvPxqcWWWzEuuKuzzely4Fxo4VWFlRRdG4YQ0Qq8AIhAKudnmk9DGoagrT0GGCIS8L1Pb6VppWq4pPf3GwmuB/+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeX5CRA9TVsSAnZWagAAJx0P/3Q0r+0AzeyeeVapXv9S\nyl0YHDMlNYQhT5HwFnIKLS2gb1E5CiwSqZOPktTmggz13ucPTSnqZ8bSlyeu\nqJ/EHEvvEyvs0i/ATntr7jKefL6Cj//9NMjfWtNknWKV2QLNVfsNLBKXsiZY\nMhxlgaI9kPe7U1FUBYiSNQhyyNvNE/IJkw/63hhuoxqxbymve2AzXn4s/PRf\n4xFnO3bj5747WJYB06NQMasQAutEOdHt2pRgfNC6VYKbRbC5Ctd144y6x8QW\nKYMghVZGj8G4JJzClZJWjkTcWcftfR9GFOWvFw0pmxBzStSOpE1IFoR3Pz7x\nGUlXLw8MNuD4yPhXPdECynxKLGHjrlbfbjnWmp2r0+mP3aS43MpKk83trf4z\nhRl+Bhp5ytYUOi1BihUlyT1zJn2HyrGpvx2WqVKn16OLsSLtbMmmvpl484nP\nW5c2WP0uV0HUVGhdQMcdgIO4PsixkgUpMQwvW7CbN8zAJdwnwfzw3QO8F7xz\nVczt/AjzAsTn3Cn/s9oVYJNpWyLyA3IUgrF8NDXRkVWl4SwS6pHwU49WOABc\n/RU/OyKGfWC0XVPVLykKg6eSVb402NFggmPolc/q8xSuzbcuSCbFME12Fzwd\n6T5EgBRJ93hhKyrBMbOl58kRa+gzLLXulUjKuHw2eaL+Miu0IQ3foKVBLAbY\nDLHg\r\n=Yrir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/touch-target":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.fdf9a2634.0_1604445689104_0.3836107736652892","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/checkbox","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1058d938803e522dbc0ab1d2802fcfc3c912f9aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.4a86f30a0.0.tgz","fileCount":43,"integrity":"sha512-jUQn5I/gewG/WyizbLMQI2L2ouTVlvFU99NO0oELXoBZY7qICi0gJ2JP6Cdp+5Mmyd1NnTTfdyOE0G11dAUZjw==","signatures":[{"sig":"MEQCIGIDBK7lhkp2ImDxfx6uPSnCDvXVimcge/wavKnY5GCTAiB4uBLH4c/cYkKW9axnLNtKpoS0gijJcFhceyHpaYKtMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoed1CRA9TVsSAnZWagAAcgAQAIPVuNRumgsTiAOcdgZ0\n8ShJ1vlRJUu5BUXfLqUHE/l/pe34lTKXOdSnBp6yDqIjFjUwvQk35tvY/M+f\n4zCyi/n1RE12LjRgwnuWL1KWq1F5I6+uJRiCcuYQLdkjibrJCg3HE1fz4WOj\nCM/lO5Ex2BIls0Sba9yjJ1Ixi4xCEBX4CB8s5P5A5gZpWjBxMRhkLxY8o4hg\n3TXaq3JFOw7Hed8qroJGRP1SHnR5hwMQ31wzE6UaQTgIZa0whgg4QuBnVyAn\nvAzgoTgs4GG8LvcccAvldEbjFagUyjdEpsAa5d7VYCpOfmQiGhoJxhYbJGa9\nX+6ckqkPTsaglS2lePArQ2bujdeJV/Ebj+uUiHC/+szh6Pybd7efiHjiFPzT\nRxSFb8mDrTcQiw55MI6cIj/HZUgmQ/dljsAj9T7t57/C/CcIslLXmyq7Zjiu\nlXa/0fr4pY0g7kkMFNMKD+5d4uEPWvpefpZR1vgEPAgtWX4FDginzyHj/6fx\n+ZIhWVG8upIQkqdVwarQ2MjPwISzoLfY1dc66Tt+5g2ZDHmeRWyh3L7MkWVD\nFcBw7C1MGmWApszMOiDSN3KGFeKUctYXejJbf34lcI5Y16du8woOIXZwGP3k\n7lNznHgRJ9x83A0Ym167HFXilROU7xjMTSK8c6JuG1KiBoiY3GeSw/S1uXui\nE2xT\r\n=sJ4e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/touch-target":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.4a86f30a0.0_1604446069416_0.8260979019122288","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/checkbox","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35357952b5ed79b1ecb4856188d3a3f9bfe17c15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.fc8b045f1.0.tgz","fileCount":43,"integrity":"sha512-1Qo7tvJtg9Af5ya756NZToyem4W8K0PTF/ysceVOFFkQd+B6Nj4GpLlKQwSfCiPeC4GKbE9jIwz9ettYenUqzw==","signatures":[{"sig":"MEUCIQD1srlidvY163zrfRdmkNYrVJV40bJkdffDkgtKGHKigQIgL7xlW2CHbEcPoXQh/blDlYp9eUCzm0z4dEyMsI88tDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoemjCRA9TVsSAnZWagAAHH0P/iDEVJrO4Op/yAOi4Teh\nBwp1c2IH2HAjxJMkbKom6Yag5DX+8HUgZ0Fli78L5UDVbyI5KnOnvNIMw/6F\nP3GYv8qp/W9EFAhRuP5R2Fs8lvO7m0mxlfvasrbOm1S5bdoKWpvboLpjE2A7\nEj0D1g/rjYp/5uHybS6iUAurc5PqAgbj6FoscpoddDukknWi9VyD83Ot0Hl1\nelrCc+p0mUzXUH9gEygWddReO/ohQGOAdgciHk6SM9kEogwO2klpVHHzBiGi\nKF2Pkc4ZIS2nRWwMaHYNlr6cJVWsbo8jh5Hge8Wb7qpUTrE5HAk89dSaiQI1\nBVhrxEua4LEzFKQ+Fdh+rxDa1AIsY+Qaw4HapHmbnRujHoB6Vt3t352AB/Zo\nM1A6Hf3PDlofpUmRoMy3eFToLv3rKbp0i7CfqtwInbxOOfPVdIH+T0aEEYPr\n/GGHdI5VXc9QIyCMxpdRfVZw3BWhM9l0J1QyDlKCxPKHL1COn6Mcui8i/UiI\nHIAcx8rtW/51TacHtDLOj5qISBcfIkztKlbqGaA52WPsjbeKrKhBW6Z1g7P7\nhdr7vaQH/8cS27GH/HgqQDDSUijEplb+X2B+6RTxZP40YMCJ9Vjyaf6VGaE5\nTac94FZx97yQCtjbmp0VSCBOueC8yfu4xmkFUHUAIWizG3rQj99LykwJEhhg\nDVmD\r\n=ChAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/touch-target":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.fc8b045f1.0_1604446626549_0.3576410156123637","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/checkbox","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09b18353a50e95eb23388c6146ebf28eb50d5fc0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.a0b2db26b.0.tgz","fileCount":43,"integrity":"sha512-9O4oSIS05f010K9Zy3uklUDhIAYM57ffiMyXPJaOji5Y7RtJoo3BH0QZb1/1ZhVVYYBNshi3TpVWefJG45s49w==","signatures":[{"sig":"MEYCIQC6M7UuB2vkeg0CW5nBYouWbKUS0H0H5H3Ko9xp76MeswIhAKqj77/SHn4V0XGn1+SV2KlCv7cb6itzrctAS4XvN/Aw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofEdCRA9TVsSAnZWagAAONIQAKA0NSKUok9C1tyjwuwc\nUKBNJwHDIYKgL79yUG8prXhLl9UW24NBFdEerukbZIrci9YRCG0MHrzhSEBG\n2DwqdEqdgvB4QhO9HK8+mN8dKS+INw90IjtHxbV/P1I/O+0Gk3nq49FawPME\nG/wrDLH8uxjbe1+BV3kcbhAspbbMRxUCNfarsUKqWnJL3kY2Squse1zz7ku4\nYDMkR6llbRWIRWNoDCLDrQccHmwYnT3wrFGzMYWCj3ySQqeHXUw0AF9oSb9c\nrlIpQgk1S95XR2In+Mi4fEFdlXQDzO/4esrogeb1h/wCJWBZfRoZg2lCTxZR\nJAZWrWP0xGpNKcOwRVjwHjXN7Gy/z6IUz5qTlBv9e/wUQrdUtQX6ujQjC0eQ\n1GnelGVBWj5QI8qa4QgtSDlqlRhkqMQ2Z2wOnhoWqY6G1tw5DO606uNA12uS\nisZT5vtR4vbyQHUOw7N7YljWYqDEw8QkoX85YSAxSbZU2pYwUyRdgveYXrhn\nczM81WJHYrCymXy3NzeOvozDdQTDmpbs7T2mUB0Yqei0sq2H9UcW+bc+OtqJ\nL0sB7Q7wPgopLd0hSm6wS4PQwpI7GrmLvSV62OFavgDp7a+QbY/I4z5/hVif\nn1N8H/afVSQz5IFPelV/2HxF3Xn0v0GT1/ma2rdxGpO2lz1Li242Bob758my\nD87u\r\n=GAHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/touch-target":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.a0b2db26b.0_1604448541420_0.744326314782304","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/checkbox","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.419e03572.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e8bbcb38a74f33c7ccce496cd8978ee65113da","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.419e03572.0.tgz","fileCount":43,"integrity":"sha512-kniG/L3+4Ls3HLtKwndv6351yTnXGsSbx7fg5A8fiAwcn049FwxYHGYOeE85fbaSU1DxISbA0mg39oqTa2ogIw==","signatures":[{"sig":"MEYCIQCVReUTkL6O6gfCUTfqn2XNmqXb2/0V5A103MIcEGfEewIhAL78wMMBUd5qszR8/7kcWK7X+wiLQtRFMdcUMOJO5i+1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTPCRA9TVsSAnZWagAA+88P/0ZFUOSgnv0dF+bql52R\nGTH1Yv6c9Xi4eFwWKPsd/LPE0LpklfM86cuZz6SHn7xkxRCnXGmUqOQJquNk\nfqbujj9UW+788ragAFc8gc4RUK1bCB29OwdAwpU6vV1qxWgDEc/M1x/FAPy5\nkPNdzqUO901zlayfZNiv6GZhh1sP9rm2O2YEcfBm/OnHr+GpVrRxZn+f8OjU\nJEMK3a3Vx4jvGtkuw0n2DOyGrkGGP8F/FIhSBAJ9YsI9AusCesw8TD1i9D9e\naVcKRF69wcCOg27Mcnzp1Be59AIIvDA6uVRDzw/5C1HNc2/+0zAHUQagqt7l\n3oBEK7fDRc5rr4dSIsBYtHFGuVTiGqT89swoezu4FmEoN+BGE5kz/nSWLonr\nwXN6gu+X1yv1JOEH+NlZCJSyawslZg7wOsw/cRcuUGFV3r6F/vZs+YV4Lv+M\n6aCK34u4gzK8oyFAayt40vz+WMpmzuBR/hJBvVjCcqBntp1D1nl6T8ORKXJM\n43b6VH1Kimc//nkCMsnJEe3t+YpdcS7mWKu6rcyE5O5dE7LwJuWWxz+VNY1G\ncLwNrbl6O0GWzWaAYAcWQCYY4LIYk3zjh7ozPWfr3i6AStvkYKhgRHOJkAot\nFbfCHbfGKptsWCes67Fhs24rGm8fqgCW2XEYS9709mGMuB8h2lAzE/B8vyAd\n/rlG\r\n=N+OP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/touch-target":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.419e03572.0_1604453582584_0.2277529703921981","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/checkbox","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.a432ad542.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e78bc2735046c504bc7d4c1ee2d3f6306b01f423","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.a432ad542.0.tgz","fileCount":43,"integrity":"sha512-PQ1eqtx1Qb+oMoInbx7LEXqhS5LQdlVIyJvLTVc96vADPduAbvwGtibuKIIqI/JE/jhrhHvABOgQekMGIeBkcQ==","signatures":[{"sig":"MEQCIEguffsHQxzWWP9Z6WI+D1rt5H4plA8JZrcSYLetwGbgAiBb1udxXX21QzTY9XunqD/9tJyVujDWHR9o0dDWRS7+tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrTCRA9TVsSAnZWagAATR8P/RrLNbRUfyzlgB724MOD\ndd1KWqgu7hios6Yv7mgUW4eDBE/EOy+RmboTsuxex+EwPyyzedHlzP3X/Y/u\ng9s+ZbGPFKSnqeUYj5/sq3TwU2mgtSjNvHHa9uuxz/m1AJJnaH3dKCh6Jo+3\n/CYTqxPAeEIrYrY7XUAbxB4pxdbIwVPrzzNI+7fhyDorYW7QqZsjHNEMhLF9\nWbVV5wVLsj92nTLyIpHNt7+kdHVVjMFsXRqQjKPU/XP6Ht51GT3SGst6s6SM\nurw+BwMMi3ZWDFxScF6mbUF2HkTCWCiBIRfiW07Z+c60Ct8vqb8aKuAQMtDC\nKtPMCb88I+r0WG1fFykEhtA4TV0GaGrO4Z3SBIAFweTOoArlR02YhCPzkNxF\nmH4goTyLruDaXru5OS6yfedE36g/0S6seXDQ2AySnbqDo+H6athhs4k+HviD\nQLYKqRET/cVZq3dEoNEZuqBAOMRrC4X+rwBQULVVkaR85/cwD4tCT8oIFfeU\nKfiPR0Fro8pF8A+aUabOBxszk4Joqs8nWc6q/eJNrzaEqkCRfx5GU7YhmAQt\n7UFDFaEryhIwcLzScz3PivRU2dSzF0uji6EW/A2wx2tT8p6M72g9kSgLKgSV\nYnedgPdRT7/S5jOrHNroBvdvnQQ/J5VyHuOcfKg4w7vYrRPkobHpM4MoIutj\nPBij\r\n=MxFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/touch-target":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.a432ad542.0_1604627154337_0.5116281203494284","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/checkbox","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee2c4cc91725292cded5d3cb79bd72e521ba6ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":43,"integrity":"sha512-/k1OoykAcLRBEdHsHeMcpgFVoVr5gqIee8urQRZ9jlwMbyDye3+zn2cvUIZXDXq8aO2myrGI/PpgARy/Jyw3sw==","signatures":[{"sig":"MEUCIGVyYiLUa+g9q7bdPlF3AZvBElM9/nm2JQfxkFsGBPazAiEA44KA3Qdoh631P3sd7nD1LKjbPK/X7a9w/SgIdincscQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9fCRA9TVsSAnZWagAAzi0P/j6lQCyuHLVA7dW0Y/b8\nvS6bgcNiNpJcCYi5m5JdCXietYPmOqIlwVOEumQddBFR46BdrZ9XAKWbHNdR\n/7Jo1YC1lVNi9TdwfSYE9xrYMOsU5IaaABk7P4Xb8GbIhUZgfIa2/XHeF/Io\nn+3n0W4068E8jMaCPWLbaXV/IZUb+MLX6LW1OkviR5cLBrRHNCzYJjWbUZqw\nVkv36caNjjI7hNPy+lefiykdT8sVsbEqL5ZCWd8oJrWit5wqEtqeceSFULCl\n9X1SS+YnnWeqGfswkSGrTjx8bfWFfcapB6PIgrOEyJmkUoQJ5o0fgbP+NvzT\nU6TMokoEz7JpmDOWlpGNluop96ZZwOApJ4ly6Z8HBkr9mbHh1mibz9HSwb7O\nkKFaoQU3nFIJpWSrgKhpk9UEr8L8Cjoj19yVaCOoxG90IV8tfvGFgsXw2e4d\n20TAMopkLbOtSwoclpOQ1gmklr6je7jECsMdq0MfrOTeozY/Q39UTWNdyOJQ\nQkp85NpWmL81OeXbDsbEhoeBZK0AZNggEe5symVag63zDzoJ71RIbwdMIObE\nH6tFn6ibtx+LqoaFl2YQb9nD9P6Ab+VK6p4IAKiFo4lyQWCNitMrFqdYNuBd\nkOGBmR1aR+L3bMeA3YNVD/v1iuyA9z2q8exI1QmoonL9CNCRbP1UFuB82JVu\nzX4h\r\n=5OFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/touch-target":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.e2e8aef1e.0_1604628319059_0.24736831971891005","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/checkbox","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"998791885fbff27de1be1078529d6e34ca02aba8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.ec6b68b34.0.tgz","fileCount":43,"integrity":"sha512-KlHMsUR39+H7V3Gb1wF3nWXPN8qcOn7X7yyIfVAqj7SGhFJ09Y3Ude4Hs7aygs55MP3h3ebobAvX/FZNvzJUoQ==","signatures":[{"sig":"MEUCIQCcg54tfm8i1e/c2YVr0a3TRf1ZZjdUB3jwdqrNPPNr/wIgeDqGsD3HLQb6aDWZkZlaVNrUpgwZk0Di65IZeyUN888=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxfCRA9TVsSAnZWagAAMVYP/Avq6muFxibuUVRJGhK6\nG0fHSoAAcgfScTDyOR4NIY3HiMmbXf4769s+0gHV9LN1D0nFTxMuqDv3Dqgj\nDOt4UMACj3Pv0lTDCK6nTNqs22gO/i4730Hp7LQYUV7vOV2pSWSbGUwUW/pa\nSTRA5v49LE/fE+AaSgYVl2QFtgusnYWJ+66ospYl51aXve4vXlVz7WqszHwl\nHy+XTY5uLU7SDFfnk+rD2tb4vfJ8dH7VaP1IsqpjS4Ml+5Vj2D5g6u5844hS\njfUYljM73twl1BUIJta0jEtOHzoF47ZMA5LwfnzqDgY9vBclYB0GUef9dh5u\nUr/7lgM0pQ6Gdmg7aMLynF2UKY2zLYOj/dkhdI9ox6Vpw5v573X8uGjJCJ+c\nnt8wjxz39KkFIG9RX30B0ZXSnRx8jmYo9gA+sSIvJDIXbeSaXFhwJsFHQqwL\nnYpT6oH8H58YII1CqKb4K7iRnjHDDnWh2HOeXkAoFzFLmxqAlqtJ6wJP3HY8\nULa0bnrKJZE5oF5R/ub5Hq19yoz4sr34NPmEhm13ap6ZAIyyucgiGe1JX79G\n4WAfooa6s0HPcx5vt8iEUh6EqWeHafgjtq9tplCxU5nD+W2G0JGsWZWl6wfi\n6w6vOKv0+1KI0yXLfFdjMv7dIfDhHT+C8XKd+700By87GRg532EmVLbMDTzr\nDzsG\r\n=qOKB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/touch-target":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.ec6b68b34.0_1604688990623_0.8915012333746575","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/checkbox","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.b39094d14.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e129d3548211031a4b9e803a1e3938d4c9f1a3fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.b39094d14.0.tgz","fileCount":43,"integrity":"sha512-5mSI5iAHKVwJc24rYmO2NkwazuNOYIXGfiPKEpDNAj3ADuSnSAWcxVoFsu120NH48uOPKIRDnKyqMCZUeALqhw==","signatures":[{"sig":"MEUCIQDuaQkN4VBLr2M1crCSxo0JRO0Rp63aH2DBUTvPjouxDAIgeSrYiMVPNWtnlO2vrTaaYafJwS/5O7DEtjBbSaWHOAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0QCRA9TVsSAnZWagAAwQwP/idMlURe2jpO0f6rrULX\nZpJoHMs4QVNz1THJJGs3h+iMGuzxqRWBZL7tk48UAkDCqDg0GB46TX9e2xLa\nkYzE7qbwH3rTKHoBJZ6vPE6cc18zSxtTzpjlmmqpeORDr7ZAkbHKlSgjrwAv\n68vFhnRZvXX9x//30fW/U4LnzTDZUwjjXpcmqGrg5BonI52jJVSn5+SF0FGI\n0nX75Rs3B/0eEgxNzPkWH58+dlIUVwJKEPw5leF21lDEn9PkIAHK8ZlnKwyJ\nd2GQTlg13Z4kCSIHICAYS0rHK8Q5njo0+3tacfVQUUf/wa6DeqqcPAxvXM6N\n8cXyGcxwJvcUOcsvvte8chijA1ZnMhPvWQqS5bphrbLF9bXjByHTOeM8ErFG\nu47as5DjFVTMPI9wAjvIEfEyIhP/w++2ce8IsxYs/mLQe4WVn+6TmMheasyN\nHrz78OpOYzf/9DhlioKmP8YqgzgeQc93SBNZecWxC+WuwcBBBMUwC4oJ3CRn\n1pMk4QoeqNY3UsZyh+netdCw/EQdEtjuIhjj8zBBKqm8dxxHS3BY+ZaTAOT3\ntTHqSZfEwvImHwZ/OyUKay+ifQczm454SX+SMARpMLiyGCVnrzlBb8N5qy/P\nz5QpWM3sY+IOvGTMWQC7WJDSVz1908KZy3PQP9NtXAdtUXZn6/kzAQYqwtV0\nXHTq\r\n=Z2L/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/touch-target":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.b39094d14.0_1604697359844_0.11603760757432635","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/checkbox","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.8648b8258.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"845fb5ac4106aecd921e1dcce00f6334313e8261","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.8648b8258.0.tgz","fileCount":43,"integrity":"sha512-zOcj7Oiktlx58J9Q0UZmaYMv1N/EKqVoENMQkQYi3WiSVleCAfZ+Waq0kRf1yQ3WHnUQG4WIUs4KYDiyFKyv0g==","signatures":[{"sig":"MEQCIC7U8RgEJNfM36n7K/E3nK0Ow5Ueyhtu30ZABbqDKD4FAiAGR2sCvYcii8i6UvsV9fCF6AT0QkDWL2DkT5EhEApnAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIUCRA9TVsSAnZWagAAXJAP/0BWaR7NtzoltqmsGrSi\n7jaAGaCv7pZdIKl77Y9mMlWRkyknFXdN6yFHqqO9g2Of+ylZvHZgNbIGGI7h\nlj/5W/uQ+/3fBYXENVRwSW8gcPUivb/yr3TrofLDzdW9dRjxSA8BSjbhvsSM\nhe8IWKA/sDXcjz590/g5oaz/Ti0BC6QqCiG4e4pM56GVsx14FOVv7cNiIXVT\nUD421Envrk6h9hU0k4NvpVd8FcDJWzizAFWWKjGiHza4PKmSd8Txf/Ncdul/\nvq9lmS1XulLD+XLeFB0BSkhrz1bONuE4LNdXTX9lii52MApviRgZ1p/8PJYD\nNXpqEM5MAMb3uF6gfURwEXUwg/KvS3eE4rhcHb21SyLsZCNBKYm+NZ67K4sT\nAKn/RwEnUdMQDvK06ORYxgoWmskc5gijz9r69YYQ640KJ8rNUbGIc/QoHCK8\nLU8LYkEdpx/mUOvyCncVdhuL4HH7kZvIqu1lsecxNZaYr7rTQnh1XrjcsZfN\njHxRB+I4D5oBTPAqjzQeY3c2OIDeXpzKe78uSwtdAQDEJl+5bB4gcf927ZCC\nzRnX+QzQgQjjTweSgCZQTG4d8P1x0EsXluszhmbcAY1JD923Bma8M41VRQOP\nv/gB2pZ2zZjvKyh9d6UEXloNCRDX0BLckJ5krdLbtrgrYUDN3AAxBL5zEJtq\nVnl/\r\n=LPLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/touch-target":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.8648b8258.0_1605177875534_0.5507960819960471","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/checkbox","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e119c28979a21d3967fd183301ae682daa2f73e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.240c5f74f.0.tgz","fileCount":43,"integrity":"sha512-+DfXMW85jfw+VQgmMiRtRlKSC/U/s/p45XATYqqmCRHQpbsG9lhIT6m900Fe3VB3ujfscud1wt/lDP1TuFfCig==","signatures":[{"sig":"MEYCIQDlQmcc5PkAtJM3TXSj/GKGkMt03TyN+/3K0noDPqjWXAIhAIxhUDuD8wJicxyGUWCJF8AV2YPojI1/F+QB8bDd71M7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkVCRA9TVsSAnZWagAAGvkP/jodxg0HSesSj0KTiGQt\ncO2vkGdvGf4LokaOQJMq9iaNO9h94MGIlWnPAaXyTWSpVMBj1DfIkhZl/ulu\n74AEXRCzPScaNBckbg5gDTFJgTLOJtgb2SQMk7kcL47GXMmXfIUiZ92y8/o2\nPPPivFRtolxcMa6Rubk85yR53dlJOPOK4A2EzKg/M6JT4aTOK3y8lvu6c4Z3\n9qsyye+7t1WV3qtU4v9Sokl0eD9FtePyVKA1cXM0K7OkycG+fAJzJVgoNBkQ\nwH2ZQU7UlVNO5hIiywp08gPwcJZKUfE+3hWOAoC/HRxZqEPxVYhw6GswVrri\nfobwEyB/2uyyza7x9btEKIyc8v6qe7T+pauyMK3sg2b6ERWFqZ2wGdumgIBY\ndY9avTmSoj1M229P9cZyH9Ovuwav+Ntlxnipn9nQMWEMetGjoY4jjtO8bHcN\nZA+woxA5Gbg0IlgX0J3Mg5SW7Qub6oduYwfRGX5hq9s8Q/I52VrjfobkRN06\nQNqSk7yG4N8U4gALFo14qg4Ny+0MIQFsq8QIoBECmSrUJvau6U1c8Ag7vNOT\n7OkFOUDtHmLTHMARkmbuntzIPpaf8lpOxnv4+3dNkwynmCswnIj4B8JP25du\nNnjk7fPdq2CrZ5zhrY3RJK6sNihilNjoR1gZw7C68iL0io6z/kHvNTC0495o\nbVI+\r\n=zKFB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/touch-target":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.240c5f74f.0_1605212437080_0.11385983487098272","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/checkbox","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c20d043de35185acc4bcf34da91d1774728385e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":43,"integrity":"sha512-ZhCRfLgExMfZD8dMkCFfQ9C5EbV3T1Cg9IBqgZY7eufXreK1kCAJDEO2HwhTtbTN2i+lUDsUXbYlDjM7+S3jSg==","signatures":[{"sig":"MEQCIGkuIgt9rS19nLSC1xuSwtRkjXQFBRJn9pMfx2cM99ERAiABXZg8qf+yWvrmyRM3f3l+FC4FkGnYcu0G8gg+8ofTQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnXCRA9TVsSAnZWagAAwGkP/iykaWXqAbLYEr4W3o6Z\n4+wrGo7zyDpAPndhq8H+FC3tSbt0KZKEmqZvgO6YAT881w5VEmrREbKhV8Fn\nLuBQM/ajXI+Sma6XmaQIXqxpdWjFKxqzUq3B55v15rotcHLC/h2UmEfJKqvl\ny/LjiJjJ0tqZYYpJyn6IUA+Sm4jamZ0WW1H6LvMgP1GJK9dhlkWZbiBdp2kE\nmyEEqbniujf4YF3zA+p3AzJSpNPZA+tRz0smfIORVJ4QSveGQDp+28mu7/vT\n4sAkzkgsf0hl6Pito9lgeLjGk8+QAufmq4xq9lqo6Z76mPUtkw5dgmeEsMg1\nfOu4ZpIWRkbEfSiRn7+uSFQL0h3PChVb3ahgXnC4g2jBQu6cOYVk7MD+Fi2z\ndhsk3v+G15u2jKguH7lSU2CWH7IfGZl2gYAeS2/R4GOZshXE11qk3fAd0oUM\n5zW8KH78/0aaWt92oIb/hAtxulgrEgcKfydE8GNtphk4nNBoXc6KwFvQ/c3Z\nI9QhLaWc4vqRg1GUIZrdW6iUBH33uL6cSvPkt3sbuAdFVVrW8BAVgVQzL199\nh0TLbo4K2oBOKyfov2lhGbKPFy10S4IlNArgVrH5Mnpq1ea2PtBoHru1RWcE\niKhAk8/AsnfsTdjpYpRY6gUMLHhCecphDCWU6zpwfseJCSlP5QYfgwnJ7mCA\ncEiW\r\n=W60M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/touch-target":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.6cf6ba4f4.0_1605552599271_0.9856952079939225","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/checkbox","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a23389496d74a751af40f952f1c983b981c228ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.07f3e01b7.0.tgz","fileCount":43,"integrity":"sha512-1ElYWLSZ7DvLUjdl4CUbI69OQRqrMMhAwcrOm/M3izI5C8pkxrcScyMuVQW0/oXvq/mxvf92vOgkwEL9SGJxgg==","signatures":[{"sig":"MEUCIQC5b3YKkgPhKErgz4EqlUxSKKOcCJT8zdpvaxv+v/P3GAIgDkWnyNT/VvQIMVuI9Z9BO6fctrA/i3FeRtQSafJR9fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMKCRA9TVsSAnZWagAAvc8P/jWw6ZFdv8fG3OzmHmIB\n+p+KDVwE8+OJhy5qNC9IIX6qbY75VbzqpQbgnr8roONItjPkyAi1Gr2NEAKk\n6DfLIMKklalBfyh6n8qimKgHSsdowX19oN6mnLxKl4kmBZlbBPS5T2hRHmoe\nVSkr4lJy0tnf69J3xlBSWym9u419PalhEo1+8BIVO4P5CzeTNRjYzsFOzuB7\n/Ujp29D/3SpShASlsiFeGa9yjHERERqoJV2MW5C1YBE7W7G7xZp9G5VeAtH/\nElGj0T9FxvYX2xoyVOAaSBNcjonzqVoUDneyYe3KtN937FotZhlptV/4KQCk\nsnO894CzdTzbDeQpJYORChxsWUpPuAFfyo0tzsqIEQbOh2Ox5RxN4DKm5hNh\nT1NhSoc9iMKyUNoHHeVDZySpPnWgAMpRtSX2Y34r9B5Ph1GukMAn+BEyfzhO\n/BdZNTXxsmN0VF17UMmCgZXoUZ52yAjc6cBd8D9j+41qaGauOPzUXpb+Dwiu\nUxddG7jmZ2cbYuP0UZ9fD3fXmttSdbvuLFyFZrjlFU9yrzfqVAkFtY7EC4MW\nt5EQL1ICMpiDv8BiAh/Lj+x4InnL26DYaOyAk02XJsdo8nX/chzrEvVPVlAB\nsyqHzqKMkCCHJDmX+hMmVZZzxftsaao/mUq6JAdNDQMFqSbAwcX9+497HFoP\nY7JO\r\n=yQ/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/touch-target":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.07f3e01b7.0_1605563145619_0.14081689352525295","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/checkbox","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.23491cf85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3522449903b537a676b34a9e640ea0a7582d4b2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.23491cf85.0.tgz","fileCount":43,"integrity":"sha512-6ToNvLE0KW7zk9MUFsVhxTh/STiVzvSAz1ZtaHgTyzo7WOll3ir8ejs/CaCJEf2/6SGmlWhr4Zk0qaHibPuPow==","signatures":[{"sig":"MEYCIQDmqlDJK+VGt0hEF+IF/llGSCJwzgjDaO9WYOVQSAkrMwIhAL6YpviG3mBWWHJA699FFy4uoi0aOtVoY1hX15U6hP3W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaKCRA9TVsSAnZWagAA4xoQAJiwAAOB7sCU+a93a1vA\noQs/fHPWwP8oTPXbRhszKl91QjUqPSXUbMi5LDDB2ty7t2UobgBr+7lI73pb\nGcLDXiy00DuEntMch9qAHg/h7Q0ymTfJRe1L2SK8fsCRMJidhMSFb0tVglGi\ns86vy2WPG9fQIQwSiFWT0jsVPj4bFzs4Ps5PidfzUZBkOyKhWJvXUECZEYdY\nMnwb7Up+ZcYIM+2XFJ5i/ZErHnszlDnPib2F5y0mhyEZo3iQMm0BRbTLau6l\nqHHWmlK8Vru6HGBdNW9vQRkUa9F4d+DCP2VTvbugnrS/+xOF0Lk4ZbXXHhXw\nE1nMXkylQvYP6GpAecohI0JKzNITn2e3ThtIuTOtsdo3bjpZnF7A0AZ6USam\nMXYonp3s/Nzq/3vScJuiAlyC19qjhqFFYexq2AUCxT5NWrJtvDHSs1LVMeB4\nSXSnJgDJs5PrhGBstnoTmgips5ZZLzo3FQh+z83PPd1fv4ccTWkxLPQIGQDq\nipXRCL+VjC3VqcIBcSY5DE/wFkJYTHtDret1fOD7hq4w4eTClJ3LI1kosh24\nXsHKkz2e1KYKH8X6mVd1WBEokViMfA+pM9cK3ggO4TEA9P4fUG4/rc0fr6dz\nRQgqtJ8rdMKsH36YtmEMvfamWdHcK/s0upe778RgRz4RnC0TfvxB43GIavRW\nMD1y\r\n=wbs3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/touch-target":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.23491cf85.0_1605572233741_0.9947301014128047","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/checkbox","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90cc24aeeb8d73076246f41a50dae946d2b38e5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.b659d4fc3.0.tgz","fileCount":43,"integrity":"sha512-723CsNx2OW0T5KyPeIpzC88q5Ogq3z41r5ytY9UNoq6DPnBLWBKj83rx3QsxWXBSHa3T/saQDpjVVtoduT6ivA==","signatures":[{"sig":"MEUCIQC3II573jU2rWe9+ycK4nP/1m0t5pqg9hRIq71W58KZPwIgONbakv9qelUwgn6m4cf41fp9uvuofKP/t9czUtk/k3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhiCRA9TVsSAnZWagAA1E0P/1w+40DLdV2aWjyMqu+t\nw67gkB9BR1MNBb0Rs26wlBmGNmE67/33yFXZmy25zxYc5pFCNDL6rsi2OBnX\nErtSBwlsCw/qVoKyRcAC0cMfH5+agmQHy5ym8DJ+yYaTG6CcsTIXNM0ghVZE\nfDmPnf+87TkQma2yiLaKvRHqH1biluiw11DGzopE8ii9QkIE6xI1u+u5n79L\neFuXbW49Th3YcsE11tYJ9OAGyp85wGaBBoZyUiqxN3JOuGRGyfiQ1BunDEcu\n7c0vQkKQZzwMqOcQNI3RkIUv9p4eY1lPnIIg3tssTm/ZnAwJAdYD/OaipTCU\nENoeCP7zlGXkVuJwI2HO4tuWPuw9AGnz4zhlENZxUyYexvXVY3dzF9xZHnfl\nRKXMz4cB+ts9CgzmVG2KqlWOToEfQ47edO35ss+mwAjlyHo3p+cxy8olJNM0\nyZTKIZYd4RnINVmk7oFewufUBWf8S78/1vfvh5kaBTGH3HdLMWfxT3zJNk17\nx34CGktoBpTX3p0tC1YMNKprkY1ZMYDSTO477JtSyL/0dtsvKxFf//CILRX6\nCw1s3w5ry0zSfQmLxLc9qhcjjj0dXPt7a1xHVXxkK28G2jsy/0RGaRhCGYoy\nZOGpVcbc9/plPGGpdAn/A4OjMh0srsFyAVFeQMYxsI26wO2taGsevmypLzFu\nuXf4\r\n=CeUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/touch-target":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.b659d4fc3.0_1605572706403_0.7260826197991519","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/checkbox","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"855d07836cdb6f50802db34bb393f584f8195682","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.d8a3aed67.0.tgz","fileCount":43,"integrity":"sha512-ntNI1roK3Q9atjp7mJf1IYjfrW0VeAZCxn6G0kxdKJoOOubxnZxiMOZZUegFB7xvkfU5Mlq6tHmojvYyW4jGZA==","signatures":[{"sig":"MEQCIBmC9eyJf+H1okpPCeStSwu8WKA4j8AMbgwiEDjlmMbhAiBjHDel/IGWboHivcGtXOlLKQgvlw6e3F6E46G0BnNOUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+viCRA9TVsSAnZWagAAMkkP/1yHWBN+BRR/5PcrdbtL\n4Z9UjYsUJTb/ZBJQReO6TeO8mWJ6HT2Mvh6eDpXM0TlfDzOPAazDxEgPYQgQ\ngtoyvi/pRPNtoSlVL2I29mBg1vLBw/MiFrHwkQVCAd3mr1yrSMjBRchCx67V\np0kRZ+QHmhPYxHn9ofacjQ5OadzAj5g1bop+YRXwUtd/ahZEZ2urFVP3C/gz\nljiLYnwF+PoU5qXCOEz64v6Ubi5I59OPP2nJcCvYMhnitPrZODruzRNC29fo\nqrUsyeXUlYDD67Am/9S1J1Jkw0xNYtr7LTwXQbTyjlmqNeF60LFZm2TEYhMH\nuXJ8ck2eKCN9mz626vKBA511dS1uy5E7FaWdzuQSwjAh/ZOhe/VbcVPvF5je\nWmRiTQG3chu61G+I5ho5heTCa1+A11uvOjI+4xbIl1bpgSFydkCWiDUMMgxy\na4tLsQP6ACJ3jddufb/wDkHaMEcZZQKLtNR6o4neoFNMfQrioT2P3Fe6g/3d\nFr8swP/wmfm8cBSoXcyacZnAnm/zA5lqmW18NLpIm6wBnLGg0THq0n7vbUP8\nnqInkoSYrqYS8EK50ESV/8nfTElrk0uZw0vn1m8bdKyQHCO2bpBQqO2Q80Yl\nV3g1uPo0v0auVoJgSVnufOcEf+v/F52GbXRfyBOqUCqgaROxeKyT4YsbWjm5\nprqU\r\n=uxUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/touch-target":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.d8a3aed67.0_1605626849824_0.67091399679688","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/checkbox","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.482ff9091.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb8268c5740f39a2783b46220f445e1b86db361","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.482ff9091.0.tgz","fileCount":43,"integrity":"sha512-yd9UpjIAr2VuPDbJDqgT/vMkC03lwYv0+nqJLKUOjn1/f45hrByWXP7pJ4aNmBv/iQWof5F0Sj2gu9F16ze7xA==","signatures":[{"sig":"MEYCIQCecmc7PPPGACw8pv/Z9Yy+g55GRntAKt0b4yKenl8pOQIhAIpoPAJAp0SD9/RNl66FmWh9eBczDIdw4MGHlouVY8Ue","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8qCRA9TVsSAnZWagAAAoIP/iyJ6twt2rTsU/hVv2+E\nxqCk608BPJnDjSuDf9d3Wh/h3PeEUwI18UfF5aJlqG8IrEQMTea75isNAgJs\nq4EIVITteS58Fztgisah8XvA2DalhGhvkiU95bC1B4UaICD3r45MnvyBhvJN\nbWhTKgVmsWzALnByPbfOgNmPz4wpjKgm3wSRsWwvTaSu7yQmvKxB9Hz+7j5n\n0pfILPwNAJW0QUxSBGfxuiTg0lJCcy6OTj/H+8dYbLqZCJu5ecUyF+CNbw/7\nidU2UU0znJUjxHWHPcWrPxkJ+0giWvgSoyYp3jyG0u9IQTYdPktrZ/+TJsBx\n6vGit/pN1PyL6O+x1WMeQs3LbbR6p4uiiqkoUyDgNsz8HHauAgdk8LOX5Pf6\nGpFh6HydWrkMCMWY3yOUFE76sklvlu5mCACL4iNCM87d+a85Fry8SXtwL6gt\n/zqLKcBVyKve81c0UwPTBmpdS5R7Y6xkT+RC/Ad/5Ao1tkR4w0ynjJjF0EsZ\n623dNtK1g5UwtB9OoVyCjzICw6WNJpItZRDnnQ+aY/OPJP2OrAQHMaCjs8wp\nG1Ru3irJC/xrxaBEvJlI+mSzizn3QdhcIzUX0fkzkmzNjSnX6PlMQhR4EWeN\nsXGBJGm8jeQ0+9jMyptEmfdYT6StYtaesHzttFuTuyzzJphUvE66+29VB5HG\nkJp2\r\n=1KJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/touch-target":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.482ff9091.0_1605635881566_0.5574518786298537","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/checkbox","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f6c9b4155481f23304777a980dd4ba0a97bcb00","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":43,"integrity":"sha512-aaytYcYAA1vOS+O8wOb6jw6MnrqGQ0ndMv+2QR0GAk2zb7cp4gLz+ZN8Xdtv21xY5vuOR78K1C50B1DJhf5/+w==","signatures":[{"sig":"MEUCIBQQWxU0BGSN4EdxEJv/MGU93/1FNvWHmgf86NltE01FAiEAtYYUXQKq/Jg1AGBK1V/2G4N6NHaxKRr5zrsdbQEdjGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWthCRA9TVsSAnZWagAAiTcP/2KAwIcxAq1icyZwwDY0\nBKdMwtKMiPD6tLxGSWiMVLenry398z/RNiFYs45PqCBRK840HYWATQSkYd5z\nssWLqzvmtU2UEZron700cXUq5ahmhosGdsR61VvvBLZyOhhSYBb4OFf8fkV2\nC+azXxGfWYlfCdWnQ24ePILwGtZMUiiKdpjHfDxnDAO0GAyOAGf/H1e/ad81\nC4Kuvgh5Ik2K0hntBy/8/NI+/xJxNwCW9Ro3crFTNBPEsxk3ZySKxctWh9b0\nKIoCduM4hEDmlxEfYeAhOn3GirJelb2H8utfUZ0YibK0wiYX+VFogu705uRV\nbt1RnFBM6mGoHoRSf6/cKszeSwtCZzvPiUHHfLT6klbjeHehVyXCo7KZhck2\nxpT3IQxCIsHmLiqSOtgnqkRp9c5AUKpKzmg1y6kAEugEZscHU2rV0LK94tCl\ngzYD5k5vdnfUFOYldjKAfghL6P4q2tN6RfCLoG7ZO8dsiq6X8X6kvUVX7Qob\nb29K2XMBeaJ0V9Yq3/+g8Jjcgt6RTgYeGrUufr1SI+85DUk+ATWJMw2KN39b\nxjdxpEgWFrqmd+efud6FmSyAF3YGliPJ4sD0RNUBoY53iBwVM7wYA6/BKJIQ\nPaKq0XnqGVvIgyyARSeWK86VDktwqzcBk6+wuK9Kdl4haobz6oVOuB0KI/oa\nDBCZ\r\n=Xe+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/touch-target":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.99cfb6bd5.0_1605725024682_0.8475294244768026","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/checkbox","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c120efd271bde4ae52a73b349d629b2be2a8dcff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.b98d15d90.0.tgz","fileCount":43,"integrity":"sha512-XndyCMWrl7Ei7pgpp1TA0Y0s28JtX950QKCNLPoUMSzzLwF56zEDpsYf/PHN8wX5FKXcj7fURIOc0keQjC7vAQ==","signatures":[{"sig":"MEQCIAUuLMGHMsU/FMAJOjy+ib4TBbv4Z2fOUOCGMf4+WWlaAiBC71IWEzLl7h8dbeMZfhZ1yDBAOpP47yHsXSTzyu0ncQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGKCRA9TVsSAnZWagAA9jgP/RErGhhkOD0CG7hwIaWr\nKamm4bZAGg/77JdIno+kEi4yNBTW6YwdTp3oy2xKFYZHd1RdofECNkqIVzvW\nUmZ44Wnm1ciwAvzuPrG2Tsd3RlXKGqKwl7GXQ2ZDRrs1caxHSdv5149EuXJg\nDFUE+u+19sbURnzgcxjri2PzO+vujlvRE0cRnAoSUytxjx6lwFG3GAdyZ7qr\neQ/1V64xrcWcdh2acnlR3hLqcVap6+5JMJRgC+KmsYrNZinpmGNVni+ETyfW\n6IejArPjrlNoF/1EJ07yXzbSiB2iIvXG72UkdjdwFVdk1ca6PNjLq1Ww+KGs\nUEmgr2uL2zSHlaGvax4E7h9GfnlzeH9UIO/FwdzFCqCW7iCr/EsbaQLjQDA5\nH4N0NeGpUEdMwXMFLxxHBGObnfr7AN6AfjTVYpQBSRwzK9Qcqwfxj37izx5K\njIlf7ogsQDjw+gcDD0AAv4d8DF3ekhchHG4/Q51E/36pR7/RCZMkX7vQHr56\ngp+i34brsr0uo0Fq6DnWwmzTEvkfBVE82CNHGjskRmgpuKRmEFbPUImH1b6l\nWc923uRLjFl1XBJ821PaxTufta71EtnMDAxUX2sOEVQulk7E8r33WDdb6Eg3\ng0rRmkZ7c/QDpZfc8l1oqEXKvQzFhYaQeFMngS0MLsGYdvlBEqVIIZ1g12NP\nrr+S\r\n=omb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/touch-target":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.b98d15d90.0_1605738890186_0.47427589348554045","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/checkbox","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e7df0307ac7e3d452d7670ef35659ade8781c85","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.30c11bfc2.0.tgz","fileCount":43,"integrity":"sha512-0YZUslu91rKVfy8shGfQxyv+NFxs/TyiY8OhgwxgCVWHpZq9tJlKasqBSIOymKIAQ9UF1GlKX8fueIGEuJ1kTQ==","signatures":[{"sig":"MEUCIQCfQjvwDL7VKJIv436sAq2t4mHOE6XJH+tlKLnwRCNGOgIgf6npu6WzokGwIHGbhK+gJp8UaGOuBjD0jDHl/fJNKXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmnCRA9TVsSAnZWagAAin4P/jhf/p86HztUv+8Wb1Xz\nqz/bRDRqDTLsIK77wbNiZTWwCjrP7icYjTfz+9UPhdYAmGutBlSGf1io4IQG\nORYco/iWZjZCDhwdNWfQxSq6eO0TDspyDizACrtsHO23KfmqowoGnWyJkQsL\nMNWXfhAfgnqC44xfekDltIXwZ938N5C0r8qOiwadhEXBHEJFWPDhwnE8CrI3\nYExa2kBR+pLhZgP1B9m6n2EmQHu65C5Y/plF8POMw8f2ekucPZdwetDl2Bcp\nu382gn1rrJzrz6919DkHumkIFmTj+EtbI1nF8wNkFADwqyPh/z8QRqod/PJa\npE7DDv5qizuef6d/5dqYeM9L1MNLYbdD7e8cMiRTj7IfGgXDM/f4XOSTdTtj\nyg+AZoDy5KHTKPAAqhMivIYm7qowPEAPkIopvivPI+paXa5RzJrv9ZyycRoT\n3J1xpDxAxMljyc3rT9k7XrA3lunPoOMFvaKHzlVJxJQahmYVx72DPbNoqjdU\nnJ3dCVE4xa62Si8wys+wZ/P/uKl2L/iRJpkWWyQVP03/yaK3u6bKONdK8hzj\noFKEo680+cj+fTV6buVvXqJayjwDWwGJVdrmimOoT/tJIHno9DcXMV34TQeY\nYafX8iHVa/fHgOPDRxxeErdHwb2ugt8pGQAT6LsVDcPWgDmWgenCLJb9YFu3\nx2zP\r\n=nW/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/touch-target":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.30c11bfc2.0_1605749159211_0.0036780325074505793","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/checkbox","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef1855c2a25a07de6d9bd654e0cc91696d2ffc5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.1b731d51b.0.tgz","fileCount":43,"integrity":"sha512-LrZZ4zV/ALfV5q8IaBU5rgLXmvuR1C+OqR7OPn1KYVAKeIxM/doeQkwB5/kpVAmG7j4bopoguEUBfbuxiYaXFg==","signatures":[{"sig":"MEYCIQC2tUs32m8eFyJU1R/W//bAzRHgDwdzaPNQRCoXDCLh2gIhAKX3EMQsSdPIsW+7vi5I0iX0k5Og9V4dPUt6LsEbJsLx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7jCRA9TVsSAnZWagAACJ4P/jsfOgw2/hfrQxb3D1wF\nq4CMAReqA/JMaC9uCHvUsTRaylRhFAItVGbH4FzcahWGrGfciMKwLA41KB06\nz0gXlRJEQAGZ0eBsnembmy2lMRxbR08BxNlmptrWF4fi8k+9qcpzD4fmzhVy\nGE7tGaK2Vxv8vsbo1hw0f+mKZFQqhvcBsQ15e5XeAE08sTEBJ6AUaZ+id0kq\n/YE+P1S30PfhzkNO2jtoa+5xs9q00+QcACMQmsA0Hj3IW6vrdutXlbH5+xip\nTaJnYjWX31dK6qF8Wr+jI96Ex2SbpNasAaL+RiLFpAkWKqzgWCsrrXvYdt3C\n0FWefKT0S+W3aujukXR828yyvzSGPsnnBixMPl+m3al25QRgB0ypzGq1+zf6\n9vpN0VKLj4AkZRlZOndkFKJBwrZ7ijhBCovKgraAKaIfKuHif6CPjUZYXRru\n9gWS5byoKMfnbuBI30Dy85h3TKDwzo+6g5WoItwTeFWzwqYlXrSMkiciSSjj\n8uMQ2b4UfFd3CXQK3EfoU1INCLrvMJGfY0sxEgexMjPWpwpchAx94ZTfM1p2\nwTRQRHgS2K1KexuQP+yxdKjNxHgzb/8YO58biLEymJi1T1Id4uKSuPxm9UIx\nFLYTNaUxGRUCTIxBFjxBNbP10Bp8yK6WMt3TA5mza13HkhgsRwEqM/BpAXIP\nwRVl\r\n=wRPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/touch-target":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.1b731d51b.0_1605811938425_0.630132363997489","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/checkbox","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f717d4644bfb8fd522454aa7714a8fe809c94c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.4ae94ff78.0.tgz","fileCount":43,"integrity":"sha512-tMKS0JVROF0x/+C3HpCFWCIvkAp+k00ZD9jHnnoDZnQ9YeNARrO1vNRR1UZFHoZf7ekds81gdOCSZTViD4YrJg==","signatures":[{"sig":"MEUCIA21rTraETFVNt8DdId5xGb+0WrioXCQ4o8GslIvX/OqAiEAzgV9ZJ9730yNdHDNJdLXnQO/Lcm2lDAfc6nJ2f15PXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+RCRA9TVsSAnZWagAA3ksQAKR3i2OwNSahVARYbAWn\nPG84jtJ1/x0kC6JVHY9tuE7Dj7xoAv+DzTKCj99paGcGoQniDaN/YBwBD/g+\n9PmSDi7XXhvyiPHxaM+uy0epN6BjbnWlaN5S1PUaimPjeq5FOdmZ7DSoJg67\ncN7mK5RAMTn6rCoLS9WA1lt814c0OPSUFbn+MerzdP/GHN0RcfidaM11LhbX\nkp3RQTijyjCyNoZadJA5WLFrYQd3Ldcim8NNfpmwgC+cuHC4d4gdvfI0eoh4\nv3r/mTUwhZpxCHXgozWOvZz79CysuQI1Vhf3U0naY2oOCeIOHocbHJockOa0\nM6wvTG7ZIsy7dBlONN2vVemL2WXrNVwLzuR9+kCFtlV1hi5esoX6s5i6q+gL\nedf7FIZmTdQo4e8HKEWuJUl4tVSBDs32BTUqp/D2w0M05+OhYHHhskKjmUYe\n6tktppvTE6cQI+vtskr7yE72qaTiCd8gVo4oCBM7M5Vx+ERkPxtFLjh7Bapd\nezsuVsgWdHWfJfsu0XzblRexm1rfOVkjlrZ7i9iHbiga39eJsBtxuYLbUAfD\nLyNE/7+NcekdbztLgb01Bse9dlKsEKKf1dTavka6w01SnwZjgzL8SHAOpmWv\n700cMJBTy2K4+GkKiKYh1P9c5yjIvRd7Di4sUtsvKkalFHl5OoHC0SLHY9oA\nJ7CS\r\n=U/xb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/touch-target":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.4ae94ff78.0_1605812113039_0.8894685974041607","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/checkbox","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02838969b7f255a8e2c504669d907462981cfea2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.7ad038e1d.0.tgz","fileCount":43,"integrity":"sha512-qS7g8dTuwhyYVKMELgKDPU3kTxa0JR0qtPbQ/mYakLWvV99mbMp1wvuN2CmKKnmpXYR/4/jMYFragqft8ipyLA==","signatures":[{"sig":"MEQCICf+fu5QSgYZODU1fF9EfovRUZvzsX79II3v2mz8lGMGAiBpB4rjyGX65zdzy4wzKdFnXnwGH4iWX2RygQETGyAgcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsT7CRA9TVsSAnZWagAAMg8P/3D501jb4z9TDVzJcG/0\niq8P3thPVPNU4aYTZGa9cqGbKruDmzIVke5O0poFOt86TMMd3kHVY6oJKuXX\numTQprNPSImgNPXFSDV14SUs8CafQfMHi7fMK2n3i+zxI/J9vNZVS/71oIXI\nMjV3omOSx1eRfWkMRcL2e8lI+mOHR+CqZxUXR6s9vITFHVxj1fQItH8sF/vA\nLikhKGaQl/QeAqrBcfBJQogyJXwkP8KnrF222yGFXwZNxkm/C3ee2cTC7HXq\n23GQnnpKNd5KxxHCiyl9VuK2xaYtvl+Qyieec9BAAhHuPRdEmfVWPECGnUpQ\nCc7cWuD2LnrAN+OjYQJJPxF5sLzcfhE6D3Oy31yIKWrx5o2A7QrlJ4+84XzM\n/1R66NfCp8K8a/y0hJuTRBUo3mHsTU207j2BXWzJwne2DooJ7KSB3D2PAUcv\nFtLOzHoVPdtNioHq4mVdjn0bQHTw8m6zFDr+zf6+rsa7Nk7g9srcDBdQyBOm\nwIEySeA09v2SUVQxm9gM08uOuyUVn5zdC4urDcYIsp5zQ/SkE3z1rt89E4MW\nMVfG8zGW6TQGgYyvHmuXYvACrCSlSXI+2Hi93wuSRt3xJsMePGcwnQ8Nmv4s\nKsNhaNhSir2uBwrRa6hl+rxttbT0D5+VaHXfPZPlmlNak+ez6G1Lcvi3OwRG\nucvJ\r\n=bTLd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/touch-target":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.7ad038e1d.0_1605813499316_0.6710317299717894","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/checkbox","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.a41527604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37e8e81f161a8ee1ad4ca2fc6fe499e80ed4a91a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.a41527604.0.tgz","fileCount":43,"integrity":"sha512-1uJTuwRfLTPzS3WBdA1HORVYjo9ARDuUE0aOc6NZIQ9CvlYZQCZnmccmIrDQUBsu6IMKOvoW2nwHJFiS/xX0dw==","signatures":[{"sig":"MEUCIQDQ8N8ME4wlMDnxygxeLEObfrvf0c/Z+3n+A7xk3IPshQIgL/zLVec77BCdF8LE9GRybxPLuHNWfCqayouReAkCiHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7FCRA9TVsSAnZWagAALJEQAJJQEjv0eUfqq/YnuG4L\n6qmU21i9YgPuFGLuYKxAAOra/4j1jvAY+cJ48RVjJLPbckAbshtZekAFsOlY\nruR+5FtLclcAd9xV1LFlBV93Meq5BUCGbPzhd+SzlGVcjtIovtuiuEw7bg9J\nHxI+LJBL7R04fbYYXSGzmHv0dv6vhHOuZnHSLvIdD5nCFkyNkKElmVxbfNeH\ndVX/7Kj84H8qAxc+Ezp6YR6b6mSWxt9pR3tfbhWURNaXksX1XpY3wPdnnArA\njLalErWs1vpAzN0NnNTZe7iLR7r0Eamake/KjzcFVsFgxb1dcr0txLyA0JjL\nYJLVswTQ5LBTpVRzOS8C70eMpx8DUHmM/91gHPN4bsH4KsqYjuc210dgfl1s\nGdgwaA2LFBdC9Vt77Hvv1Kb+iY0hKBNp8SFwWQtP2/hrAtojzMNDacy7b6SG\nhwbJFEFfU/q0n4MKYrxOykc9GtkVyH7VYMPmUtdHggvhPMkWv+rbFe7NtXS0\nyZbxajbRd2EhcAFbkNOqs+V9i7eldiEdiR0IQko1HcwgrMDGBar8EMdi5l7S\n7bINRCJ4JFnLdUk7XCocbN2It4w351b4Rb1C8oxuhadLfsL0Jj4OCiIC6Uon\n/Vp6yzD5bS1/P6NUVqxULDnz6DlG4o0niV3DhzPZBJnXFoQeKzutXWyWAhe/\nTxj4\r\n=AUAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/touch-target":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.a41527604.0_1605816005193_0.6116357529738479","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/checkbox","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0978e50b40b683df3989cabdb4c54f317bfd9f1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.7b0e2b377.0.tgz","fileCount":43,"integrity":"sha512-IBNDM1qwCOEV/1zNSrdXlUG/Un/A6SiXOZS6P6K/cXGW4mVwdc26hnUoYsh0RmA10Xaz8iP6D8YxVXUxFEJH7Q==","signatures":[{"sig":"MEYCIQCDbBKIU/tjsYuD4fQwyRBBuCI9m1WkWoMv8JLhVRcs8wIhALsvd4FchYm9TChYfQO/vFlxj/BfwnR11N/Kra1xmsA4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuElmCRA9TVsSAnZWagAAvKkQAIz61Crrx2Jh2m6izQoO\n4V9BoqJdDvY/FXXTCm1VJb2VkOVQmdsFYngSwH16Hr1vXwyadf6v89nUF4Q3\nJTp8X5BQT5qYkIGurOXewe3bNfsZ2b+2tZhp0hWd+XmlbkQHd2h5vici7/VZ\nqLck/9STMEiVHAMfnp+mdr4iniswt+2qvpNWF1SeEI2/uXTWEtdklBIBSosS\nfCxbrBWH0EYIm1l3yULLgd62BjnXpeyhcjssC/rMsomd2d1RnjzLkVq9Gb9o\nreurm/6xuoEnR7J7pjQqZRkUhFvwtI4zFbmeR2sFB3OlD3dXXNebbyDP7Psl\nJQU2xiAU3SqYOeWZUIEfsvbZDMK6mYFFuWVB815v0N6CUUXIvJQPVY5EhaTC\n3KdljdrTscMS4iEYUnwbQ1CI7u13ZfPM3sUIWCN+KwAbQXE36C8eu0hV1xe9\nVSSTa5dvqqT5x7WT4+8oJ55gJVyO/1LkuYshHKvFSFOwxFzeCHHSC4IFCU0O\nnNKHmeKz6nTlhEpHGyOLtMpXLTC1Wqv7fbfQ6XOJzBOl5X2QBysq50AX3SqF\nBJwsx4eGP2tNnLneMjv3ibw9ozFdnD8/3RMsi+Ub+LD9Ub9nfc7jrPws2qES\nZtNwmxLurWJQQtrb9adVPcydgpYE9JP3vg5xrDk2zaAgBohVkxTw7251F28K\nbgud\r\n=0bu3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/touch-target":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.7b0e2b377.0_1605912933774_0.12789739068443073","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/checkbox","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a36323fbe2c8a5860d247b8ad5d63bcdc962acd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.c927a5d05.0.tgz","fileCount":43,"integrity":"sha512-EToSeltLs/p8D18e8Qy6qWD5FVTOrvigHDQ+MsjyRBidPNrRwl2dCXoJtTWP7pxfkC35oCCXvW0Tyi5Up9J8lw==","signatures":[{"sig":"MEQCIFYmHIA2G1TFUNyQfXubGuhsWREw/NlMAh64Wzf3hRQnAiB+1F122jNgO2SyC4t5HL0Mtk8RCO19mSWB2UG9Mj/24w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHMCRA9TVsSAnZWagAAA4gP/16XJwvYS771OIM+7MVp\nWFXSoUU2wOFTS0K1KCc9wOguT+yCsWDv0RjpsD/EseK8oJx0E2qvQEKi7LUS\nJn8S2mRupYfbKgUdv63T7ObkQ49GDqeJ1ML0fOQD7yNc5BfwP+zaK4AxfziD\nHggRAAr41pJta+S9EkmWI5F0fOgHPJk9Gm+KU3W4jNx7h3NW3kwpEQWPmPfX\neeRSMVXtpOAfaOLibgupCjOmmkNEQ8D3s6zdDpLCydOtAwRT64uIePdmbOex\nj1yziKAxJ9IH3iKO5xZIefy7R1cBYSl5JxJiTymEVpBGpNg7EFaLa6Vywbhc\n//PxD66BE6bxy0zqukv8Zct38yRrxS6lAatWpbu02wkGw0EE5xXCEgYMzNmx\nKNZ5NK5u2f9Of3PIYPjb+oMSQy5zEW87AWECvKouYkIcBRNLklSToVMS5xSY\nB8h3QAMWVmEzUN22GQ1XkC6f3a8omtiHD09Pkq4eiauxFZ81D7IoyL5dANol\nDIG3qsJ+HKNXZ/1Kg5wi3qcAxcnTchPnB9VXpFyQ+wakgrmiUp6jheuxt/6q\np69j/yDJ/Gf4yTF7QshPRZMhaUhC/VBdGWbuObqz11cjTH1PZpvRSap290Ax\niVGOBB6Hcs1SF5s4f1G+z7L6BMe+eaqtVOVX2eq9di/3sbfF/to3JPecy70K\nnOo3\r\n=Kkvm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/touch-target":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.c927a5d05.0_1606160843517_0.028044619666596216","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/checkbox","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.b349b5185.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0d3df19d8d7e34a309c75bb28f264d4487f1fcc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.b349b5185.0.tgz","fileCount":43,"integrity":"sha512-tWXqzcwlWFBLr0mXcgSm1xNRf6boX1McGMUGocy1JoOhfpKNsrHiL6DonV0LZKYRWz36gKGCj5j/InVMrm9ejw==","signatures":[{"sig":"MEUCIQC6KgI4gpUfrwDwyWyvVDnAv78IOyPvD7p0MBFb9xzQywIgb1yhzXf9K3fodUlompd+wZtu43BK1i/gfCYvkZxFdXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4cCRA9TVsSAnZWagAAwE8P/jAbajaww7iR2ry59q+b\nGWm1Eur7en1uv8jYT9mgEs+u7OI1moabOvYUWi9VDkyal022YMX3ZGWZhn3t\nBlsn9vkzJEMc8qIpjCLCgDZkzTqUcE8ssyNewqBiCn+J0yNDvbv+F+pGDHxk\nUSqfP0AoleLHXzTa+CgZyrK55saAZaWtfjb8AqZXGGq8/N/ylVJXB3uOXyN8\nkE3pDZxmS0Xv9Rzheoe+p/igWlpnT6WVpOn+jranR0Lo3gV2nGnNsKHai4tK\n4n7xUu4pJndHZaNp3AB3MEg2TNsmZvE7k8Danemsbn0wTT9bVHGjcemtQPwJ\nLUw93a363F/Jf+f1fdHDnkM9vvqMgYo4chjDPmNtV0Ldn8sQiLGi0NiFJK6M\nPnNoH8cs+XrQVuPmVF4cg1OeLrKWWhHMqEClQj9dUquomHyjm4Z5e3aFjAoN\n4GbPeA8LnnpxCg1qOeXre0zR1GvBsDpohyXW9kDGDH7u8ujKMFNPUIbEBJFd\npkudYYygFGSL0gDFoBACppvnRZOyJ0GsfEXjN5KdnDbGl4PMf3ZYqkgh8XQs\nrCTLv5+3qGgOjfHjiI4nrwPBBXJmbsq6c6gmYnz6Lzevv9FPt63ldn/+KVLR\nZ73xWCg/5/awF8H3spUWIQnXL45rY+XFgcdP/FOHq+SeIJFzwTwqM/MNDhuL\nspN9\r\n=srPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/touch-target":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.b349b5185.0_1606237724348_0.6461831461635197","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/checkbox","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7494486a008bb7324d57c28b5ca25db0b071161a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.9083b7d61.0.tgz","fileCount":43,"integrity":"sha512-FZ8JrqyzM0yqaMWdHlYKjNlcfojrziZMtbqUg4M227eUA0cpEHfPfaMYWiLiYtd0j/T1QaRs33J4lHeA2FuK7w==","signatures":[{"sig":"MEYCIQD9dKoxOwYoavD9FieZKwwTSgcUxEHrDztJnuzkxokX5gIhAI0jSF5ItBG8oQKDMsq53C6zC3n9plmH5JMBZe64iI+i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXf6CRA9TVsSAnZWagAA93QP/iuDfKTG16xqn8hzckxb\njUUQYfAnbmEd3SWygmgJhORUW8T6yrVsFlEYyp5doHAqz3DBbz/1cSpBKFhZ\nQrthn7JYMuy5qiT1232te8fej4prRfr743QzhCXUd0wG/w8Z+tzT2TNhYEXN\nGDXx/2pNEEAPMTyXlkwiEi0zBo4P9naSl4oEQ00DFz5YdvugSG39nL3SFOB1\n1cNvaD7cD5/ccjKnkPhnblRKwulsATxW+vvBZ54XPrp6NW6vTkyRSxxb0KGh\nSlvgDes9c0Z5y6T/7DT1iyON4uLQnQb0CZju5/c3+j8tcJ0/+Ur7zijiqlnO\nA4Alxjv0nichOIhPXm7EDOc+V7qEu6oegbcLudb963urVCxnh/JdJ2W9JBiV\n8g/6rN7l+cbUEQfxl74i6zjhC3qZJ+CQph7Zc3qSfyFVwpgOZxrIxLoCVIf1\nbdgQNJsCeaLLJcYxmJv2mA+uYbzMzJSmDAFdmrC1wi9d5jOeorcZDDHWQ7iD\n/NGl7IF1g1l+DKkWRWKW5fbwPj6pg5CdrTykLESUtfrCMy0kM49XYcR6Dcqb\noKEV+Dao9R2Lu+WDWc27IAyrLSyS4YMFpU+Xwl2orwNvFJMS1qDIO5BvgXXI\nDCIo9cN/pdZ6EzGfhy3lxig4FB6ZUX1YKwYaUkG5DYinOZqEYUXmMRtjh2Rw\nd0e7\r\n=cqeV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/touch-target":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.9083b7d61.0_1606252537603_0.22900443193840325","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/checkbox","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d2763a48598268b931d381496e8912628b57a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.eff7b46ac.0.tgz","fileCount":43,"integrity":"sha512-/ai6BNMnSvmzPYxUkvHcXggonoN5oZc665BKPIIFBG2tuHDCnwTPlNe3Z1gXh7LuYbwHT/voT4rzWYiL+PAoKA==","signatures":[{"sig":"MEQCIByku43K+DsbNkmUAbuTsiWwoHFF49djGjFoRlHJwATcAiAfVS0BjugVbJcwowPTQWrn1Ht1Ouv4CH4xMzbjOJ7ndA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZevCRA9TVsSAnZWagAAe78P+gPBSxyqYNAe/WgbSC5e\nMKuX37aJFt4WSnBV+7MmgMpterQaC87F84COTm+oW9tGQjtmiXe3yev8YyQJ\nQ9I1OFJ00adYubYsH/Eo1KKhJJe60QpkUNa6I3bxVoeP1y9sWKBY/rT3Zq6S\naUKuCMEdJjANfF7kG25QKYi5PXTDy46mpDjvvaj2R2zpuWAkI/ywMqQtB9Qu\nxANxVySytfuXzgH1+4cjdJWnAOov0okKp0PHaICWK8+Z9VbdA9zvlA6OHbqJ\nwKuuvFRchwVYE547c6DGRnV1LspFLFls6RZpNwQxl56sdfFuhLuFwpJ7xHBK\nr4/MsADadJyZXbKDK0a4eBMemdWcs9bAOssQKkV5rjsEHwrsrnRFbmxGUAqy\nP0d5ldz+sEY6/sBoLto0ziSvYCzkJPP3F0rOFkDk3Ltq9kPKz3aAf4OJ7TLB\nmz/7LXlY0JZ/RQhoF1XPKPHXxwF+W5ENkIS4cZwBa1VMCWZGkVIsGr7Vsudb\nuS7E5BLT/Vx+ZQvAIXs+ZSRCpeehgUDwdAh0DhmO7puHxh1hiOKvJe+R44bR\nbZj4UQoBLC4zBZ6ecGXgtn9qI6g1iZTH5qKaJ3Nra7QUxRDdjTJHHPUEbU0I\nIZquHMUXMt8bu6UyTIhxQK7EeByn9KqCHG43RFpzIelDwLT47LKgJmpQodI2\n1wYQ\r\n=uKg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/touch-target":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.eff7b46ac.0_1606260655336_0.7669416437677576","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/checkbox","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc6bc1f1d3355fb240d8480daca3f6143943b0fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.ae27b44b0.0.tgz","fileCount":43,"integrity":"sha512-mNEBIw+IPWzpxeJnbQdNtliGL2JK0SqhdFN29zbgsxI7WQLt0QKg+NDzfzGDnauB6uAQ94rsyUfzuWPvPLliqg==","signatures":[{"sig":"MEUCIQCeZU1cd/0a6XhPCyRNPnp5UVtDzGXksQRPcORfCW/9QQIgI/2H4qPQdnZPdKertHZJwsR/4j/Ac+KM2DPa0Vz+L+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkhCRA9TVsSAnZWagAAK0cP/3V/Zh+fUvZeu/yBPd7D\n3Ndo/hGDSwVz+W7dncBfYPm9ZoaxJcQWYVxRpQIpjW02co2S2Q/+AoCEYIAv\nqU22XN65NQaqrZZDsTigfYSU5oq91HIusjaijeJLo0H3uA7E6stBV4ZCZ3gE\ndthrJx8U+Y7lQJSIgy5d0PvujI8KWPPwT+6i8ceRWQ12S3VUUBIMuMinCnsG\nt31mXBnScCctMSUDtzODN9RPeu2E3DQUgEVJoQT8Xne9+/Q43Ot40iX1dgBG\nhfa6gMMo4i7Qd1Rnroc72ySCX0gY0oGMTy8hZkhd6iqPlXV5//DWO+t0QV9T\n5oWXnN3Xp7Ik8bWQnZYUB8zLCBJBVIVGv88oKM176Do1bzf1J3gNvVbpUJbi\niJ3FmyymYX150YC/ert8rfm5YecuXKxnc/8cy5txjxJFf8HNMG7gOVTmv59d\nh7dd3DGqASHrxV8ggwGiFFAaw3NeA19WVZdl/+5mYJENHS7kbYAmgSbiowFd\nkOa71mdMAUaMDX7sexkmrhIki8RI+ZsBfVeU0vsghaPUscF1b3gU+7ac0ezD\nVF8eWWlJtHCEzYgw1tNyoLyF0JgIzUfbhTZTVrETbE+oYcsKe4nX7nFj8Ioy\ny/dI8tvKM8v3sVvCZCpm4KeaJJNrnwvy0vm0I+g61n9BYjGrxMkeLbzK8Jkn\nRJLB\r\n=dphu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/touch-target":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.ae27b44b0.0_1606318369310_0.9906417373219563","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/checkbox","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699ff942ecc68771a8dfb2d0373f0903afe1db37","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.2fbba2554.0.tgz","fileCount":43,"integrity":"sha512-/4FBcVZl73U43yuSyjtr8/O/ME6/umgoQijj940PbymrUEpZM245EatE1klXYasRCIKU120egEmGbDbOy4zaiQ==","signatures":[{"sig":"MEYCIQDHLPIIUIkyyrAXHsAqVKnOKtq/ICUCt50GUKf1z/Li4gIhAJRAiuE+N+8khWwAwf0fsLBwW5VYhRZ4HhFfFORGu6mJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6FCRA9TVsSAnZWagAASlkQAJfYtTm+DFK2JiVh4B4N\nrnlI7sV6t6T0O6doKtU4b3ktiWQy0T0zCbx7m+OaXYbMsBCf0G54WuKJu01T\naClrVWnzA/E1yUW4MQMYHrEpF6wVZwlWWz2GnCkb5g6KasXzTNDIghssLxP0\nS3uSNCTu+dVdGLxNkZcYMyInnSZeUehc9K/Olt0etiU2sELSlFCtkhJ3FmSl\n1VqDhR9rBZzYqy6L1lUoYVVkapym7hc0LU7Bc3c1OafbDqJ/TsSPe22vAfKy\nmqoZTxR3bP+67EzMdzyjU+j4BfvlODWwkaEwjRASY+6u8J+B0x9ebGINJKh8\nqBeX4ruehfNGDhWUkEsmEcbnHMmI9PqJAIvFicnNhGxF71xhFI+9D5hhMRDy\nAPQCi/GcKNO2nW8Yh7CuDBy140Ke6LsZgGbjiXYCEQcNxcWdvwiPIt5H90JZ\nvtB0V7fN5Y8gU8mKczVvqgUSI0X8M2Wq9tlKUJNI+3NlARCigYOFE/F00B8S\n6qNO5RlSJ6O53BVUUS5dTejF6j0dIV3M/76aNeE0FcinpWXT9cmGNmIVSLVT\nEAzH5UKP5mZKObYbLueQ7bVGeZ3+dC5w60swgGik2/wN4HahjVb8WX4CazzF\nAuKkWs1o2LqWmj7ZukUXemRj8qr8Tfe92CVy5SSOyF0SBo156vU8qDM/uecW\n1gvA\r\n=dnyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/touch-target":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.2fbba2554.0_1606758021367_0.4081753175002265","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/checkbox","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"281ac5c4c87ca0235956866588cc39f79769da9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.6d8574fe1.0.tgz","fileCount":43,"integrity":"sha512-qO2z8mMY6y+M8eTM1AeJbmVSPN/IBjgGn6vsMMgjQgDk9S7EHd2iyHRxWBFhFVqSYGM/65uqRFZ+GsaTkBWAFg==","signatures":[{"sig":"MEUCIC31yxD0q14kpWh/J1bUlJE/axu91Yg6xh7680GrdiFCAiEAi3ZXHijmDU9xGaO4ffKjnBpF7u76Q/C1JH5UGW4m7yk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEZCRA9TVsSAnZWagAArxoP+wVqBp2UtSVMqBydEtE0\nxuXdwKOf2L01zACXWa6DJPVwNyJ+pzEww+trIU+Rxe9qWFKEZzZgYIaUI1Vv\nl5F8ZRNvEnIuzf+T0ASlgra03E75OS2BkvBj3ds/UuilSPOLSojR1rRwTUda\nJadiB+HnXQJpL5IyjJfCVufpP9iGXQjK6gAMepD/rFUOp+4sMjMLBpDjF231\nPZOAi3xHZCke1snf1DoNhfgMBvEH4Kws8Dt+4aDA+MyNA7xVLTHIZFfKY7W0\nIM5YFNK228ISDiFc4oY89rk4UcSyf0CYMFAFtRChQwz8WYpdQ3Es8/KehfCC\njyIYwkVJQRBtJHd4rU32ItI1GmuebV/cTUNLUsB8ybT2WPDCGAvLijow9btx\noXcUEYn1GroE7WaaNCkVDjYZPu28dU7Pz6iKH16dFWOp4iBhl+lqbHhA3x63\nyuP8Y8jyAsEsWEjE7UFPqrRq3TVbN/bvPJ8FgpKYIfO8FkFGQiw7YyXA5OQA\n9T0gCtuqNU73fecAUbmNY+6urcJMg+5g268E6frJuCRqb4leNTK2MojSdBwM\n0NlISnIZdzZAZdX+cESyAmaBNOyvyepfxd+O/L5F5g+FtyA0vz2Qkw0OfmsN\nvk5pueiJQNudvvMnnDcxdndD48xi9LG5SG4Se1Y/APf4HlSdyygKvg6BWcuY\numfJ\r\n=RsSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/touch-target":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.6d8574fe1.0_1606758681081_0.769041306128883","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/checkbox","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1278480b74d6dc5d022a7809b9fbb52450255aaf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.fd22355f7.0.tgz","fileCount":43,"integrity":"sha512-wzXZTT9OwepJgyKZ9wFjLITCzxBEKDffZm6lWXV7GIK0clflxwYZP+/IfuqsRZlpG32W4/admoJj1EU/Tjaxhw==","signatures":[{"sig":"MEUCIQDr3Lg9mkg65YWrb4HdkqzNNIGAzGRnMWM+0u5JY2WUuAIgfj6kHX5svaA7IGHUtxW6HeXrhtKC9fRoTb+IwzRjlNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlRCRA9TVsSAnZWagAAq4UQAIxfxgNe1q238z6bV1uT\nxkQymGINh6sckpnP6QOnCiuC7O1eHTf37MYIBjDfD4j9ogybTvSSlW3yHEcU\nwOegegGCrLlrwMpVG6HLnLoNElg7wsA3tV641Lsbmpn7ttvdltksGnWixLk1\nu2fMnkdZuQV9xmaimHe9DHJAyYXhJaKz1dMUQAfk9bJQ+wo8Gysk3K0SlzaU\nWVaZXtaok9DU1bcBvFl4VfogPKthaMBaV7y2qseuNSssOx5TXE5HCOKB9oTh\nweJw6Zict84Rr2VrOIogUpa1JHkoFyEzgxzYL4T5s6fEk+x15ewd2Iy1GHqn\ng1eqdKtoL4kBoqqjnv1lpxJKN89PVDwRTlaZpxddr6tlb9R+jieTcoOYKFlg\ngb4+D3d5xVqcrhztvRyQ1FN8cfP6s/6vSKt7q3vbTGcByZe4FXSA9MDTi8nP\neb+Y5wfnxAvCLrLO5TgVmpI8fRvV/exKcqSlu5WWQihpXOXKcY6/rd7CxnHm\nnWUF8HQ2130Ssxg65960qHSJgNrloWrYw+xMyl+PA/zjyzOCOGrBGxqmWouc\n3Z35ZE3dqL3i7vrEUzi1DU+xyJ7WEt3SBtvMD5Z7EN9aMkRZg6ng2+KnsoAG\nt/yVCeMLEs2QxBlBFOcAe/QcHuGqCkWqyssk7KSo3oMQ9drVI4ruLzScBBv1\nSYNz\r\n=eWpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/touch-target":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.fd22355f7.0_1606777168570_0.749298985169627","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/checkbox","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d214e7251774d427d1ab4775bb2ecbd0b609250","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.c4ab98722.0.tgz","fileCount":43,"integrity":"sha512-7t6cZ3KCQKatIvwDg/P5XLtY2pflhq0v8012ZHii+hdaUvR2wBKlLQvUDvWIrcPHfUlw2B3wJKdeLYOVScC/Yg==","signatures":[{"sig":"MEUCIChp90nwFqK0JuJqdY6CObmgPSgOhrTXJORifKWZ9sBLAiEAnHRI5Lo6mmg9CWYG+FF57MOdI1sRAvWco6aVCpyvnzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZECRA9TVsSAnZWagAAL7YQAIAaC0pgPpIobj20+f8Z\nSEgTRlEyxna5poAcszTQEpk69EcWPHUis0njVUZVyh9B7cS1xXCdvcsLIbQe\nHiy0EiE6/9nZG30TlNxDmruau9Ts9SDiPscfWBsAFSVwJlrYB9PIW+frlRfg\nma8DVL+WgtXHxkqIGqz6Qiq18Q0FwPit8Y2Ga3r/mhfk0ftwUiLUsD//uHeq\nMCsNL8eeR02OCFIlom3pBfkvtAmBd97Z5kCozJx/zcMbS17EV5ikaewjgiua\nnOMHfZRO8kGgaItHj0jTfsP4lS18JsoTcjfVo0KVaE+436Ut2muG86i5qPSE\nlnTjOfqJZJHxP5qAvDRf3FH6zO61jRgCf263CIjwT4sbB4upmIOEZorZCq56\nR5pUWJX+8Hb0aMmdNtBIvpi+gU7fzhFoeRF7uPqpqDdRaVPg4PirBS7U3Vva\njTi45ij28Jdwx7BW1yJLwqOmYOSHS06ya+mU2QCXhK9FtJmBO2zne97pwTZz\nLi2rF1+H1PQB+QewuTE41fu6/HHX+QiqU/TrEw7xemZQ3oeL6H5Qf3R++Uke\nj5C7lcWN81LHVm7NOXrRXOa5NFFGo0rAa7hp2eHCyXk7RBoenm0jPBOHsNJO\n4cWbJ371uhIYkjrWmqcXS3zSCH330Zmwnee8nX+lIAiOc4ISNjoE4t9vgtYL\nN3ZG\r\n=gIK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/touch-target":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.c4ab98722.0_1606870595578_0.33647760278290484","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/checkbox","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.977585650.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b008b46cc42b8f97ece7c0d20fe3c1f76e2016a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.977585650.0.tgz","fileCount":43,"integrity":"sha512-JNxBs39zXIziAIBcg2AHc/AIMXmpDRGrl6pEVEptWdoXcE/yBw8fAGHxz5t/+2i85TA7T4eQfidAj7yvn5mfag==","signatures":[{"sig":"MEUCIQDuiS7jmnSi0Xdl9G9CPZoDLJRoiVoYDpYytEeL8C7DlgIgH1xYFEwNjKSyPhOS23Waw7QPaI7FTscolrXnZTkJjuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6ezCRA9TVsSAnZWagAAj5kP/1gZCkCY7tKU8igLD0L7\nCheDwibB3lGIMD054Mzti+nyyC0zNPCYhG1XvOlbyIS8lCL6xTKafuh1zUeP\n8VewetC7OM4t628k5YlHqcN53Dk3yxLhiaVw9yGnYQ8nUdr/7DDlBAyLdDYL\nfTCPH/LXBAAckdq44hnP5XVxuijFCJBcDYAzvMJ45lkWH3sZE0ei3io/Cs8Z\njEQCl5QLwpxR9epOe1OweQ9w/JZMQHlzvRZEBEt2Egw9/ZibMfJDokZOMxZk\nVmPEV/mCIh8eEoutD33jTeg06A6JiZ/XFRqiSdgflVbhFal+LE6OgVxl4jgQ\ny0iewWRdAa8hGyYhKr8tgQNz073MaHNp169VCQCl3wHdugJSA+5tj2ct1RAf\n789VPsuUVyaF6pewtMZeN/jS6LVaxReiC44BQpUJpcJGUS0MPsP8R7DbY2cX\nggKyVr2ay1m9T/H2BLD7MBsDcuszCPdKZnnvv+81XsH0DtAV37aqjsZjLW1B\nuEz8UJP1bK5l1qt3EAcnnlTFZQJe+/VXMbXRAQhFyx3DvcYqpgzXZlRAVfYP\nht83XzvoB4cgzTqz0bWQeUp4LnmjuDDFhgCSvEPqgGN8aNOBYAOJ2tU8aNjP\nxiCQX9VBFsKzMayjb6o0OHQe+h4XjlJ5Uiuw6U2qzvYdt2cq/NjspOddIufe\n6BXm\r\n=1s3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/touch-target":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.977585650.0_1606920115158_0.3314881049836176","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/checkbox","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1072d01b25a151b3d56d50e2c1f11b3e4179e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":43,"integrity":"sha512-Le0XknLlpgI6WWMWN2AMo85wsiePKtm6sYyxpdLj8f+H9yJJBtqFd32sgg+GpprMg4pi4DgUrLUJm1jzynVkng==","signatures":[{"sig":"MEQCIGObAKYoCh/UWgF/IgWCxtKt51DTAQ+cNY834UOpxDClAiAfMrIzQ/LUm44k5ZJqbItfu/bKGUWuzh6bjE8gJdde/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mBCRA9TVsSAnZWagAAQkAP/1GsaLMaa2wiukFmCR1a\n233n6xFUiiiMYBcnLCPojfWd90BdHHnNLbBgugqvUUMbc/c5V2Vz5upynYK3\nTGDSEG8C7erg/DOeFrbyGdeVCMti/7tf6ihGpNmxghljNPjuuVXkQSYcbFyM\noORi6ISnm7YUtbkHCpWX1P4PlOQQ/zX97jWI6rJepDQ7B1A20QJMLqs07Un1\n4vS2GHhWfR1vmYJoYoLZB+XDr906h4ieFqMUIVb2vJ4XYgLk+4Sn/8IWgQ94\nJH2o3c6RtpZON8JgK7qUNG1RIgd4rJPdytEJkopV/kK3xntf1TexqlOuOPhE\nwf6moCIsSBcqajGq44DokNpBuU4RGJDCSjezRVESdmMVyj5SwtrNMjGm6ur5\noDlba45x7Aaew3iNZGa3iaYzRMuoQTZUTsFfVYpk9G0M+QEsG7RgLIE0gWjH\nUaF1wbB+8Jacku7FfR5mUfl1eFkIWdf88QxFBJhAEekWi3NfDhj/b3ZEMWAC\n2jYoa5s740gYer2Kj2xwwKHu4wMFIMCqAhM9oQNvjmXRDRkJJH8CV0+cmHa0\nasogyICmrZBxZYOxPfKuFFg+xqYH7xxgHmibr3XPxnXN4c37Yug5mSuUooXu\nYVCXKZisvQsF9/MjqY5ADrB+Qg+MkHqh41fxkgM4IQAGjS9BhadPrV/UJl7W\nSrw3\r\n=Yxmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/touch-target":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.c7edfc7b6.0_1606920576524_0.6736894613602085","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/checkbox","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.4f3347306.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12fcc56e83f08ad5be350413f1a11f51e5ade8b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.4f3347306.0.tgz","fileCount":43,"integrity":"sha512-i90J9y/SOlwjpyr1Em2TEoUBWyPZ5ndDgGoPCBqSpiT92bw913ASbFcNssmgHpJhp5/RMmXac3xoRXs386mImw==","signatures":[{"sig":"MEYCIQCk2egQ7nPKhhphUYCpMq0mEezJcC+AP9IZVulfXUNS2wIhAK+Z+1LzGBlSYjoX4bgOJUQh8neqkSa5Pl6+xCsj0zyQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx621CRA9TVsSAnZWagAA8coP/jhaQTl1L4LiMP05KXh4\nYr6Om2WCGIS6Ti/R4+FYN3Ftd+SAITet1iNUwTU3zNuUUP5Ifd5aAAX93uqD\nb8PD3Cgqs4jteH5UjgC1ibkdzyQI4EsgPaF67C7LfflO9HLNKaGb+EvFjdz0\nsdjkEieAElOpW1l0/Br3miRQmvSDAEaoMU+OuZXRLkcgPmaD3UYfVQ/3UzE2\nG7BtYTopjlZsA/ecz1QqOpiNUPBW6dp0wCXpy7iWpE7X2ObCTKQoH1siw0Nu\nNKNySSbedTBS0EZVcqNgWbT/MnUG7+gHdrwPpJFuF5qxVQ9RNWReJaYRK3BX\nmwRKdD1wT9e3/BtCTwLTLM0mSlIRJ7MyEimHWnF44MA8l+SPHm5vCnStvlau\nkoFWsSJf+cp4aW1TMSLYQGNTMIdz/qjqmqnUvAyS/aO5kxl124qr9HmNFim3\n+Jk/7tyCcpZnAyJiz49gJJI6FZ/vi/T0a2RfW79mABoVZIGsAk7xJC+tFt1n\nhcILxT9xs0C8XH+bPbt9JoGrlGsMEobIuBMSmgDq3V1zEpaNv8eHN5AfCLWw\nAejFnOS03MNQbPw3apQ3sM1fM+Uu+54UxyMhQgXJsX8HklZ5e7CpG04GWFSB\nz79x0CYe5T0tGE3hcciu/+pPBcuLbSy8WD04UHmgmixVZvaRK44bfcXB3aML\n3QIX\r\n=SwMi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/touch-target":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.4f3347306.0_1606921653192_0.7633313908361081","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/checkbox","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3231eaae51479158ee21b96d7e54dd558ee6b874","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.37fbae10d.0.tgz","fileCount":43,"integrity":"sha512-G46S4GaRz7ZSoTUKJC4i/rnqqwmAe/s9mJN76idQ+2UbWj49HHwznvRfmVufwXbWtnoWs4N4ceCEgHBrF9D1eg==","signatures":[{"sig":"MEUCIQC4agEJ9CIqVoY6sRB/oRV83bqRCiC6E9v3PANAEVhDXAIgFgLyp3AH+Wpy0N1luYytjBLhV/7otrbwGZtEeGmMXgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9n4CRA9TVsSAnZWagAAS8UP/jv4XNXpFIERqEONenM9\nM4ngpoFcl1fWY+cI/xWvLKr3pv8ckhaZu7DR5RDxr2ZHU84IwdAwroiN80qq\noz7EbmfEGzdBFyi0TusfZ8UtBOrg+fzuQsrtgqIhYTP4QoLRL4q3nzNJ/jY4\nVeb6P+3RQFzSYc9LCC3wxZWYBGNW0a45a7iFlRca1ReYRWVGytoUjqPwoPrx\nkv8HQpcAfhDBRQeTnNaSn963nFbR+9/7YEUlSeYsNaPUJNK4eBa5fs62fEvt\nwplMBArTGlNCrgsu4V9z5+KMjNaiyMFJZgsxeaYtabYvS1EKvN469iKuoNYS\n/3ynURB2patXDKj87LjIr6x7D/sFIb8TgRFtmDcmuLhVYb3LzlZ8UkhOi6vb\nTOSiubONUUqV6Nis7BXv1mUpGLGonwD9tIXBcZ4h39fBInZSld+J203u807y\nJpE/yXTNWBFd1xwLekMa0P+ZUvtIOZu2+K6+hrdJWP9t1pnws89wkmmkm2VO\nGTc11M4YzfV/FULf7zB1U+INrxsoyT2cmzcaQooXrKmbFMwul/iJtxhMWxJc\nTBsn92VWkwY0TfwWsv98eK9iJ3gn7hfGOZxLSyH+nyrvPx8ym0echv26JpZm\n6Tp9vgaUkp1lkiYVWdOcXg/2S8Tw2nvxyi+jS+w8befHBLzW7AbFNvpKielm\nk+Xb\r\n=8vv9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/touch-target":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.37fbae10d.0_1606932984412_0.6932696208943416","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/checkbox","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dfec54db84112265dedb39c5e6ab178e2a92369","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.11da3c0db.0.tgz","fileCount":43,"integrity":"sha512-50FUiBY3kJX47r10Ol4mL653w14dWlCNPCXWv9gkH3ZynzVahkyXAgJjWKs4hZEWT1830f0Rcu7nQEAxKmFnHg==","signatures":[{"sig":"MEUCIQCgmo05QQnQwDLGDQ5kW1Bl8oj+OqyCpgNeWHP0VXvS6QIgF16G3wrMGg/Xa+o4d1bsiMvUQGkbf2zWvhCf3h5O8r0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/d+CRA9TVsSAnZWagAAjDsP/1FBmGQyinuTH1O4YDHK\nCDONg0q5rCmEzknsCwb2k9c+BM7SPzYiA4W79Q2XMZJUz6yO9A8ZaVaCd+na\ndmxTzHv339+dkTz1Y6Fn44vn83RNEK6Ds4l06cAxYH+9tstDQeLhy6KIej1P\noPL9q9Vez6/uespHAOq8tcvYRVaDin/lTq5WFG8xUSodohXL2UBjjR8awYkp\nQLYsRuf68HT+mJxK4fi38YtMEyHK95moKGoIHmck2OR9ZWAYtRxVUFmlc25j\nYN0iSIiivLeJMiRYQDO7B4OSqj8bEkpf2ND5oR2+Gmp4aEsxZU4Am9KpTbxR\n13obzydYn9P0RlsCHgXKo/g6JAekbTz+XUx3DDM+/2Ie+cDJKAbbhEnf39gP\n0AaTY9q+ihDy89ThLpIGXyk0jsFnLSNd0wYp5SlmsnJOEvkak5MyI3GouVTh\nfWJSgLcykYVnQtvl9HTf7h5kQ3q9U8nBSsmJJst0u8NQp0BbFEoyGjx7BegC\nz/gknUJFcA91znd1S9qfISlMnfCTZV8iO6os73cPs6ZKTYH81dTs/NMgpy8j\nluvfy1UfuBV/pJES41JiK2FgRfYWrdxzQDFnRsqGobuJ0FE6ZQYtpzwBq30p\n5JmSxeUcNSx2gLfYLcQAWxFQ27AZb1uW6nmyeBFUan7Y3izXP7FX6McBHhjt\nGywg\r\n=575A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/touch-target":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.11da3c0db.0_1606940541498_0.5939318120354609","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/checkbox","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.489d4c219.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"126e1cbcba10f9f4b28e9a6a518398c82004c691","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.489d4c219.0.tgz","fileCount":43,"integrity":"sha512-H9mebqjT/NjDDLlbyJzI4dVOUW3Laou40L/C4ty/ikF+FGappiqdWttx2JeOVsgLM9Rr3p3df98HhDgYQ3xpdw==","signatures":[{"sig":"MEUCICpWEDdWJTPLoG6vM4nAxffV3qmTjGZRs3Siv/Ab/cQhAiEA+ap+FyZnaixuziB0v/hVYc+qdNRdWb0fVWVxNIe8gwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRfCRA9TVsSAnZWagAANJUP+QBeJ1Sj82FbwDvXQ2A+\nN+ID9Lf8SkU4ujZeZ/eQ810YQNAvN5yGozbsQqekswM89/K3h9W8Y1xB6ahP\nqT6b7anoa3D6QYfIYV9hm4HHPTz1mHqgI9djIab21ZY6W+MSPXmKx8NChs17\n4iLDV3MqoIh4TyyUfrv3Xik4zy4no0ybPe52M2El0PloStouJcMN+K2busuV\nJ78mKRP4UYyOFpj/YVnrXYiCm1NiI/Z/cN6nfqKpHc3O8cP165Nu9D4R6f/A\nKXROgQPtd+skhOL9S3Yidlgm+gXt2vEgiLrFQ8WDhTV/VSr1f+TQ9x01DTme\nOVkfGXGYC7DB7k22NccZ3mO2CpInhkHEe4LBb0KVy6n6jIQuY0VcUE9vWtTs\n12sPm8exKQQ9gMS4HNLzmnDYojJH7UhVMv4ZIuZxzvp1+oHGic+yX3q+MHYZ\nuXCse7/GTIeE0rlcHEyVy2tK046baIVXISeNHcMdYvJlEET7LFQnLngqXUyh\nFbVqOFVqdxocZmHM55UIQDQbn5LcPpwfiPvjm/3kcWq9jgJZO2rtBqOI4oTN\npX2Ij63hDVTNJcR0Um74oxOYE+UC+fMAzzkEnK0oOG7LJSfjAtGkHxyt92k2\nKtw/A1DWM6OW/4hl3DM1yeb91GbkPumRendkzaqZnugA+ZF3rwaTARa41mZm\nLiNU\r\n=fssM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/touch-target":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.489d4c219.0_1607009375419_0.7269882200922078","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/checkbox","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d36f9ec2e9cb98b42286fd05967cd6c491693729","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.6557a69d9.0.tgz","fileCount":43,"integrity":"sha512-2OFFt1mN6wDM+uN9oDEa/ONGoU+9p4IDJfE9EnznlJlHtAOJ6DZ6bqvJ0lP5WTbCAwRBI5ehxE6AQ7U9NGv0Og==","signatures":[{"sig":"MEUCIQCGWF6E+P+osJbdmHcgccZDaL0d9c3eEIQBt/VDuXyM3gIgToNoUSsfswxWgI6k9O0LRsDiGHO3IfwVire82FSCjz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcpCRA9TVsSAnZWagAAL5EP/1v/4dNSpRtViH+oSRA1\nX54iga8DUloMSNfBRDFSQSO1uzurZsqgGQgFSnWoVIUv5lzzfx2c7AHo13x1\n2tA+/5yWbDTJ8wptahHOVO0eobHIeGuECcSfFTriY5r3BN9gpffFea4fKdpQ\nnhcZBC4/yJSB1ASLnrw+h75DvR8zNbOVqeQiOpngWJplaK2pcn1HlSe/q/p3\nTOvlod+tbuefss5Eh6xtgDYkb6hrK85lmXDirmstj+6R1NGxfE7fuoOCNgQd\nWVjTD2SRcZS9vDBQUedZ4dHHbkl7WE3bRFsnVtHccnMtTX+Wfl1pZwKWCmJ3\nTVzmUOB/EQTYYB0q0vTniDgRQaIErfN+i0jUIzYNLqpswfYoJr2FcaL2IUAq\ntIuzcsT7Z+YaKIJtdqVcf3Hvx4NxPXvFQPiWtp0C3g2y6SLELeUsRdjpKwh2\nJecnPSjl9nJbbCbhTm0xkgHCR/YmWSU/BIpJOBA/IUcWwTbk9NRR7uAFmBqT\nGuJDa3FGf+4g+QBGx5v0z2KXybHeBrIbOi214yAzDo14Bw7WQ+PwgE4adqgi\nFzekaIMomrSrh8thvkbcrpaIuxJhswFHsj0JRVqu5hViyVx07DeUIkWxPkKh\nn3is0KIursmmTuULzTMMJ30tF9OH4bfQ0LOWtRndoKYZP8L5hv9u0lfV8Xfb\nSLUu\r\n=bExJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/touch-target":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.6557a69d9.0_1607010089099_0.7556857671895825","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/checkbox","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a421dfb57d31bb0cffd78d1bd54e4b51fabf7c87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":43,"integrity":"sha512-+D9pR7PEcOEPLPK+XvDinUJLUv/ChThhNbiK4L6nbznFdx7l4hi6Z4SORxHjID2V+jXxtIn50vmAdAInXhnOWg==","signatures":[{"sig":"MEYCIQCqv8hWFQxlFahi2faIT4qF4g7IoFagFzPeYAcWo2Gz5wIhAPjRk7Dje4PJAbd8Ub3lU6bn+mS75Ss5/BPO1cCASudF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQsRCRA9TVsSAnZWagAArTMP/3KlKufa6/+xF2cJOuJL\nlsEXnJMAYcTn4QqXyk7PteNwzbv+JipqQpNKTVTEmNi1UhHGJ72UaJdPbu4j\ntqwhQkOHCdoR1tGs9whX+a7u7K3uf6neMYBgqa9+0NCaRWRemsGtqNrxZnbb\n/lgEL5T08rHovULFSd+Ir3u0jdytxc3s0xssDflAq91ysn5Je66T+Umm/PUs\nSh25++j+vm/XoU5OBXQQVy6qUNWFkBc0pzZR8jaMwJgf8LhXx/ollXYXd4rP\nha0MV9u72EUaqplhaRa43uxh5olvNFoGEpgpLEGCF1QtUZ1rpGJN8ox7ibBU\ngKbpxCuzPsMWSL0hKgoMlsm2FLeMDvjB2aedtTjDfysh/ZLLMf+DBaxBXYa7\n/Tj/Nwzp6ixiKeP93lvbKfZknsip/NqOV/64u26LSAt17dOYHvZt4+ZAYc/3\n5CMkqI7vkSvDT4/V+thlpbZyRwwhNHo8cievgfzTi0WoJzvSYiPMJFpfDACb\nOm8/0x3Z8A7RgxzIcCgQea8q173TJ+rXOcah95krsWTwiky8qD0iGMXKQZJz\nedi1/Ads6ILCfvPp6BKyKVVV/wFBkUFAMzsZ7XaHLegfIYrAHEA0MVPW3/I3\nJ2CY6pKQQO5l85W++LqejBsh7Km/vd4KuRapIEB/zl3p8E6byZuULQ4fZPdO\nFsrU\r\n=aClS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/touch-target":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.4ea1b7c69.0_1607011089258_0.8204084271467929","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/checkbox","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393fb2049cccc7e498217f0f7e8e955c995562d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":43,"integrity":"sha512-gYBkzwpO8aORwZ6H5yo/N0SRphLfb+5XjZLxvxdjr+rW/GqNu+IaUFi5Rnxqy754gzAumGjYciwXDhFZDwc89Q==","signatures":[{"sig":"MEYCIQCBWmcJaMRGVUVent26/UhbW32Xlsx+L1tQ8bbZ/jPbLAIhAOsWjaEeTG0Cf/5B4/ZaG+VRi0A3yM89+DX8/WzYYsN8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnmCRA9TVsSAnZWagAAXI4P/jG75A5+Q6gv+RylxHjy\nM7JWXsjKywTaPLeS2LlEKUMjyNgmaQ+xj01By/oBdAnlaqXmxy3HPGJn0wkR\ntcrl8hAPSgphoOO/UqVc40B14u1GwCXXh3C1ViyjsDf+PdSrPJYCMiwGlCZO\naJrNB+3P8EtL8XwUE3uxqANouyXzZ75r932SpkmjMV2Aa8gRP08j1H4Ztzse\ndvjG0+HDJyNymKEBexhVKsPl3nWVwn3GWzPOeS6ylA2H9rqNt6mU8SKWFHEC\ngMM2cmg5v5aON6fX6iyTn2tQTj0xaO39YAaXbvzY2GfDHBOtOUzhVMM3Rlve\n+tDCz8AnnbJQAZdD+jqOc/hYG0nDN0AYq1rJDWZoKJDBqK1sPNppXphLtvhT\nkXoL8YxidATiXSsZE41dElkwxRdVRIV7Mj5GwL9ILWOLFh0LWdzf7hPNuEW1\nBbdLi2xx2TiLVS8ZaIoESzICfN1WECmlrTQGXOhMS1ig9ajAVgituIlY6jdd\noyFxSNLlcS7Kf/sMgjlXTVBrEAHupLzpWHZFNLSi0pFOfz3qDFarf/10Ogg6\nw1ZsFELLizi6cKH5cwnhGWEF+cPkD4A9JQmQ6/AAWcVOfxb0eBpX0rOZ03dZ\nPx6b4uat+tmsAOwZMS+EBe1cSIEYlz5p4gZnlOcU+o1YtZl/9OGWnpdm5X1e\nr21r\r\n=sj0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n## Contents\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/touch-target":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.eaeb78ce3.0_1607014885628_0.7553914837960127","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/checkbox","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7534284e59af51217e3653ce8d7105dbd001d55f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.1c156d69d.0.tgz","fileCount":43,"integrity":"sha512-7Fyjh3avQg+EZx6wVIB3K4b/9rs7rYTZIXVYM4iAVJo/LDtdBrdmLy6sRmk90gnO7+V5eTvSBJy7R+dU3l/xNQ==","signatures":[{"sig":"MEUCIQD4wTHjJSr5L2FQLgOe8nLGXLbB8jpfhSwcYTtmBBkGvwIgJxqoIv+9WvGicbr6/aEIic4/RDOjYfCS/DOs5DSMXes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU46CRA9TVsSAnZWagAAcjEP/0bI6IAe8XO+Z3eQnHmi\nBDQeOqGuFCz8c4RNAh4tlUh0qa7kPu0uzanYMxPWGFgJ76QUL0OCojWySqfN\nCjbMAOwmCs9yrurRi6R0JAvOp71T1lcf9fjFHQ7cWufqE5w+DcdsozMUCoFx\nkEFWcBYrOeijP6tW9LThj+oTBxeH9HsZRJQODTBCpBS0lu9Ogm1hcmjeKPWe\nAQveE5/vUA/m0PRImrGSA6SgmiowgkDBGy/0XkI+RYHABPJsFapwnKd9hhYA\naZ8vAzOOsaxnxH5ec+6uxrTRsrRBEuzg/sQwWYLJR0Ansp7jXgTq2GNkWBEI\nBBgstBOrnLBNi6LKJ4yYdYQ7zFX24aZK9kQeFfVYSXMiTPk2+ot3ncdRL/Cm\nV3ViKcgG86WPaP0iDila2MXlHbwVyX5pLiLCxV0/n14ESLtBtxUZjC3ZhBZs\nMG9VJzLkzHKZ/O6nDFWSDX2ouHHBwKewF6SmH6+HRhmpWU255QHPCNlfa5IK\ndmVgAqx/T8SZmNDp2YcjxI0oKwWq+na1FZby+WZ8GDAMiE3nENBCDJSF0T3L\n0VYdBqG5ZZHbFFnenhUotXVJCVaYxjWVmDwWIhQKLNITYm8dLscqyI4+wlIb\ndohCiFJUPq42F/8M29t1Obun2Ki8QlrkusZmk8+9KjxyuozmSVaJbvZFvcab\nxNIH\r\n=ZjVO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/touch-target":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.1c156d69d.0_1607028281863_0.711370316635958","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/checkbox","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.832668d33.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6532c029995d4d3a04fae574b2fd7f0f5340708d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.832668d33.0.tgz","fileCount":43,"integrity":"sha512-U0xPTmoZU0u+PrjSYfAf4Ox46M7JNYIarxFmlqA9wsTDaqUIGPyDpQJuIJtWEKZ+PcvzYlixkoVZFo6tUB0yFg==","signatures":[{"sig":"MEUCIQCf2xlrT20cA9N59DKs3PmtksTRDzaeLiu5IlbpvxfvLAIgE6VDv3qrl3MHxtLJBD7ZJ52QycTwWECfBQYVQrkMz/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqBCRA9TVsSAnZWagAAgacP/Ao05Li8gZjdrbL6B6MX\n8zcsSHJbEt52hkB2DRDNq358peYcpN3mPyPl0KrTIUd24juBMhojzS2Qr9qU\ngU67Y0jzXsVKhPgqxR9N2VPha/0OlkNTNbgkl6JVf938EQhpICDk5+wiwcM5\nncJpjhEShJop1UJlup9kSaGgcsSXOAW+ftG01fjQSyDcL7AEr9BTswvziock\nhpE/JHlhcJT1yc0bveLgSP998UwiR1gvMX1A5y2Y+xgnAxVZqnmIRngbGQeI\ndmKBv/WCs4wY+LfGm10ozl1vUawWN4HqCQBIRLyxeHriayHAKqdRYTpcOhRl\nGV0PuGXkAAMcagx7QOBy9qDSU/qeO/UR0K+gf31QgdGT98v/3HHII16H1xhF\nAmZwB7YLvYp64s2qF3rWP7+EtnfBWYE2sHIeuUzb7XNEgPKFn0ezN7tjF7C0\nv8tSyRJMnzoZRWsrSKfI9sAUu0D1fZIwP4rnFAKR96yNe+uLRoA8FhUQFfcN\nq9Qpr7I/GEi20kMXXj4sRqlnHYt/dhTg3/1jlJ1MA1eu1uZo5remIkrq55oN\nCW6tSDgcWlUIPzjyJdfN0OTlz36WxwEMT+56VTKbYuFZYdIzL+qKCdPFDaJk\nJQQtONf6PLJlkKeY9chocbKb9qsmooXZEXUKIbLBTaVqA2+haj9ZamwSo8ZY\nsoOo\r\n=hcP+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/touch-target":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.832668d33.0_1607105152443_0.9829380504244731","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/checkbox","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.4321323e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62e75ce6eed656f8c215786094390c6cc3964f47","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.4321323e4.0.tgz","fileCount":43,"integrity":"sha512-hIxJAVUdR/XD/ioL6TtNdGawjBR/CORQ9ldLFt9PIENWIKGT2ObNHE2O1sR0/kOFdNe+hpNfMbjgXoT/QOF8gA==","signatures":[{"sig":"MEUCIFXsa4tOILZV4agGnR9le7KUxUJKiqGpcxRpDi2DsgQqAiEA9TmsaxRAxADLlLi4PNSJ4TvE1jaoU6hYPjdAaylLRfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhH7CRA9TVsSAnZWagAA/5MP/iIScWxSQUu13Lict0vc\nfmGfiTvXYmhijqQHC7UV9SwSPP6QnF2aTqsvVLu4+nJWLmWjQowkcIZTmhM2\nsxAn/rYasviPlcFe3Vb0GalhKvdxa6hNIordoSD3RuW1ezc27oI6j4QpdxMw\nHBmBcr6s78CyLzlg+Mex4wmoP7gIUB/A6YyYYm4MKCE4KB9KZWNF8xAkN90G\nJbywLaz2pwIXWdmsm+Z7CR3AI4A5r34nbpWcmkV7B6fLPoQAkaDxH3EBmqni\nz3ckR15rE3wNR8Q8Pbjo0vNrSRwjQ1QurxOBdVijyrOMF6KNcWDo7QFelJPC\nrzHMm2SdWG5n/p2Vq/W88EQS29fpEZeDxLYKVt1Yd2zO4YtQ65cXSlaRV8Dm\nqvsxkOZRqMOMWVuGpDtaQWfM0LaiH05MbzUSzeH+TeTYi8yZRN5P7jY3xPIJ\ntgohEwlQKkcFsjWQQZvD62JiSkw3cSu/I7RlnClI6rXIOPfJDIp1EPE7Nthn\nyRRpH5b71nL7VAHmX+xMbM1mQ1kyEJuHBa2a7/kaAbVzF1O1g6PqvRTtqXqd\n3FLzLrFKAKgU7iQ+9LlONfvyhUtKcLLSKKMHrMM+485ywLOGiZBggyhtNvv7\nJtWDWmZJNwQ7DLmxlAE82xiKqoP0jmp4pVGfYEBEkgkcCVuFlR4nclZhhuLJ\nCTrK\r\n=RBLV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/touch-target":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.4321323e4.0_1607340539437_0.7383723224949625","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/checkbox","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14428e514e60177431738621e035ae9b628f1117","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.2d5f32d41.0.tgz","fileCount":43,"integrity":"sha512-En5veXWIrt1gY4VHQSfyZ9qRAdqjMI3a3grlnJeNHc/9FJNaUHOEfkkYtg0pPvBpo0lRMEEvIwiJzJzjO4cfVw==","signatures":[{"sig":"MEUCIGtndxXA+eq7EfHGm37vANgI/WEWFYrewYeBkyKSVWdPAiEA5609z62eQe25jBZa3xYiTa2VGwQVZYJqTIXyFeYdTYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltSCRA9TVsSAnZWagAAUssP/1dMEzu9Snj+0598MZaq\nSKDScAKrokrOEGJiOip8nUj32I0qIek0S3aSA4up2rKN1ZQAyyCoTJY3IGEZ\n5C7cgaOMU0dj/A02jOMkABK0B5XYQmDyQK5KRYEGpJU/vBODDn44dtE09PDM\nr1GZUOKRnO1tXu28Z7F3C5xBzaX4Hu4Y7Yrc2XNdOjwuf1ps+YuaqM3yfA+U\nNpl75wgTETk0i5hH7zVr9hLHoazMbfD2j9yzuA+D3y+lJazswI5DdCdqmDuC\nCtSM4+x4PfSFwqFaZuqdDQU+BNgYnKvHxo3UV4vI05pv+ShP/7zFL6mYoSLw\nxvRHUz9C/oYcacl6PE0Ad7UwahllF9ZG7T7RYEpbv/oYMfaapgAQwm8pcSpS\nP+8mRXKygk/onCax3RboBzUXhovKwTp3PCdgUH7v6oqLh8+xsBPZx7GV+oSN\njN00rc2FQdBxjPzYOnKs5flbzQHCZ5x0u8GkhYfEWyKzWE6d/5bCnuea7oVa\nVeu8vsCa6VFv2WeAb8arQKC7zbxAWzjvaoiVQ9zjt5bIZFeyCLqqQzKpqED4\n4VzwQWAfh/JgzJe2BMGDmadc/Q5h+oLEH+GhmdyAKOuBwwCCHGPSA2mNt5pc\nNJCsQPUHwv06s4odTejVRb3hZBeO+TOooqAB/SojPw8HLuGPtVAlZ6Kdmh2d\n5cYt\r\n=dwEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/touch-target":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.2d5f32d41.0_1607359314453_0.9350537805531771","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/checkbox","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.8239afc64.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd84d82e4ec73fa778d21b225f635447672d9e6b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.8239afc64.0.tgz","fileCount":43,"integrity":"sha512-e4LeCZ8Fkqj0EpfDAwjmr6zSiGydbHCSI8fWnXqekMMl/TZUU8m73agbS7e7Mlh4Zz2qKAyvhB81ZetP5lSdZg==","signatures":[{"sig":"MEUCIQD7hY5cPuzBPQqa6KaEGd+kD2pHzQ8135Yhr6dRRIUJbgIgVGHBeUqHkc2c18in5BOpbUJt/snMfGPUFLWyfzyxzx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodGCRA9TVsSAnZWagAA/lIQAIrKkqcYepr7/OMewnep\n2HqqEsWc0SDLxFf46Ybk3pM8wQ9V5BKy5avG+ecqjhzyFqc/jtshGHTs00fd\nSDI9ui+kYavyi85VmaMWkQcgx2SRnq5ijufgDwREstz3nsn8ipu7GeBZqgIM\n5ETce+2a0AfwlLwXEFMXCGvLts30yQ4+5SCqxp2H1oleshDK7GcdAiCpyZFW\niX3X0CVKIg1xvYpcA5S0dzCzE1sYIRaOWeStSJuXp4V852ouZYugeREqi099\nKPhx40+J/xJGsB+7Uz5Xgt0TICiAxlmvLMAh5xZDUjJdjwjx6vU/OAx/vZmv\nEFH8kbCVgcCBvP2ilROLBo4FljCpMjvBDQydxGDRxtxKMbnPFFX+Zhjw7gyR\nAEHTEnNUHf6gQBLaaet3Xf/WjY8DwEZN2EhhQS2Y1CdPI9eZYlPEmcEKxiD6\nP+ZGmgBdIH7/kwZqeVxC9oAejSL1xOKE2qHcfYjshrrlwG7UixtJtSRyd5/q\nYKCgfN+IgSOl9bHsrQQAtf6knUIdDYVIoBAGv4QqGMyhAXJ2vYUQNGzIDKQh\nWrnz4tj6ufjEQg9eFP7UW3MDPVI7nzwvWfMlRpRM8lVjUEqMRjBbrWPIP3gR\n8ovoa+amAWGZ5OfrpvA7nLtEhONpoSHh/G0gtMCWtIvz/Gi57v3cx/Wl/l/7\nuADe\r\n=np5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/touch-target":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.8239afc64.0_1607370566434_0.5440824719841213","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/checkbox","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.6871336f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce140bd14df8d59384fa111ae318c47acf76fdbc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.6871336f1.0.tgz","fileCount":43,"integrity":"sha512-MoRFoCBDU3TtZxwm5VS1RVuAj5gDFVQe0uMt6tSvuONWnH9JxHNJ3vguMkXFTpGfsU8yu6DoB5Wjhm4t8R7BHw==","signatures":[{"sig":"MEUCIBdrRuSLvW+zQ8+EClmw/pFLxAcSQTmDGYJCYWN7G5AQAiEAuH4JXfBaZaQspa8R0Y20v1AjT+OVeOKb1G2KbXuiYAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NXCRA9TVsSAnZWagAAqiUP/1BjYI8zrdYEtRCMlJQA\n6dBj7iQrFWDBgfQCbSD3gMUTzAXkfTurkhfYj0rfCOS93vdEsRzSEt26DrA4\nI8YfomoRIiAHs+hbmYGZPYDVr1iDEl92pTpqdK6b8j4MTSShjuAmjnWRwK6q\nvHe306f3LVo0Rh8K+w0kujCHVwSJXZ73v9I6PQIb00cE6D6j2kcp7R1XuvKA\ngWek1h/umxzg732ht525xYrPWPqERY0GL0K7n6y8f3Ady/xAM2S88oSWjJ6v\n+dF+bv4EyuY1smH3BeY5bMpN6Gm82LSv+B55RO7Q//G34PLrJ/P3+EDifD+X\nzkY4NUWPxbyUeX+t97AleYTdqSy1VtJHuOfpLk+y/K5fWXk8R7uVZro+7UG8\n+9bRRwZY0uEWuknn7jsMDmfVLMDPkgY5bnmAgXa3tfWzzIU3tplYMoOBEYen\nKYg7xRJTVqokvVjrtgWookH3EVt4nhyf2YBWDaaV0TJQrkaQPKMbK0m4uNaF\nhZHPd9d5k0Gllu7c6rlaE09rjLtD82Fkvu858gjZP+j5heTTWfdFXoeFngLc\nwATuR5mXfvbnPFMeVEg9YjDdykjRnFTIp15jnDNTlMU0BFOfD1v+gkOI3WDm\n7L7nOf7CkpJV8Gnex9eCQVoPXZzlBfNsDdrgcMQyS6tjGTSPpSGOOxyY1GXT\n/ssN\r\n=s4gr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/touch-target":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.6871336f1.0_1607443287005_0.3435933902403292","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/checkbox","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.9f718da94.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"950c1b87b00c62fa28a2bf3376b0a335bcd381e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.9f718da94.0.tgz","fileCount":43,"integrity":"sha512-hQwoDcGx7lzTJHBnDr/3uTRt9Ka39HcuTJNHuUS/rBfsL3ZX/JWDZ+pjt6wPfDqi/UgSZwRdwuAI5sOQ1WT3Fg==","signatures":[{"sig":"MEUCIEg7S+5bK4I+4TKURnGIObKvUsM+E66GIzu0qMR+tP25AiEA2j94w3SB0l4fu4NTkQGdUOos3VPX2Haiu2mZ08uiMMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YZCRA9TVsSAnZWagAAPz4P/ihGzWJ8i/Tjtxa0NKtb\nGeKfOSWAJHt4iKsfII1nofXElWwwhCrTsG6jDyoDxatWP67o8MPVRh2ax11x\niN5R7K4qqq5WnlxMfLJyJuUvk7NfAZuTeYPltOQbn0rYgEpEVvjPE3dEbMvb\nWW63raWY29Ff5AbblFjztBmrD4mWL7eb8Ia17N/Qbt/X1N8rQl83p/bAQb1A\nqesxwmeLv0DWKlvTtLhuIFyW7uwPR/c9Yc3WsOkQsol1m00tTbNLmcvVABJR\nlIG803SICgxmweN3sSHyxDQJyeaDkfH00csV/+cp0thkKZC2DzOTWX1osaMo\nLNBfR1N1NQqdyEUWyvELG1e3fW1R+H8IvcrJaCtKkYzJHJvo1L8NL0N+JRkX\nzPa1E4D3xB8hCidSpd9SqnzypenYJ3FU0vcweQ84QjAwafS1CcFdUZJJSxVR\n7/VyM9iKzLIdhwtrqP7jHCUMP+Z/T4+dGaaaosfYKQ3zqvqig3sPrbM6CI8y\nBx/lVZbb+4OVk50+1R6IrlVDYwesk/xIa6vLaUgd4EIQ/b9jypMIjALIlkyi\n7p/uUXuilq9RnTRvcpikLe/zvGFv+DpF4nMScXAm6OEVYMh4uLcLA2O6LwZW\nUuCwFHerUoFnFKGhybH3RBNtirpsfEY4yws4fEl7t5rsVqPoMpOWAyuvYvGP\nZ8xn\r\n=7c3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/touch-target":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.9f718da94.0_1607443992963_0.7498473516460795","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/checkbox","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f8331d1fb15e38a9aa4f1ed5593cc406f27b1ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.1fccb1418.0.tgz","fileCount":43,"integrity":"sha512-tN5maReMJ6Ry+te2ziKt6kX5rWFA/1vi9mypu4LW4XoVPQrhAd+gLC0EVEUTXjJ1U1972vWnpBZuPDzuxGhlTw==","signatures":[{"sig":"MEUCIBVV/N6d6xWXT6JXrn+CCJxkLp+OG13GONA99IQCLknjAiEA/bRugcAQrTxenqsxuOgUKr3eEDmAPSsIM1xJhOZnruo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mgCRA9TVsSAnZWagAA0MsP/0JBEsjx89DEeBltfeDs\nC+vTnKqbppOc1bgKuOiFxfpKSld2VUOm90JM1eQy11K3DCkPI7CqbGpxAmhJ\nBiDshst5sDXX66L5AI6GkbyDIeFbH1KVZuQKvVoOCYH4B31vJLfy/ijsYPcY\nw+fXOGGghkAtwVbFGGm2DBhGTYV68zVIwMOkCVFw2EYxArPj8nqExAQCfhpY\nL3zDEiF7iHIIzWi5HEWTjY05RU3RhncdBj+weRZXAtSObxcgMB0iIr+P+r8b\n6nyptBrFoiqosB8EYWRqjQOypBwQhYxmtMDU3zTxSrKx0rG5zX53DkomZcYN\n1uqehcAs6asfF7hcyR5MYbUVfWBgLgMKyL8DIoIjAUKQTcUOjwF/pkEzp3Gt\nHEFLs2gW2IAgRTlmR7e76BJ5LgPbTW4wSiuAaAYIsTLX2VVBSdgWO6iwdRGg\nx99tXro4K+MLQaJl9SEdXgZr4w7c1o8M4sWO9NHVyolaFAqWa6JC6pRVHYj9\n87r8M28g56/tdXayHi22M43bcapGh4HU4piTdaG7wfUeRPQqln5suBBvXw23\nVWxAhwInksDw27aAQB/UkTpoQlFze9JwJyWWc0/Kb9D1HRFoxDmYmAEFi8YG\nkmpU2pO0lQQpXCqWrRymNWFWUmzM/LiW9WDHcYVMCpSATnyHGOAMa1SJ5aFd\n3We0\r\n=TNBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/touch-target":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.1fccb1418.0_1607444895949_0.5111239368794802","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/checkbox","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.afb68894e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d1731da2d327b45f9d75dc2e456a813fac63929","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.afb68894e.0.tgz","fileCount":43,"integrity":"sha512-0uYJT9HPZF9OxRKKoKX0WOpvgWfbJiDHtxS97ugvGFqa3TMjG2Hbe1RCo44YahyFVCjWsZ/MM5rpFbX8I080Eg==","signatures":[{"sig":"MEUCIQCGz4/3XGaA/fM3ocBN4gtkfMFT26ktrHR3HdDulJ9QgwIgeGD300cu9SmSu1Wdg5CFs+BDnKRLGCBrdxbyqgsjLjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qKCRA9TVsSAnZWagAAjyAP/i4SGXMusRKoHpRnTQ9L\n3hQKbbvzpGUlWd7izxjaSAfcav/ZCbsOAwl4lo/1JH6JW6DUh/iCz8Ydw8b8\n64G2lutVZsPzEWykbGfsrk3xdhM0thM+4JyMzbyRsxoXIegJTGCjUYSHhBZB\nU7bSAoqdFi3qdX0aRx4/6HsU/aNGWebFrb49x6DF4Nxfa5oMTizZUw/czv+X\nmhdcFA2isbMXIA0It3b63e7EAvtv6DH/ea43Tf4WwgQ6CHf1riNFNELPpSVh\nckxId2em6YF2okFTe7TCWRKt8aAL416EjSSlzEUwsGXjDdryt46x/daMlVMG\n77L6+qlaoD/0nibf7QF39l+qHfNNhYUFkDXtUajBYsjem/QY2mpvw9Lcrhsc\nT7XBju+CSgBwq4LgrD0A6+sRf9QNVq3Lc/iT7nRCZsScGm7uRz73cR4St2CZ\nez1ZsF0tkfrF4nfpWUmVeV8hsnD+ej0uk7N7fO2Vh91p0qOV6dloWgWgf9nS\nkuxvyvgaxdGbBMf13tyc4N9P3cOmPc8Qv4tGyTAu8b3rOIjepYSnAeaAJNMB\nDBxfTkGfONjmQqrLT9osBt2bOsH6sMFFt34z4n5ARMrMENJKBvyxEVBfwBjZ\nGyFdk6huVzGe+LNIBBw7ovVoDr52RUtIR+CiaE62Y9jwaREsB7ix2fvwHctH\n2GVS\r\n=VV4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/touch-target":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.afb68894e.0_1607445130138_0.027028826584678756","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/checkbox","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f6c80db474c816898cc15dffe6de5c2baaf505","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.fd88d40c2.0.tgz","fileCount":43,"integrity":"sha512-ItBUiPdbgWiUSN/alRpdmzJuvYf7zsRskF8O1g1oNDhciOVhC+hKbqLjSbKPm/9ccjgOp/9hMgKLq+YyTGecsw==","signatures":[{"sig":"MEUCIFYY+tJcBAvkmxLVlARZuJnD3F/Lq4VgwQcbWADnx2wCAiEAi8SU2++TU9f6m+T83SmC+ZUPwfuKpw5HyQQ6Ze4qC0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz62pCRA9TVsSAnZWagAAyJMP/1wwnx8DugiN+W3I8E+/\n4xEfVcwKQlXyCUGiv0C6yLnZIg0Fi8+LR7iHH6xrjAIccIKKbAgqExQNMAQR\nXWJnWFuJDwiY/iO4BvOAlwcO1xSB/oX4QQKAygnAzAfd71LsiJyU1sb651oc\nVFrIJyiat5rYXifGK5bTFyks17HtOCS/WcwXnHOE0ZwnKUfPyucRkKAD6FIX\nOQWqfbfzmcgp5tmgjQTM3sWbAKOEJk+yuUAg2lS/0KRCKZTQu5/jWMHNJsU5\n7/BMkLQmNz2hvbkm+UZANDOgurx7/dIxmyKy15HmZwEuwmvcRRrXRmFyPh2P\nfktFXH67fOFu49cuvyv33UhNy+K1cyt9osIQnWCEjSh48ZAQHl/F7LQuq1hk\n/SfQFn3ux1JodYUTIQclK8ruZd9fBXOnDraZwIjidm9B5iRRNS2yyG9Cfkm9\nvJhk/AEGkrFIRJf/1R1oDiChc0lxXJfwggZYCSNT400VubXGi+gnJVhIVnfE\neOYDgnt384Q8nyg1JDBbbJGuDZ5xBeGTyCy/BMWuzsKDGmNQfHB9aSsF9f3d\nVDFsRrV/DTTon+ABLHUjnInVE5FUz5XUBzexIqqRzUFsl9VylZ98uJHNdi7Z\nhUvwBM142jt00PP77JNGftZGO+cfCVQRn+cFEx2S6jbafU5cISkah8F8LlO6\neNKo\r\n=SKLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/touch-target":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.fd88d40c2.0_1607445929388_0.9843339078468083","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/checkbox","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a0d81994c8bde9cd28dd901144714acdc1eddf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.ba9e3109c.0.tgz","fileCount":43,"integrity":"sha512-LhpJ8FS6KyUzi21q/76Yx2+8bEo/iBuyFThUElt6jx0UUtQ6iAkSlgiLnxMwikG3tUoLBhOHP2Zs6FRlV324KQ==","signatures":[{"sig":"MEQCICbeb/mPpOZ7z5sxlW3XEO/Jhk3U+RF604DJF8xyr7DQAiAo5kdGydrWCl3IjrtMvky4pPomLmul0qjwD7QjqCyImw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85sCRA9TVsSAnZWagAAOu8P/3gEuGJxOKAtIbclmDv7\nMGcvYGb7lroSCSfEA50xzRRDp5Ikn2n3BQZ7Y5oV1KQBJgSoNR8vWyFkIQEC\nSTHMbiEcNelVI9aztY/yRMdkpbXfaL981D45ZneImUjnxS+fBVJH70wxYSDl\nr09k8+ORT7fm5W+wbfw6Jjl3c80KmlZFkrvupL4eVJ0wI7NIDzxtJ5NyoS/S\n/i8B8MSk1TYlRTSQfe8Iwt+oQl3xXGw/nmwc1I6clyEY7//9VW8ATnc+1YS+\nn891SJKJiXEGj8Kobt0gGLpWnWD/lXLUB5P/akgOgpWEM0goKLJjmmAtZGyJ\nII6j2tSAKllQkIIdm6tZvmo2cAYQ0ic3UPGVK9E92e2DNg37uX0Yiv60JgfG\n/W7wpV6ZLetkFU+xidxIIgIWH2cTfw6PUHNg6GPF1D2Q25+5PsH1OMn5Cpnm\n8pPE1VKlGpk9s40L54Qpm0esdNWEdNPHMLAXaQbmlxfi886dk5PyrE6CfCdf\nAOWSzvvjmrY02xJHI0KwxCTq/Sfp7aRzfw1oexB14XMA2ilts8X1LGPXU5kZ\nnJnP4O6W47bbqwYcDWF3Gmg8XsUFE3vEvl5hUkpzozuEevFla5+PnCuC74Ph\nnTbB13SZbkOMtlVKkiR8PmO/KzURV0QdYrN94K7UVza0WQSb0n5s68jtilME\nO+FS\r\n=QyQF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/touch-target":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.ba9e3109c.0_1607454315749_0.9688692455150683","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/checkbox","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"974760b5fb90d518a9802f2fe06c9dcceb355417","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.1085c3b2d.0.tgz","fileCount":43,"integrity":"sha512-u8Wah1NcElxlzsAMI5K1coTbQYP1C4noVT6/ANEIBuobUq+7QzeFbk4z0hS9IsVkrWAS7+iTRRSXCvFHOInW7w==","signatures":[{"sig":"MEUCICjorOWXunQM8I6EeBVsv9JP3byvaMcIFBiBpAiGkUsxAiEArVXjdNNHmr7RlsCAfKpB+PfuXnfuyoBQBt1dc1wzikk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SE+CRA9TVsSAnZWagAAAKIP/iyQ+x0uNxnj05qNbSsm\n1/aXgvRx6nFzIKA6/b5qET6kMRAhxTRG4IE92+Hslx7lB7Uk2pM8lV+8Mg9K\n0TqrJcNDGhJXJ2u2mNDsYyeQbutMPIfjPQrDE46XnQN0w2mHZ7vEaqnCPBB2\njzWl0fOJe721HrK0G1r9J/kHfMKJ8dY8YbYL+5WWeHxdZgoO99rArmqz3L1A\nVVMdSuRYOYqdlIr8GYjmlUZlkHNtE/l4GvbUB/62tVHoGPsvJrto4trm0jvA\njCWtyyzSk6N/n2b73HezBb31elKlZFZkO1LqQ8opj0F3M7Yay+6P0RFVvZLo\nWzvMEG346GBCQABLiRZKn0ljHjuUGkDH+KLm/+hH8tljF6tT7nVvtfnazaLK\nppfH5/gBCJFEROpTqqBvuAiRBCYNlkvnl2ZrVj85zBX2+Daqp3n9OT57P+NN\nlaC6TjDP2xuKIBnBBYKOha3lXp4hLVDllgfzsvpEFPeeaQ9z7ou/hHGvzKCs\n7XQ+rkme5jhXZWhIUUI0LcWmoO3fIsoNV0pmPVOXdWG74589wNXqEE4Zm99R\nTRwiBcttzljqaidpJMpR9w1R2UxQW8p9V/6cgLxu4vR8ZfVcmupySwEZ2CfJ\n5nF8EOm9fExfc9gCGZPRjyqvUsI8lC6zOqxUudX02+Bh2pNx5O2YzLuFTAOE\ncXjz\r\n=okL2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/touch-target":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.1085c3b2d.0_1607541053829_0.16362989977501963","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/checkbox","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e30465be285ccb9e43151eba4ec71c5dc61e8b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.c5dda809d.0.tgz","fileCount":43,"integrity":"sha512-hqm1mpq5u1DNQcfMoqSTZkX2GPzN4kCdClu4R8Uxq0AiyaEpyYCkFOg0bzaLn0w+9gYny4wplzIffiMuhh8Ucw==","signatures":[{"sig":"MEQCIAbqNsF7noz1Wo0eCuNwtsp7VebbRpUneovGuQpK+gUdAiAsl5EHBEuKvrhNS2tuPqxrcYE0pALaES40JZSUTFCESQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ThnCRA9TVsSAnZWagAABQoP/3LWdX7CVefY6ZHhpOOk\naDeuS/KrEeJzg32MkqPetwBLPsag+77Hl4gAwQTxVErFL0CziVzjQfS/Ek1g\nGV1KV8d4a456L+HAjpGb3W92K4B2SvyC9afTDW9nkrBWIWTgUOlrRaS4Qvlb\nfq+flmlx/ySN/LCa4o8VdpkS2IE/8m3kk0kjuovYXRHHYp6tedWzs3rbbaPH\nBR6d+TwuMC8psiQrDRD2FHtlViZ6McKvz5er/gkfxP57Sg6nx0rIPclyWjDA\n7s9Q+XXOOl/fHtou6YxDASNSSQGZ8EJzIjrVPEwyD+LUURfdRaKFQk/kJvLa\nQEiT19x+ACXGrIFPfmncbnNxAKcYKdicjgVWpUTZfllVuOSbCivF3s5Mgf0R\nxZK876INkcfJjT8pyGz0lsPfoWTv4wnIG2n8zi9Coe87PtIqdmrQBmYCGp5f\nJbiHdHF8DVKC0He9In9ycTa0+0+iN/2ip19UbX7Oi1WoHjMDKsEI6D1o/GmI\nezNlXtrGFw+S1l7zygsbs0QQUY0m1J2zqkrYF/q8QoCLWs0hCaRko6LLy0Ui\nqN/YZnRVXad9xCBwEFVHKDDn7Ln8TkBdcw4p919hDzwZliQpw0EjnJ+N3oZC\ngy7oCdkFs//ivLSsrqR7TAJcL7Xoz4wF4K7L2vy5YhLA7ZYB20QnKWnHJ/A1\nnQCz\r\n=SP0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/touch-target":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.c5dda809d.0_1607546982740_0.9124963724230521","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/checkbox","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70e8abc315ea358da679578b086d7874460bc76","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":43,"integrity":"sha512-pJSowaZk+0TR6kZCLoDenlt8mqyNTYHO9p99041NFchf8D3T6W267qDhpur8Y4v5Pwr7ygUvUm5f4KhtnEUx0Q==","signatures":[{"sig":"MEQCIH15NXVwIPpYQW6WZ5ObjOnLUJfdVG7HyOXfzqhPAXEMAiAEbe7KkeMHpbYUswNbABB4wqveTJ4c3byv7k3fjYkvtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Ty9CRA9TVsSAnZWagAAsigP/0WO5xBVDniqdO0ZQjlN\nFth6I75tS0a6ZM1o5u5twQsrD5A1oANRCgXAp9/jglSzAnu4jDaVBc8TbGzc\nMhMPxQu6zM3Ahw6t/sCxPjKB6ehYgmhxeOSllOtzehPG0YPcWD1xfkdd48yM\nFMwQGDdE33T8I4eYc4uFbvFfekk7lqoos0JG1FmHYrD9rc0XpHIO2B0ZwRu/\nD3SSGh7IdZBVAVhKi895aSvLnxuM9+x6wa/IxUP0N+5JmFtxBNP+2ADDOcYK\ns2J1vrdZeoD7lGaW14C/ws+BHMa4a70sBxQXXu2WTzHhJ/NkMIoeCK3v8cis\nsWNEz1snbGTidGNXdt7SKMgdKVAXV1aj8/Gdy2ZxTBHkJ+e5t7oXP7jYVv9K\nOT8ZG1coCyBpB1lsQ2Ok6Cn2OmtJhXDTBWE1J1IsyBeqyKCyP6mBav7VahY9\nY1I8us5iPM1Iw2bdPAxYGy7/uc6Y3PjDOS7cJM0h1TQNeAsFbSjFPxsQOL5s\nM/Hu0yI2cotwwHAxZQsvTyDq4iisIGwX+JZNw0NHFhZViBRGYLe7X5Q0M/Ah\nM6VSQRgZG+rXZFJnwcGS7kr+ElbLUcn4HWzI07Pm7/2+CcHWLPCzpFhlG3KW\nQWGi9vDcH04/ATCxUCiZ5pNUGch9Q8T5oOIlBi+jxdNjWsW68EdRRBZU+QDw\neFOM\r\n=Do5Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/touch-target":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.f5f1bd86a.0_1607548092770_0.17500946679944018","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/checkbox","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.00f38200f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e19f2f6b663dfaad28a30ffcc529c42df04b9a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.00f38200f.0.tgz","fileCount":43,"integrity":"sha512-yfK2WvDOeB141f/AOjWzMrUd3CYAJ0k9jfceu4vzltfrP2lnQqincutWJAuQTaif6cRG0Op4J7emhjf8pmgR7A==","signatures":[{"sig":"MEUCIDEHLAsFy4OwQJhnRLf19MOwdCSJqS3xNXixyLlsooCMAiEAghjjSICLdKBOFuQA8muSWkd1UwRCRD3VRAJMSiWAk3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05PnCRA9TVsSAnZWagAABV4QAJ8lo2B3N+Pr2YKgkz/5\nWLDlPy8bn/NwBalyBeEzls6whAdSUbA4NdxyzpA27AbGTjfAn4ZRO6I6fQjd\nKnOXRNV1GrypOWSgddz8qooxT4e6tQXTcKfRzaoSqYVmhtes1mvLmr55MtsM\nskBSADy2Ut27GG+R5koAyRzQ8HRCx8m637/dWqeyPFvjOrXYqF5f0IAFw7E4\nMGPldVoec5UZ6Nyk3I8nBZEB358/JEj+4beNj9dpHQz2yx3YfumUJc847BxT\nkastkIV/23E5eB17rL8Nr45H9HEnmXLrUx4EXV9llcuZgYFheYIb90k8GZDk\no2eI6f59JA6CakvRLV4l4CMeP39VPpkVrCvQqN8yK/J2s8+i91Edpm1TZ+gp\n6FLrSYV333Gg6baYhe7TuHV6HKvFQzAJ2wiKtOcBPIjQngwpTs4PpVn+B5gY\n+qz3KS1EQihPemt4hkV8v11kscbm1fa6ha04T4+TAWrlUKr3yJ4t/CHJyHfi\n/ioTEjlgpBc1O0YUVxwaezG1LdL46uFII6gluqA1BzZoAT6Tvyhvg6ujGbtJ\n0CJNEs1azRoqqFlOvIUAKpFB+lvLW/EtV3dAt3j+gwXQ990VBH/oUGone6G6\nTEAbNyVg2+mKMaOztvqesxg8FC5Arkxg8LhBUQJ8x9ibXYc1uZoHppGjuJYW\npjy+\r\n=hjBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/touch-target":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.00f38200f.0_1607701475282_0.3671518302198502","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/checkbox","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"298bd0258d44433103dd8a807bf4e7292024c247","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.ac41a5729.0.tgz","fileCount":43,"integrity":"sha512-qao9Fz+f5GGJwT5tzER4h7o0BxHTCLno7Cs6wt4lKP9WKW0XwfFFNQKO8h53xJIlywUdrIX0V7tIJ9YV3ixwvg==","signatures":[{"sig":"MEUCICwQdlod6TTsacv0hn+RXEnByPTj1tKGUzn4KHu98CJmAiEA1UW3mfM2rqTDHfcdGeFoq+TqcJJy9HAPZnBhCLY3Rks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054SCRA9TVsSAnZWagAAHkQP/3sre/m/YHoCQIUUKKbC\nkscnTfzdsvYFly8xOt9iEWo8bQUM3gkTYmd1K2oaJhJKyjKb9P2Bq2set1Ab\nxbtHCnk30k2ejd0rDn0ECuEnB+5w+ERDKDSFLuALD2V55fX8YnhdGQgZ6V0b\nyHJY4ahL1WBdh5CuTUXJxv57esPvGhJYmLi05kRnnNM2tHd0OCnk4lRtBlwR\n5f5OHktgtINwAqlCRy1+6KQxnazC3nmhLtydRLfN/xxLBd4eY4xwnXlfLijW\n3GLuTapH44xHopmrdG70vj9zXxmBGntS3zjL7bcjKKTI9ztAn9lQD/FHDnS0\nAi/WD8XhTLcl1mlaIa75EOOXqzf9neKD8wr9mwtmk/q8A3oHiThpEys+ASHX\nPBFbqHLGHwbdpndfcw58CTZWwsqz2zXcBo9L2C4jvDuyEKXSyuH1r5X+EX7K\n7zR9IdroDBZarcFVzwXoJOTE+JICQe2GTDgdIr6XxO+p9+A6jOXeLIS/INiM\noLi5VRe/egEL2Gm0IIt1qJ1ahOqXxrtpUYjynOxTOq47nINmumYPs4J9iaJF\nWfeOIUsQP/mZ15O8ErGgNRr6tO+7TRrwkktPRFaAGXK72UkYZ86wYOhYibp9\nQM/cBCb+ZFLVei0KQEp1xraMuc9A/Kq+BYlGBITR9Hl2Zo7nRT+P4pthJoMw\n/2xV\r\n=mTFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/touch-target":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.ac41a5729.0_1607704081711_0.259326680674677","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/checkbox","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2eeb7144e676591f4b66e88d3b3a65c7aa99366","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":43,"integrity":"sha512-igv9Ds66kRqSR41oBt3QeJg8Ecz2rHGTdlKGNK0JdO9zKxUU+y4PGcD8gzwtI/P/PHk9hPlxb6F8HGV6SmvDkA==","signatures":[{"sig":"MEQCIDaKKJHYrV3gCxs4ENvcFiMe3yc8sAKZJIIPgNBVnyeKAiB0JMas0CR63I9cOn9qIE/q60B6F36CwB8c60z4tdyKGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bPCRA9TVsSAnZWagAAMvUP/1L4PE1v2bPvAbnLZ72i\nrch3cVCv1NtRq2Fukb0kezk+kOscY+PRl+jJLbxgj/KS7wkkpmaxVFylv6bG\nQ8IRvOAoMp6SCQX4CZ0jbKsXFFZmum1ArSi8nrpA1FInivOLN9Ot54mk8FsY\n5S4unvRlOXKq9AXpQYPP9TP7dbIq1XRegxLbwozQLd0LKAfMvtFCDdzaxi8y\n24eHSvugTWPVKvcFpUJ6QmHN/cq6om97v04hKGCaL4XqPTGQXt8izgbPJxyv\ntcuSTk7AylIpZ1i5KIzitsPixGHhHzwIsVQTKgJEshVupwGYiVq+6p5YLId9\nlKrJfw6/YYpOzSyRt2sqO/iz9w89PJyt7dGcz4AcUXy2GWF56+26YjNWuq2L\nuocVUPs5JV++pvgbXRn4zz/aPWTyURth8DlQvT96Ycf6DYuiY5N2bVsjBf2z\ntIYAYftGOAt+J3penfNsGGiXawbTx3SU7AqfrXWyYfl2orWbxHQeMGNXfM9Z\nWny6RK1Bet5yE/x3nqLaF92XJ/Y7lr1Arjrxrwj9yqKFqb6Jo+dz0MGjWjix\nyUnZ2vj8d9Rpm/VW3jE0p7x55oXuDhiQNUpbYqyn9CbKlKxRWu5yIpI4CRcn\nFHpXUuymGBBWZJBoAm9qJi42QcwGS/zqtYxRiFBAOB5oc+7UvnXcHtWG419f\n3uj+\r\n=O2P5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/touch-target":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.7fe0e4f05.0_1607706318672_0.5131108457855589","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/checkbox","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.9244508bd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f822fc7c06a60a632ed4bef1321487c31511008","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.9244508bd.0.tgz","fileCount":43,"integrity":"sha512-IntIeAYZPcmKuwI/scPvHrlPLVfvq98Rev4RikM+q8BCbNjpEik9tiAmhw0g1UNzgFaxclTHHiVkrk3pOrWA2A==","signatures":[{"sig":"MEYCIQDHlOZELnEEkju1YSG9nCmKV3c3eFnRu0OYfnopNggERAIhAJx0GoQ+rC9qNzGlfEDX04rFkHMYU/Zc5dHFUx71Ck5e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NgCRA9TVsSAnZWagAAiCkP/3bIW+9if1aL42bHYOGn\nesZ39ZkCw1Nx4EeX/hGmE5WAlkHo1BqBkfSIYz7iufPlmF92G/bFHuyVYPkx\nEUSrGYVrI/xLzOUNwxFOeWk1xoQvNFlGrAEoqik/fGd+2l5kV8YVpNS4g7vP\n6k4prOKmxYFm3+JJ3UFUl8WhbMgeb+Hwn7ql7Ypsl+7yvX8f1HQiuR0PGtGg\nL04dI0y8NbBNiG95H0HYxCWjbeQpDI5FiURMs604cDbU2O7lyt7ra6fJnzzr\nK1VAABOO4GvD2DVaaWHhlWxfeUsoGdhpH6XBI5nXGPRUPMLFzc0Z3wqFoE12\ntpaK+djtuhVvZg/B/kfSUur4pRah7CzzqvnnM7KP7ZjxahGNWtit1rKMgZV4\n2ubkTrkwdnIiSFT1huCt3BdNKM/1CC3n3PCYXZkbm6tQtffYcgiHjUqHX2ng\nhbC5880tOFmCfAYnj+skqrWU46Av2nSAKfF9xOjG3a0utO0GvorRSUsTXCHC\nJsuR+/XJ4D6SKXX5PSD5bWmvk6BViIqERcYgiImSVvncgZ7YfwaFqmrvZ4nS\nqH4kqWTNCSFIPnkqCBHWsBPyMNW0jR9a2IDXC4pW8cH0kHWhGKNDEaU14Mja\n7Xzgk5gdKeepNBqD+SKXZ5BWI0ir8u9COx3oJj+/YRrNiiRxDnL+bfJl+Y9D\nBN1e\r\n=oDEI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/touch-target":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.9244508bd.0_1607713631780_0.08907406554559572","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/checkbox","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efd2e472ccaff4857b2cc3a56f115dd196a22c4e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.384a8eeb1.0.tgz","fileCount":43,"integrity":"sha512-4c0AmQ++mCx0lWxKO2G+AgBnJy42lz2Sb3EtDTeX5fyNJtKyX46HbuNI8CcbWWOkW6AXSc5u4XHtJDRMmNsYag==","signatures":[{"sig":"MEUCIQCc6pcwIJ2Y1xgyV+43S2CYRIIptP23uYXrXrP0uTi4EgIgedt5Bll9Zd+dIJvO9lxJQeCckVbzsTzCSnQq9YTwCAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j17CRA9TVsSAnZWagAA/BkP/0zJ3QswvJpURfnIWe7U\netFYK4/6EG3vsXFbsYNGp3b/aCao6gSVTwMW6kUh0ikaW+1gfJ1tWTH5D1Le\nsVo579j4Sv0oHf9xRww8YWfL8Py1oEeUln9YTyD9J7sf3s2yJ0OtyEpjOz5J\nr6J1nBSOte8T2k1OFf7mYkh4UQUTT9UBHtSTCm+N84nqvVLPlIXkQE/ZAD78\nZZgkKZRVsjd8B8zmnrOm3QooQZabDC755TxtkJEltFKm//82qE9H3GiBMBoO\nVTq7LmrdyXeVAGQqorV8U5gHgGrwcTvbItN361uHTqZnqYRQyXnbv80Griy5\n8HoKZXK6JM4FX3I+eepTvhPmZeTC2tZC5hiJDpPfSU5hxwWPCUfVz7h+fiey\nR4ptuiAdqZxw8Qef5zOefJ9MGFm2UFFqSq/wfMgfjQcf9+t1+ePKVelj6mr6\nA98wQyB8pG0jfOuKTuav7u4CKTEiQ9Vx3fr/WJvEi6eS3LHNylyUc4qyepNl\nHAn8tdKhs+SHbo+mX5RyXMllQHse2S0jjV+1CmdNSte96QD7cFE9aPD0t+KT\nTsxmv6ts1odUZuBjKRG9brwTcdESfnf/oKJORokdQVzLchdJdt22fIPsHbRU\nscA7cuMF8c8tc/a0lAhwzLUp5Zo7kOzl/Bspo/rZprAYGApTpxsEjFwSqJFY\niNew\r\n=495A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/touch-target":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.384a8eeb1.0_1608138107464_0.8752568958955633","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/checkbox","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a3087866064111979e8d443edbe38660f095e9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":43,"integrity":"sha512-I8wgw3+Kav4JrUT6qpn5KFZjmfoY7+pEcFQvfsrSFbpvGm4SQ2V2igUSHEvTvBCR7hWEQnOvc1W1z2+86dyLWg==","signatures":[{"sig":"MEUCIQCkpHdA1kkPEhA2BA1XTLsTT32GBPnIlwGGSgGndVbKpAIgUwW5bU0J0OepJ3AciN4WL/KRFuQ3rVb6gnvm62tUtL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGQCRA9TVsSAnZWagAAFMcP/ibAqJghugPn9yxIrKNa\nvTo7ilmwTR5IrstzLVvQbQnLRbgZG7cxCVvaIVYymVFzCPeCzJLri+idCIaU\n5dQM5ClkRkIN4DFLN+RE6EoZ4IxsOX9LAarqwHa+jGyAiq4SBxc1x5qsxZev\nofB8p+HtsRKvy1M9saTbgvNf7G/ZcsebVt0yQRv/JH/pToUArNNAvLwA2v1e\nQx0Jzx4qDbhXMmFe6tQzuCA+o6JoAGVxLJaqKv+YySsXGq4OSoYji8qFL6n7\n5Cn/lyVv0eUICLL74C/kJM4Ysyy3/6NtALtlHgbdqH1jd/guXtGCaRmBAq0b\nELWMBrdvRkfuVH20mNVqJK2JN5cUkPUYnxDmXEcTOdRk64J/+8KJhPj9h5w7\nNXHziuinbm5x3p9KxXwl/OuW6Pwn3xcQgAOUO2tR2pDFeayJO2amJolzZHse\npzM404d2Bbn/WdXuG3IayuWOKNk3pNTe2GtSa0dLpALurBoEttjNO7JnyQ7Q\nBnBCS9TyAmnc6AVkGb1spLWf/j0UvyZo+CJW0PEaHYrFxTOV/A8mqnlKZn6T\nFzFnBUd5vhtHwYHLK3GuT0q051GaLy1zg+XOXDCRh9QbL6gnwjh86e5gx+d0\nuTzIJWGtN1QVoUtSRggdWTp3ALwD2Y/qv2GFv1GqA+G5obieiQIOLH2hlHh+\nHTt+\r\n=OmkQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/touch-target":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.eabf9d5c2.0_1608143247701_0.7963787890678671","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/checkbox","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78334155aa26e764fb3ab804d8c9a07610b78ff4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.30fdfd06e.0.tgz","fileCount":43,"integrity":"sha512-Eg1GUBp8rfWSENla6fgPZjlDmrNgaXGxlzreAie2iqPtyIX9lJ0COUJi1Upi4M8XeQCFb9uJJtjyl27pyQOjYw==","signatures":[{"sig":"MEUCIQCNw2lX3LK8HyBiiAzNsWQmOMLj0qRrI7TNLZzXRdOcxgIgR6Br+N3dHE6jNHdW9DofxxXrSqqVD0I8IjPva+gT1is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrtCRA9TVsSAnZWagAAQW8QAKBuQ6WVOdP2Aa2z7+dq\nAKgewRFi1cUNprq7iyOu41fPtcAY/FzRHKNr8tJydMUZHnlVmUvpCUYj/DB/\nKWulvcWmkvkpwoaR01vmIWKZpOMTZSpXupfjJewFiiZhuJtSc8q9g3dDT4Rm\n17yhic7G2E67L1/xIhAlirlBUCEb5tCrDKXFoT4ivey6o8bF6tc+skGub+K7\n/JPcv2Bs85TUhOEqgy1SH8I86VBFtXT0A4tIot52wV3PxN0qmKocCk2dSl5E\nlyfYNeLk0sgRMf6dRyIiI8aTwEuvfZkrGfOmYpmkIo0Ip3RTniP9/0Yz6OVN\nPUJK3OQJMCVAUnY+RXHSuNCmgBznlB4hXWLvAH9D4Al6J1y6R+ICQj3CWatE\nY4f/4R6Gx2yRRvyOwl78ib+BmvllyHjmqrq2ZiQ4Kx/J3c52wPSZexYOkWlg\nsAK9kIY11e75cZrQ1NkHjvwhtqvchE3nZgiecXQAm3Rr9a8wG1JOVRXT0/kc\nRuT3ZyzCU/+M2yPkCOm+BFGtaf9hlok3TmpHHvJ2Yl/w+LgIwYZw2UeV3Cym\ntA++7hOkfw894TUuhxFafa6W+o4xu7l42IuKjva4l5RqtRDS6doGal+UFdo4\nv3mP7bo3fxlfjxN78qaYKkEysx/hCnYoGu/OFb+O6TyQpyBIqzW2k+ctkGUt\n/bNm\r\n=fHJm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/touch-target":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.30fdfd06e.0_1608145645374_0.9866959214698903","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/checkbox","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c410caf304aa349bf905d61f1f6c0814e07330ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.9590a8f90.0.tgz","fileCount":43,"integrity":"sha512-J8eMgMxHpl/lsxwPzi6Ghjd5G5tqtdi1FGWAnWSUrUciehxAEbiWhKLa7CRC+KKzqyibD41NuhEiSKeWKuEPGQ==","signatures":[{"sig":"MEYCIQCilpTYSDXXCXhfsQ/a4RFjBaMmuiqvOgsA39mAyTrOdAIhANojA2T1CLk+ZXMJ+eA7ocUJbzmo2L3C1W63hr/fLcQg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/fCRA9TVsSAnZWagAAQAcQAIH/l7oak7jqrvTtMlsI\nHSEoCG3PbMLhCKZIZTh5b5YpPnnjNyno6vE4hvVjG5v4bzFTgL0XZZaFPqYo\njy9pgzr4CN4pGvWUY8zGvWYdGGzcWd3GAuMeVnRwIRWEK6EhkztMOFh8WjSc\nsNto3xDGVTRVSYJ2cgapxwfTzYuywLCMn778fon/1mPJ/3csPoMK7PCx7LQd\nDOracMLDcARjyMngadBDWQcgdMvg32iTlOBgcOn0OGFeW7JeWWVzKU6+IoRt\nntaq5SpAo2zfjFf4J+N5D3V4rWIXoiz25tQEdK1BTjXH4L1AAh8LvUAcdo+e\ndZgswfgVF+tIhRoEcQI/fVLuyEnINx70vEF5LZIv6aCBkQ3sBGtSQ8zDkmXi\nwgPawWrhMoVpybhLVF9OMf2B9nX6bEX2yeVzcaB/BBzTf8JCP4GQvXooWmlN\nhEgD8JJO/sngX2lt4qkb3LEkKjEicBtGV1cQgUPb/3yo7QhK/hA98gTAv3H5\n5laqhCbNiFURNYMj8JKZ9ZIic0oakWjKcK6dLUGXO/CQYXYb4XyYTrPvHj0K\nPfckRmwL2ExzPrts2c1kozHSQ+HbUZYByO/ch5xNUkk4agdpOR4gHFf0SZgG\ngm9sbyRwBy8jmsmxV9m56fJhaq64BOM7czCUWDJKXwzwIQrZHR9Xmy5ZEPPz\nFH5Y\r\n=CWIS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/touch-target":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.9590a8f90.0_1608658910717_0.06847992699298366","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/checkbox","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1eb0d667fddd01ffb934542d5952ce42aa81e4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":43,"integrity":"sha512-8rGN3T+9qXQx4k15MxNdLTtIyz+0x2CHsyOwj0mW59pLQHEZ+Ja81ZiHFnP2ZsfvVksQrXuCrb+TasxO9edkhQ==","signatures":[{"sig":"MEUCIQDPWZLtti+YoJ36kraAsWlyh0uFbZFQYQHEQHieXTtekAIge0U/7L5qMYCn1nlMKxG+xbHsm8/KPRuq89f/7OmLFJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nuYCRA9TVsSAnZWagAA0+0P/268+Mal9wU9xbdUZaRA\nC+WFoMTrBmGbJxjtFAGY+eTgAMJg/ZbdG1FBdBIsqFDu97BstJ/GYDLASlbM\nW3ZQe/DyhscqkvMk69FBDyuVZph08fjZCDmjVdAWoNchP2z/MKvK+PtUHUaI\n1fm3AbcVzz8Qi+ouEoYl18wUHjnTz64zUjXYLfh4NnuHWMeC0M5D/nz1FtoL\n5RJt2yMEXnkiE9S5FqveeW5N/6W/nJM4HHrAC+Bqnn2t6+NNXisWhxkn2JWN\no6VBl3GJbG7Byx12zcpqE799ltA6MVU4KNFvXU88TNks9WgKpFR2MJwlVO8k\npCgKQ6c8HyBl0DiadzcIOPKAcHI1CFMn3r7wjicdUrXpkVYXO5ErlWIgxdsr\nDLjNFZA010PpVZVwcbO9yKm6DW4DmIO49OELEV0LnHXx7CjCcOK6tAusPKbA\nky00vvL9q2SAX6ogRHKnvuTRMzgOsKlkl7+I8m1tbmThRhM+zOOVS23umocp\neSwxStecQgk/ulzJ5TqrHpRrfFG9rgPBvdN+9viM1pvDBc9Qaqul5w5vLTG6\nlpMB5KFDdYY024swye23/H1yQPljihGGQQty1eQhWkTsCFmoarw/prc0RGy9\ns4Ud4ID8GjwjyzDi55M6eskyMshvSrgu+edKVvUZgVPsmUigyDonAWjA5mog\ne6fS\r\n=x0Fs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/touch-target":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.f89d8b8f2.0_1608678296268_0.9673596058812937","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/checkbox","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9d15f1424fcb8f5c333816e21c9e0eab38850c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.fb194dd35.0.tgz","fileCount":43,"integrity":"sha512-TLh+Y3cm86+UUaLmBh8x138hfny1fdDzVkmh+VsxSo++tad0C0iput3d3b1hxlGAYuvXc33J744JKKr+L++7JA==","signatures":[{"sig":"MEUCIQCrq/4JDCCkdVjUci9TT89iMYCcSUp+mYMVEL6C2RMcygIgFpG+jz2lsuheyJoJxZD8vD8N7niyrjPKZh4lS77On2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPvCRA9TVsSAnZWagAAUKsP/i5be0aC1x6ioXh/iZwf\nvdM/j80Iw2FCne9K8M3LF/NQmMdbskj36SLyBzXnMYK74NXoJdwusfL+x3uA\nHpxVA5R4yNuD6vXbPg1lqXvlFEuu+wzo2l2WFP6PBK01vHGJhLAIQJTZAWDF\npGQ7mxuTn4kyJDI4mp8xvmkWNpkKaLEHRmbko3wBlE80oRRJx5GzxPX10W+V\n0J1MmOOWSUGrWyT+kNQF4CSMI2dXzupt9FVeqJgAX/qM/VnnEtZP2ifqUgro\nNg3tpnzpAE+BbQ/apm8CAS7odzFsVPh01pGWJdA32UnFQHTY4dZ7gV9uhOkL\n9kO/CHMA3omT8X1yLVM2Waj9TF6WZKeNkaNz7BFqxZ6YQsFlleaW+cBjybE1\nLq4bezt2b53XfRA2MsCRd8L0TwiyC2txCIQGEHecug8ZMOZ9bZEHO8WC3JOf\nndrivV/cWy653iuLjHGpYH1Wfp3mW/AQq9gQJaf3bQX67ZuqoYX6RUz0FtVX\n8fKfkV9afgYEKenBZ7Qq/MUBxyGxMTANLiOdjNzxnRb2sUrBfrnIOihpaY2D\nhx5aQZp+ky84cNzvp5Wwhght9F4w9mg5WIuD3sr7IWJgB16hRiRZsoDRGLq+\noBXMhhRcLOebjLJeFmbCuEna3KG5YmdehvAxM4euwgJGMuYDvouKx10W7kMg\nlwBv\r\n=CHaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/touch-target":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.fb194dd35.0_1609188334831_0.1222831071753081","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/checkbox","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.64f36e287.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f35d06a12d39babcdb7b7175ddca5961825c9ca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.64f36e287.0.tgz","fileCount":43,"integrity":"sha512-oV3hhzRQfL6PrLNKDRA7+6uGd0Z4J2rGzZHDokALcgl1M3BkNpPW+2yGs9uC/5riNDHlH/Tgez32lmOM1sT2CA==","signatures":[{"sig":"MEQCICSKZgN+b9jdbpyb9BXKrzeKEHeOEBUuP6AR0CzTDNfRAiBY4drh+quFUs1lyuhr/sUMTOrh6z8/Oe7dZuGlPljcxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klICRA9TVsSAnZWagAA9OUP/ifs6VVyhWKlID/V+7MH\nwoAWpCccC9Ag7l9MWivdh9bbL0gAdzR4097FoWZP2I0QIS/Mqz8VwqDLzOk2\nOWvZZwv1UW1Xi7KXo4n4nWjKXfDH4q/Nc9rMQDS7uxvrr0AviVe6QC9EA3N5\nrwDuPHIkW2S08G/96afD22x0QV5s4HNhPtGOoLGY+xrqyxlrBD7OgoyRl5T+\npSYHPZ15G2zNIlGPpj5zbRTXsWmvVGxz/VUk/Y6jTFTY/J7maSMsxwojCCcM\nOXuB9zMPx0KxOzYHJoOwYZJwHVoYEQtcQ/6QdHxidcQNlHg9CnDbaK0bLPZK\n6nmK0dvevCNbsOZjLTObfEplNMl0vyT3atx6WD8vU8zQlFCHgs6vDZhkrTHw\nbqLiCCdlUfg6L/5jhl8e756p1+29sR3+1bOEEqPSyKdViwpdbIxP1CQJ+0bT\nTx70yXXV2mp6EofQDYmpk9F4x3LOj3n5pFvXL6rf66HP0j3EZHh5z1c4+sEC\nGhAZGw2HRDEf4ziYACzoiovlwquf3Pkdaac1xF93C2O0J8ykvWTP7v5h+7z/\nw8w0D3MXJKo0YqmO7kOm8636mjhmntLE1DdKbVI84uWBDOqeOhJds7yTN3YH\nndw+QVBXnw5YIifahTchzqu4dikkeKu78W440WZOAalZoWKuYvbiREPXqSqw\nSUCn\r\n=qxgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/touch-target":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.64f36e287.0_1609189703684_0.6208424883461638","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/checkbox","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"011488cab78e0a7a4f5a36deb1eb84e767197114","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0-canary.b7bbe7022.0.tgz","fileCount":43,"integrity":"sha512-s8INkK6S0OQs0ZO5lwFYqBpIl4YATIcZBBtn1XOZP/U1tbKOp9z29E1q/x1CGG93jAlgDPoJAgZqq+aUtRmoNQ==","signatures":[{"sig":"MEUCICrIcOHD2/+tlsmBM0Ktv1hVu2LJ8VojFF+lLYGScRj1AiEAlFlvixze9PV2CZQBO4hSOtsXY/gZk0AZJZpXIvItuUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nbCRA9TVsSAnZWagAAQ8sP+wSil0G61l2cpkgH0l8a\nKMeBnN8pbGPWZ+QmLUQVgXE4fxUdqq+W+oRJl+XE35O+4evr3N/wiIE4GKN/\nmwNeQgfez4RBmBZTMQV8dbf4TQA62i7j1QEvWtiqyoMxmphnVcTC0HNwKjGL\nI/gTCQwlsxvtiyfowWyuYMoy/YSBuYtC705zgE1jQUie+F4YXe8C03ngKeWr\n4a2rRaIBs7dkX2pT+7Z7+j9BdKNBL9eH4HfLfD5zJAzzc/iymeIK7J6wqdvK\n/ydibUZXS2tYHfvfQEtZibvW15Qwoh8jsUqc119jiwI9p7W3PttdsPjbWKIe\nsUW3TKsJe8+nykV7Lana+BqpB6Rnm1IVAA9wJ8aU18bep9r0y7uq1+ZJpqZ5\n7xw73D0hB5+4F1w9Ih/vsdQy9b0pF1JdtpYTgrOj/lw5ns5y8wIj9paW7+Lg\nsnw/YEITRbF0/kURc0wXHqCNAb+raZM+EoIZj8iPuHkJCKbD+ZFi1FRzeQTQ\nOElT8uFw2DCxMNpRl+4aefSdYHe3P6DFv3dYDDoNdOc+noKXL5RjQZdVMMRv\ntZFy+h7BaxAMQKvSahVjdc1OEPi60ILMy35o+FLBjTrzPthpv8ZSFR/hSFTV\nUGTKSXSZkymX6XyMD341mhcHqWclN4zwFKMetwwrm07vNi+Vr+bDryeI/zRi\nAiDZ\r\n=rHNk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/touch-target":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0-canary.b7bbe7022.0_1609267675233_0.8905848926000635","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/checkbox","version":"9.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@9.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38912b4f153a74146bbe5832332b851a03c289a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-9.0.0.tgz","fileCount":42,"integrity":"sha512-clOW+gOVSJfsp8gOiYsKq5hXpcVAkm93b+w0OmQwV4Bj9+XAjAs2XCrLtdmJjQyTkb0Qb6X767+9cYutqpPzRQ==","signatures":[{"sig":"MEUCIQDaqYpyu4SCEL7kpSqWlFbKcLpiTEcF1dAyCDMdvYWAAgIgblMRZS0Jo5Sn4rK6W6Yeh11b43RcLX4IAM0ASzjsd7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64d0CRA9TVsSAnZWagAAEawP/iPOJ7EvVuOkUau5yWYv\nsroBtCRxjukMAG/aHzQuQ2qxbWHtp5+xhuqMGSEvWHW4yTz/vednmlrICsU6\nIGy0yV3iSjB43uqb8DeRxvVMjjAmO6o+hW3S6N0/9jY1uzDaWToK2S+P/6qM\nzfhXRkRp4lRjw4V1HN0yoLQT+oWIHqRGiuY6qYycNs2LtN5uExYdc7DaPXyN\ndLRYh8P3ff3j6cGuo6Qxp7eASyZYrlV6ydDTng0PvwFCi37LVJpKABwFLOiy\nCq/Zw0Z7imQWwGFhvdIfP6OJV7WyCtQ6hEvJo7o4cxB/naWMwRdqkMoa/MdG\nCXyC0k6dIN3tpxlXNXnli9J1WUuJPRvCQKuK0k0a4KqozOin7+jn+jd6iT7Y\np15nPx9zwDbRDAvRiz+oqG4IQ7+tuzxW7oZlhe3orYnjTf/LLeA5COZYnnoL\nLoazgQ7wB3jGKOhP7UIsQVCjS7c516Ll7FGNgY1i5JU2viTjbNAqW44Z88xB\npaHxo8I02rlnWC+6/BCYQ0NT3dJjdvpL/fow8/41rJvHN4mRA6vz51xXlmiy\nI4IEgOfoimnoOidWE7PolAF4wnwBK3K1xfO8IffAvc11Bm4KA3LCcAafpDFl\nVf3jvMgPvWDl/z7G+E0bSbYLi+EFxI+jtWgcqU+AUWDKCezVbupNjmY5DXtf\n+v6J\r\n=DQM0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/density":"^9.0.0","@material/animation":"^9.0.0","@material/touch-target":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_9.0.0_1609271156468_0.9207219229592887","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/checkbox","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.776c18681.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df06e05291ba5c85c6ca38d950a0f0ce480502c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.776c18681.0.tgz","fileCount":43,"integrity":"sha512-rw+AUht6hXkxy5IZ8U4dbiHS89hZNPgQShzqJqgaWdeuDgWdsZtbJdOcRfb1LbEdjFvXlDH6DyT09OjTfdqfjg==","signatures":[{"sig":"MEYCIQCFUcix3LX3h7CQp83H3/tB1x6+snnSEd/bccQJvPDlSAIhAJ2wQQmVKdqYeUE1tqjkBqwi6hPRxFGSzuvjGpf2YeAh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xkCRA9TVsSAnZWagAAf0MQAJrqgFxecFsjkrdkmRut\nzVq/tvt8Vh9ohiSDxxCh/ZQmgPfhOVb0uOZUqO3Se89YqVOG6OVKTaurf3Ov\nCLLRSaC2O4EzghcMwXeqTR7exMyX4WyDtUkgA0zYEzxlt8/F4dOEaE0Dsd9f\npzqTonDk+RAZeoeIa/urCUinw+f9STnI3laSdL9o0MdD6qSfiSNvWzNrhv/u\n91Vksz9IPeKo39gJAQcurHCKtscRvtcWXN4skZLFEVwjchzpzUGq16Upkm49\nnW0uHM+IdAkR/5Tcsz9SriY4w9817dxSu8t7D9Ayg6qCv5eDs+WeG7t12x6Y\nz2ylM+sIpDwd91qang4KO3WXUObNhUyUh4NcKv5lhrOnaha1G1vJ4K5DVfZ2\nYdtN1/CrdgL852pd8WLIKoS+9Nn2Q8xFLGm/8YWtYLLJyOUksJ+Vag/n9BiZ\nr1qsP03SUAJnVNzOeoubQOrlMH2afXqBmxu/ZdDGXBJ0tJEthe3U3qKLshDG\nHE2jQY6xuO88hIZyN8K3iZDi6GXxQoH59TcItk2W8LntYdrnrEl8KS1aYmFo\n2p90U8esfL2wSBbjniJwimk9CF4luQbrNpwt9T3m/BmZ5TU5xKVhqsvmZQYq\nkv108e3C64Gj5hotlbWjl95Swb05G+mFcLt2GaR+rRmt4Lb5Eab317HZRqrb\n62nB\r\n=Ghcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/touch-target":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.776c18681.0_1609288803905_0.14826384459639574","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/checkbox","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.671d72d95.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab55bd7f9cfe6a4fdb5450cbdb301028d0d509d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.671d72d95.0.tgz","fileCount":43,"integrity":"sha512-pATo18uBk58GgEWcsb8aEFYC+CQmQmynyCeJRlo8MBtS9on6Qhjg1BG6fBuGP5oO4tddD0uIqhM68g9rJqObOA==","signatures":[{"sig":"MEUCIA4+VQ5bf83oQi4GsnvHMbcZk5fFRO4Ux4u3xgYLuV+yAiEAxSrv9xfs9OaIMIAt66XsEXPtSGhAM69AIJMzJJaq9hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N7/CRA9TVsSAnZWagAAnagP/j4xf+fN+qUZisGFULaW\nIxfmWi8pAc4xzY6kOVwwLdPVeEVv5slCWVp3gOj3pNAMOtuiPLhZl0jz3IIy\nkvQtaqrxSrpOZkTvzmSLa32VoTZd+lNfS5aneQ59S/Wr1bGe+AN/mStbnafG\nzE1qhpJ3y9UDvarP1VY70Hy2sgI2mOG79Pb579hShAl11jH8EohTGUzCxWJm\n4WxfR5F/+NcUrHTm8WMJFa86eEcsrhpMqCCcwP+I/E/stFTKlQ3yot8grVNO\nEQ7rxFcm87xvpbaEzaA/jhYHeK7kMilHl5IpAzDtPpdiQktlz6DQ42rZT0el\nZVi3CvUIFajNAjN303oHDBWaCsD5I3LsZJyW9SuDNMzru2k+3Sl+DdKvHWQD\nYAAswgxjrc7ylmQA7XUrtXfDIi9H5zvSfYYqGbTdJ0YpksHB1k1UtUwg4vKa\nDc1T3JklNx/lXiBNaOi+QpT3TZV38r4Z5Qk1ZjBs+8v8BmgyDfj5Aod43fAA\nmTZEJ4Pn5me+HcNLoOa6IB54MtZ+Kn1KKq5iZ+39YpyCCH7zkf+YsnEzTr2y\njDBF2HOPhmBY7Tx4LM2R3WxTIMCfqAOvO9b3vpNjy2STahzzwsozNduoNxKy\n2XOZ/NjjcBZh7cgtjLRnz48Bbn0tVMYiqC2Bv4z106CumbcKfYjzcTcBYwK8\n6u4G\r\n=L2A+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/touch-target":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.671d72d95.0_1609359102915_0.15826249813664361","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/checkbox","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28bf19ab54ffa1aff11c5a32ee1616600d8c86d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":43,"integrity":"sha512-QxUQnz20GxKlDxE79iBpaVheEvOMLva139ToFZsCBtdWeuTB4OvzM6mbsd0+HBUAR9MfD00PSiAI8CTJCT5Ezg==","signatures":[{"sig":"MEYCIQDctlPko8lABo0mZKdqJHeCoxMcng9gGddOr55h0OxK1AIhAPcBjE3At+yGfRIZcKdJ788MFUz0tm4kKWatM96jlJCA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PUwCRA9TVsSAnZWagAA2wcP/RzzmG1iPstlPD/iLhfg\nGw5ZX0HKulpOqqRd3NXKlSQg5sTUZtJGRLc0uym3KSYx5l0ygK8FErTZWBG9\n2pY5H1oguBiOkgPjsxl7EVvhXZEbhJmK2AZMHIA3nov9KYezpDo7OkPIpT9s\nykzqBgZucECWhb5s4dna/QGDuy4dQn4aW7yT9It4B9pIHS5Hw9bZBX8/Vduf\n3NMyEhercYOhiHqLGatFCYkjyY84k7Ra09cM0sVA3sY5wOB2TO0QqKVp9J40\nleiHZB5uFhJCXys3kwF/N0OGUgj91yQU4NLIYA5aFMpV6tDdu2pGcFBXlrIl\nvt7ZBSOgnUMl50WyZZya3PIjFYwcVKfGrRMLL1bcW/Il61FrtLA8RfCIhmcQ\nthlVMLDa5LIMNWxKojPJVU9QOVq20FZifajxT95B+23sWsAEtPVp0Yno+8Y2\nqsW/HJcH+3CoIAqVm7Laii3v2ehaJaYqFdRORK/fVl5U+ACqE6dlkrCga81u\nVZDsa/2XhxHouwWhTCIRMywSO7hDNGi9AyTH/7fKd/YjXkS/l8dAM3mbf2N/\nR7GrLaQybiabZlI12TLMTOV2CssxI6WP9UB02y7r62m4MxE4IFBB7sLm+yGN\ntEvT9Wdl1EPEfCdVi6+evP4iMuht/4VwS4Yv6/fGdS0suQCJaqQZk/8LVmZT\nyA4G\r\n=FxJ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/touch-target":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.b4f5a1c9e.0_1609364783637_0.5051390451699955","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/checkbox","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4aa4b171aaae1416e70b15c2c8b3e21d29731b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.a94bd8deb.0.tgz","fileCount":43,"integrity":"sha512-6NCzo7pOgJABQKVbfHFALNIfXWZrpkLcZQAqhUohR8TXTVct7Bw3AKf911qwWKBDylzc24ywa6EI+jO4whHo0A==","signatures":[{"sig":"MEQCIANAB4UOjgaXro9/xnbvTFzWJAU5/dFc0kg3KU3gsD9xAiBV4lkTU6GwDJ7g7+vaVUbTQmg2le2IGdDqQ6ygF/B+gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlcCRA9TVsSAnZWagAAHbQP/RwkRrCl/BoAx30gnNV7\nuF0qSzEj5rDSNdjAG/OC3Idb0BSUNf6fRmwU7B/N/YPP8dgrks3VTm8tgone\nn6vqVsuvRPOBTa7Dgk27ImAMieKr0fQNxEByZEN9iYcGBRwJz1eAZmnBgfOO\nnW9mJT+pGKjISMsz+TUGFHSUtwGf23CTjDg2Myu2BomITrd+7MbPq/eb8x4g\nnZ5g+IuhA3+wXsH9jA1T23mZfPyOuW3sgEZsw5+h/D+KbcdUgc5o0bml1scd\n1SgI53Ib+ZLGjhoPDXZ/vTJ2IAvFHlw5nTjO9eI0BCI0J6GKsLCN7cVO35Wv\n6g3AwbZN65wL5DNcEvrB5gOvqLK18pr7exEub7l8O3Bc8HbavjGQuneOrYIM\ncTx856XUGfLW29g12X+4TkzLrakFRJEAoHsWlifXAm9L0ADDzW++kkP9XnI3\nFrs7Y5xKMT2RbVxCD4QU1/RYnA5JaXyo2kjh0FJNegTJE9TiZoq5De48POU3\nFQk95SosZ+HqaRY3ANUiY/qpYIA+8kkxusdxi1h1pLOtkcxb8hLV9dEkdiQQ\ni2noNOkP3LpO8UMrTc3wwx+EiYCehMjNfWraF8ozM7r163R5LTjEQ+WMwd8X\nkgL6Dd3jDP+dib9jtFO3uOACP2j5B4/4ZzzD00ZVRNkca/nXyfjw3Tqy67ih\nh+dl\r\n=TDm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/touch-target":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.a94bd8deb.0_1609365852147_0.002956182710796895","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/checkbox","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.5d128511b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd610e3caff44674aaf1283cb99fa57dc41598f2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.5d128511b.0.tgz","fileCount":43,"integrity":"sha512-8VgZKJWZmDOSCXhbsdMnx7NXM+lE9cpuno6VL/pB7l/GWEdTprrzNJn7Te4oZbsnMNBOMFDacvSSkhVKnZQLHw==","signatures":[{"sig":"MEUCIDj/2h8+ECEaSFDvt8HaU+i7MnvlVtvZ2wcmsPebCVLZAiEApAVys/zYHJPiz6ihKhWkKxp6SPGZah3gdA++bsNEILI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqjCRA9TVsSAnZWagAAIWYP/0r9BG2AkBppR2azGa4j\nNGsVK8TrBJJ75n09VRn8XNaYTgib7FQ5YAnwMy3y1so5f5vr1KX15fUWw+ge\nrHSYpqkqclYUp/g0/rqzdfkChDBMCpS2+uw8GVKYbUuogpd6gjnctcW3N8xr\nT83fELyOKWQ5CKythEo7PsGXldtZAmMWR/wS5fiiW+DRtUPjrvVHpzFhj770\nskFeHS3Zi+pfFWKvyu+S6tNWik4tXpXHZJ1702GcMyJHM6kWzadauvMHHrai\n9YhmwiOL+UwF4/v0A1ypuvNgU2ByZlxaNO7E/Lj+cVvobu+UmvQM3xQ1bUm/\n2D8dozByQjMpisy6xcGsgSdRIVJuP3LYg93P9l23JH3ZqbJvdTg2+WqECOiG\nbhEw4r6YJfy7NJmoQB/py6L3vjXj2UWoaYjqOSOh3Xfo0MHsDcaC7mJT31jV\nvMJl6y7C1+DS9fLB0VW7Zsho8kiyi1R5AzRIqFWI27J4cmqxZna4o1QpC3PC\nrYb9X6vIxhUwu4gFoipcD1Oi65kJlrXEzuhJY5B7yAtwTMoYdIs1qf3J4MAk\ngi87kFr53VxMll7HQrUPmJ6C+w3WoPqma+w7doH5JW8xLEO96zomrnsx6ei0\nkrswzk645DcWENXZE/iuNaL3YiY7bj6HNndDOy5S8YBXzt4udjeGNM2eDz6l\nQDb6\r\n=ItyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/touch-target":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.5d128511b.0_1609366178458_0.4274010623242652","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/checkbox","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.365c69360.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3549de11a0006afe15d2a66f06f86ffa9051516","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.365c69360.0.tgz","fileCount":43,"integrity":"sha512-J8Rb6mmo2Loth934RnzLIYqsGGXXQ13U3KmZOrBd+Us+HAAKvbgSB2EfFsg0iduBF1ATG7dUQ8GDkfA9VpTF1A==","signatures":[{"sig":"MEUCIQDhmyd+w/289axip29GN5Lu+Khp0h1GSw9Bd0FmAN203AIgUNuW2MW+FvFBE70IxWZ9N5ywwQsvhjMCcnE/QR376xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZZCRA9TVsSAnZWagAA4ZcP/392r7MMwtImg0OxoQck\nGNdlV0lQfKt86fkn/OKDgUEyx/YsYEzI9DodEMsj7K/8qMzMArF3YSSyzFRN\ndoLQhGD6LaXM9kmpgdrNcn9vMI5FlN/4mVg8Llg0QnY76MP6BZRicKHLmG7K\nURrY3DgIvEVOOI+phzXbL1D6dUjm+6i+ES0vMaNQEs6J77uXxfhSzPU6ofke\n2e4HekO5vi21r+W0ur3DabpeoTirUxazZmOg/GOSLSyaQ42Mk9EOOX24Vv7M\nLDXSsHGQSCezvemW5PUYl9zRbb43nrg4q41Uw3des/g1J1ZAUCQfyBExHUfg\neMlDmT7L03ENyC/uG4n90IwjhjqoHpxqRWwOMm2yv8WhJQHzNIpbV38JGN3Z\nvVthPaJbfI1rsnWxMHcrGIecCmncu2kWD79Eo+2PtfjIiG/mhyJ9YBf/4Is5\n81MNCFsAAlDdkwkxhjIbBFfz0VsE+F3dYLouM8I1Xs4t0A7if3IlatsV0HQW\nOSz33yPMqJ46nrpsZnuzNjnma7aprWRfMuejo2KeBNLX6lPUgTCd80XHut2s\nx129I8OBOKFBc6kjIpzxFlNi2oEMF/9vXS9tLFPdGndQZtyjTA6M89okvCiD\n8lyJ7kWdRUc1k1MNG983txhGGLakgupwHjA4gkQup8zGiK/f/hMlo67TtSVh\nwj0N\r\n=jwmN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/touch-target":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.365c69360.0_1609868889234_0.23392182194174382","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/checkbox","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.700a8261a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10881c670712acf73e86ac3967a905954e9fd1ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.700a8261a.0.tgz","fileCount":43,"integrity":"sha512-AojtLTr/UDXvjzk/wSMR7aDp1uFRupkbHCtlOwtcLK6mLF+D20lJ7bfP7hZA9iGug1fakMbFEByxEACmUabbQQ==","signatures":[{"sig":"MEUCIQCndh61DfpUKISw8+tHaAJ1sMkndXhBHua7/ZgXQTkFhAIgRixJvyRQBVAyn+jV6WbMpFtbtgkn5jHUPgl/AGihY04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNpCRA9TVsSAnZWagAAv0kP/2LkuehSMUq6q2biuQLF\nsb/E20HHDTl4aoIV5nXPM3ylm9hwKJJQwyUAzfTvmuXGWhdLcuQwQ8aZwLsr\nZ2DZS2UurcJqgCYeJllVYrZAK/QRMuUNyEI3FNznrMn9P6rYn20TLKVrjDJy\nRlqTIebYDhNIRlxNL9UttnH/ZKkueqKeSIEOte7Q48qPmTpKTgl32mtM5spt\nYb4QCgRyUBnIO2F07VySr/U/nWE3fL2vigCBA4xQhrb0snnxvWWvTdRkf2fV\nDF7DCK7KB6cA6pq0RrLcEzWVZGnQilHyLGkkFPI+7UsyfBn5iuMegh78qjnV\nURb1oGxryentE1aN0ZoxjKGOXarrSxsMuOeevz5p6xHqnz0eLgVNT07fLcLf\nMgxaCKbDFPXdDUyrw7cEMbeHPstLvrrWLCMQm9Kgpw0uQg5ppecvAg8i0eSf\nSj1O3mq3UW6cYsGZ+VVVlMLi3kAOruvMwDwmxzvyDijfvPycKiw9E4J9YhFu\nqTY9xwioR4/YD4bOc9iyFuE1nWFwrWl9d67OIzXi0tnVLt8/IJnP36VbLFJd\nIGQMGmIyQqalWcIMgjs+YE0F9H4DUOL+8tFJ+d2Pk8HiAYvagnCd6IysBj1t\n/xFIH2PNvJX+QTDKJWYm2UMzDQhgkbVBd5DX94L5U/IzX4e869v1chQ7+Qr1\n0Mhr\r\n=1PDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/touch-target":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.700a8261a.0_1609880424784_0.7519060292690034","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/checkbox","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.766981c15.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f627108df8b27abdcb2c56c36d5c2e8fc5719b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.766981c15.0.tgz","fileCount":43,"integrity":"sha512-g8Hhqyv3oBeRiJLZN69fWpDpExR9O+uurp6cvcPYOz92wN433QUNc0H5Pp0idzOA2YvAdAP3ZLdwvgd6vR/T3g==","signatures":[{"sig":"MEQCIAVxN2rVSX3+DKOWR5FjMDxiZxCZefcZnimUrtGL3no0AiAVXuq6cYDncLDLso8Y3E54PwywKltcBmnSlW+gmJHOSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrICRA9TVsSAnZWagAAbMAQAIOBEfjnAqqLJoIIHtTK\nuE6iYRKYeI/CFeOztnIibEG0L39IzluoV2W3SqomPi64kng5s+4PKIxYtWXZ\nizuZI4cxSEPTFTRMdOXBNBGVcpAwZmQQ+IVLVQTC5yyEw7cfR2jDIMdffd6R\no5v42rwILrfEj6WRsVGz6ngAkXuiAz3FLe9mUIJnda5PtbsfjOUX1EtkvRmg\nxoe4petgl0AKdSBBhT0FQEySNImkrUFzht7WLetfJ5e4VJOqa2AYqPOeg8bq\ncjHoWQqochU7B9fveiJIGuBWIA0c+nod0rE2ss+h6BrLge3gMK+PcegWzHzV\n0ZP8Q3Aj3PkQcbXLwNqi4b3ExlYlcLcLBtt5T+YO8utSirMs/FTsD38sIK0W\n4egBCzWXFqakJSbjoKeVhvWdqZZjGrXT3BL8Z64UKcAsSSXZ1pdOhDLoTTg0\n+2vNEAr0GFWwZHngfGfZjYEqUK4OrVkWTh+QW2lbwAeu9vDN8Fyoku+QVx9O\npzxLvb/r+6/m7Ion4KVI8nSqXeB+ruE0fbd4iE+p6AviPcQAPebk30BUAzVB\nYQyHA2Tyx0inRT+6DCeTwMSEj6MZy6xhNVseCRq3tsGRpORPgxZB8rLqLqiQ\nS4dFHRtVSKiXMGyQJvkEg3F5WQBAfaUalDH6kn9X79HNO7MldvgdxQvlPAJl\nyF2F\r\n=vEYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/touch-target":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.766981c15.0_1609886408075_0.7329659221832292","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/checkbox","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37f3931fe41395e10fb6d11e5a0e8ea684e3c186","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.b28c576d9.0.tgz","fileCount":43,"integrity":"sha512-lnrras3MQkmPLeFdx4aRmdVm8oz4SW33u1LT1vO7EQZimzGBee3REAE6xFuJY6yxUDdFkrCwvgP7WLlz9RbGmg==","signatures":[{"sig":"MEQCIApfIfldFXcQm+TkiJL+I04jvtvlFV/J/tYn4aiuEU2kAiAKzwIQpT0aH/RwxaKKfU6EUzcxyYvRwbaot8sMw6YUAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0TCRA9TVsSAnZWagAAnNEP/0Fbrb7Nz3//GlYoMOsC\nR7QWBpuL+9c28HzyUPyQP7hGoCLQT9GWPtUCU3XVuuTr/NwoTSlFdouSIXce\nOt7r6HzdOky6H9iGMpWevPvfD5J93BGReu3+D1A95pUYi1OI0CqWuTSayspC\nS1sIsH9jt1NJ0BZhqNxFl2TwOzceeOOsm5ximWCu+ErccnJLf4oL7QXb6EDQ\nsJ9RKceIqrU8YGsqcId2OUmW4XsEOxEeDfeYBy9Uoe7811FjSNJ0S5d/HUCo\n06aDAnt3spz218r9zEG43/nCPDoWXZR7QknD1B19Rot6M1n6l+3/3lxyChJl\nUg9UjdXdNt5+h4AxWpz24EaSFcezQoEgtnEYmigHdc/aypMpK6mMUuEFUQeb\nJXjxtazz69Fqex+TR7nHSF7ziDR2+IFeTQnUZvvMco0hTBrFmtAEkSYXidy2\nqKHHK6Grv2rXId3KojS4tSf5vOpkEB1VULRICvSqrqXPPIy+K6+MViulb0Ak\ncDT5WBAFsocT7FXuV4YZqCZj2aCXHyBodxgM1cebblFkT0DGjRBR+NxYJMrv\nETi3VolhTroBtJ0Hws9zLtlTkdu/sOR5dklJP8+QeU9KEQ9eYUaEUu+hmsyB\nq4WItBRc1df3RUu6CZNq93yP68dCEBJRcWvFEz3wFbCnMux1ZV4xlMS1mC1x\nQIM3\r\n=H4ue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/touch-target":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.b28c576d9.0_1609886995267_0.863388110501609","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/checkbox","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.968735356.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8329825209d0bed58b6881f9130cee57933548a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.968735356.0.tgz","fileCount":43,"integrity":"sha512-1wliD9wgPE5fZZeEEl8Obs4yPRnjzMxFPSnXDXwqURhSIztvoEBIdBkxxGDjCMdictFVrW+Nr524xpk0InCYTw==","signatures":[{"sig":"MEQCIEyJaXSWPoWgAdui+UeUlvcBI9CT1c2KzWfxHADayGhjAiBTJLSEG8429zjQ9qa6k+scvm71E2WZQJanX/Eydmh/7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxJCRA9TVsSAnZWagAAD5sP/1PLukZ+cFt+dLV/NJvA\nbKGuXKgKiqgFEx4zFspZ0ghOc6gEEV7/K+lhf5JNmxNsLGvLuoMTLLJcOW85\nwAnifRJSmjHBPBu3NOS7HtNUZlfZRTNfhtAlIUOTJEwD2oNCEgwg0T0CN0Z0\nSkoijIsZ3+ZT0gQxl427wQ67Vc7wcYm9Pz5KR1WBTQeI4MNh4OYtR7MDCmLI\n0/7LMdenLCGvufAW2SVzj624NXeJWX8XwDnRGDUXtdkzjBp8O4BC2cuItAES\nmJ6AF+8+N4Uj0b29A3mQ5sF2mhNhybjoRLhpw/sZKeYkPHsmXw5/scnYz0x6\noTYuAAmhJIBO6KdlgOamawyyvgMQ2a2IJEniqUd458TjwLcHcZbc0VVJpIFc\n53E+v5xrt7eJyRud/jkidXBiBvpp39sZ0zqGG2uDITWDHDs3on7osnzn3O/M\n8EqK80RdNoD23NNfbCGIkYsYLVvjJN3iuMlL4kLKhxh0hcpGLtuZU311gv9M\ntvDMCCptG7ReYdSmB2rkBi9kX2oyPdJEeNkKcIR2mbOJ2Bdxy+/u9uRmWCJ/\niG8/JzzXASOTSUko/UUkaaZsKetJTVa2ezggTGE8sN2tz339TevcqS3O/uP1\nd+yXyrlWnxIhNzvIetjnuZHkwOx2Ls/1I/epZobLk+CEq4VeBJldC/m+PtXL\nJcly\r\n=IqKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/touch-target":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.968735356.0_1609948232851_0.9846348629806037","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/checkbox","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5b2736aa9b12377e0e358c0d75cf0459f995dab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.c5e18b020.0.tgz","fileCount":43,"integrity":"sha512-I2gqWmmQqEC/JaY89DnlRgNGRJVXZl3quszFiiulMsp3ognsgtM8+6qfgP3YqG7NheNumS6cSHw4Jxl7V++Uww==","signatures":[{"sig":"MEUCIQDX0AwVlcxpqRKgn7MFbMyEQMUIZ6URaNMHItON/bxEAwIgFd2JQ6pJ62OzN/JB6rEz8vVxKtzGRrKBsTSH49Gzl5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMFCRA9TVsSAnZWagAAA3AP/1p0/L82a7kf9fqVXwN5\npH6ftVdYAcGwC1O4qXb0G/DuxKKuKob//KqKfUaLfBwOCuugj2SMosUzVJIC\nmR6JWeB89Hz/gVIxQIy+t+gQD+wjdeqrde35UUy+IK12NUCbxl2YYq97LRnK\nv1Pvm5Nxl0TedYIbBiT8xp+dvGmLoGI/rI242yp8KHac39r6wHcCsmAspazU\nlQU01p/Hkg3+EXQ3CsRMshQ7PmelRd2kyOUvRF6WBsKsom5a+Sv88gBXq2TT\nv+5eQ4wP4r7kq/eCiUJNXDz4dyVBj9Is4ixZcEr/fQhKj9pZDHfV3j7vXm8A\n648JhVIlH/J33JMymPaeP7FgSN2Va22TXbb4jy0XHUeiblcyKlpaSop310RG\nXXcObRPc5ERX+uBxWjF1Idu2vdJcvy6sg5fn6LfHtH5r+CrSlGlovQ+x9bMF\nXgrpMBGh9T1RS0eT4a4IsU8p/tYRNNqe3dirIhsC0pHScRo35+FagxKL+Krc\na1w9NTekP2bx/TP3d4mOGFpvMD2vSJ3BXks+nsp+7yLnnReFEKp1cpxi81kX\n4I7AVCj+v3zOMZl1EEl5mo9Q9f8aYSraIhiN1Rotxa4LIM4Av+WBY5jSwy/q\nbxPIUYqsR6DxPgi5xXTjWT15vbrfHVke0s/jg0QuqtT6lCoe/DmaLJVxSOU7\nQkKX\r\n=0ykE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/touch-target":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.c5e18b020.0_1609962245237_0.8570950794659862","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/checkbox","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee1ced9dc494da097c8699a962c4b377f4ec71d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.bcff8a66a.0.tgz","fileCount":43,"integrity":"sha512-1P+a7XxCIHCYQsigLiWNu5A02ev+lMVCxfPT7bmSnVA1vu/ZBbJrZFWeXdjDpsFfqLkpPkNXJkZonim/fOrCww==","signatures":[{"sig":"MEYCIQDJB7Khlu/gfbBajqufTRfUuStHTJJG/XcvFPZq/+hBjQIhALgTIbdTpXL5hKEgwJiZjc0ma1FEcZqA5s0mnos+HmAD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzpCRA9TVsSAnZWagAANQQP/ikfzCqS5Si/S5mnenjl\nz3LbQzBQNZVyTrA7VWmTl0ld/fCdpwOIDSufzyxyJJPzUdwFOQxjBYALCzul\njb6AOw3IP9D+6DHiGK4HRdUkfFhJzljH9mMwYsXQMDka+nRWtu8tsnNRhBL8\nJzDryjfhVLpB2xjHNDc/GaR3DOW96hTSVjA2schnoYLjuav+UgzqX65fqzJW\nsy2h2SmsKPtYTM75boJStLRTk4hlJRIzrdkXP91vkdbWYw6o0mUYB4obXU34\n0gkOEyIEFeRtUu8qmLRoATw57+Cj9KCv5IE2aEwiBsGUjCaxrihp5V50R+ba\n3jb4O9dNCHKCarvjRvcEgIJHar6hD3WWLdYYj+XJ4coA1QY0QLuodZo2tbAw\nkJfu3DIOUCvFMAt/UWudHKejNa6EZs/OPZzqbW7K0ywVxzS9nfrmuiKpsAbP\nz2c+hxbRfLrvbufaPIr994rMRvnEZygY0DuLH0Lgy0Tr9tvnQkU34m3EZB21\nxzYQShT5Fe+YfCBio7aN/CSCbY7OcMQ5h3qZUARDoBjMjCnUQ9eHk3Z7Bdi2\n9BZfqEEs/L6oRna8cuz9hM0yFR66Axi3oe0pb/tTfIBwdI3ALE/qd0UfqNNQ\nwX4vFQJJI8bwCopqP61NKVLNM49RU6TmMk+71QxCQLt7ZE5w+i8hGf0zOxaf\nkOoO\r\n=9DT7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/touch-target":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.bcff8a66a.0_1609964776839_0.020310221397652484","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/checkbox","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f29677065b0a44071d133a9dc86c0807a1b17464","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.79328c9ff.0.tgz","fileCount":43,"integrity":"sha512-tUdQ7/pCIeRQZqQUgm5WY4al2bQDWTN8zkZXdr7hOSGRjRYdHGpmrCl9bVQP3DLrnr+sd3OorcgJGeFgMbcgEA==","signatures":[{"sig":"MEYCIQDw8pTEGYUGLZSmy6BS9x+RXpl2yuDzarj7E1AW+wmHLwIhAKp998uDizckDAQVG0LtowZRfnf/6zZXcu8mTJgw5YNQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMfCRA9TVsSAnZWagAAitsP/2mnBO6p7dvnnIcusq7G\neCKvoXT7wGjL9dQTY1BMTzPWhz82fgYyrBnb1pSO1pf7IWINV8vGBoxyiUTf\ntq2MMj1XRvRY6WR+dk3EP8LFab8lPxjZrXvc/V/jqMvCeyw12598xFqJsvA+\nzBgzHsE8fnE89Snnsl0e4y9lbHMoxNPVLnUrnFHeDODxnI7Dal/TL2Jkrlzr\nHl7uMhauz7sblcHfsI56GjlGan3qVQemHTQzjI7lZkH0T9Ln6xzsZKf1mQxE\nZPtwl8zSkmC1twBdvNwimX1MeHZFN3pGQBGi2O3CntUTvHZT87Cb5exbeZ+a\n4AiRGLKupw/OHNOjFw0oGi1g29GEHmDiTfTeSC+0Gl6hFEILJ1vynrAWiqny\nfswuGAsVfPd/LOKsvvv2hpF1juH4ProQkRAmZ/xqdUzSBtonmw1my/N6mvYh\npCBjRBNZJvSfPuG1N9OQ4m8Nl71fLT376xH7o+JRBVFGs2CnRo9R6mSgXFoB\nJ2eISJKrcM2EiDSuLSIIGhJrbJxMuEcML0NNoTpHkKWrQBpZwjRHKjKiGHMv\nHaq9n8fSbOKMZhatPE0z0TKTsY6WQxNXtnDRbKC8d57XZM4UXO4ZT+yTJJpi\nW5CgNvJI5bPGr3N0QpDijO5HExR0n7nG37YpdRSZCk3Pt7y/bqSfRPP1c9Dn\nfK0r\r\n=fmAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/touch-target":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.79328c9ff.0_1609986847368_0.8151314921653874","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/checkbox","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.121e1f303.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6686092d27848f00d7eecbc3166a897f407aeef7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.121e1f303.0.tgz","fileCount":43,"integrity":"sha512-qroVjQRyvCX0YZ6PpXc/1KtkSuXsgVtSjW+kFq3MrQwhITZpAuQ8o54TNfWTZ2k+0+NvntTTUTJPwlu9zFxYAQ==","signatures":[{"sig":"MEQCIFLKWylFU8g1ZMZTL9BO+JsjrGrbZ0nv1YOfabJCaEGHAiAQ5j9G3yW5ZS4CYEZu+89smVmNIQI2x/x2L1g+AmiF/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95cQCRA9TVsSAnZWagAAWMwP/22vWdQzGQQPVht/LU1u\n3DtohnN8foZDMU/HQbn3AYla+/fAKTXcQrgc+/JogSFCjB4QibSD2CmML+RH\noMi2kKsZxtT4k5OCacVSZRMxH7+WKI3xwgOnk0fmOmM8m0WidXV/1vZaWS6x\n6CidFkZfkdy/5UghoY0eZssIXMSfHhwB1EPbLYEt+/fTxdOd9NkSB+3Et1xf\nCTg5QTD38GwwvhuMrnSyV/AeRleq/3A1O6JRhpHI9xcDwnKXa0Kif6bw1TtU\nBG3y8Og8SjnkzuhQtTAzdjxT7GQudW0mYSHbi78IarM0HD/zX0NOAU0JK4CB\nppuxpzQQnxNm1u0fGAkShe8Yi1u9KIRoVbeLudvHbYSFjhKA2v+/sI95PcWv\nK3nxq0SKOI9kq+QqaVOsAXNFsibZfTQ4MNHtEStTaC7O9+NreU14z0Kx96P9\nolFGq1clB+UzOmk9V1jZm4rjPS0gPqPHqbZpRecs12XqUQBh7R2pO+tgINkT\n9YxWyKMwdaUNWfPDvFMw1yKXXyu+x3x+FqV0WiAgC4TVOvvHVk9mZXF28cFB\ne/3md6gF1Td14aTZ5AXJ6TjJ1oGzStWkejlbWrl5yZFuJsPAp83cpo1lPAm6\nLhe9z9KTV+ALxSO1nbI52aU3Mj8Ui0VrYLePpUgyF9va+GldkZDuDAe9unpX\nYaWO\r\n=m9sI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/touch-target":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.121e1f303.0_1610061583959_0.9729076371470267","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/checkbox","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.abdd10065.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f7fa29624d58461aec4acb2dc1eea1cf7547aef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.abdd10065.0.tgz","fileCount":43,"integrity":"sha512-C4VOkUz9Kz3YW+/8+UuzFeuJENCg6av7lDMP0ad3ODe03EbKRSZtpUny6U/oShEHYR/7MnwYaoDF6jKAPvke7Q==","signatures":[{"sig":"MEYCIQDfZ6Z8daL/z83SFgEDfoL4MXBF8uSXEnR71Q7NdyvsEgIhAPBC9iXlHUTYxgPxWUktxc5tdAykSXPOsK3P6g5KkfXR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JubCRA9TVsSAnZWagAAfZsP/2NFyAAJ9IRho/TcEw1L\nA4iSbzbKzuFIKmIkmsRBubah0fOAzfkXaZoMOfRl6pkVPsiEr8do2WT/gpmj\nKeDeEMIqw+vKR0+fPqK6kg1TCiCCovTz8i3rY08NT2kwOV01ciRI6Wcpy96p\nk6irsDvOLrnW+NAx50+5rc5ip1SkCD+LDi05LCzvwUlSzp6NK9lEAouo0dIL\n0xHHNZSilro8B6mSaSGcTPY9hI/WJ6uBPFdEempyz/7NKIcVRjJpofpWj9oM\nNtR69jpR7dCol+QdGxstHfiuh11x74S7Ax19uMMB6miqpBVqQdVNLPXF8SSl\niKFjpNNCM5TCV5UgupX/iwpDTu0ZatJKY840r1GQ0PuviRNlMZSabidjMZ0P\n8SqVdQpWquVulkoOFtJKo17esltHnVfsUkL8DCkvmrJHvdu1X7oJ2uL3QGmD\nhwkBvu6uA/ZUlFlO0tFvK7LM6usObp8mpWpsBpUitG9w+zA1GR6bv3b3xvxh\nMd5n6ZnY2ejsXPThki3TkMOIKtZoJAH1FtfzQ/3pf/VKU2byriRqHisKf0UM\naMkW5eIyQUeFLq+KKjpSMTW4hgYppfr+vgN2oYC9YipPx2TSZhDV+K7fec4r\ns3s2ZXCTfR5ts2PLEQEzWcjBWNMyXgeTsQ0MDUhat2STr5kJ9cYCHO1wMy3V\nUTes\r\n=OcgP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/touch-target":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.abdd10065.0_1610128283109_0.8387236599184122","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/checkbox","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.089de519c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b279c18bde8d2b2c86a1decc8990ff0572749266","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.089de519c.0.tgz","fileCount":43,"integrity":"sha512-PFOCQEJusFkW5Rcekb8ghaOHJRPgQFEgnEnGAMFwAZ56couc1Aa9VgLb7uSV+jnQbdlIjdngF4PLu8m8aeFy2w==","signatures":[{"sig":"MEYCIQC6vf3NSxegxu5AunnegDNl6iNXftYYwbVmwUL4vz56wAIhANO8T9PRDraFHRRJMB0Qjp1LHFSpdH4vK0szDgHaWtTg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NqzCRA9TVsSAnZWagAAZDEP/iFv7m8hv4PAVTjPE9XE\n8S3eBn1PvaIrYVW3nT81YIS2EqdDsHU591XYyHf6ZeLfynekdXi5qiorRHgV\nV6585ODtsi0hCV65oBfjdur87Z9uAQQkhLXvE+gVrra/BP9ggNFIXGE1rBd2\nzkJ89FcVu+3GV6gs5BzFZUs2LQysWe640Ufq05eauuDN3zJcac+76DCsqZns\nIrgmxnIoSVekjxCYPg4DsGKxyc0Z5eB4ttc0Xh+KDan7Jxih6lNa5B5d9ZhG\nFcum6y+c/wgssrCP1d0E4qFe2OIiZ0yloJJN/3sHOSWGi+gOqhgAaRyFDAm9\nFOgdDPgAxtcA6rgTHgeVk+lOifxbEyeI3a+JGNHKAjTSBg6uGCGA+pCq5p5v\nTUym9kqXlxQavF5ZuBDRWGsxG4O90ZTKFdMQyiBQkGCVSqiUKn2MnKdX82n4\ncmrZNr7Sxl9lWd23Z+kDycS/XnG1DvROlutWN1yEEf/MYixiBSkSmYI6m9/a\nQ1zLSnA6gS1M4l0YGBLJduh5mynXm03XV0AuJffRBFtxe+cm0iVt5murn7UP\n7T/wFsI4qO6q679dtFuSFSVSqa0wHiURVxPYAItS4LNkm+2sfxecrqBB4zy8\nQmD7RimwinDnVpw9kJ9DC4SgVHs1lgx/oDDYwgz8ZoTa1ajtxD2wYfcnaflt\nLIHu\r\n=DLd6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/touch-target":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.089de519c.0_1610144434788_0.7143223714881721","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/checkbox","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.163119837.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"473805914861eb2c358ed5276a2fea9d419f3e3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.163119837.0.tgz","fileCount":43,"integrity":"sha512-Ua5Zf22bAxCL7f4uUF12a3CkDwoNopYa7vmCxCaytImZCb5tmVC5shaqMm/K5/IYF7g0MN708bW7RN//dse9yg==","signatures":[{"sig":"MEUCIHi/+A4b1Tl3SNilgogEye2Jb36sMtCyUizsbRD0Vdr5AiEA37l8PIReDLrAXWE4Zv09REkFsqaoDJZVb5z4GEs3Vas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6FCRA9TVsSAnZWagAAhicP/jK8Ed5oFSNlOqIAQEke\nWXOMB4jrw11jNYj+ASzLI9zFQ6FeNCyBKzqML0GNQrcegeXKoBqVG0wDbBxS\ngzAZQ0vb1i1Gv9+8lcaRPEpf7enj4+GmcKlb/WCdGpeobZaK/x4qOiuGmWZr\nbALVzfFwluS4KD7X0NFHHmP1f6HjiJWNdT/t0U8n+yPiJNTW4ndzPzmLUBXM\n2lvp+dRGGwKzjhxUwRn5DZbk1Bi35Ndnl9zDRHKED2PTxgJb5iq8khS1zBF9\npeDkFK3wrTeWmPEEMm1QxZRZ5xgP6cl4C6ftXRbC9WDi4KGlFGQmm5AMsk6K\n+CMxNEOtr7R4bV6cCKkr+GJqjGUvOKnxsQY/HNj4UcsS4R3h6tGaXFOqTfb8\ncyJ76gf4qagCFhdVrlY9mCPutZPp3BksghmpPvy3oflcsXTQFllNntZsSdCn\nQ2gSJ7lkRZGzdsHjE5mwTISPq0wV69l8gU2+uVQauFbsvAkmF3cvcpZ3N8le\n8VGlMaYjKvPzIKWbGm2RggVNyIfwd0YavXfH2f/1x+eX/6waoAccaSUcYIY+\nuhFIrghojk7/nMmETj/qx2JxtQc68IddxaMO73TrmHqUfze+o2feWOqGpQNT\nuPf04/a1ArB8H+cZf+w5D3urTVHvOwUfQH+RFS3Sl0dkPUQYVhYcQ8SomSwY\nz1xk\r\n=in8u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/touch-target":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.163119837.0_1610149509248_0.11153939875910068","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/checkbox","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a3a0b992d52a41564014e92417e178fe5036fc8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":43,"integrity":"sha512-uOUPwzKwUVcDV90ix159AYAN2oakHJsDX5xRiMIUYvIfQxNIWQTDg3OmshDDNYQR9v/X+fILW9ExQmPeBsHfkA==","signatures":[{"sig":"MEQCIB47MtNloe8RqmTe+a6JFTIzW0weI5J0AqXS0VKEOoLQAiBrnYtmG07fQaj/8rSTEgdecj1sBaURHxWcKuoLEIPz1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HuwCRA9TVsSAnZWagAAO5gP/08aneyHpASjwswj67YL\n3b7CB29wC77aTZbk5h5+rANDqZC6ypt6f/AMLyBv558zoOE7jS3GAU5E2Eh2\np4x58Os56BoyEaeZ1s6JODpeEjXPkUIKzsUmelQXPQclRqaO0+WhExvDx3Lj\nhKnbIrWUqRciu8txFQVb2r4aGS/8p/Vn6bNU+nuh2AVDJhgCmHWM2+e3Ias3\n/PxEilGP7MDW21n2fU6q4JfE8ruQqIdUlTBTH8de7zouFbPAvxuf4lH3mkBX\n4M5H8AyPRNrYMwfxf5bwg/rqxEj8L9LTL5FkaN5iQANVN8QaMBAmGkhDSayG\nko2D9Tt01vJbTgwag9KhBS4cvogEhKWqAf9R3MqOZuyStRU5sVwAjEvsASCV\n5UEJfepXFhTo9Yg3WJ6yyy3FkHdMhLn68OFU+hfDvJ6RlPyxGFCO+okQmXKw\nHK9o7PFQnQHFUTgiOgYRdJ/GsOKkAvj2IRuOgY5Ons1ugM8iAsgr6oPVfahw\nCcpRDB9oxEugFHzKLRWHLQWxhOv5px3GkLAICJ7B2Dpe0gkXFg7iDcT20dmY\nBDB7j8Rk7dU209n4I9gsr0rVvRXozMaokbGjlpj1TG4AFJ/udY6EzdgpoqEp\nJDgKugwXDcNFuWZl2hVhWcpQU/een06+DD5GQ3ljdjeBlyzw1AeNLbu3EgUe\nLn4p\r\n=uHhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/touch-target":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.b8a1a58e4.0_1610382256278_0.45984367447810626","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/checkbox","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.7584267ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eee3570e68d15a8649be963daf8d014d0a41742b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.7584267ff.0.tgz","fileCount":43,"integrity":"sha512-qFqRIqLW8cOpPeDC+NjMkseebY+3xs626HMGAusVRded6CgbI6fi3abSF9fXfCT/LZk8HhRsqj5i3s5wU8Zp4g==","signatures":[{"sig":"MEQCIFT5APPr8Jgffrs0O03QmdSuQK5D3h7r6DY9gJW1dXsDAiAep6dklrv+O9scZeEbpqPoWf60TfiPZl453tOVlm8p/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PdsCRA9TVsSAnZWagAAfakQAJ/ckUidr8pUqTCzEOYZ\n5enP3vJqGQujpbSarRfkheGfuVIuJvwiPMM4RgbEWeEk+UTdrghwqncKcf9q\nz42fllASUa7Yl+6QSiMFm1wmSgWFW06Oh88Bu0JutkJepAofKCKFlESTGUAG\naFkdnsTfXd6QJ+YueRQ+y4gwmooA3jC7Ub4ca/ug+nMAL9N1sKAiozPVbcPX\nLBzkRWewlwYPrys3Pice3J8JiawyLuVOcD2OAVrRCNWRrqm/LqYqNfqglU0o\n0HxF2ptBL6YRP6U5OgrKb9RzJpMxfvy9BIcXpWHGzByobkxtciUvHwywyap4\nKalYAAJilyTDl4Qk/m+/l6TWSO+ESQx0ztgrQAhneEbNfvVtraPGKJpl4ZUl\noFgrHJGniPSADTttk5Dr4WRX9IDxe73ZGmjG0rx7D576sFhi4lEbbsBuDn6V\nG88ml9Bu5WGCTjbmRg9aSQqSfMLbHmwtXq2bDH88KIXiWKeFUakszK1oR2O9\n1r8swhZeFCq+/7gMnTfcGVQwjdRtd/nSIHKd6+XYjzea/7wALyC7QQawunL5\n9err0upCoPZLlTsAq0KMhwTZUVxxw/gvqgITp2xe4gzi3qXfxqB7TURXB/l5\nZ0GUHUuHD0T0Cr/p0Y4Hg4NG59KxxnLBZ9ecrTmpmhdIKJsCtTVJtv0eU9Uo\nWn39\r\n=bt9y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/touch-target":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.7584267ff.0_1610413931981_0.9229893882989835","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/checkbox","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f80d521a925a151960c72c4f188a93582c5569a8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.251ac04c0.0.tgz","fileCount":43,"integrity":"sha512-DrNWRseO7QRyS6Gcutyho2UGMnPLvmZSwH27+5tig47wkJ2kZbdJWXgnjjtlZdoVrJJolDKD4XTsHJAHP7HTig==","signatures":[{"sig":"MEUCIESBYIoshEMVg8pEyq+xHFWgXE7dC+5FrJFhVG394HKDAiEA+6+u9ll9J4Ei7gFjUwBMgNt5LUESS7qd2w6GLpmBvCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6RCRA9TVsSAnZWagAAPqoP/2XibTf3kHXg+z/99FVK\nlieqW0vC4rWEl6PEQbmPCBy68s6erHpQPdwO0WLJtOoWjqxDdmBv9di36PTd\n8SR3awmtQmX5c0aOpKD58sdbWl7mpKOhySgSkEyTmxFfrx6k0bNjMyHCVckr\n7qpzEyfr7QBpAJBoMClZYECIKIEqykphXwhlR/V310bwgOkEbaOwan1aN98I\nBNrPSLuFVeDHSSTH39V6xbv2HOVs1IyDKup9fukyOYAqOtMj+sR5SQ1tgD4u\ncJ/8Dk25sm5sACo0XGiWoOyn6q8UhrEw20zeEbbC6/+1Y9HnXGMZ8IH2zGOS\nE1lwDpy9R2r17EPi5jhD5G9uCmT418ICVkVwgWWH74kYZ3KmjK47+lkDt6CZ\nZlgl2LuhKblv1I3JLPueGT78dYpkeqX7uewCa1ytnq+gcUsISPjPvvO9Sprf\nddXRpjVJEqgtPzouRa0tE634MjlsPluDBMJ6viFXftEdjxl8pkADHsHc/YNp\nicjTqMsFTdYR2arlAlMB3/cHXpM6owvdpTisztielKryCT4WggswvyXPv/EI\n/hn0yTJ3aY/Z8m7ZlVxwJ5N1lnhOgE9UIvvwAOpDGgkXMz2ySiDpKkAeDwTV\nrq96mJ9qNigWOKITQHfT+RS0A1e944pXJ1EYHS1CAPGEbJcJlsZFsfXiJgKx\nxiJP\r\n=SKHj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/touch-target":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.251ac04c0.0_1610481297224_0.6318870803872536","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/checkbox","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.772cc1068.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"836f95f9c293f0231133b21a31892ce97fb7b59f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.772cc1068.0.tgz","fileCount":43,"integrity":"sha512-jW5lxLewaFAOwp4LT+CXikcVgCVj3jFbir36jUl6Dbj7AyjyRFVz+prvn2eCwYDZLgjIP50dRpzGkM9ctU0m0A==","signatures":[{"sig":"MEUCIQCjaPKtRlD7XcCVBMoRP6YzbB62ZQjB2PMLb4dwEOWYmwIgCuFqNDet+ETeUcXSbaQqt3JEPkuPWPeY0eEzUqyNpsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4sdCRA9TVsSAnZWagAA5L8P/AgSv4eAwxlk+zQivBfc\nuuQfJSF0oDhYviCy1WACdzgkjRosyh8UXxwXIebCr6pNOoJtU8iqaS+azrSj\n1mMpOnck4NfkhhyI6ecI8KAFKRTjyVSRKlC0OtNaOaBBg2J0Du+jw3owc3LK\n/AZVJaQ9kCGW4GM+nJPzEzqSq6H/a9TfbfZSMGCS9Zf36DqxSaDA5hMnDvV1\nuZ698D27zmjRy2UxFClXCh35dk3GNyMtdIFzGIhV+uqzb/dQLp/MsDWS1Gzp\nyOAwuQ/WRIQ+9O8sSjq5PqAw9L86FC+dbCD6mCUZIEGdlfMEvyxktdZU5Y0Q\npO/zfM3q3e43KIGe0b91uws5qR4qV6qv3SDD4ENYvvux6f6BrWfmx/w+iBwG\nLx+3SGoY/lTQ5xsrVnL+etLyJ3VajBnBLANS9lY6xo6zbEVWoYGofaiFnu3W\n2aMSVybIn1MXxX/sCEEiaeCVxM7jsyvlJhCfBXj4REmIhLty/vBX1hzLGb36\nHpTU/BXXG0ENZXWhNz+rIyD89dJMdLzk4+DP59q2Et9cktZmQxGi86njj08T\nrXBwj6ZbOWA53d7vLC4fXwIrQseSrpCCVqpm8FbrX/v8Y4r4W7bgbGdqOF5Q\neJNWEVp+a9cGjVKIrajpBaO84KHQGFP/XSz4zx9oyiQANAdADkTIWGXJ5WaE\n93ez\r\n=ka4g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/touch-target":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.772cc1068.0_1610582812380_0.7144130565412183","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/checkbox","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd2442aa016912c01ab392f9e9aca9964b755c7e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.fe13dd130.0.tgz","fileCount":43,"integrity":"sha512-0aCGGcJbYmZ/IulDiRnzIJV6e/Y6MBMDlRkaQ9uxVH95/9ytbRStcoLo9/2b3HFptRIYQJQel1qwKqhlHDgbeg==","signatures":[{"sig":"MEYCIQCdjkIZAL31neBFZtRfdkRcdzrxxCtrITsLEXV69QEVIwIhAKaFWuS+5+FKS5G98kqcuNGfwUlH5h3TiAXwAs0Yn7RF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5n4CRA9TVsSAnZWagAA8TUP/A6iI2jW1pBxNmr5nH+s\nhQI88G1pnL38PMU/TkS0bsw5MibFHgKztcDrgq5S5kiVDW3x2d4kuPsnDopE\ng3DNQ2GaDWFqdLUL1IF699gXgGTi8po7Dbnuf3tFa6AP1VN6Gx0NxuH07lDY\nIkGeplws5k2qVnbqNy5o69gquo076tJrS/z8+bKiQGjAATR+HJucDqkolgAK\ngfghSJtaQZwhD0ca/RjXlqNI5uEx+fyn6rnlfsgNq9V6/TSWdZ/71Tp8Eb96\nEcO4cP8+KmT/VqzN5Ks8chWsm5K3vnaw3oRKacZe6zm8D4f0QmSzyJTJxgnK\nAw8yGTWYkAAHqg7FoBydOXQar0OotqmFUZL0vWkxR8uiOBvVckCDydUDNWkZ\ndTv3Ist4hp4KQsoIqEkiYgg4vD+701Jb/QA4CJRfNudJS7nhVGfWJN+usXzJ\n5eY2B2jtFDcGZvVJpJpytcCTwwFfFW2+y/IGheIdBJmyMp6FhKQXNWeAfYXW\nR4uJMO/JBaccB+6i2iIY6KYiG/t3MajK1gAIRC1GC36qPERdlSm2rjdVGF9A\nSW58cfEIW2nOTXqmB4uy2SETfHnBHMGB1u30HLtnETAxQCRxqbloQQwTdrYr\nY1O6oWL7AiyUFBhz/zEuVLlhn/cPUY14QRsLpfYaUAyDBstGtt4OylpFTCUh\nUwiP\r\n=RKz+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/touch-target":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.fe13dd130.0_1610586615662_0.1929069054649668","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/checkbox","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2684a355e90b0e16a8bc30322f24d8c8f0d81ff4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.c7c5da28f.0.tgz","fileCount":43,"integrity":"sha512-M9tgRcLbRqL0JjmEWvkmHe82Po+tAi98ePnbsOrRkEL9RYTIBj6H6c+YVd3FF9e0GJ+g64nAWpVM2eMR1JayJQ==","signatures":[{"sig":"MEQCIFzcCJq1KTZwttx0F+cTHoPBtA9RNIb58Oxa1XSjIvgxAiAbZ9i0XvmdbIexhZJadV3ihVHC4n2aTvNANQ5AcjMZLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+ICRA9TVsSAnZWagAAPScP/2/Z1sIWo/FAh+tLq1Fi\nsfDRQ0iFflsPZ/6+pAgeV6NkkC0DDE+z1R08tnXQnkTUbxqF4RrWfuf0gQuG\n05Id5eKjNVA07JmPXFugSuiFoMjOTpX2ypLM/sKth8YFvzTcwCXXHqjfUeQ1\nuEX7AYqKtVPmr8o214efvEr8aCaycZU4F4fvFd6m3nEo3PMhHBPUAbaxCE9K\nDlluRzUipOf0mn+iovRwhH9hc8xHATGhumXoQHnAUHGsQVp2JkGCdVpWKwnf\nUjQr2RcLA+qMij0vF2P49xbvMlJIoG0CvYaVv8mt0nKQEfQFIYW3PwJs/2D3\nykUxd2AVQ8cC9uNsTgcdRatgC+Yj+FKI/CvS3Hs6mqNtyv7JkT35Wp81/q+1\nXu4hPPHiF1KKCyy6e+pdzBt1/iFMWn81ZyjeTLDQMgA4OuILKvSkyCXNpipv\nhaBfoa1283j3WZB2rjiACozPBRNfanxKMbkRmkT0whOjwQESXVmrT0tePkUl\nbSqDG2ulNtZcoql5BnuX7Cbwpm3j3FcQkHvYHDD3z+KCvpssVS5rddVZ/wTQ\nyaZq/oZkKgrNibAc5s6T1L0v0tk52aewcMavrAUh0zXFEDvnLm1zzeIhLVCy\nL73iTYuuE1lBg1dai91rd5+uNZqqUptqTebw1S8JRaO1Tg059VD9jXjwDB7n\nxj4o\r\n=sC60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/touch-target":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.c7c5da28f.0_1610588039843_0.3277005311645955","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/checkbox","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c9fbc99636d1a0319f99640f014750eb3151664","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.b2faa116a.0.tgz","fileCount":43,"integrity":"sha512-9fOcJhWX7EhfeyYOEil1RZ4q1K2wYMOfg9EnWKexTcI+qvZm5F5duY1jbQTXGV5X9Wj+rMPa89+PaGdTF2c0Pg==","signatures":[{"sig":"MEUCIGjzKh3I6yaNy9S8VbRmYRpNZxHTVyrNyHhp4FXvotkgAiEAoXTIYgqbqa5SwoncmUIW4R7kpgmypw4ddQ1OjV6Ding=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJiCRA9TVsSAnZWagAAPpAP/1R8/4RFpRVoBYq/GJb9\ntWXwVXcEdz7QsO+PN5LEaO7WSFwtO3SbbM0rKTEDUYd4rljiOhkaz7pu0i+3\nLhzAXW5vJuFfBI/EoWjqZ8vasKcALBSEUYzDeCMVeGj4rvnk3+9dJwfjIycs\nnyQ08UYKkgehfZAzmYQ2luXozi//U1v7g3KSqxugkH0pkhk4tMoNEfbQvZ3h\nWaJ4+FSblnEN+8+v/lJC9Oxr9dfF6AKDq9chGjaSPPeuXF9/GliRrFqMFjhA\nCSOPZ78O1D5oBJFv5fH1KLIvrz5+MTKXuYt9nY/SUDkWJOprS6o4SxJe3a5c\nBoXrNrX23H4gqknr2XB7T85/m3I5lXdarCiltF5yna1wz2u6nlOiK7fBU8sn\nIx8o3JyRb6VB/MlFqk4kuqWo3pPwPMW2AlnTBGivtgzzzTT8kBFaXoWnt1LE\nl9FBGwLE254rTeGB5g1WmmhDeEkb2TKFVdpnak/1ki1CAXQoJ/csk6aBS4bg\n3bxFZOXpuEB59bJYZt9EeH7qtLS5wqdOea/RaoOX1g1+FmnIJptUMjRxkswW\nXFYujyyUTZN4AcP1LE3TtupteBYJaZvAlqJzV4sfc9uJA5jfWw7yF9uzs3AH\nyWdV5BxyIGIKQOD1aeQQV1OgKLZRLbtt92wt7KjfObPithC8u1Yzub8MsbtK\nSjt1\r\n=Z6Rm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/touch-target":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.b2faa116a.0_1611084385496_0.5358503208232637","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/checkbox","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"188ba4e42d84b1e1326a7f4747222cd251d33f65","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":43,"integrity":"sha512-5Y//G/e6j+kP0aMbeKAZR5EeliCqf86TwiFNGmXW8mFttNM8GVGwLJ+yqjWkAoIjcJ0r+eWk3u1qm3E3N94Izg==","signatures":[{"sig":"MEYCIQCV5+nffASuPbBfGQlHEzZ+O6EZI1Mq5J/9caWkuNZ45wIhAK7UFuAliVCfedGowk8duItRVUYVL72UZarIqE5HRtBH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2L0CRA9TVsSAnZWagAAfroP/jK+85J6+QuPLXcUb+zB\nHmOQEFlxH6SZCMdct9cl+SndAOIJUy/aQ4N+ylVo43Bh5FKO/mfV01nj8JWQ\nfZaciWqHi7PxwJSg6Mu8OoC8UcXbdohF5Ut62zonMSkmvN/xMRrzsJjfG1nU\nU2W3mD+P+QeUwPPJWc/TJ5jMskzqIadmPrl1m4yzxHPkjg+mQn85qacGQLmb\nvO1yrI67MigPFBFVc+FRnICxtLjBGMWcPH658FoQNkmhdpJVx5qJzBL/bT/U\n/SOjPOUJMdHLiW+N5dp9c6rn5NRNMX1eZsNBmfIdJ2MZ/fqF1igacMYZv3aO\nmG30VKpBB302IEezGgWNOZfQwFQyM7YurcCDRyAvuYZWbG8F7YalJ4UCkQ5C\nH9gp3XzRh89zx45q2RBROow7bn90Y6iYCw6D7KYAjl1S6BAK9lD/cyxxfUlx\nsz/Y7S1YIF4NTkKaQ2Umu0SRuPF/m8A/3IO0pA3VsDVYNKhZNSVSbT0I9wbP\n+slY3E+sxr9a0RF93gDKIk19m0SJwk6hv986AiSUrbze58bh3Cw3cjXnLq83\nMUjds2utlIQvpJbIk+T00NkIGN4RTerjzAF6cvwXZ5adX3eCq7GXXYxc+a+5\n/oIlC3LufmHLeFETWbADEEa7HH201OOZ+Xe4csqyUDqB+Wh+IO+UyF0wuWOk\nnWfP\r\n=MOOO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/touch-target":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.0c95c9f7b.0_1611096820118_0.5417110467897437","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/checkbox","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.5268222c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf1945a1241f6a2b9280034473f1bf472107ea4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.5268222c4.0.tgz","fileCount":43,"integrity":"sha512-GUahb7qnU78CoDOQsygVx3VAbBl9I9XSnd3joUUFL+MYBgpWONlcMF8bAsxIVJanLpUOJzmm02JC5euPyDWZAg==","signatures":[{"sig":"MEYCIQC8ZNfrjuV5I8a8j8u2qUO5Gmd704havE4OmbFJkLrr4AIhAKrMvHaeXWVgx1VJ57zJpZ7nevk18MTsP2ZHJCvD8Q6c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIlCRA9TVsSAnZWagAA4ZkP/RQLid/3iG1NRxDApJQO\nE/s/j4IDa2VmeHrMbRQWFOmMDzFH3hNqhD9g/DzUmYDUsC0x/6C5vf8NF3R2\n99AUPIdC+OR6xoFSRGrtX6Og0bkxxg4yaAMP8YSn5Uxihi2pPf/cfo3gpjUB\nBGF497lDwaNvxBTpjPMNU6fhPvXhm4XFFY19RT6E4QMT1ueUdiaXIhrkLlPS\nfxW9CsjArIDWAM2/Qnk9oRzbGSOIKaI9JPF0ZWQlEVgq5tErEbtVrWP4OTUD\nyw3e/9+llQYglKUTkGEZsGvCP/3QBj1JGhcGKF4sTjQZBDr1v7L4lA15tAIz\n10gPBaAJC5bi2nMUwAqOjbnpVDg1Q25yQMk1FqTcLR+/eZiG9YC1HgeaMXyg\nwS0TOK0thCvGLnKyyPPEikUhYPY7Bj4i3W4V2K4UH4eW1RknFAt1uopeO0j3\nwfvGltQe1FJF3GZgiKP+yfD/bkdsGBUcZfW+wldVjrKlnBVeLmrBQGBeOWcq\nuWeM1dAWEIY77nekVNGjBjCZ5wZfY6NTeKGr6c4gnptBp1NnaH7X75gj3lFn\nxXBEIiQf8QBEHL9nObbeaSPIdy5EquHM4fQVt08H1fnos7FaA86ONPKUCzrf\nYvnANWTPM13sAVafRUhghfGBYQYe40lhPwVfjbTj23tHAAmX6fqUK9Rie+GA\ni1zn\r\n=8Yhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/touch-target":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.5268222c4.0_1611170340685_0.9885114515806468","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/checkbox","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa49b7eefda8d459d554ba8473093ad1a491b3b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.2ed2d829b.0.tgz","fileCount":43,"integrity":"sha512-EWvWRjaCVXLRPf2CWN5ujNEqPZTFVZlo4nkjtCCwys3Ul1WSJw9fWiUQXgNnaKDtGxmYVd0VRPwsh3iLVcB1Hg==","signatures":[{"sig":"MEUCIDrt6KT9OpjdBOQ+msK1+kGuela49XVHrf9eiZe77ZLPAiEAmmGUhp6gIu1PgcJlNJhz+YuQpoNxbfBuuk6WAydCHAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfGCRA9TVsSAnZWagAAbcYP/iR9lj1V2NzOTzaDrm/O\n9nikp1rdVfXcajTuPn/Cw3rhXzjvEX2TXWsldGKijawfuwrAmB6AtaIMxrBG\nwKDQ+RwszJa6Yk7iPxWSOJATZGcyjLfxPSBoG/OX1l4YX3Z/Ly3LYG/Pps29\n6Nz324L0ssPv8hzAfn8ZbGnYZy2p4Gf52KHcLXY5lofFM7r6hJgG1h8HdHLs\n9+dAWLU3OmY8Zu0/Dd6ErRbecuZcRvA9X3dUkeQNIzMf083QD/iwh4slkSQI\ndUzcQ8Q8hWuhADGilfGRc1Zdo1D3FeyhuCk4mkiOn9b9VWwcM/VVnOxEMDJB\nm+LkWWZdEvVuvIA9MSelEGV+/53/sPJSWleUN1Odmr+9qArbjGgPB78DXIYc\nDUKldaLwn6ar3ro6+z0HjdF7DZdOQ10CGgUAXw+iRkNShw0O8scmXTrd51Ch\nkJ5lcVv0Z9voPeUmz0nIErzMcRAH3w+xk+Y7Drcvog7B+rS/C4lJpQfIANpw\nyAqchotdIuFah1/Sa4jD52lzoPSFEeLeCRZz2FlG0+qWXq1CeR6wl4KsTa7Y\neaUuHiOFOYrDHejVou3pFlpU7vamSGQJAM2oY7lOdwV3GZMxCBA7Uume+UpN\nB7XArl45j/Eo3PxO38t2bgt+KrObRxxqIzKUKpBHe3ZZkktnGrF3mFhKwBqN\nujoY\r\n=pm48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/touch-target":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.2ed2d829b.0_1611184069759_0.5078593610254234","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/checkbox","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88052d06c69c6e8847734ee2b75f70a29da97877","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.df00c2b30.0.tgz","fileCount":43,"integrity":"sha512-NKuYTTRIgbaVXPlLr3MZCTlFHVLdOLVhBqOtY0g3h/rjzb0stvk9ljw3MJDubRbpFQHFW33d/pTrdcXxb4SU1w==","signatures":[{"sig":"MEUCIQD899oz4TQxkVxjmcArl+sJZ+L6BfZSV614WLKqU69GbQIgFTA3/MOCRrXrA6EoeQM219h4zYOjfUzpwfaOi3DCHSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwBCRA9TVsSAnZWagAALpkP/2rqDyspdbgdnfnxmFK7\nDJ0xuxaZ1M+7c4yO0rbqpUcKcxBo2MuMLu+/AFi2xAsiBjaNyzOqAr+MR59v\nvSGKDRcGIPcwjoHBX/HHCIAmzSrgyCFHG1pucrmp8ZNdI4I8+r5r0hmjM/xw\neO5cTPL2M8ov2noOBo1/abqYLFWH5aSj2UwgfXkSJU1L5hzh/X3JTmzjsB6x\nMsCkiyJMpJ1/pYvPDN1UmHVMfgpNE0DYwQk2dymm0DCZ4pFWOya0tyF92KPq\n7/k5oR8NmL3Ggm/ZZUVX6JQcKkHM0Jyc0hOh1AVk9QnZ4FRuerUDLCBPX1al\n2hKzfw0jGV1cIcgMV20zWMZMjTX1ZFXT9hgLxNC1gRd6sAfvAH2Zv7XW55uR\nFL5ZlWan10ZAwNGJWBQoPiGgtiwZ2L0awOcmbVA3k3FcDnqX/I3vQKLJSIlX\n6vmeiIZaqUssu3W4IlvJs+No9BlgI9u1dlAWAmq39rIPVnnlf5LknMeiHu9o\nHfWymVfUEHL3YusnquC1DYKph4GZrc17r5U7HUBX9CSg4HDO3xMX7+OtlXSZ\nMEbu9mGJFUvAuWXCCca6STrPyO4hIjugCEZd1IEdFt9P/3tUYOd/OP0Ep0Mk\nQGJsSLoOQjLOe+iMlMzuQBB/YDrsNjxM/DeOg+8etDwOIdmGXLkqiPaxNa6v\nTM/P\r\n=WegG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/touch-target":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.df00c2b30.0_1611258880766_0.4313735115232731","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/checkbox","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4067ff1480c12309084cc128c93afdd7f1080f6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.fd61b0476.0.tgz","fileCount":43,"integrity":"sha512-/PcblZZuU1Hw4NBm2v3dnWpDaxtazyGhVF6H1Ydwcb5fadl1cBdngY1RJumYqfcvDOb1sW5dAc9REiNE/vGErA==","signatures":[{"sig":"MEUCIBj7UItT0/1iH4v5ifEhEalPU556A/m1VJwsET2TCV2YAiEA63H34wdff2gPtjglJs+CvNJWqzi1lzlQ5rNlJdTuoek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd9xCRA9TVsSAnZWagAAXgQQAIfQQCzYo1e9D3N5OUeT\nhklYAMSXrppZKwgRA/QTIuaTII2B9zcIq3TCynkZQDWlSYKOUDlBYFbozcKr\nZc+bkm4qxmtsSf/UbINKSYp+/O7/KHYaN4NEH4gJahVDebAHcJSKHaYRSSc6\nPfb4YijgfuukQTEzuEOsWHtXVidH/aNyKtR4BsXLURasDeIMvbFLkHv7rmzI\naWbRqorAbA2oGdheuz1RPWYHOmzmVJpslY5BeFlNUKc56oRhrFG58AQsDo/V\nSdahUzMUIEPG2UwbE7UOuvDQiOh9EkRJlXhKOfQR6pxuUSPHBjuVLQk4/iMx\nNOv0uF/DZWPw4cY0nEvGP4ADLnn4dHrzlSdtni9DtkJZytlhMxP+v+rTl5l2\nQwLLmbLxPFPx0+z1pOhE7VmxbFGc6X2qQGRX2npUkSu0tXLcqC42I3ErGneH\nf/W3hjTy+1VNo+0L6urm7Iwc1Tfkmm4Qo1jpAakuLrceYbPsYkkzRRbO+AJ/\nghzVdYOuwZLoNGw4ABVxw7yBgI6qubsb23qE6xjjaFrxuwlzeXfvdy19jIJG\nJL1e77vY0dmfIcmN/xW0+OcUhUUyMt61H6vpMSm4PlRCq3b3FdTsZu8w4cR0\npLq3YFN9pLwDAK8NqtCQ29kb2fWOyw6iexIHb5W5HDCrFLgAMDksAEHf5YdG\nYOgq\r\n=UO43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/touch-target":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.fd61b0476.0_1611259760700_0.7044033576623019","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/checkbox","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10fd292a084bc31a4b00fe90e5f60f01964eadbe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.3fb3a0265.0.tgz","fileCount":43,"integrity":"sha512-QMrBMhon1GN3XhQDsWT+zkDe0vGxbgDFducURCKRRvi14pVdyZndxljnoYyaUrakHF+vrtvYYmcrdkmJMze/sQ==","signatures":[{"sig":"MEQCIBjVMghaEjpdTGk4FaCDIBudsm+ga0PTDjL/FmFir/9AAiAiSAl7GMZpltrm+2DxjladBALpzjAllFxgf41+lFzw8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChaTCRA9TVsSAnZWagAAI58P/jrL2ifX8zzt8Xz5SNud\nC26hCt7cY7FzxQCMpw7uZL+Pdd4t5h+XlnbQ3JMY8vAX48geWPkTUOkCDiE9\ngWhquROhllH6V/su/QwRdyegTWAaUcL9ljSUlIe/AvLexb6wwkBTTEYfMrQu\nQJbuISets4eIhxAL8+p2SCkeqV20xllraCnJE378do81Nr+ubYCWlFHabvjd\noiQdsfvyo5PgIimrTm30ClF2yOroRaa706IRCQsCtJTeDlKYNIwvxue8CWXd\nc+pHcSqL14Kid2G9JMOm5T484E9OkPL2gSyqB2jSII/IP9WW2wok47rB1FoE\n+ptLC+a0qO6oezYYw263gv5r/51zNWhFrG5FfV66fRJ337o2ySAvp/6aCu76\nOzCIsC4FLRc9NcP9ueiDZSWfTwLGCe/wdeiRFnP3xTvXT7gLvpCnBL6CtSMh\n44wFzHawHjmQ5UZKgV77MrQZXPvMmSNrcH4IjqXiC30A+BkSd9Sc7k0RYFhh\nDqcK8fYcMIwZeKE4WyV6ivwO9BTyuJKrn90l097hYV6vdVzEux1ApXAD+8Qz\nXV5hI3H+cXa/XMFVJCPicWKD/oA9wuHh7RNzQBKf2TWjnehEgbXctgwuUkt0\nOUsb0+7uqEzikunCZUE516VirMgcuYgS54D7h3P8t9iBiAJOSXS/1w1QTRQ0\nIM00\r\n=zOqn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/touch-target":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.3fb3a0265.0_1611273874441_0.7849122130691197","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/checkbox","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.07deaec27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7401310a4d439580b862dc90ca6a255910353c8e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.07deaec27.0.tgz","fileCount":43,"integrity":"sha512-aTzavNjpSV2fqb1PvofCJWgd6asIFpLuHZ6KIY6uMjc6EH95/6VMnLUTp4hIp92IP6FqlOU2Mx74DzQFVux5Vg==","signatures":[{"sig":"MEQCIBX17g2JtcycZEbFKN6N64oCdFBcaDAjKz9gVLoxWbHyAiAKlBVveJDYlKl1bzkd7MRy4jPHGkIpQjZzoIrkBnlJdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOqCRA9TVsSAnZWagAA5kcQAIYY01pF9UmMnt/ip69V\n2RkBABCpnztCokFFrwALxO+a/lyxdrsPWcPKffNGz/5yUyUx0Ljn9nLlpPcC\ngHBHOXLAYYYxyjiLjULrJ2yufn1c7HvfE9IGqYgrKsK9sVhy8gzY6it75oHh\n4djLjEUtpH5FSuNwNKmOerV3q/cguq8v2Yp23IH5jDPj9L0MEiCUymAZZvEz\nzTWIEfXz3gGbgqoHf2Yb4hTGvbhxAEnInRRJGCOYPXuYQ7esjTqGJGVNDHji\nOPETPc87Hy9ujPxWLgH6wxl0A9DIxEgeHmsjaL0A4xIDrxED/NWnV8s6adcQ\nabk5etsC+gAN6+VaCeWnH27g6aPq3XEXakllN/BoI3faOlxrVQKzx3ZKl34K\nZYNRvIlMHCNDypk20mGgYTUC2k+WqvKalSt4cXJdR0kDSvU46Osl+X5DVDHs\nFzI4uUTwkrzJ9xzZs56fPZ69XC+6ED3gos6uFFFOg0lg7Pm4TP3jS+nbHrvr\n/cSmL55KTdL5MyraiEtcp6Kbr9Wsk6ZeTms/y/0912SdyZ7Ke/tixqlEPSAS\n5/yX6ETPzF3fnGulPxF0ZfF9TRdGI6s2aHauhy4/adod71o9uF9QMRvH4MNV\njKPc3htscoPOjMI8C/pgINz3JNLM9dKC8RNiTqZUFBPY7QkKGl5Pez4qupos\nBeRw\r\n=cA9/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/touch-target":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.07deaec27.0_1611334569810_0.7368155398590543","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/checkbox","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c283f2574394c0249028798f8b05d614f6e015","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.d2959b16c.0.tgz","fileCount":43,"integrity":"sha512-HLYP7+myi7Jxi76opEaxV9w8Lr6MB7ZsMD3PmV0a3TgwBRkclfcJQM+gar9KF8SCQvlnvOuPvHaMudcaey3XFQ==","signatures":[{"sig":"MEQCIHxifqKhG8beZjeBguWAvtD3ZPOrwf6VjZQPpETalo6KAiA1FEmWGJs3xkp1+TmbbNBRDfklraeJ1IRuJfRBb83Mpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7PCRA9TVsSAnZWagAApYsQAKQBJ1e39lb9gYDLN3wF\nQMScXAlOgTnvNqFcrq6v/sFx/x5uNT0Zt3jKS4fqWPpwb1IT36Hh67uWLIKD\nsCIRLTU7m4eiMJkgwlP8wPASdXhQq1FKlNUZQds4ykphsxIQmoBDZw3hTyKd\nCqaQvJ7htAfECQPrbFK435TxH4OZxGzqTiuIQqjLJdoSF0xp24/STmVR+uVt\nejGLopJEKppVrJNEwXoGwIpKWDZIt576u21zxAazf7a9oz3plfUn3IfGTt3+\nQ5+VafdIgNHnjaYWpwuUvRA4OPcztdVRNSJp74bJDfS9M/CzPlBDoonDpXQp\neO3zX5O7TS3G+IUsSXKajUjJHOOHo1uMpOgP2rq/ProkIn8XkB8KA0nGvaQT\nvUBUcCGCxN6Qeal01o6JBt5izyAM3LtQhwP4L7WPcGkZM6TrzgUEFjCqW1gB\nqZO0raFXJGwcukLqK7AQKzN4EdVgVEzGyeiT1kDE89WFURqT2wVHdohhg+Q+\nYTJvHGCem/KHPB4/LjeO69pWxogACF2EYotBZhryKtSIBuOW5iXtU7bfDFsa\nC0u6S4fTJUxh16ayjBpWYtMK/Zryhwsf7mdwVU8zHjjjbvE8++5gTQMAJBr+\nOJH19dswewTB/apwlj7pgdoQEE/fWrX7xEPmyBRoMGcxFu+RsJ7YkLPWBR+z\n2EJg\r\n=Fgxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/touch-target":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.d2959b16c.0_1611341519318_0.8888880611884062","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/checkbox","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"974b4dbdf2aa0a9373492445edfb56cd86e5a761","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":43,"integrity":"sha512-+IiDfgoPR+dfc7tqGiP3+yFN2MFQBDBON5fJjcsiduxQSaE+GgDyTcvO+3OZHs6S28Pt9PXLSZT/0eBQTM3COg==","signatures":[{"sig":"MEYCIQDQj49hImnNzh9IsfC2ta/U26PruzYJOA841NtVVMKZQgIhALlTQwxTfzjhUmIUdFN7t7ezXknxJd9vvItLH0SSoOMR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1boCRA9TVsSAnZWagAAlPsP/jP8i2VQPvv/lVYQyWBh\nEXya/ealyHH8wohbf77nTQEaqD8yLBSbSVk4U+uHXrk7LueYmwqdzNl2JZnT\nb5K4PBRo2qHl7NkWfo/SBLiQI5VFbE8cGvrSIbkiCE7wRs6JajhaYR7xRlHp\nkzYao12Bo4WLoDZEIwjwqSfBn+Qjxh44D7ke2MiovTa7pMzWxO/ufOv+Qb4/\nfCdtfDqiyqiGQbWDGKPPoqDk/2CcTgICJzqlEizdM7/qJv54AwAHpQG/1n1e\nKNF4h/dotPNkL3x8de4hU/zCWZQx2Tu6fqynyNsW+4L5UgMCrI6NGPuSW1FR\n5aLgEal7KP/zSIXnm7dzy4oFw+fmBtq7oA1hLGkMfcDjeC/EKQXNmkOiUqz+\nmqA5Yth9TnzfNomiWEkmMofZV81pezTcEDCfETJwbfLklsFmRDUEHUYHkdBQ\nEC9LyvFM7k4MUDOIqbv7J9paOkvgfMx6T9hkOQWuPwmSgJZqcsUtoelx59px\npOpXcbCBeYs8YGC+QhsWRybTXwzl2azZEy9R7/X9EnyiVeiOiQ9vP2tvBWs7\n2HXF42Ar1CbJ+cQgdtnRbOmW73jVeyUfIqMAh1909BR11ZcyOOxX5TBFN87o\nxFqyepsxBQFkefkwXSAL9/mYgqcSHKpdZYrKHt4eYwY1MKVxIAbL7k2uhwHb\nrIQU\r\n=i251\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/touch-target":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.75f3bfe7c.0_1611355880170_0.9659433074845831","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/checkbox","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad6279a9c31c20b680b450f769813ca6d09df1e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":43,"integrity":"sha512-GTMDFS2nE1I7qT2NlJO9qy8T+718Y2n2m6PHCoG8rSfKcCjlA6RHwGf13RbNjaVeNMwaEwnIdo6yMAxQf/boaw==","signatures":[{"sig":"MEUCIQC1lwOwfGgJYxHfWpGJk3wQr0uoJUzuMVNwlTXsUr8QywIgW43DITfaEFeVfyTGGBXQTAGAV8YUcwJEx/98d7CfaSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2E8CRA9TVsSAnZWagAAKvQQAKFi3c4to4xSlFazqM1Q\nLBE0Wrw75kRHBebvB4EAIMWPm6kUguh0Qhfk4Zv4tpDuTCYwTeD6ufUL1+XK\nxB1tAsfRj2LCtFg5kHzrYz1+wnN71k4v5vq+GfrWzNZS9PK4vXJ0gbbnvrzt\nzMaIaW/gqUTRVPg6oZzk7Lr7OaaRHVcfh+yDiC3gVKIE/DG40Xy0iGM27bKS\nJsWT7rPfRvTJXL8Ta/+oe7YZfaQg/9uelZKo/8Lde/MkPUzWbT4yXyxAmAY0\nSI/zHwkNEPggtAJWgMPAN+nVFq0rpkLYASludKI0C74VpRB0cvoop1Hh4FUR\nrsO0Ae2iwQ3OlyUPwrfTcq52VwxM1LqOz29qKtWMpAWLlSvnd0SDkwebu2qc\nAIol0UdnnmDz9vfAMdDz/fM3cLbkOClhOGxZgt0mXlB2yQ0r785Jx3n71x0V\noLJ4jTcVf9MWqHdzNUYXZXxFcgCzA/UAWdFQHZlroDd8HA1wM8dfYq8hAD2A\nBdqZnaxR1lSDPcPNcI1xH6XAevEm1RThjN+oNjNT+4RznLjH6hVhmuYP9SXU\nLl1NMZNTz864SzjagXdOV3nuSTc90fnZ5YAzjArfcj9auIgnJF6lInGSWF81\nXhlVQxSHKFz73rcvREMjUMOxc2EZrZn5SMzN5M1Wk2yS2KcRGnL4WZYpEGPQ\nMUFi\r\n=Yyvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/touch-target":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.b9adb7a0f.0_1611358524281_0.13413164651074716","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/checkbox","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a665e2f6e33981062937ab44038f58e9d5bac253","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.d29ec2862.0.tgz","fileCount":43,"integrity":"sha512-sTIH/e98FOUd3/qsVZjMUqc8Zd+hWo0+TRAVF4Kh2AFfKueMwgPUv2Ul2WnSu886/AGl3EeH/vKKpfAB/huwQQ==","signatures":[{"sig":"MEUCIFzXC3d7LfWVcV3EPJo9p1hRNqUO6Nx+1GGTwBnzMpsMAiEArviGtigiNzGh9zxevafEB2PHVcyeiJDQboPvB/5D79M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCICRA9TVsSAnZWagAArskP/RyI6aMFX1jpFG9D+ukV\n9gv6SrEiCUsdanyHgQw51itq5IxEj8E4jXgZzAaiKnwuZTXD21w6GMOGb3Rx\n6QZK9OYbR//8sTu7j5mHXneinbMGvqJM6Ljuh3yTQ+zEE+50HRtZDq8/t+zV\nHSdQtgcrLPPp6QGaH/hnFP6jZSo/kKXGOoXf5J7cQBZ25oUiCuGUX6LG9Te3\n9Ri6XXn5pV9YUvp3fssunM+wyqoxjL38oqx4CGY+G8iQ8LGt9qqxmltHVmLc\neB5pTQfIt65Lg9SZdxq92vWopSrs9ssPzwakhUjc0Pf+Apzubicc01bDSDuO\ndvTCuGogpmsd9Cg1V505G55ISKBn0bSANEHu/UnLvxzu3AfiDHtrZFuHCelp\nYDCXK/2NI3bwQvtFXb1cUhTlQWCSQJHcPAGuu/VRIe5CTPChBYTIOSzr/1JQ\nyr009AWoWGj2aZaHxa0KBP/tuJhSi/2MRhOBs545XVfsRB4PhQX4TggQ4+Mo\na+GRHKPX834PwRr6Plvvbcx206bHpvxGzBCbIg4ELPFqoFpfK/OHF8RXKeIG\nvz8Rk17r/ziy9c5KnUQkB41J4LHnFPi1MEfJog51cS+XMO7DnzC57seJoFzS\nRp1YoP502FOa7dqtHhNSR9xsza/3r0sWgoJLDmioygSp9aNFvItDBhQ9aXAJ\nKRRO\r\n=W1LY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/touch-target":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.d29ec2862.0_1611591815722_0.5748670665447058","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/checkbox","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.96be07c68.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c5c33600e72f21565087b29f032f95025423e42","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.96be07c68.0.tgz","fileCount":43,"integrity":"sha512-NADTG+MflZ4sQZv/3i2LjzWMfI2xnl7VyBE8PqnxE9neDSCY2O5CQmXguStzJJIz7GGPfi71uax+6EyFbuNsQw==","signatures":[{"sig":"MEQCIA2cnyTkyRrFhCaEqLtU62xIcLs7O9wIh8vePdolYvunAiA6zzOXp0y6/KDTbv9j6gP/iDAQZmRqPdTKQ8kM1/hTuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13OCRA9TVsSAnZWagAAp/8P/RBvlxxyfdHTJXHn3mvi\nSA9pR7Ll66c5/ZNp6e/BxUFNKWwsELWCsCxW4t5TeBy6mEln8SbIPfEwChay\nJGFY2NLBhPxjC29xQxloYGfRa4pRfwM1m4AK1+oDz2EC2FtnHq/E0GPutU/H\nhHSR6m2CnhUQPP6Ua7V6zVmXloNh0ShvSbsq5onJLrRCx3SUPIbgqHtwx+Sz\nHvf2Qh2NU3X0pwnqfDXA2pqDnoQEagL8cXCA6xYpdhENmt/Bm/i1+LcCp/Dv\nM7ozrT0xjFD7i1JdEbpTzfUlE7uC4ddBZiSwtwX7j3VEZs4RQFwVhBijWLlT\n+GNZ8t2+QgN1omffntBYTNhvtHAP3qrRADSf4aTtq6TFOLUedm1OHCQRE8VG\nuVyt5v7uvp05Ku9DWm1b18pfIhGBKQLIHTHBMi1VGthF0B9q9nMIDQe47ZBq\nkrhdU7IJjdhN7cJ42Tklg5CQM3NpoFYpemIfFp18s+Il/EV5StMpyX7SA/xw\nvZrRu8vGSzkaH73G3sRh8Fl+Fwy47QNvBMSA8VpVTl2wEBJ1XZst49xEUTd9\naPwpGoKUyqFNShr47DRHm68blWJyuluoGIuErKThdGau3H3Ojc4NuBvp/VFF\nBmwLpuK2U8hXU1FvPevpPxSu4Q0SnAjfOa2XZCxGYHjcytc8Cc8eeUv0KKYp\n/ZwO\r\n=FbDr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/touch-target":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.96be07c68.0_1611619790150_0.820286441355234","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/checkbox","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.e383944e9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1e234e5b4725be0135752ba8ae5dbfe24aa10cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.e383944e9.0.tgz","fileCount":43,"integrity":"sha512-lepb8dwng7fui5706dWFD8mEHc18Q7KeNFKt+8WWxgP8jqfU12xPDnKMFJGcYSsoR/umP3tpqyBwTEZQbQyLaA==","signatures":[{"sig":"MEQCIH/u5S7raQdI6cqQKS39osvZ8fgCHsb9T144hHOjahgDAiA5wFzRln/tlfx7Qzhdd0P3U0QuTAAGvxZ3pvDolnHyXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QOCRA9TVsSAnZWagAAHzgP+wWz9NKvtoB2c8v4FyiH\navI+vg1AGtNCxuWE7hDkk4/fwuzgTySYFPiGp27DWf+jm7ojE+wEJxJzm8a2\ntH6YL7uT2A1fpTb3/Dz/FZls8QpOmzU21Sl1zVY1iHh/B3C0inOi+6lCilQy\nj0XWmt/f15etEmq4YLiEHGz3dXe1ygfR3M1aUKuErV5rCtrcDnTuW3gqQpwK\nGz+dLuajKSFCWhIahSaQTdJ5BE5k98H+uIx56yDxRv0A5oyj9zsshDnaDtIE\nWHh1taaY7blsBfzBgvW0byVskznmAHGW9JaN+SV588004QEvSWBsAy/tN1pl\ns/hBrKPMWIx88hyj8qIxo6yUlz5/+9Lu7CgkWq5hwV0yLLTvqQtbo2mJZNDO\n7tIaQdwFvFiG9BrQzNa4CfUaIxtbrQeqdyZ2hXIsy4Cv//7J+e52YvO5+aYV\nEc7nkrakF9f3zLMlhx8mtjt3YK/7v8ryZcHjTlHYcEYenIVFDKsZJ2TbVEtF\nXj1umWOuIBjwZz0Tl940IAB5x/ds3AIeM+GhAWS81hH62GMbfWyiMZ+F2M+g\nkD6wUDzOJtbNem+VW4JOfC+7TQQ6nBatxUf1D+TzS8VhsvXKyuIU7nEhMCK/\ndlsEIdZdiUKX6eOiDENvATjoqjdP3geooetQixoFQIMbW6i3aHL7lTIMVEq0\nAArh\r\n=2JnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/touch-target":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.e383944e9.0_1611625486221_0.3608569480354986","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/checkbox","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.623af861e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3b1cf87eb220ed30469cdc9f52be9e8a54d30f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.623af861e.0.tgz","fileCount":43,"integrity":"sha512-vTgqDcskkr5dD+F0ss0Pj1sDrco4YorH2eebenvlxItGl6Zzulc4Gv7AToifc76/TLSzZxtZeAPvT4/hFkpT/g==","signatures":[{"sig":"MEUCIQDS9jnXR2fL/w7WFCdLkp/yWVX8z5XPmeAiNJEm3LySjwIgWhyA0hyi2BWOGnWSlLtrW6P3fhF517cNGaxBv+ApXGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BACRA9TVsSAnZWagAAS8kQAISMwLOgv/683JEOH81R\n+A5O7VKmRB+Dh0AUsAb/fYQDX1entCfMVpzKCZMjaFY+7ML4dfmm+MOltwqM\n4cp8XPqZVK57uzXniuLHEH9lM4cxypol6MOrsGPhZQsX+vzITjv6/7gDhhFk\naZZFSXE24BtM7Q/qT8N27/a8pUSGh1cTUCfWFDP5A2OJlVe0mhR/+NxAB2S3\n//PFB0DUzRk+DrXS0Fkm5ShTSd/raV0u71IbLEOOa0lBzTulEY9kgihVL8mL\n7TViV/i3nkKbe9w4qU/bF7MEfF1JlxGMv99ipae4KSex2jme0kDzxTYqMkQC\nEDFmjpX0zA0elYLyz9hCkbwP8V7KEviT04jKkv+snvtTbJn7/zEuU1RE21Nq\npfIBBCOs/il0HXx+mTgBUa3mD9z/XqaU/8TVebGvhn7bfl/eJcTE7+jHZH6x\ndFqAa6pmxhO5BXqYaw4+uPyWd5VtB07QJ9swqOTZiIqdJtiiR6BrDnqr7flP\n6pAXF/ZPbmeZyU7bsNUrTQa8KoPORwXcVhhIc72RhvWjbqZC6FU5zYs0ozP3\nl2Pw1gtF4DyTIz9Cp/JJQRKnpUG1VzmKKk31rT2AIB7hXaG+kOi+r89fVjjN\nw82LwQ0LR3Af23dzI8QxnDccO1l5afQ/LOuGAh9LsbjMxG+5xuujkH5PFUSM\nmY04\r\n=l9ix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/touch-target":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.623af861e.0_1611632703593_0.8267602840166697","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/checkbox","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a202fb9a941e2be655237ee642a05690dbc85dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.6863fd43a.0.tgz","fileCount":43,"integrity":"sha512-kxr9l2CExdYaNcWIEHy5M4OvSTV+Ga8Z6xqF1uMvei9N1JRfhriifMFkITsMiAAFXlQneSvgK3wHlwtrJ1AJDQ==","signatures":[{"sig":"MEYCIQDURlQcHi2rRi0t0k/dgSGXKnIclwENFthOOJGbFb0l4wIhAOOamJvdCjrEgwi93nigzlaWXuh3xRpz3Wt6uo3cWUt8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIp3CRA9TVsSAnZWagAAu1IP/iDZ1sc+sccj1P+8DPra\ne4yq8hyWnYsa460+BvuWg7SG5W/98T8c06kSot2ns/fzZdfcdn98U1cvUCbI\nzozi8Utn7y9ZXLPjbLrhqxao78uG9Bq2cFrswAX8P4aaSvxUapXK5zNtrrHS\nIzsQk1VKu/pe8fzKiKGtq4OTZ3eYEXysx0zywOiq+wasrBeXd2cDeaz8e3+r\n0avpEDwEXkn5zWNTp16nBbmaYJexbnpwqGYFwZyZDk9qyEPHprXJm/T0ZZ5l\nIaHQzodt0VKSaZsAvgS5uYU70jyxQYWj6vWAaOTElsgPxQ/eoJnABWr40GFi\nwguanWzQKMW1+g42cbVpwRIvfaBQsQtriUZpZUgTyT0RmDRshTIT8MFmEmRi\nZ6T8nDhaKGAMjGTAiR5gmBPwcJZ5MG0qKQO7ASmOn1KhEaLQ/SGRyUKNlpSf\nBcEgFffmbwCHm33/vP5ZQBD3f8vnNPJt8yAXuBmjqupRfXSO0HL4+w20LOEQ\nKZh6lv3Dc+zAP0uLJX98acyXzdQz0feQ9CnfQJGnNJgNH704r+gnocFBTdgW\nTJ+VI/+I3FFD3eLWg7JyRPWb+ZLU3SxZYVAMiTt9rDesKB1zEoLy1WJGI3rq\n2mfHScF0W7RQj/ShnJ7b7iXROUJEkaDTxqm2eMD/UbPzHZOUQo4eRAhWh2sS\nu9iU\r\n=0xU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/touch-target":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.6863fd43a.0_1611696758904_0.7441314414911455","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/checkbox","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0cda8df9b2e3146b478408bab2281274ffc6044","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.ea55b87ca.0.tgz","fileCount":43,"integrity":"sha512-ijfdvB93nLYOhbI1+K+T5KQNo8InBJ3QFHmu/lBYVT4dQ6dfxaMDganwgd09crAiw+DvS5VZ3VxgWNKOO3Vc3g==","signatures":[{"sig":"MEQCIF54ix0M0eQ+7gAMtClHS7dmYOf1X5HLrToCcReuTWwoAiBTzfUXBtCeNtjjl/O6/ncRukGVEXyDacKPNKkSF5g2GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKmmCRA9TVsSAnZWagAAxjYQAIATeccXKfwkYvV+ip3c\n7PfXE8kv/kOWoBB0q7PG7NU3wf/oS/6KX0xhVnRbkDUXtdZRCJ9qoa2PkOfC\n0Mq2eF/+1btgKQTKJ7GhE7R0UAGmQ2q0/f38abMKxq+LQ8MuwkJyWr0ENAcC\nV1Mt8iQywdHIGkUf8f9W9voSqt9XODXWMwb3/hQX/No+T3QRMMckFLZgcV9X\ntRLD+5v+IuTVHXvKvpsr0zeCrwaruStEvo7h61igxGpU2fhEFu2WarUizvaT\nEOM54j6B4FX+h62cw8YkBKIEEh6UyECsEB2oXon3LZ4L6qMEn3mw/Rm+2OyI\n3iO1m33A8KuDJAg48mPUselaKg99XBqs0kPN7K3bL/XO7M66m9yd6vXq/In/\nZ8Av9DNdMvjsqoAiBq1qGEuo+smN988rEDJJnZeeMkKzgw4MflHskx2MmTSf\nILOFwXIY1krWJhhHhz58hH27iEuSooFoOV483+7HK+cIihHIdeAXMLWSJa/l\nl9FVFixufbqIPHLmWq3IVy19VvQHWOWwUzL+rVtlEF4VRuOo2zZX3HtBOP/y\nKQtLCVxkS03cFiqcjxIP9otxcEhyAZAvwF/raw8ZJhZ7Q382BTTfoNLeV16Q\nrMBxqm3diCB+TbeyWxoA3Nco2cZp/ZSjyAK5IXs4LHU1G9jdowzHMhNMOt4y\n8iO+\r\n=zYtE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/touch-target":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.ea55b87ca.0_1611704741527_0.4198547585989927","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/checkbox","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e12146937f7947329abff685422a78411edc108","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.e902ff05f.0.tgz","fileCount":43,"integrity":"sha512-Hl9U7DllrebQozzRFA/dBujsWNCHOF5RiAao45bgcYrzzghMswZlkllhjStJtsHTZxO3+k/RKVbYMQnMfucD5A==","signatures":[{"sig":"MEUCIB+R83w7njN5WZoIyl5h3XAi/6wH0hsvK7ZGTUhq1XKsAiEA8LCU7vQcaSiYg3MlP1M+xUCgEWkCOFTItiMx89DKdlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3nCRA9TVsSAnZWagAAizMP/057BZeB/xnm8ry8x2y3\nBnBDVBh9+KVMsSMmhN01QZw+rBZq3EXt8Mpy4BaICgCKBHTu1a/spe2xNVAb\nUptMTEefnJ1B3BbOOSX5N0dRjZ7byOF7+ouPX4YP3drXq6X+T2Q/F+ggB/fX\nXSe96VmjvGna/9Ix3FpfCUElKEBnjugi2D6TetiUOQboguEtu79zp5jT2g45\nNhlN4MlgugSjhu8iqFq0TZE2OYD+ssHHPnlIvw1z0X/DRzNUm/+PEVG2S+Ya\nJ52KmsJB2OD6g72yyd8bog2DCm68C+X+EAS8rdCQQsD5lWdzBCENd0EKKafV\nlJyU7sQjCLYhdOPfTilcoiP6skLPJFd2O5jJ2gNONBrMgF2or/U3+ONsFMKP\nHSRMG0RkSIzIrEUyg8wuo0FfqlN9BMEMnB8nvyaDS0nQjqkn4f8PYDL25SJR\nDD1r3H8HBNTki1C70Znjgm0JG4M98F5nzPj8nN2Yz8cNGAIiB4KPiMa0NbTU\nmO6mOjBurPtBAMaCfUO9ikFrk77wFNntIHwaKV7Uq760zmHHZMK8wL8UZozQ\nuWXp4s4nSleM2JvF0R0BTMYmB4ATHi5/qzw6O1F0SxvnVgiIL+/ATjfhLuEO\nymQPNVZJrSXgs6ZFz/NOYw2k7fCAjqx3y23FRDMIINJ8YVVu239XqgDDKCWt\nfTAa\r\n=H5I7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/touch-target":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.e902ff05f.0_1611705831441_0.7957957639096938","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/checkbox","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c1dbd9d351e8325f6a397f61ac13d252a7de00f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.2c9fc538a.0.tgz","fileCount":43,"integrity":"sha512-FeKV0c4kwHGRv93KvnoQo8G7OHDL7KzA/okbroBGRGx9K1TQLfyxTTi02Ehbp+mzyFjFeHqzuN5ECKu4clQLOw==","signatures":[{"sig":"MEQCIDvHwRhZj05rNHhVGle1tpoS8Zgfbitk/9zP3kXsykqwAiB8pYC5Xp2tG+3NJT+8IZbSO8IbpKDsBPFeiuwzrj3pig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNTCRA9TVsSAnZWagAAkGcP/1yQgHwl1+w2jspbH/1j\nu15zma5m4J5zyEVIkJLg+Ni6avhK6vfFQY0Kgi08y5oUWJ1R+X+w6QGqtfaW\nuaANs8CagfIefm1/uTDTQphsdqS+ADpRlY3iE+cmaA4ARkIfCqrmFmwJ2tNn\nZIBo3kvSP59AFjbwS01a8omvnCn0jhj305RduviGiUjdg+Z3ik/Gs9Hr0sOB\nrGs95+G65QDU03Md+LBElTLDr0vrgyPM2ak5iIsdkPGAVYo3aYVBkfL6GNRo\nDhgBVuqY4Cjj59Ofa8kK1y8Zt8K3mvBH05SDGN99ISuQHYzHoZy4R/SqHLH+\nV6yMqQ16DjP4J6Ji1kALowQiS4vFcuLw7z05dOTD9CZnx69wFbqH/Ms9tsO4\nPFAXDJWRPbzIOFr4nx/QBVnXrXffQClyaH0wVXRYfGvSHWvNK9c0x40exrTt\ntIKhrlUrLA6afRUe03TgnaUolAZF1iYVlAAoTH6Se/IZmSSjocgViLOIz+fN\nY8NtnUvi5Y4numuYv4pgadNeJqthTYwlZ5T77IGDRopPuj2k8DbPO4R9nGZB\nzRC89RNbRdFE2akn31rbZD2yqmxWByxZW9WXK5T0ncelonVcX5zIDUnBVzdV\ngOrYEHUf13HyEviCjzpIIXrRDBmMDS1SNIsRwgiRMv7ur8G5LYQzAdEQRhNf\nfqqw\r\n=OpCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/touch-target":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.2c9fc538a.0_1611707218621_0.42832238445378135","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/checkbox","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cca6b1d9adcac054480b5a9bb551503a8e7c144","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":43,"integrity":"sha512-oDuw13AstxVy04nrv2UfByz49tjcgL299FyQyC7kqvEoNbc1KhmlC1xAwB1XHeknxJeeGZV+06/ixWzIXCXxAg==","signatures":[{"sig":"MEYCIQCdOfXH+lrCWg1pdCBa1ffDDr10Hxe4y1UxxczPIgs++gIhALUeuWjBeXD08f8n+YpvTquCZpm6Ku7weIi+QlfEryIa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+zCRA9TVsSAnZWagAAgtYQAJEIHgoeFcQcVlrM4JAf\nNLt0gNNl1tyF2UhOW1sJ7udBaITcJ695Uan/TDm8UkVHmhdIPXjuvp5xpPQq\nq1Zys4oirOEddA3FwrWjwxxi1+EudBDBZ/XOxHbxPAxlbTRh87/tkt5eFFNO\n0yBCVUTBSYCZfdst1uV2NoWhj2eCVtHhRNXR56Qgif7jGeSlebJt3M7wAz8E\nHag96XY9UeZgd6ocUD7+hXLiWMUdNnHjNsLIzmUgoLWH0gHOQd8BxQYjKrZk\nhPe2F0LQS/7cRLye67V/kC8Fyn4Z9YShYa/gNCOT+ZTfVlZdPtNhQfunNJhp\nWLbC+QGBxwsaMZyV0VuL/IeTwmsFFkAuneJkMEONYVrz16PW9iKe7pnoQGt3\nbHKZN37uQca9iaSUYvLBQYYbeOqkmechhD9/xS1sPLPkcAVfzfoBmCqVIp21\nw6+J4bhNynxq5QGImapGhsd2YuXbH4HminkQYYOk7GKtilOr+6YrDkvTaQ+O\nAkamL/8xs1t0Z+Y8WWR5VmrY+oA277oCYKy1LikPf79Njh3XPBMEL5k9OQvH\nIr/AodGo+MePyRBEa4imW33ia8tXUmWG7bcKyW2Cor9rb2EXdMDxwYVbZrin\nGjstnpbT+oouLcrVGw5ng+QhQfpHrhR7g/hND41j7pNeU/UL4DvOT+ixnbc3\nRFx1\r\n=RaX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/touch-target":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.6bf56aaa4.0_1611710387282_0.37373964689998984","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/checkbox","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.994873795.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3220219735f8829ee96f58a871cf0536a2416bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.994873795.0.tgz","fileCount":43,"integrity":"sha512-HGCR6FqiPW6v1P4xRIvSXog7KYHZi9gn5CYBrJDAEVTARkisMA0arz3SdO5E8k0pd9Kw/GOVCY4S/hgO0HVAAg==","signatures":[{"sig":"MEUCIBKA80ytJzvK7RFjgfvvM0YC4QzDY/XrK5y6VsYxYRgpAiEAvT/Bvlox4Qug5xAGAgO368TOgLUm0V3Zhngj1+oLX2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3QCRA9TVsSAnZWagAAo3YP/06eL+WY5XfHN3BJYDNq\nCs/SxL4a6HNCFrdNKNab+UtlvoXOtQZRwL0+y1zJDbD6/KCMGt2u+lzUWddn\nx2h8xuwGJe2091V5wrelfjS2XUP/B0+nZq/fP+C+sfF2pscJbHEi3D0ug4Ei\n1dMpfeeF+CO+Y181rqSjGOtYJhJfY98WHYGVEh8Eqw9tUeWu4mlBsswjgRv8\nM5fW9VItG9xCDrJoeNAu7GYU38dx+Qt4Z9YIUbWlIsrpj3vbuHXwbXAPOe2S\nHWMfRdP6Hhv6g+8/WHUKSO6d+m3qZN3GUAUfMnsaBQJRWwhqTejJ6N7gtgQR\nrq9l5SXz/vILNc5lXFyY5wLe0GN1PxehCONWCJwDqRyG18NpjFt4pqXHkHno\npIXUlprHON51nT74+x5ko0WyVIbXLXfGyB1Ph2Aekg7huQ/JdGvs5BimTOKW\nrfKwAiqT5wnELlGgStVMqpgSks/irFQrT2Yo+unkwNgL2Dj7Q1pSbTx2FVLT\nepW2SvSYnmUSZD5/Dy8c27nPwea1EiDHRUl9MwScWkWbgcbiKY0YpZI9XKZ9\nLa7X/gS5dN9/yISkR8NkVlDT6GXYc67m/us9AhduJSqsEos6cDBr9U/12hzl\n4AwPNbioONDyfCne6rRQgL38am9KRcjzemHMIodOse1osooWueVAxUEpYVct\nlTY4\r\n=qjds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/touch-target":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.994873795.0_1611759055830_0.8520309836066027","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/checkbox","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7479e23017eb9729684fdf20b39493673f4c3da9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.96878e1d0.0.tgz","fileCount":43,"integrity":"sha512-eEuN7iKbFOEuUQi4MKO6nyF8e3i0Pb8eHuhwpJleChCWcg0Pc2Pb1Z3sxNsxIsL+4ajWDtj9WW7+ubgjvqa51g==","signatures":[{"sig":"MEUCIDu6GcT0JAKoN26+lVEG8w8wLGaIQ6/3pTcXWXtYy9BhAiEAqwFRb+u7aWZ+Of9BGQGoq2eVPGBycb0U8bvT9KloPjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqYCRA9TVsSAnZWagAAH6IP/3hIjnXCtRqb2ADNQ7q0\nFnKpwvDIaxvXd35ZF6f3JwX47wqIIkOkuCygr7JL5MKVw/I9DUf22CfHW6H2\nXv+yMYWsJalt7S6OVHhBAdH/Pae9oSRw9wiJPoHKUxnSlPoSLTLYNdACj5OK\nAQJ9yXi6SoYp+WG5Wh8/NhWvCrZOuIzzRr+/H0jsVaaE8gr7u2VMobRO6yj4\ntJjSJYqFpVT9yVQQ4QRD9TAL7I+yBs1g/YnVrsgFozN3tydFu2bsHgwrlbAt\nxdDHNRAN1CpRYBT33EhbQUf/aFmWjYazIrWD70Yx6Lh7r3yqDzq6ySD4vjJt\nOUL2UQeUAEHL3iM64/efDtg8L0+EcFvgjudUAxA0TKJTzbOPwLPzME2N1SGr\nhijzI0zRxutIb+jz5bO9wgSvN19YJPJkr62b8iAt6vUCM2PwG3Ml/Y4T0B6w\nEsD4gC8kWCwrQFesU4z28BdsGfPKu3jkRR2KuNS2nB1oLQ7IHtdh3lpfrSv6\nJjqhvn2ua5y/iRbw3ijNVOLBznjh3bCaSer+4Gm6WZyXcizSuTCrKQT0kfbJ\nNtwBXQO/2CrPQq9h/X/EZazarcC+EiUZxtwqdghpEmRtvstdTD6kPQ55W/UJ\nrzp4nGjd4oQbnkaMB7ZT7D1is/iOSLNIuYiUJnpiXwCmqiOkx3ORLgASDgQM\nPlZt\r\n=ldpw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/touch-target":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.96878e1d0.0_1611770519756_0.590494933989683","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/checkbox","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"315b3cfa9970b54b46966f03c170a6ae2140dd3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.3c117cdcc.0.tgz","fileCount":43,"integrity":"sha512-/HF0XoZMNEAz/pXh9UZWJtHvVkCSrOQg7Kv0Wv22pz1ii7nWtw/u81ag3lR5wVuxoEkMfViVO+TD4VTwLmCKIg==","signatures":[{"sig":"MEQCIHDX1nwZyTjaC1EDgLJUO4jBZY04lMcLcOpVXN0ivi0iAiBm5b6VqqeY1e6IskvmGygUtlOR/nAHp6Kxglbblqw34g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGmCRA9TVsSAnZWagAAexQP/29stDCgs1tzPrOdoXWx\nnSiIMiLgjRYxxZBOiY5QFZR+5RZrQw/y18+qd0gfHP1etSAArYfIGi8g1v6S\nDuO1yjErniEZG5/EF7CjrX7Tw3DE8r13FToNb6ZtRufrPQCI/gOnHFqI9Ksd\np8imYM1Mhl3dvpuKYX4A9i9Z4ApTRbaOoxdaygEvsSvr7gy8bcxYb1YDfREH\nheNSp1Q2RY2UOAfTkY83xtlntC3V0oHEFt89/ZCbr5QrZiqe1WdpVEG45Hrh\n7l+FwDyyIlN74uornLImFng2dX88rEpDa2qRgDxANpb149Sx+/h3j4Kfry9F\nZ9/rYmvVdhcsr24t1iwku3eOChKS8HfV4/KvhoNN55gGXgTz0oRAC1Y/QjND\nlF6s6RQLVFH+zOlM5SvYlSVZkdgCxxzJcQRpPkwFwYUyO9r820OiA9auI5vq\nom0oGeAaEtlO4X08qBEiEkLubWhwTpq9zwb8sR4KqVtTN23M1kGsHS6v1WKc\nDh4mTRRApkke0yyRs83NZAo+YLHjUJF/2RaYE0qXIuQn6R2JrgwOhbOyw4pA\n10OSppO+RI02g/gcAHhEhzUi4spg9LlZhTAaCK0srNvPVs5RU98txRnrUEuU\nrg69fA8EdHIP/1GM6YOxcrdcM0bmqWHOOxtdC/8h58IxwQnkBp9ilmfFz70z\nhBqN\r\n=2UM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/touch-target":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.3c117cdcc.0_1611772325315_0.7502212315670811","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/checkbox","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.b411e7033.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"431334dcb04aea5c1dc5479fd431699aa670dab8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.b411e7033.0.tgz","fileCount":43,"integrity":"sha512-NVhX9UojFn/VJeLMb+d4lGlkkOVnHGRyudHOxrutimGhdhrPRnStIbaj42erp0h5tLGK0Kn/ltnjtumTZSp/ZQ==","signatures":[{"sig":"MEQCIFFPmV2fIdwsAD8RGJyray6+tNi3+IMQ+AT5GWjgonv3AiB0KmbVPwIQudDdAgkflI8qIwEriWBKkwvjyS/++iwq+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMxCRA9TVsSAnZWagAA+RkP/13tGXn/Wb74o5B2c8qE\nWRvussCMkjIlKPZyxIcTMhn1ASa4+ajt/szegFxKA7om/0KCc4f30hi7IwfH\n3gNZsWN40v4LTJHuSD2Mix2dVtPwvOKqPNUOCeKhyLrk837OpnDHBxWZFTEf\nUMGbVJROnGUdZdjXEiDHDTTgVXvYWoljtbEfgOkPXCpSS0me547DU1MTzmky\na5SX2yPEsCFQVSXHMCzh2OSX2UtzB79RqPKLv39ZIrxugP/rd6KqEA///HPL\nJai9NbOf8vBKmJgdBn0DG7U/Rp8j1HSWyAyISPHwIvJhiGrjudim6WDtsx5C\nH0PZhTwSEyYpEEcWX9CegFUlvcuHPJBqoWBplGrxKvob9aLshH2WyJM6QpRU\n9dGA5MoYWFjsYCdGrrTP4fL1jC8JHnZjdZm1ovRq+BFOE+HJETBHkUBASG95\nz8PdmcpNRp5NWlW/whih56j/ZO69fNXnvLZqKYVbeeSqN1QP2F94SJAO8GZV\nCkDIBAn9fc69z7pUzx1ESPNO/j5lzfv03wZzMGlq7wWckFmYxuFgWTLHs68i\n8Jrvedjzccfq/8SM/6YzSw1tHT4/C61TQqsyMNjhSK3IQAaTQ0jWX0wJizWs\n9hxgHFMNhRKJzLREpLm93MBYkcsjhcyhOIdFJQcu1slJVKE8wa6p5kbJ+N6B\nIBLf\r\n=Uxj2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/touch-target":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.b411e7033.0_1611785009050_0.3447901755843463","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/checkbox","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57379623a8fe3e67beaf9c71e8af8024e8fa6f9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":43,"integrity":"sha512-CABBwvgjFIvHZeU7dAGLF90zMquQnh3bEuPlS0ARZ/sIfPJzyaLBAhNm0MvZx9LZJcQNIte/DADhkAwXbotYfw==","signatures":[{"sig":"MEUCIQDpWIsvvW/rNqjfqz+IZtGgLxs9UJGotoQgX/dVsI9/bwIgYtM9c5Lv2dU6Y9ZzKaGGq0IJCGGQz9GjEmVXhsyKqiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfEyCRA9TVsSAnZWagAAiKMQAKMBlsITKKDXFXNy7S0b\ngZ0b/31znWSEv/xUQxbipcYbSVTVPDl13G38UF+Q8538oydsyhvgWVZxufdq\ntGM4uk/pPpNvehxCpaUEGRbMYw397OKIepEeGNAZJiFCaxf+WwIvFHHABCU+\n18GqdIhT89Rkk93WjK2WfU5TAdikSeNxuHJu/wIbRX2M7YbmQ9LaCaMHN5vv\np8XBWtuTqJCc2lqnJ3WWMqbyJCAzZ9l7inMUo8TH6flmR2kw5NY2GfJewyeQ\n5ZIYDGcjPD3b9ixTECgQuP5s1heRd9JX/Ev3yK5w31cL4KIL9vNj5kyuHDfg\nbvpbhe4cZvqTRF3MdbEa5X+qo/9XXxweNT9hFAPWsZuQEcMD8ZWLlIj8OVCh\n8BGp5BlUtBV7pveHvvxJeikZ2PUZGv2I0cgsTDpGFTeZDD5d3LB0i++o9Ujy\nH2sJBkuMfu3rCGMO4d4Gw+ps4t/IKgrENMNfoOzJPb+1u/A2u7nkiPm+tepj\nQk816V5avqzwbBfdd/+28YUIKt9h2yX1Ypw0NEQdhVLhPWObmeLvpunKX/bt\npW0XeDw9XiQyIo0ta1RXLHtU3YDT8YYupZHE/L/QMTaXx0CQJvyt7R/z3DWo\nRnUCQ43zl4pm6R5sJvbx+rNy2qcp2fbPep6MfemOAnujJ27ebUUBy0faDrwR\nX7KP\r\n=hDK7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/touch-target":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.a9ac16b4a.0_1611788594399_0.7827423062208108","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/checkbox","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13d196bd1142da4baea03ae23187f8b610b3c8b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.fec7b42ca.0.tgz","fileCount":43,"integrity":"sha512-djlIuKbmlXe1jQCLoPJbDmzZsaCXzhY2kYjlGmm2oSm76B4Xxv+pKDf20ECH7uUshvMKcYQeji9pzVuLY99MIA==","signatures":[{"sig":"MEUCIBwTp+lvapfcl4FY0K4rlfuQRtIP81xlfTCCRP9Uk3UnAiEAp3NyHphA8S9ZkucNmulhgJ5o7qDXJ800L9lOilq4JGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0QCRA9TVsSAnZWagAAfpAP/iEaP6Jl0RiGQTHBp5h9\nG3czcG6CvbV+NJC5dp6qwUboff74CFYkTdPPfRpEHkf6/C4wR7yNgtut2vwj\nKDZ/1d1X4ITUhAgCLMtU0ZcSBbG6E8fB/quhrMZvsfveA0Qh0MgzUjTTbH70\nJVWrdJiDUP/Piaw+/ajar4pCLhTCn2hqQ5T2WbFguCRwa1w0vSYWR6hs3AUx\nkm6Lg5FL4GAImjdha3EFPvDqiyAlE8Di8ZhVhiQsumDSBVG5hI2ZM1RVjfdf\n2RRdnLSlPU25Pr5xWpuq4x5RC3nXHkNgGFcmLG5Pus/bdOLknFAXcbEoTztV\nAcHstDs99qbMUEE5V4t8yxoKOaLylYeFI2bWqTUeUP9C6CZ2tCnn7nXrASjF\n78sOaCYDccFetdpYMcESiT55/pX4ZBg0rU+K3RLnbW/KJ04xS76qa/yrAixZ\nacNdnmMcfJwiDX/1tGNp5v6C0nb+GzGdR4WahOzIF2P9jsBnsBuzEWf2nSSV\nPIcM7Yqv/r0+JYSkWZB/3wuZIpQPjn/gPjnuk5LerdQqpGLDBbLUu9rhXwFb\nY8JoUiKtSs49xBCKM+RLtAFZnV6361SQK0SJwlAT4Cla107CYgOUgK2XU25y\n7qSAAVqm7ktI1eNpmJfIvUpDN2U5BJPW9q28mziKragk6gqu6bLcPPTew6R1\n6GOe\r\n=UuaQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/touch-target":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.fec7b42ca.0_1611861263460_0.701278574596363","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/checkbox","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c43903fed3cd9cf088c45ecdc041937e02cec733","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.8e66dbfee.0.tgz","fileCount":43,"integrity":"sha512-XmY4sEZBjjHlb3auh6Ztke5zeaDSKu3rHgFjMUTj4FPZtjcmPbeiPUgB80SKp/1Fv2ebVl3a66PRdKKWvMgAVA==","signatures":[{"sig":"MEUCIQC7p0Xjgu7lxdexTVhD/PcK0fLC2YA/QQRf/+fmssODrQIgYq3uPgwu+SEHbFYRUTil2kZaL14uVowtmy2o6jOtx5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIytCRA9TVsSAnZWagAA0nIP/j++E62QBjIEA1oFl1V4\nOwpxmbJgSJ1Lhxl1Ao8pwUV68QF90qCz/KD3pkwmA6j6lx14HhUfKRdeXZkW\nxMp+aNjXFEJgbgo7S9L5/pFr4owbj+rFIFa9Nql8VFuuIL5teUP+ad8TOImK\n+b09VGUSG6zKNwuHViBtfBpKToZT2eRe/HXvaol+tCOtRW+YeafEmKcnS8El\ncEMlvNoUMMd79+hU8ZukhD0aCEkFnOgdqxKAvuqtFgqCz/ghEPiCc0WRV4L3\n0+jji1hfo6YUpkPYotI9X1TLSVi66Gv7hu/W9YKSDn6l27F1bMEZTsUMBiWN\nX2cW+YcyJagFu+YfzzGkmw9gTPMKHPy18ljZq2+GSmDn91qGLiq800oh6O0Y\n0aY+pCJFPOXJCsukNNIO0hji16MHmRUj2g2IT5Q3ZJTKNHZUogpS8ub08XnA\nCBrgIC2epzL0SFtnDI0vPWnDsORdFNJCdEwSrxmVNElEaB5vyvsK8kWeMuc1\nuyLrYuerr3ln47XAiRLmjHzqf2OA0540GBTqqR1jnKvQ8U0wQLoPY8Xi00wM\n6A62XcRKvhHfJZtkTI0F84dV33NAzK0l35Pa4zVgINSXF6Dxfjdy4bcXkgaX\n0DMZV+/cVs5UO4+vUjdr3fzxOz1Oyfe0euwK1kNsK7IVkjqhc5L8zS8HQC+W\nzagP\r\n=sV32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/touch-target":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.8e66dbfee.0_1612221612910_0.7645156765163428","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/checkbox","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.637d15da6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"446e11b19f234c633d3be22ae914740386f1e669","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.637d15da6.0.tgz","fileCount":43,"integrity":"sha512-+YYYb9ZuSHgnqaE1OJZcn0DVHATvlhLnG7jsPd3Z6UplQuGzVcWm7aLTSMxo6mjwPJKCFy7e38uu2JrsujJXtw==","signatures":[{"sig":"MEYCIQDScNuK5Jby6p7kDMJNd7hyxYxmFAgPe8wmsmFyIwkjvgIhANpvSomHhC77rtTHStnua/brcdHqsv1X1ltnJrAxonqL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6eCRA9TVsSAnZWagAAlEMP/30CcrQmYqARtsw184Iy\n/2Y6Fwg1i30RrPxxhc1cQzExnrtQr5NpS9g4Am3Wy9UJv4Cq0kctqYT/fLLF\nzxuBECJF9VQMs5rq8M4ujLuceIjFa1FSW8riay5v0pol0Krf8KCp492Bf5ai\n4/uqTj2YPYVKkuyHLa2+0Goeq6NThJ/i67ZXlx9ZE7LSqplVCF2c9hihRcJ5\nu2Klk/EeDJLRMPDyjaeXQL+nrRQD38QLt5+d4exi3yENOA6xAocsCqOG0OQI\nHMdgx7UiVKm7NEeDZX7CJhCquXapH2yMgMWcNY4+3qYwy/a09Tj7cqQxuHwp\nY68Z8zt5PRix3YdQVZh2a9ESotWUK3jEdvXm5Ms9RKyCUJYliy2C1mAo4RUH\nPuAJzwxjNs63jB6iS5B+hlTiK1dNZ2CM73AiXsSgcpAcNneAtQRBo0+CKnMU\nsFnR7O5b1ugFCNhAdEOzDfm8kBFK0E6KrEGB4yOetSbwqh/bwHzRZML0DHyJ\nuDUd6TE+TkeADDrJfhHpeFHqbFbdS+nmTPSIxvcfLzKVHEezl+EwaGuz2Iue\npMpXXoCzRSW5BH63hFwa422fGQLEvOEGClYopsDvAC98s0mQdr68bPPjYmGw\n6BAjnvcMk1cX1RdNXFuMXpBMoI5a6dRRnKH8+LVcKqX0aWdMQ/2YnPqtZ63w\nWFpj\r\n=hiYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/touch-target":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.637d15da6.0_1612291741863_0.8393555062028815","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/checkbox","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.fb793939e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6b860c1e304c38033cb43e64761588877d5aef7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.fb793939e.0.tgz","fileCount":43,"integrity":"sha512-uqBP9o88nWkIuql/ABtxWMO1FKy7Augi9uEMv+1oQSteuTZY2zvzA9Ri3DIK4NJzrlzRNNqt9uZym2GoS+Dxzg==","signatures":[{"sig":"MEQCIQD+6F5EmTJpmx9JInvF6FjTgGp7LA++aSyLLJAFqUzfDgIfZ2tNc+V152apqv38UHXtbMgQxdOIlZpNgkboJ+/eQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeN+CRA9TVsSAnZWagAA6VoQAI/Eue9XS55CNsDVLpQ7\nU/Gy5CxQwiJfCBMlmvnexjbqEYTV/jz5obdLp2n/VmTyGt62X2L1iJteJBbB\nDGrmP1eh/cGEUgWGP2nIYSVF0DFDHP/+2Ycxq6soIq2dn0oWOi3q48gaxteO\nlYiA9/qK973ForGCubCM4FEPaQuQcCAJ2efofGAw5nCVqdwEBND5vWATIMjg\nNSri8LOi1M00YD2gPI/DWrDmamh+XIxnUE0mqUdpNFG//xLRdOWn7yJAE4zq\nvfyAmY90yOHhRXp6gZUGSCkRf45iFBf5hUFEQWOJU3eswt0fbAC5sYwphC5D\nDkeJbZ1ZRSNXkSxsAlsoLG6IGcq/RP5oeRxuQ/oJhNahMf795VS/6Ct2491l\nZtmxwBqcO1IOrTFUgHltS8/OV9Ek+0p4nllZCuoTYVGOKQZcWsPGqNA8NTGs\nsL06rfs489OmRAH30aQP2ZCqd5g9PepaZ4THM0IZcAOUWxkx8Cnxoprx3CRu\nS/YMWjQhsh2DAyIoe8V3uWE2D01ceh1Sk+K2/SweGr+YCUi7KYHBe7cY5go7\nlsXNIXpvsvo53u3IcIl7JkfLl+bYnLovP7FMMN4yV6JXVgi59wCr2FOwluXC\nhS1yo1RXSIaJEv30xn3HOKkjs0fXxFuVC7LgKekUnxRQYPTCTLrHBH2PgUH4\nGBXA\r\n=TZOO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/touch-target":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.fb793939e.0_1612309373685_0.7653594055455337","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/checkbox","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec492933dbc115e7297206870b073905e79c305f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.15a4d40dd.0.tgz","fileCount":43,"integrity":"sha512-2UwZFbPnaGGQcefTYaKhuHdQ20o9MIL0t/qzaNxrtUhHNk37HBVlJoRWc15CSJIZRBh3SkFA0BVmLykP5Xt5MQ==","signatures":[{"sig":"MEQCIB0mhTfylsneOsPvVV0uefueBZ2Pvr+2nJT3MEtPXAqzAiADzmSpdDr3ABiUJacRVh/8Bd9WbYjACJdFrWd1c3DjSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgfsCRA9TVsSAnZWagAAnz8P/jOj6uh7nI/3Jxf0bj4u\nDDEPzBnf1Hn5FlVNdfLmnoI+olHI69Wzcb5AOvqx8J9iMZr/kubxCF17nJdI\ng3ymg3v8MI2wkD0/ReR9NRDJFc++z5uXkeP2wby43wXkCrETF5V8nBXao0a9\nO0tvKQhPkur96KAg+k0y38bvswliN9A/NAefYkK6CgxfOwGytLjA3B7Omeve\njLU61wvMs2HsxIzo3B3npshc8zvxpdwTfDNkrwuoE0riR4mOiv6cd7Ulygrb\nJQk5G4HmMwlt0QDO+PxRQufE6JbKuqE7sbaHHraJliQmi/so0NMe413URPY4\nEn5e4YMSD3JCtaGAJwLBZ821eDIrF/4wOoheLEN7bjiFdk2qPzYfEea1AdRd\nj9P78KbNY3Rg2kZp8bXX7JiPbOSAqHb9ySZ0cpcQ+qrBJ9ZPeuwlsAiGSAlW\nFxRDZ0zEJqDuDHIHrguty+Qr2jrCWDrlH59bkNYzC4eaTZnQFTXaYJUPMXQq\nJavYPjaDqqZs7kPTir1WX57SJJeW1/pqx1J5FUBPYf51xDA7nRd9T/bXknTw\nV9cc4YXEz1XHDYKFEO4BI31bbMZx//h7VLSur9K/nR7498DToNMdbsmdVET1\nefxWF+v0UXdeW9gx+9ZuDH4673z5fDbq1tVYjfpvZM0yH/Jrx73XJy9fJvUd\nToyV\r\n=QqPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/touch-target":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.15a4d40dd.0_1612318699759_0.6772599247913593","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/checkbox","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40031b1dd4bfa88f7b2895dec2b69acf6c4250fb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.7a003acf0.0.tgz","fileCount":43,"integrity":"sha512-PiAzAp00ZW48oWWq8dKFCpXgT4mFpuZlC5yZpYablWShA63RWag5iB48sKXwyPXmuSgIt4uKDTZdE68hfVifaQ==","signatures":[{"sig":"MEUCIQC+N/0+cZeIATWXpv5MaxgjO8Sv9R15BEfb2giBSJJCcQIgODzi3Mo8lyyS4e9H0/4vASpKUC4kEMboj1Z8TGudxt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10JCRA9TVsSAnZWagAAaMUQAI99x3aUEUbhiUmT61/b\nBO46nAnWh1loKsdVVAO2eNzDIMW7jeFyHFMgct6hE8dwQpykzmgKv0vHIapx\nWt01THE3tzrlAFV23/S3wfrr7ahSVjT+eZMJInp7lh4H5c7Xb/BlOam8GihK\nJ2/s54W9aq5SqQwqqjkEC1AWYsgNQjg7K0ysBfPdbPBhftY6dR4jQDmbByTU\nf3OH55BZCMCdTJiCzzzI+hvXDZbv7GGZBsX/xU25WwNvUnG3cUGR/05Zr/vY\nt9mKWk4TI9IGem8WnhEcnCvhX7tMMAOkT2FO6UdpiJp856Iral3KrV20ovnA\nSDDH3Of0k9OunIcwNAnrERYigkYJ77AhVXmLXwLPuPK+2rh+GSzmQxSPakZV\nDg8CliNDXArZJd1+7/xYnUrAZrsmCQm5BBS++LQ6VT50rnS1P4Snyvc0jhDg\nArgozQfU4TV6SmOl3lkqWRIsDI4gCvdilrIbXrIRqeYPx6S057xuD+7vezHU\n7UQLkRYdKJ2WCz2kcPb4KBv0Bo6bJF0t8ZEH64IQMSiqzxFMv8Xpl/jT3oxz\n2PrMMx5kBYY6x2mB0FPQXb6ORVYCQQ0EaIkhXEMa6AYOuWt5cddQgJK78IOU\nOTFHDTADWzY+Sh2Mb8EuhvwdYopUvMqzuWBaoBP8hKnEOwSmutOg+RuD71gG\npfmb\r\n=ye2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/touch-target":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.7a003acf0.0_1612406025284_0.7365494172783171","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/checkbox","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.05f249666.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c5b5a01c3f27c4394c26433a631a1efbfc3ca0c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.05f249666.0.tgz","fileCount":43,"integrity":"sha512-dooX3fuiWG6o0L8gbt6cKqTYPgzkecGtaYOVpMWhygbzjjBQnJdbo6XVGXV3NuL3vIWRzgE8LrDFFIPv+6SmIA==","signatures":[{"sig":"MEUCIQDktcugR53EcrLjKQcadSqgZnvgY8JxRqrkkJF4ZStuCgIgZ+KrBTyJg2wDjXtCRUeW/Pvh0fxI7NNQNBoGwzJ0sKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPHCRA9TVsSAnZWagAANikP/AjTN4+IReWFpkonqOqo\nHhY9Az3UAjK0zGfoogFRBRxGEoipN+9ShJRerxsHwbJ5T8PUhLUzVVn3gU19\nGWuLk22RjhxiqDA80U0/Fm1WxA/095lU96gJibjCQ/+C5Ms0DWNFolxENQZj\ncuG5+z7oY/1Dqun0VCNsiwjH3C3nRnV4LeupihwWoKUzCsNMhgkkqJrL8Rcq\nfnOYK4xfo4mLjhkhwGOo5rtIz/dR65F8ntJc0zStTX8RiqhntDtPWA1pSGhY\nCSGhS70h4+CXET6d+NcBSUeYqhb+dhH32cfy1q0nA8/KiVnDHM1a7WJTu/bn\n+FkGZ5q+00+0SjuceRB3CHL2QzlfDvwEx93ui4GLWPG4tdgRg30C4uERVKn+\na0cv4KWXnz0Z1tn5H124gD5F/D5QVf+evPte9H++FLuPb46bLfHr45FKoKQo\neAPdoDRVTPdbyEZj2028PxKIjVgwv+P0zNx/6Ioa4+wrstW8+xsAmO8ywJNU\nyglddLEfk1gDKo6M3LhVg0oyD9eJmjT4ArIHb54mjbMMDqozE8/eqoRxTOqW\ndcI85zBDP0wL+pgtfc5jZyi5iLkb+2HluPjTqtb/W1rj5PS2Tkkg08GKkiWP\nePRxnoINziMbWF/oTbHAOWtX5X7cZg3BXXIX0/BqkRdxcD3nwH+D5fu0OUt+\nI+jx\r\n=Xhsj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/touch-target":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.05f249666.0_1612460998630_0.19298436547662812","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/checkbox","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e833ecd1f4b1a1a3f34a85dc8485d42296647d2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.1a3a39629.0.tgz","fileCount":43,"integrity":"sha512-ve5N2zdeOSeIpZ5uJ9Qu141sqOFw+hEYojTEIWFCD9tMyPHVdXRWh1NOQQLm3zWvlpzSlRhFeI+0X4iXInUsSg==","signatures":[{"sig":"MEUCIQCv6qhtxrmb5mgsaQzHfyBVTJhJIF70Zxpnv3eWf6ETAwIgZRZWfbtVlJQ3yCMKJAttl0iy7FJHnowGR42UOWfu9lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEAtCRA9TVsSAnZWagAAM6gP/AxWljsJ6lcU3cEkftNg\ni8DEB3sQbInKKSSTse29wmlWIiZFIqL5NxNF4VkYTlXoq1/xzdkEqlwPRQY4\no1ypUSy8vYmXTLEircyykE/FcIzGnoL57IPABcRL8397u0+85IgjxYyaIMia\n/Qjg/4vC+VItcf8MQHATYoHsp/nQeiBwxC16y0vS5iExC7A91LQg8oB/fqYC\nY3tnTzUxIsthSGMgQzK/Zb9UPfHuuY7B1cCA0mz42cE5Nagcshq464EbSdlG\nLahYxjjJt58PO4hGOQMWjE2NYXo6h2Nmhy+/gCaTGrSDDYb7rxzbs9vcLJDx\nc+R9k1gJLhTU7Z+pT1+HXk6LWBxaim0bCjyWlhu7K3pZzLDbytz3H8BQ8Rzu\n01I7xb+5rOV6P4Z2h7J7C8HEydlS0Pqe55Yu1hWgeK2zQwMDd6RJCSU/gRYt\nqMwftAmR8pdsCT6/jLGmrA+YnRHzLbbKWH3T2anYYtbUKQy14pPeyeaslN3D\n/AleBQHRFkSUs1fz1vtdn+eEDPBRZhBx2CtMbjqTNa5cpEOgPZfeBCn6+5Cd\nRQP0GzCwMZW3wL9yiFzRg7keDDQLV6rOtkn7Qa0tGMs8iQHp/dVmmtRZoVgl\nVrienfFm98V2tN+1FtKFyTz7F26gnL2cI79eI527jXx55p4VRZnzWeHJoZAk\ni6A8\r\n=IMGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/touch-target":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.1a3a39629.0_1612464172468_0.03152028989897859","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/checkbox","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f6a8f5e4a2f4e402d47b3c9c8e87c51d4805f63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":43,"integrity":"sha512-/QlqPNjxKfTIFlrKYPduWmQ14fSxbzsXwOhFt1yYHLaRXkVG/jUYxUihErPvvTDWqUXl3rv+pI4OGh2P6e+RgA==","signatures":[{"sig":"MEUCIHtefaw35Wn8cN4ETwCpdpTYlYgmmsNmCwEuUbyvT9vlAiEA9OsXeoR92H8wxQRvgpPfnueQdDZ6I9YtQmz+fPPgEcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHZ1CRA9TVsSAnZWagAAqgEP/1wN46AuCIqOZacm+RvJ\nZSGnuL2KIDH4+fPuhJdatrqpd34rWvy7YlOX3x/wcPW6GA/dXYwJ8lUJHtRh\nOnjSF3szaCIQ+2+RVV4xQju8ixV+atupGqWGQeJp3aquJiuHW3eUpcQ8UKvg\niMr+FGomiEiXWai+aYiDbqloUNYMIf5Qb9/zxDK/zFveIcfZTiPzfatFG5ni\nk6jQghjv3kExXRxXp2U4WbIPp9a05JwAoGHbgTYK8q/9m54eSjbAAzOdJD2w\nqmmF58qPGvVEUbDp7+uDFqOWERBbdjt1NyNgUBkL1wu5My044evsjo+1aQMX\nEgonMakw7BG8wQWrgfOBUjAvT1psXLLwGmpB9QjB8dkiLGYJ4yOFxMMDMCKg\nLbHFR67X8cHVObUiwlKzENOTqFz2OEf6YjWBp1rSZo7d1CouM/AQmh+edh98\nnaAXD5SlyG7yS4lJd2tLrd+ps7PXQO0QM/9h1pD3ndonghREYB5oinCq1pGI\nZpgI1YTEUPDP0hmeB22lN46ZcQEmDpBBKwhg2yBH2cQL/hxjNGCKu9LsHqr5\nzS7qP7gGYXS7mPvyFgyCtcl7B5twvV0nRifG/+QtUxWeSIWBMgZnWcQBBHDj\nh/QXso+24zEv37KW3QD3GF2w8wXiorP1xH6lmA7IWtwPGdvFapYuXXAhhwKn\n3GwB\r\n=S+nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/touch-target":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.8b1cdb1be.0_1612478068548_0.4350336924924061","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/checkbox","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d44ae59f7f3ab2c1733ff4d8810900422274c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.8271f00f7.0.tgz","fileCount":43,"integrity":"sha512-YPlRQh9HltRI5r9vd4Hp4hUWcDTfzdEi+pqereQAvHm/vlbIODy9cMTDiABB9KSYyUgL+rYGd8IROGykdYEPFg==","signatures":[{"sig":"MEQCIBFlIQmZbjxJ38IAMEwVTNyerXLURKQhnluPS+JYsx7zAiBV8xgKMtdZEehamxcv2+oUGUe4OL6/wq1gFuHdHtCUMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHyJCRA9TVsSAnZWagAA0kQP/12UJ+Oo9i10FeAuGfRa\nBRfc29Idx912mFrENgObjpSVJx4iE4YUUxGEW4mA53G4smn2C5I/dbzmBq28\nttKEijqDCiPvyWPYZGros4vK2SfoNhu4F3p8iba2x3O458gM2nXXUkIg2gLw\nBlelV+qXQgTLdLT2b4QMMuMmVl9YP0XW6yEa2q+O4uFChZhFhJ6cnMJirWd7\n/ZwIzN+Y9UdgzUA9BjFhjVis5JuUBDbNvysZeBTaEZuxH4agyy6x1vtaxVR6\nDxxv1lsujMgkyOqt2dt+sv3X6XFBpyaeIKLahDXAm1T5VR9o7AJvk4ne1Y1W\nbd8IgOYbWozPySt+Rbg029R9yWVuLKK7BrqHIYAQAvxNmUXKMOad+v7bJXNu\nESWZw4/J+DvLiT3hVFqyCO2XDhVnU39aTtj9eNYj+nl0W0sZWXiO+HQw4k8f\n48zzuUYkYpeTQI9SJDBJ0AtNlmKrDnxa/J7O9dXHVOzj873rQNHcGI0SRiSR\n9WsECrkHT34E+f9u2i+OINDGLWzWS7qkbQ7nvIQHEDwzI85gzE/HeZ/iUlKd\ne2uMqJeoViGiiPFXZu6WV139lvVN30hZs5kdjs8ETEw+XytXgsNkdd4NbCJF\nyoE7h9oXm0cxQ/ZMhm64IDZEVq1CQmCloqaspvIksVXLvwu3xmaPN/jg7g8v\nzAl/\r\n=eILu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/touch-target":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.8271f00f7.0_1612479624886_0.15289876048136386","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/checkbox","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0-canary.533092a90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"236902c8c09c27081aa10b0b896089e95a07e8fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0-canary.533092a90.0.tgz","fileCount":43,"integrity":"sha512-//pNNXDYyZX+4/bpVHxX2S9DG4AESx0NjYMj3iCYoPI7NGqFnC3+iWklNVZ94UCQ+cFeVjQM4HaGFTy9Cry7LA==","signatures":[{"sig":"MEUCIFSNjUqcWGj5lF/u7YM3a8quq1KIIwmI6NBEhyoBz74xAiEA/R+kIL05rGOW1Hi3COCgNrCOi369pd23p9y1niM7wDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+aCRA9TVsSAnZWagAAtvgP/jhLcuCuZZloxiE9C9Qe\n2qRbIhu7QnLqVWl5XZ/kHWCbgwXNU2pBakLY5h8yYxH1NPIBmF9shoPVIJF7\nygfUGBoVa5V5UaMnoV1sRxL2VMQZnIpiSZNAQevEspcQQiqcdFrC9jOU4BC2\nfI8+s9ana6dQ+hLlFyRebB3Ic6YkyCkD6NG6CIaaag8ZMrjkWbyIC4IPBVi6\n4q6IRz21aJFQDXjbnxdLIDvglDBjwn5ZoYFe9bp2U1fR+ykZ2+bluwA4Knpu\nY4bW3lgBmGIfWmSr6f6+t+rZJC+RdxXSZOiYfkVHFiRD6uk9+QVts1HDCUY3\nIi/Fd/NofonnBBAWNQmjkNWYdZJhxvXA95NU8mt+YMhopX0NJO3upaXfP84o\nPvs5ut8wAt9DQGBoOowuOgkiRQRZ7cPKDO+5f6OuLJX1h9o+VBRtEiQY7sP0\nC0PESMsLPZuj14crjkj1SRST2docSRls0//8bAFLY9owRuOcNhuejcunxCm+\n/EtsD7XKK1drBfy84qnz3VOGFWkn5NStPCh22MhKnpU2W5S72vF3XyKFa6HK\nsO3atXJ1qh1r628ahQLZKAKn3oRYzJvyJ9iGlNuE44NkikxjzhisZR0yd6mA\neHTCJnu17rzrUyPMJ2bDKsezsys6I87ce/wA7uQ7K00veIYE+SUf08i52C+u\nOm+n\r\n=yTo9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/touch-target":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0-canary.533092a90.0_1612496794371_0.5224626028361887","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/checkbox","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9f16c9625e2a631033d1837ab5f6e96e2901f13","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.633a9fc7a.0.tgz","fileCount":43,"integrity":"sha512-AkGicAWFVVeWK+mgkcoz6uBOu07PvLVGHP1M08h9QBG6ZR1DvDvgtwmKdG7uIsJEw5eraqa0O/5sgYy+zb3pYw==","signatures":[{"sig":"MEUCIAorrf2eKHovj1i4TFSVoFF2LGTelMvBuCR02IR69i6TAiEA2bYpgwKI+xuDJ5BMV2PilSRbdcUXGHiT+v31lKDWEUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+BCRA9TVsSAnZWagAA+vIP/jKk2ssOyLbtDO+lmZbf\nZP9Fr3dQqPJkshfY34sZVP6KHgUfczZMvHacREnVCHaLolVcbaxK/DjsCLv/\nAKmw4v5iLziRKLfO0aksggllLDSnc3Vr5Nso1htYTFlRVa8CDqUKV5v1A8Wf\nB3oitf9c5WDyTCUxnF/tcgY0mx6m8xjG2i25dU5vvgXqKEwLpUgJV1S0bDm6\nxmWAaopJQbI/LLEVA/f4F1CMmoIJ6gx2XC548dvEnH9CMSvfEdCfnmUJXxRj\n2ZaHPzIg1QQ/lfHFtngPf232oE5hao07qWdTrq8v/xYSAcmpv1KIqjX95iKf\noWiPCSfu7HIG386dmVDn3PGvB7OeiEkwlHQPkqttlgT8KCMTqFJqvOymG5R9\nECYS61f2R6rykv0IZn5h3sVc2F1f4HwxuxoaKguJW/75IVrcARpjA/jNNo1Y\nvbZxBPBpXpLKz45XUChqI2eM8Az02adCwqyRgCoFlD6ZAjU1Wzvc2a5onXgN\nyyueryFAC22Y5X9YuMyVRmL/Toeg39sSs//U0O4HftmGCwI3OxI3CSB1JYwE\ne1Bpnipcwl7OFK/VncuyHYiCUQ0faEsBAm7vwLr72FaBcNjcI0lGJSYI2E0C\n3VtlZmIeKLyrkbbYWZUmxp3wBmRPdvIWwLO+lgxGJKks6sGnMFX62lZwfn2v\nY/Zs\r\n=E0TV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/touch-target":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.633a9fc7a.0_1612541825102_0.44701397214053196","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/checkbox","version":"10.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@10.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09fa644efa7c8ff16e74f0efa4441e168f552274","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-10.0.0.tgz","fileCount":42,"integrity":"sha512-aZc8KLo+yT15tnEpJWBvqJhUFEVqAKs56DGC8PaKfwfJJMVS0D4Hek61cpl4Jthv6j5eduvpiZ/2DRE8D530Hg==","signatures":[{"sig":"MEQCIDGIiqOXGVXa/fDssCjJtesaIwrti3GcpvxiG2tkcV9AAiAMGqVhLLSw64LxtBpsrdBsBEaNUam4KEguJhNTVhySpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/bCRA9TVsSAnZWagAAwK8P/0P/dV/oAItFSeyPJ9jw\nZVihPSDaZ91WLoEYORVZ1sXi43LQ/8QA0vUtwKudZs1WQlwYubKfY+MIH+dY\noEY3PTtnlsNB3hccxhknkmMMvWvaadkZmy2aDQMW+E6aC6PgFrZb9HsoZpl+\nb1n6cTfRBXDUaPynBLjCYT3rBRyTBbMU/dVHtkvPIjtQ8Z5oCvdxFldE+0P1\nPBryCv1KvlddxKCBvj2Wnb+9iH4faRbsB2r/a4zlLpehNTfalG3YunAzEmjY\n6hWwcxK4ZqQl64QoBT0DBTzJ+CIb/5B3D/0d/5SxKdtDvLBpZmitmBNRubls\nVQvNoo+TDvO6PhF+PkTvxdVHeAFXUsL9nH4PUrvkltqWB86eZtKaqZZLoHi1\nqU9tBg4ynjXV1nxQdJ8M02u6vYwpAlj9GakFvD9pVAHjB+SkupC6qVB9aqVr\nqQdZHcYddZ5GTCCl6rifzPOJZIsBIE5yi3SUrTXbrcaXYw/RLb5y8JzDL4kv\nVwy+pbcQ8b/RSKlHoRRGKee9vIrRE2j6pQd0wNnOVEezMUV/e8Zp+Qd5rpgV\nB1uwqqL4TAasWmBsB3Eyk5QQVlqvY8y0MoCW98zbHBV2BOMlO4Y370/gL7A7\nXpAktVA2y1BZEonJ5arGGuEMNSUhGVUgh0P4WgThDrLpqMmOInA9Th12hx1K\n/wA+\r\n=/I3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/density":"^10.0.0","@material/animation":"^10.0.0","@material/touch-target":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_10.0.0_1612541915123_0.8159820956976724","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/checkbox","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.b5227247d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cea04fc036916f3c8226d266ca75a88df7bb0b29","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.b5227247d.0.tgz","fileCount":43,"integrity":"sha512-2Ep+use89d49zWb+xLtS8bXF6jKvXIn2GJyBWWEwAfBx3K50NobsAXS6DztZ5E5gEHtXaW9XLFIJo52EFEIAxQ==","signatures":[{"sig":"MEUCIHHsZisfWyfH6i/iqjHS1n1iEGiNDkrdv8nPmoz5BNubAiEA7a76gNY35/0Fleb5mwUfOBBwmC1oDxVrSk34yDvwOB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNdCRA9TVsSAnZWagAAKS4P/iQaGA51Kb1rk617ZfC3\nQjIq1DE6eVEE4uauTGDZuXY2345iSpYkjLylgF/Vv/MdKLs8vhZXvK8ccAex\nc1XZAehI6BN5HQTorD+gLnSAkWQ3FD4xXe3AyUR/SRK69ehhPfRedl1yvq+4\nL5cFN9U+tJXNEMR/H0Tfqy4KGLB47hP8pzwAK3OuwutdXBB9k4ic6eALxrRx\nJha+QPN7AKiXyLhhyU/eOYcQkrDZf3O0lOeGE/GjwPCiwQe1bJKXAnGw6voM\nIutQ5J0eM/bpgcSsylCojtfx9ErgdHY9CQw2tq2xka7Aou7Zva7cMbK/kor6\naXCq9vB0P3zAeDkfmer+VMV2F5WU6koNdgJOZXiuGgSe2k/JJXf6FiRxeAZi\nz5nGq4PFzfST3o/EigKiFuHpfMurmvnBT0jKmNkMHR9ydmnR5BK7Qr9hlr1j\n38plQF3Sn5zlsd7zvY6b2pXkNamkbTxRl5wb9eg+Q5oZvQ6pS1Atr+3TQAPO\nxdhQpY9hBdCSrgcfd2ogFCDtKB/519AGfqkO6Mw3QHier15gLvBbVkiyA08x\n+eAmWoOYQ3xAviAf0YqsPOTC7n5eSCNBvfP4wqGSveL/nwcRE7rqx4Y+p8wt\n61boyD5zSY7Cokr2b/d7Gjpv8oQYelL0qnuQWefHkPxKgMedZ4KJRh7UC69e\nERHI\r\n=Ppda\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/touch-target":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.b5227247d.0_1612546909101_0.3113395483139276","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/checkbox","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.95322b11e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e81231de620f9216ae96d720aee4da41f6c0be48","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.95322b11e.0.tgz","fileCount":43,"integrity":"sha512-VB3UGh+nq3MG+Wllso9qoMLny1XBdpeKDNXIA9DGShj1+UA4NQ54+V1PSQ3LKX3gXksXmKO9NSRWc3usjeaARg==","signatures":[{"sig":"MEQCIF+P0jg/A7eJbnP0FFV0o9dJJBNnUgF1SMWDvNQw1T68AiBe006Mwir6Ue+Jj3LuJeLA1R+giHlGo/oNe2HFp06Fcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVOCRA9TVsSAnZWagAAlIwQAIi5DAzv3knSFLNuOwQZ\n3G0f1Klzp2PYtTBp6t/jdRcoF7qIX5Vz2Bqod4v82cYsiaaB2PlSK6hgVKTt\nB3m6z3o17xMznOWCsGhMT2zciTrTN1VDMs5Pnv3qMOLwagKYLBGMJilJJo5Q\n9n39M81BHFDutVsnm1gibFQ3RUttaC2O1bTh4weGnPzzfOMNFgyXzE8BFakm\nyYGEZCpEGXJo+bpYfp5jekAsrh/F0pHIPoPnRay5zWhh5F6zMZlr0pqGLb9V\nKSxW3/X3EShBVS8vy4IBqIkA+fiTbbtjsbbqa51jteVk76p11gxolLe2PYA1\ngZH3KbWaBQ7D4QtYaM60l8H+zlZOET+ja2eSco9oWQ6vB90cHsWxVbhzWfLE\nIjHqw+hMBlhCG8n3gBvWOg0eTS8c0Dd74UeNBVzyX4mAafhZuVN+f/XPtzg1\nq1dIw6idQM+CmmssWv0y+8jghqNVvJIX/3N9KdR60C+jFu+HHAdQoN2oshO6\nNT9OQhBwya2N4wryHpVzJENEtAKmDF6X9O4XhMyE3/e3a+Uhj8sRFS9a/dzT\nM0rx0dke9sVtjVSfhLQjgfDAsq7lMteTTOuyTbAg9eu3j55RQvg6q3of7B2q\n1OagUcQ5p4IlpyrcH4nTJoV6PqcLA54fRDafZDPeBVpdyrH+Pok66t4/13ea\nf3Ir\r\n=He5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/touch-target":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.95322b11e.0_1612567885837_0.5816994539635971","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/checkbox","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4e9653121fb151c629cc28a0b8ea5724ceb36be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.1f318ff0f.0.tgz","fileCount":43,"integrity":"sha512-ZNzqe0/CGaANp6PmoAcZCwOnS7Sq1MYFPw4JfOyLogxSt99xZhJEHJFSzqGZZOgIp5iQf+x2U1KjpAHUxWm3ow==","signatures":[{"sig":"MEUCIEPmGHeqw/4ichVwGyUTrvHV0KO34Ts4uZCWHY8mWcImAiEAhWpFqwEEZnpZkO/1JMqegEniBUmbU+3qe7s+5jnBDAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0WCRA9TVsSAnZWagAA8K0QAKB3oQBjhsmyZjlodd9J\n24Ix/eWSomyGCog5iwanwA75LrZuDVKl9RHxJXS5FpkQsG+crwkOf2FiDOY1\n6RF6iisZ05Er9wtl1RuC7mpQJSIwB+fE2ZPlTUdMpTcCH8f73rbcXfsuD6r+\ncmDGndk8x9gpqPFWAogYkieV0E3b1SYtaCngo6olUqR3JEFhl+kQkwrjjQ+B\n7L4osxqD2hiGEBvAMISHUlqm/U+h7REpsOY31R5kduVmCDrNGCQQES55P0Fk\nZw1g0POeSu+om9ccckJWFZvlq5QLyVh8u7WYs+DK0XOMJweJ4/NdU1KiPiuE\n/9yX63PhsFcp1OPcabA4Zl5WoAdaMHm7vq0SwiaZIQsyWhukrxEtnvkNejuS\nCDTryqAsWcM3RatieeSxWvvhSWgxEwnsfqRr4DAVaQKnVWLhaWL6msQ9Iky6\nQLKz9edsFl77CnPwf6X+qsdBi5r9qIF/XoIi4Rmzss5UdDI9TLKJODx0rUZq\niJ/oNtih3xVTr+Uou5nIgGLO8Ucv1JrcRy/afdOWYKI1jv8HCdCrQIykzeKt\nBzCmjgOmIvUOW8dBsVVrm7/0VDB5Fcz1GmA0wmGnDbDZ2Ra002f08LuFxNvy\nCoRbDvk96VfyHFizcHoESZN3hm5sHTJxsKKbFgHndGa1N/IyB0MGQPKpLEpo\ntdKP\r\n=C/gR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/touch-target":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.1f318ff0f.0_1612569878079_0.0038629684373987505","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/checkbox","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990b3a921c3bea10271d588c49334944c5875b00","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":43,"integrity":"sha512-5rhaW7PtWtDt2N/40BRP0m7FbcWq3TciYtV2Pp9Lg8HkR+ZGd9gb3xB60p9lMLYt4vw0yyQ6gUlfsLsiwCt93Q==","signatures":[{"sig":"MEUCID3by9Sm60HfJrerAXtH0elPcbXkVCQRZx5Jy/hDX2ppAiEAzDgOJIPSxY1hIj9njpC27wl6ZeDktquzv6mcXtWGI4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVK8CRA9TVsSAnZWagAAdzMP/imvAOnkjOOUfZfHCfjs\nGUeyhImnv56NE6jwJIUDAHgQO8pJNLRhrZDP0uA7+bB844cfwQ2vG/cDsgyZ\nVtwY/cWdZDzlkV0aSqwfIbLKe2OEtSH3uthNEP96jkJVFq39dkuSW5JEgEfp\n9ffmwhq8Qk9VUblnwf3M+gyRbBITpcB+UxxrntfLhE2OjIl31F1pqgIh2fvK\nOou6YthFnXxV7MLcsurhxH1jM8zUkjLDIG8b124Jd/11hQYjEGDXAjCyQueG\nJpkTmuziEwS6eui/lVihsxpi65OfHWUOlMcCjI+UxRz2DZls6iUwPpjOe5Ga\n03+1YCQaFvKbkZOBtGPQjY2pdr7NcdNp4dwswfiAmO+RT5zHFNvHFzOS+R7J\nBRH4Ljex32tcBPoUl8Ogev/Ex+0JNDPCEwvc0PrrVkUOtU8AROn+B75Wj5OH\nerzZBKowzeOd4Yk/X/feRMfB0vmbddUG1aqRkVT5q0zQK2rYcXKCqYw7OLjW\nPm9sx9Kne0GXF4KYxU35wOoKDzyUX6FpIurvedhFDJNYTiWXJ5+IbJIpl9FT\njX1XPo+Pgn9HwKDq03jQ85S66qKPh31F1KY1RFz6V31mnS2ZyBr+J8BRiIW9\naDonWTyTDUmEI/YN6qKQ+PvP1XrwJK8ApoZvHK2EJjsuCV3JM5T3PMLa2oBM\nKWts\r\n=f/pV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/touch-target":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.ab12cf7a3.0_1612796603765_0.5176440271498635","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/checkbox","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"614275805d5dc4252136734cdbb5bad5421c6da5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.98db2c5ec.0.tgz","fileCount":43,"integrity":"sha512-Ww+ZAyxJoXtCu9hMvf4Ue8rHMwuBiF6cAlMfJ9mC/FEsUfOjb2GogU94qwHRFJqZyuHM28nCcPJjJilBborjuQ==","signatures":[{"sig":"MEUCIGNiQrjZRoYOlPf8Pb3vaUlTiUkCGr4kJjWuAOg8VR/aAiEA3wh7zzRgQ8nWTW5CXyq2k6F435CXBJQPPJYMefwM/tM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVnhCRA9TVsSAnZWagAAfgkP/iXffDBGRYK1S9S7uBXT\n9Hy+O4To5CA3mdeg4xzm30loYpCR+qVhNE0/JE3s1u91AqaTyRMLFiTuIE4y\nw3l8KnhJ5zbQ5w27tp4ty5DSzNjXuCj7LOm0a0Lprf2UsZC7aN7ZTcXwZj9p\n5jq40sRuMDM+EULZ28B13cH4b/1JjRgSTT6/c0HLATc++duseIH2PW3/yv7j\nhqSHMtqe8i5+OsG9HWCC1VKpPrX0KOgd7IXvDZwpyq6+rf+TypmevJOURF0X\n6tA3AHtM4SwF4oZkDjfbw4V9t+ooxk9M/qSseoNpiZ+so8++NDs6Nm1iKl7K\nMrgyQsbUxuezVyu8HczM/Sa9sm6NV+/CEwc3WDDgLz0e95kkqngyaDzF6zMU\nRGLZUu5OWczk8SSpGYLGthBUYYOLkIUSQjHA/KhSeEXSowQtGz8kpajIAYDb\n4rwDNmdfFmL9I+e758kcgauqbZrqn3jr72mDV06zHglfUfto3+LwsGakjkRC\n053TMxQdtwSboUSiDNd9FAQJgC10gxYR/ud6OEbrWZ0k5zK3mIteWtvT3puo\naiRQQhoimHF8xqqt0ietOb7W0bkBD7c/AjZmHqHYSpk9K8uwbFG2h8sJY++D\nsjgXCqERegStb+5uaZVMrLD4aUw18WXbEwWxA0VkKE5yVaJXt7yVl8Ir/E5f\nw+EF\r\n=EPwh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/touch-target":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.98db2c5ec.0_1612798433040_0.902408263242551","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/checkbox","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9c8c7e3dfcba85beb91e5813727f18053ba33ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":43,"integrity":"sha512-Atq5YzNr0GR7nUpYIt5Ekp9q1Ow0LBbZbDCMz/DwNrCR7kLshbgKye+uDPHlg4tYWxRE/6DOn+Mva43+6GrKjw==","signatures":[{"sig":"MEUCIQDMNjo9rmmxtQq1h6XKsk5hvvyH4oie8Y70b5krAZD12AIgU5jcwh7/+MMKnRizbh9YfyL/0CwR+yxMrk3R5skVlmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIJCRA9TVsSAnZWagAAQbwP/0NHAmQcI24Ub3MLn82T\nKFvY0MQh1AO35SlFQV4dYOcmMacusOVU06vOKRd9JsPlyA4I7t+yfc/isWnC\nNgQLVzFKNfuQatQ9448aM+ufVRy382SSYQJWNm4BXsFBmvk4AfxZOCdVlaj1\nXQ7X9sID2J/P33Fz8nG1yf5Kh1GEcS1gvXdVheZlXRjirkQDwtreJrmApJeW\n+sR3g4B7LuUYtyqgSU63wXF8x3iKHNTJ1h0k2TprAgliiiwB9FPydX2q4Yrw\nGMUjmArcip1y1mF2fX1jGJImdgHNwQhFyPlVQDsUlhqKiOwzJS0T90jnZHIf\nB0AFuYoK/tj81a7QjVJOUtAv+xT59AmMhFAea12dzrBnHjECy2HzZh9pLO5D\nWABciYENQW/9W688MR66a4QzWHvTyEPcAPcRiReqMRk16zcU1T0bpteZwVi/\neyMOBjk1MaXUOEbrNTShTNxlaep8x0x82/fBhZipo81hJUPheow0om/XfgPF\nxDiEcC1UvDuNUHkR1KaZ5ppdIGzO+c+qFp72OvqzFVA9DoFqjuxF3wD0C6sd\nCr91E4Lhd5nAJEOQcanOuyqWyatfBmhoN/lofjGn9UfVtz3EBvZVX9DnSKn6\nMTJuECtxaRr9aFe0UehVp/yVgYjizN8gOdF9nbopPol6GTxm326tKJ/cXBP8\nTudA\r\n=ejiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/touch-target":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.1f86b9f6d.0_1612804617170_0.40566070530166054","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/checkbox","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b79471ddf5c0a8d0912ecba923d132602c81a795","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":43,"integrity":"sha512-r2gtQQuuGlDaFiefMGqRg+lQ1gU4q6fVCELtlZOqm/YrvYkZu/rElK9/bzmlRHy7VjULIfwOF5WoMBR6cMs3cg==","signatures":[{"sig":"MEQCIFtbPhOTElKAAMMCXqvZIKhTEDIqLV6bihbYlLgVJ+3NAiBFflaYh1iKl6OOwx40vLBuTShIBJC5qmo94ZVxA0gfDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXw4CRA9TVsSAnZWagAAo/MP/RXIm2r1OXJVgEh/AnBA\ncEKXYUu5fJ9aj9X4E4lVUUxM7L95IcvPNpaBE1KlbnxMmR5ErO9SQ+1WyIGU\nDKwaRc/hTjGMjfK4kpHkoPGx+8sqZCeGxXfNJF86+Dcp2hoSu4cue1xs3SEN\nUjQEs46bjN/i3Au3KTJ4WYRq3zLXVifz98UIYYcCnsAD2XJXxpJH9F8WqpTj\nJFYhBGsPH+D++4PN4v06A5FZFOkBPYMUElCRGMx8FFpzloJiiXoCZxS+YW5S\nf3YhcCjcrMtgdy4BzrVmLHp2YOWzaFhgtGloQZDQzU8cGaM4L26aEgrFrfeG\n7/YoYe1DbOJVafStf4L80pBIOvDB/HXM3sWw+cR1DxL7uBmTrkSiHM9bZPob\nB12j+AGbzLNbjEd2L/lJg1P7XsBklF/evjP+qWXVZhatRwnbM/thIl/JdSxp\n24Ebu5IYk5G0LinnXhc/+BYfoJqDX2EppovWzQ8JVqLyDVkHn4PijLkcpypi\nUGDcCsf/iJWXuCjMlV74fYVX51XZy0t5Cci1VFhX2pYVuEU+ClZEf6tgGx0R\n8NOnM+L+LpCMGZSrGeD1QG0l/lL/egqLoOsbRjX9fg6zOB7GLmHsBZHVk9nX\nJ7fT8zHDKoOcyn0DT+lU7L8Y3ld/xerGK+mLpEN41tts29FHqrZBpLiJVHwh\n9GGe\r\n=9CaK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/touch-target":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.aac8f5d9a.0_1612807224209_0.6088407023577027","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/checkbox","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77e5545a55586a3a957553ea8f04b0307f0f0c8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.750e18fc7.0.tgz","fileCount":43,"integrity":"sha512-0rXha+cmY+UU2RBko6QlVLRAMXejttglg5nFRDDhWmjWepnjn8xgIqJR/b1sNNysuhO82jBfDpyXZRECiUgBaQ==","signatures":[{"sig":"MEQCICLwZMtw45g6fMGXpkWHR1ZSVYej7kq5U0kBD+JB7EOoAiBK49MQCMp8DSzWVv9svFHR8v5/IEvAxPROYWLzQ0wEeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/xCRA9TVsSAnZWagAA20EP/2Cr40feULaywVNHVS2X\n26xk0IudaKC3OKgk8yjsG8wReG3WjMdPyXyjDg/6qfhhtv0e7HPV2Au9yWWZ\n89zXF0Vqcj9Gyuav41N84VOhD6LJzmI6L8QGzZvGHfCrC7Bzkd6VBzoGJJm6\npaIctGsAACgga7sgikh7+pHrV/P9IFvMCd8e71c3Zpcc0RzfVqJG2+my1U7I\nNILFcI3AveGvBRUuWmE/Ym8PaHFedGCdwXUKaUL9ZMBgLHJdIyjQe6RDExkc\nwgyCJYJzmcbF3sUyB4M1qlmRVgDLfKZ6sVb9i/tSDp3kYa3cEDLWpjgbszCX\nxVFBZhU99ymqfcbpCfJLJiF0XRauVD4TNvfFlupXGQD3aGN8IPq8Vh0jUzQ1\n3AmeAsnAQWhH0OwZUszrdTwrrYvVe2EjLDrxSnG1x1HRWhlQ869IKrhnXeW8\ncvuHxFi68awpoQX5TJ0zwqzyKx7X1av31Q/QYoEZ55kHEL2RngyWyoYXGoY7\nUW6fXxP+6jstjCy/dNIyqQmqaC9Tz+Pha5g2pR4WLuO0EJgpW0fwWVR7Ir8P\ndAwtehDRsJoS7WmjQgik5rWsPd5t35Djw/s5Jo5PLtWIT41t9+q59e6QcDp9\nPsr/A7dGalHdP7ZxhWOCodfZjvJXSfyXsOULF9sjOW4bQJ8AV+1bG7fBuJWM\nXF2N\r\n=FuyE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/touch-target":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.750e18fc7.0_1612820464879_0.08260384182184088","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/checkbox","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837cef9456912eaf2ad23ee43964682d4d03e383","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.b62b1266d.0.tgz","fileCount":43,"integrity":"sha512-RUsoPYEC8rWsDAaWEC1qDjBI2WDV1cuCNaB5Ou7Eg5R9rXx85Q9zW++TLzGBO7eeHsuJ7znoTlKttRFwUGOkqw==","signatures":[{"sig":"MEUCIGO0l+8OCaLBetRFM1p6ujtx/rmpeZ0qjB2Q0VlujQVzAiEAjYwVVMLMSKrHQy0lP6VcCTQTFW+ePJTbgSxCFIpZFbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQYCRA9TVsSAnZWagAAA/kQAKJszw2TryHmuRgWPLXe\n/U1N0z11/6YFmARgGLhFQvsQ4v1mxpHWOtY5TvBcZScFQUNvrhZkZSiY9TvT\n2uFyIXQu02ycI30jnRdjdl23bcAwguxX3+Zj+Uc4jdiCyIuzPlaFP6KuCZXz\n9hglHr0XCxgpZBIQ91G3B689726lgA3LbFQpFFbcfmT0c4hhBOE9+DU2urJU\n/uv3vZbX5EjwLSomdJ5iDatvOYesbirgucVjrPtCY4cvKPQL3lP6PQgC2jhT\nrjpgBJSQxwzWiEfdbGndlxVJ66DxpibAwP6VgYHRrbvSzhemCj06PHg/s3z2\nP+eFgMhOwbaYkkO3nzoyXC5Xk/ytgT3PxDgcQJNxjOe+zflmg2mzkCc3MHjD\nADNOWb6xx1C53PE/4NOVVp78RZO8qoIWq32aZ9I5BRJHM3BCRPGhZ+Jskeo+\nmsFZcT69hNoAkNr6Fy5y5gV9O/QalkFSSLdcgPynBdMKLzICkNTyjsCp5RwD\nKw6ko63TFBOtFXRMo7wIn/0ADv2gSA8+EPvrMfiFDg3D82hrcOobfBWd9Okh\nHSVpTeMMcBBZ6LXqtsgunyAUNKQrn06DPFoWWBIBjLWmsIy1njExIg2Sn+gq\nTb5yH17mxKcRYw1kZc0BLqMU7aEvd+ZW13jIE1y8LdixiMQk+FDN6DDk1uwI\nFJjb\r\n=WLr8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/touch-target":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.b62b1266d.0_1612907543632_0.2904369949679231","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/checkbox","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8dc075686bb1463f3bcd901a09a0b116ad899df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.a6b3101fb.0.tgz","fileCount":43,"integrity":"sha512-LZonZDFYGXPQCGrIbrf3JjY6nk8ygHjQeWuBuASDdfV4RzddFnKk8PxuQodzN3nyHLLchPqX1gVoKeOkH2YN6g==","signatures":[{"sig":"MEYCIQDvZbUZkamrcIVdUUhoLc/xUW6wzhAaIEzJqqzTK/5JagIhAKGX6RoCNjNxe+9JTF8W/LrDaJ2Wn5UPgdFfEteG/Rcw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrpCRA9TVsSAnZWagAAn8wQAI+7QplDzZeUGXW+UnLA\nrH3hrM1IX5CKx0UhBzz8IxnyNgPC2Mpk6yXo8C/nRS8LpRTKb7teqDn25DV/\nHNStZzoAycTi4JUwj21a/LkwisB99W3h94BIfpHLneaiu49B2J4tK/REsFyq\nNmhYqDVJydZHCK2WKMOlHFHDvJU+gkbOXQKFZRVf1YTYf6L6/uIMOikK3QvT\njo2N46+rxNzRLg79jOL4FeuepR/y3k5N4x0vI9T757CMjqGesX82IVvO3bYK\njdGEAGkFgz1qaeNZv6KL9mXci9YWzIRpUttRqsix/0Or8VPGc7Ydnush44/o\nI7Vn8YwzM8grvc+0Foq04rdMaiCXM7+LmV8sRuNxGVKIxEGZah0zzxk9KN1P\niBdzRL3MpqJKAsX/ZJPq3TocgnGAP5Wyx74N4qXcmBIw6C50au6mule2zkQQ\nfg4zgEOmlPjrOR8hbltjdi9SaQI5kQ21H0f5OvT3a2tcV5jyevww1ZAS/aj4\nYk0+dKC6rKQh0iopwaBoBSp6xP3aXVj5m8atUiDZIgsXlWok8miq9GraSvq5\nhPDbu2L8bft/EIx8AeJEG8mKB+3QW+BXnNXeb78y6fb88dlTRjbquLocBGqx\n2pbbZgzCOtS78cWqlGbg7loq2fDH8lQ4vOa8kpFtpxeteITGHco9bWi5cJ65\nlk+M\r\n=Oy0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/touch-target":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.a6b3101fb.0_1613085416501_0.6550825950076489","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/checkbox","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.ed88df700.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3875a5dd895469153fc20bdc9f116263caeb797","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.ed88df700.0.tgz","fileCount":43,"integrity":"sha512-HOywYZhIDsYZKDsFSZZs36Z3+cWM5JTT6XDHvvKUmUTzreK7D2UcVY0x3lwWNaGjLS3knpFYFDru4wObcmkZRw==","signatures":[{"sig":"MEUCIGf526f73bQ3ipdA/wNaioYmaghAnvcoRgOAS3g1zN+mAiEAg08daPvnP7PT1UwisP+KYXiSTetYRXqitrv1ps2NiVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcaKCRA9TVsSAnZWagAA1c8QAJuY984r8Kt5LyZg5qn9\nqDVHTa+/UJBbS1QQHDw6onp0x9wHT+I1LoO3QnTGuoIaByfR+hpfUKWCwUAJ\nIP3FtSMrYFInK0BBbIDgKJMWIiZu6kkyEEJBSJ9qBn7ggnA5BvX9sEzoXY7J\n6utDTVbbwxl7ybQjx7oSdlEBkM7/M2BI8gvSAPm6+RHizZxzQis3PxoRzubS\nVZBynj4VwkOBq7utuXuNbGakAt0ju4rabKmlHt5dJMGvBJycop3fMSFIlWtQ\nFJvTjucZZS9dxFvJvdsQlsPUC1TuaTiPZl5vcz0lsJ/vXushC4es+oTkC4sd\nKdD668FxCB7NDnXD2r/ul67rcX1HvZt6JSrTvD+pTsOwPFh20n3YpH+yzjSB\nidqhmt2GrEFSNHBzec/ilITjkkEIIl4mnbUtVS30++XNt/YehAeCaWKvRf9I\nmEh3sP0yyS37AX5AHebydRO7+4WTq0mNh39vlPqYRtBC/gD61B1SKJdnfJfw\naWK0v/zDr6OjOIyDaBDL5NPmnjozSQO0vlfeZfr41N1sQC9leZ0EZKjaumFn\nHXgEy29NflgfEqXZPbMqb8I4RmDyj/DND2sPcgT+GNsrEZ5gFLsK83NL5vwq\n14qaygtfeT3chjqbv8tAeOBuydfFSonErBSlnl6Ynuo6eDQZX10qiWYqwEE9\nEERx\r\n=xUbO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/touch-target":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.ed88df700.0_1613088393672_0.8032622802415583","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/checkbox","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aef88e1eaeb5956f07ad9cb04a6893de89554cb6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.d30efe6b4.0.tgz","fileCount":43,"integrity":"sha512-y5Tg1CosAiNyX5115qAbS2qx/9TavQysAqFJhhN1Nc2emh4oCqvtTHe2eH+bgmCaoUAFUFpdvo6UxejjCB5sAw==","signatures":[{"sig":"MEUCIQDiGLFGIpbONxwt1tJbqgSGf1Sp9i6xYlNze7rsNKcMVgIgbSqPmlhyvt4ecrbCrppJyre0mhnef03UMwaeYD29ZDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJerkCRA9TVsSAnZWagAAR58P/0H1WrEcTCYIJMnK037V\n6gq3Gduq1S8q2VzBvJT1U/+HaNP2hexU1W184y3aUfysDpzKdyYAxznBS86e\noi0MqHpCAZLZNJsnET1Vgx+hav51ZRi2LjMl4HsaIUGXMQOFro5aaBbx4Dxa\nQVJu7s25r8av6TiSg2RyaexKhunx+wfHGMp415d8jPH7rSdrkivLiLYO2M6C\nGbxC1HuVcCQ0wxzXcbP9vODYhqOtR1pMsqbLt18VhNmydEj38Zd7rlwsJ94Y\nC+uoN63CwQu3Ya2m2g7u9IceVOjbSAoViz3osnbQQHGdvt5ESScTMvcQtoCC\npBmv2opkT3O+o8t4ldlnTaixed09txCsvFWjupzXXwYyJazBghw6ue7KiG83\nKMtDlTW6Pn+Fjgt3FO/1Ks5xWLMqdvfPG5HPe7ZRzBbtbJCGQiuRrb7ym9Ro\nOqQyGS06vmu3edKE/0XXMM22wkuJLpNKjLF4zBdqxxRwhITDnjMX+itk9zeS\nK6C8+lGpMXFptOB8WDgvpV+p0Ns/vdNzm3tnC9Mc9i9PAEk7p/fm9KaSyH7M\n6xQgygblKaFsZZNH0ByCiWEy6CD6yIHqfWKHBDffyyjgMiQ7TVDdaBtY60e9\nuEMY4y1U0tbZmhDSBonzE0NqJHQnezaCFuCbBxib3kmmXNaQ59ObIhi49dci\nCv/M\r\n=EriQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/touch-target":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.d30efe6b4.0_1613097700370_0.7694601144667672","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/checkbox","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"143bd97bbb5f29e2272413e5e6ce7f6f32c24b03","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0393bdc4b.0.tgz","fileCount":43,"integrity":"sha512-fWS6vCzikujT7zg+dM4iLdGQKB8v3zTnl5Xq/guKgBnftl8KgqirMgFhxIG03GLEj8/8/N4GH58+QoPkRxQNDw==","signatures":[{"sig":"MEQCIE2mM/PAS6UutTkI4tHNmekHQU/jnMD5lAAUjwjD4E6WAiAE3LbbEBbjV5CjHQOqevEAezP4mDKqd1CWOsAmrAAK+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgRwCRA9TVsSAnZWagAATnkP/20RvoowJcNuQ0Qzl/VM\nFqkvxmSPziQ7ip9By71poA+8GxypJZgXa8lJewkqjnLBs7NnVl/Fpw7Mt7qk\nYjAQdHX+yXRP7NZX3RA9lfnZJeah8xTqyYlPDKYrfclHZZy8a7eAT60SA2xj\n6cyJaY8KqmQ80StSq8MQv+A+ncqwDLBa+lOOUyF1+eHr9LBKA4dsq+FAw23B\n+DCToR0Z30vIvFMTNZX6kq2/7UD6Lh3WZfVzYY+IOYrT/fsV6eM+vgSnx3xy\nI0M92qaw8ZfeRXRABHT/8Tl4f2qFtlYVqO8Kh1UWKmV6BtQfJsgvFOcJDZY1\ngzifJPEqElgPc8TME6rjGJWPgHQ54ChbP7/EX/wxQZ3AkhNclF7TvrqWtMM4\nOf+TcW82ctoWEjLnpQMWjvy5ERJ3y9eSlhpsUbfJzqNY+WWCNxsnUWUSBwAQ\ncVU8mkWlLDPeTDi7HtphoSkOnIzU5Wdf0JC7leTIHgw1L57Gi+5D3idgGH7I\n5LEdtvTE++ez5WFG5A/mDNR0nn+md4nMjYW8xHnzDDnoaWTKz5kQEYspmNXC\nknMrmYD1LdJ/XM2fOxYgKSJs2KABhbiPp5zBIUqJx9PwbgdNJIhOCays+Gg4\nfPolauWfN8Z8iRy/ZZf5YXn27WnyzhCemfJEMkK6aBpHOI2Tio43WNQjKnK9\nWCa/\r\n=GfMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/touch-target":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0393bdc4b.0_1613104240025_0.8480323177292486","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/checkbox","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fc68fa575cb8aef1c21f91e9868c8c0d6fbc99b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.7cd26af4d.0.tgz","fileCount":43,"integrity":"sha512-w7XXzDd4AJa6ajh/9LoaopeHo23yukx9vIqXYZburXSEmF7fOY65+a6569hf950Usxvjq23GWiUyNHjrWMG3QQ==","signatures":[{"sig":"MEUCIGIkBBjazJZf8jh/TSm5DW+1QFFl+XseHhylhCixjINXAiEAtZsZNMRnSq37mlCMPPxkWv/Dj4SnJ7wjo+uSpq3X1Fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXLCRA9TVsSAnZWagAAQZ8P/jG9Zw0NVOoI6lVPYbcw\n2lSd+LiJ+UrQLVN8XROpJenRaFBDkNRMkCxXsG0vyS6LiABjNqNwPUxVSzFl\nPA8ljMeM9pvQecK0g/NpmRLq72iWuMb2o/l1beSa2421fe5/DvRWpLuHxmH3\nVZq0mF8VT3l35E3LKHwBP80KazVlRfvVsl0VF8YDi2BRFCllUchNiQMdfWLB\nU0nYNagTzRxzohlS94pMnyt+Ih+bia5eOQZB4T2/qu7eoVHT/XDT16pVqnwh\nqpDz/nfMwFqmvOZESgYYfP6pvFqwoFa1Yo74OFEYDy/6WSD6owQcuBPjJ+W7\nF6hhP3c9I7e39Tnt9COwzDbXa4JgTSwTivRsE5RQw/m2CfPj4o97TnUjfiB2\nFh8LgsV13kUXhUmpXsHR1nd0Fdfc1zgm/nXD/vDoXWFpRovH0tBdfSvz9d65\nVTQ4hXFPtuEP8h+Vb4yNM0DvzkKoDccXGh0xmNgNRS1nsIyqiMXnaFDY8hVM\nDEj3RtDQSpVdaT7c8A09/8dac+azdsPd9bzSoPVFDV7t7YbM/C7Ut1Q6pUGN\n5RMD3fIVeqbtC/D9doz+kED4+uDrxK9lSmxpX6oVwxBXAFIwJDQy44MkoWOD\nimaZedz0Z1X20SStRFtivLtieo4qqsXnk2TTxJBgvupJ+zgFoMhgYNRKtMg0\nHFLl\r\n=G/Ug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/touch-target":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.7cd26af4d.0_1613145547198_0.8469831381585256","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/checkbox","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e81c39a5330a662540a77ebc066653f60746c0ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.71fe9a067.0.tgz","fileCount":43,"integrity":"sha512-K6OAA2yGzh9Pq18wFbWdwXhlKKMBEXQE+bMupQ8qN8ysrKlAzB5JWv/3pw23hQNfJ2nFhyjjIjZOPr8BRSYB9w==","signatures":[{"sig":"MEUCIQCZlfhP2DqX+2ZfbGt57qrFwDNWDdNerbqE3QqZEdncaQIgfk1LhZHF/v/HVRBLGvznOyxDo8lw0cyABwexBn5XdGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq01CRA9TVsSAnZWagAA06YP+wZHKTPGtu+hbsQ6xcYN\nwl2PbNpK9Sr0421o1uxcB8sro8orDmxj3qEjcmZjwn3sw1JFJqwvJqA7Wmxi\nl553oAK8Kpn7pY6BilQjLaA0a7WPcq1KriWcLL8JUf63+hJyeONF8rqKYLZk\ntbrKWfSJOMKyUlSMygcprQL6Ixn0+bm3hvICJnxq9rq5IkcQvVULgs36Jx28\nOyX80vy8kOhi1H1v+08qqlvsxTdCR8keV1vxDmY1J6pCUqtvFQhm7oN/TjJy\ngwGBmeRuXJzNoxB4Azwjv9Z8PhfadcZlag9aKU57JwumGFHQvWX/w8iamNeR\nxqtQr9Li2fSBB/yMVBh5nu/4gitk/YfMobAXm2s5flDQZTACULQJvtV8AfQj\nHznphY+adR0CdsTl7mT33jojlViT1n3rYg/Hlw1n9hwSG6qpL45yDnhIKPBB\nJMi8BPBamJZGCawl4hBOjTYivizbYsfIn24oE23b4mxX2/H16ADvH2YKIUXC\nuh7GEl0JuKWR/rd+RfuJXGXeB2gIoLme3MiC/JZ9HNifQYhxzQ/9xuilzRlb\nUroHb223FXrTI+3O2cxO2400XlGWrfnXvG3l0bJVL3UBvrUl4qAPb2JPAQ44\nu6PztmK7lgjzYLb4JtR4uf7R4/e2a7AMMkCx0ZuBHJG4ab8UWvnh/Su/QADd\nwHrC\r\n=80rZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/touch-target":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.71fe9a067.0_1613147445203_0.457165828638469","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/checkbox","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0959d73ed1fc67ef8dc8c510171d6730537946b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0fd56a86b.0.tgz","fileCount":43,"integrity":"sha512-fpM351OtfXnaBx5booMab5kgyjKcmEc0atYXk543Bntfv2cyWuxSRHvHXfJ/sLZed5Lk7DDfLm+GHr6vXUo7aQ==","signatures":[{"sig":"MEQCIHnOVDfRdQyY/Dq8UdyqReJ+wTj3ih5JdUDhb5aJ/UQyAiAH/KEU4+lQF4d4Oq+oJhPbq1tiS+Cnsa+Iagh+SbbAcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxk6CRA9TVsSAnZWagAAHL4P/iSUf7GrYEpD1f3oIEPe\nLcdcwXE4JehuLDosDh0j/kVNV2MknQys6YeUNcJ4hAdQKTRASSqvxgZQ4Ypc\nxn3wmgUSE5LVyVtIcSZPQOwM5K/D3DqctTv72VNN15lFvDUTw0eeL8uBSAYp\ntaxM03ws32+CBWwyPS5VkskqruMjd3K2VXb25Nbhoi3B7PrPI76i4FPAn0YR\n+Obvy0tFcu/ChGoSMVD7v3NdDG1JLMCv/EjHj4bj5GafvoqS1JdzuzH7gP1A\ngfSDIJuaipDzX6/bPboyza2nVpHCgglnYN1+e/nJ0Ot+JzYtvcKl2BelU2Bh\n8Fsm95Rf8HqPhGR5wq8eSv+nwBnqHw5TBo/OF3gCCYEnkcB1IuoyY/EM1v+9\nVEXAqjFI76pmcPo49vT9klNQ2DXQBOjms/vVCqniuhP+JIrffb4qs2wTSusr\nSCK/yfyXMTYy3LGdYJR3Fl2t7P/YyQbs656JJ7zJkw+qKZIKiieyUYrO4Xt8\nyr/ehfjGj1c3G2iEkPSs/p7offSpqBwf0PqWk03qrwRI+iYDi1ZVhk3fEeut\nr+4/qEONVXXkMYMAKDqxzAA2KxA8/7EBGovcM5EJQXcMi7/OTMS/Ie/O+lKl\nTKPFBTTDDr6uJjH/jmYV9Mv2NZkaSDEqDJ6Kw83p5TCGHI3TYBYjhgzKEABj\ncLSy\r\n=jggj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/touch-target":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0fd56a86b.0_1613175097880_0.6563674612621726","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/checkbox","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a4c7812d9dd213f3f6b3df89b102e847554668a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f19bbc4af.0.tgz","fileCount":43,"integrity":"sha512-bTjt2nXXNHM81dSnNSc3YJmn0dhxK24i14iu/kMvmyD0GLa353DncE31m+WkeN0lehKrTsNU6kMuPUKqm+YnQw==","signatures":[{"sig":"MEUCIQC8TtWP/Hc0lYfOLtSs8nWH+reA9R9CvWuEmmTd4tQO6QIgcVmMiFY2shQ6oyo9oIERYys4nZMzLheFmANHOVh6tr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQaCRA9TVsSAnZWagAAarYP/0X8goToSsly3TSY2CA+\nrrlUXJN3dkbDRDwOyGh7iDca/8emc6Q3CZX6R/tYjdAFBrnlrIDc0sALfMqr\necdEQUWoJlEvsOqm3OZDSotXEi9OTlQCkjUGGnH7QKkTpqEeuRYmPedhmWgm\nPA+Dybv0rTT9WsIp0h7RExPE60bIN/5c/SnbIZp7mC8Dhp/Aezhx4pPxk82I\nPCGq2rgxsFJ3reh+o34eE68WDt+Qt6HxMAacDAb5lt2SJVBjjEorfRIyWumT\nVrhrb/TtCU40A5fm/86TsNPFsL/hun1XgTgRusScIMuL3nohphpxXzT17a3p\njW/2GkccudBb3OeDss0I5KdMJHx+DgqHzMLb8c5h4VdMFQU4XIUR3+S4301F\n5U7wiyFOFfen2tC40OcuNy8bQWbY8U4livadUPmc2+9hXBTpwJ5pM5Hhsobf\nA68Tus/hhLgmNO6tXUxgWhbcPO/nZKee+Up+cioRU3Gi+Jx4uMh9k10WIKT3\nuBq6DX5GSYmacYHhpGqMAwzbeWliEKH/kjlsy3P+Yo9LvMZKSw7t9nQUT+d2\nu1HbBkMHxre+J/rjeSa3wHCRZ3dBX2kY7Nqm7zfwRxn5VZrxAmGmBB5Wo3sK\nSVSKq0EOkOJNIFoXs1tsnsEExQ+7lTuUO4DLJlLQMf4IBMYDqDr1UpamO+3l\nJga0\r\n=WFiq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/touch-target":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f19bbc4af.0_1613513753712_0.040042391655018994","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/checkbox","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cf7c680122dc8cfa8a5fe17e9df57a711ba0e5d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f9cac96cc.0.tgz","fileCount":43,"integrity":"sha512-gnNMZV5tW4SDnHiNfOUIH+ji6NuAWMoGcITpJ+bMRNL/ZX5ChwiCzXfob1pqdcQLPFZUl8W35TTvBfEXMXhBVA==","signatures":[{"sig":"MEYCIQCgY8bBSoEZrFvW4j+WEnbXSHTmtO2YUXtwwB9/zYN1vAIhALOXQAszCJY8kkkSqCgKXxgEJDGoyLTFO8gE9Eqrn4m3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT+/CRA9TVsSAnZWagAAKRgP/1tqFJ2aFP4L291hJaZM\nBgR9Cun7NK8c2Y0GUBcpxj08EMryh9ZGEeoI3rNgChypgRnvryduNWPr/otC\nteaNH+UGZI/sY6VIKkK8N4Do2zo8iL0PHmulrpor/auu2eY8xCOCeYpeU02m\nYWQuic7FWGg46PpAV+OZRVlhWpheeB6MTMVN2f9ac9hoBeWLd9Z3nmUDM46l\n2IhbB82Z2Kj7sp9oTBRDHji6Tq87Q26XxPUxY6ULKi6Q7RkEthePJcKUP40s\nZ5vNXcR0wyOXL1rKfu3disvh9tFSBrxI+061Ii7M2h+0j8L9iMvZWhdT37wU\n/5eHuxGQGIAX1JCAx5Yi+plxa/Tk1yGh+KCGuRMxzx92vwvoCRL4Xq54ZiRr\nqCgUVqbiuW1F9wPnS+ipS4zTQZHNg2plng5NPH2WokA1olv+tKYke9WtCZzH\nSJmOmdQ5FgsKTPypaXrNgO+0iBbtkg9MurJJjlIYzrXMcYo0TgwW86MCxhb5\ntMcGsQQW95Cereef1oFuhjgYZxHQ2VDFuucKQRygS9a8ycH2lqp5wiFIFHAi\nMSkI7Cs75hylxm3Wjy23D/A9bwu6aleuyrJr2IChQvYr9oTLxVb0OqyB5wZn\nBTyAKr6WxERgFRqPpAvsNz7wTuVvY6J53gcEjUZHdtQErNNUKiE78TH/2e39\nWjLB\r\n=R2h4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/touch-target":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f9cac96cc.0_1613578174893_0.018482627351035674","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/checkbox","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a708db7c2b909b04f3eb751b5a4ef3b78cadf7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.79ce0878b.0.tgz","fileCount":43,"integrity":"sha512-mNB1EY+2/lRdAI7tVvyo3kHXIcP0NHSR3J8bRLmvTgSBEeLDBNlbSz+n1sRZ+MqkZZSJBPET8EIp4FWlLR/4tA==","signatures":[{"sig":"MEUCIAYgrMIAqNlveZJqOqnCwCHS7L5WgxLad18dCa6TdoRmAiEAlkkp4j2Oy/ZCPPX3CKSXvLBvuixbxMXy+JZ5r8I+LhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2ECRA9TVsSAnZWagAAWGEP/0PgJHcFH7LsmZkWWS7N\nnCPlO+Tu5YYZQ0XnLdyTvmhO+LN4fsfMAfPif9Uok3Rcjm4FxcefNWXCfHk6\nij5DqWSW5/D44sc7bSMHnNvKIrM61V1WtMLxyUhdx2U+bs6N8pN62iSLjzxJ\nK9aojgE4e7fEKD32/4aaVE+1zZTcb8I/1oXckyPxFtFLVXbAr2jq3UtPym2x\nPxoG29EGQk1KLS+wSjAmD/i78M2rZul4jnRwwjoMxY4zSLzlRPLLiCg3/Q71\nyaQUBJ8CbQuK83NDhVDHSC9wlkoMvQQYWkJFgcPks3bsJsszrM/cWWGYXaFD\n+Q9KuLklf+J4CU+/vbDlZbw8AIhN1svNgQ4uhAGcBSq65pz33g93z/lPDJpk\nf7xkoPlUJtrPUR5TLVImlMHNSoeeI35AiE+TjIxqBJsB7BHVAXlpB+2CjeZD\nzWEpIvDuUOVq0nH5dJqHKLcmgkH/BK7ir+WlAt1qqrtiuogeC0+W56/8VHLS\nYgLXR/1LZ/tLTUIfVErY07nFgyKT/XOe8gfusaTJZ3nFN81Hgitin1iMUXh9\nXSiWDsYNpfVWsy1s287KEZSsltBwjp7udhuDpZjCx7+bH4TR0KRPb97lLChs\nTWyfz+zwPjiNH+LqnOSr80KPF0Y4mjRd/Xgrr6M9+BCVw7G3SjUY9cJQeXKN\nMhcW\r\n=ijkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/touch-target":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.79ce0878b.0_1613589891351_0.44549468645366597","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/checkbox","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a006e79c2c47e97b6d3716ebe1e0dc5ccc20a85","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.d6e507b5b.0.tgz","fileCount":43,"integrity":"sha512-yPFFQGW/73D3ph6uPAl6abeIh5WOOiXZpKnXSvyGEcqXB8WrzxDS/pExWNE2x/vFTvuA6uQAdjtG237WKwjrWg==","signatures":[{"sig":"MEUCID0TjJbL5FhGrrtsvSwg0tPV6d0xlOqyH4VwllDPIDOXAiEA/4iot+0jDZ4zLoo4WdRDIDuWYEW7JlcFe3Fjv1kTnW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVJCRA9TVsSAnZWagAA28IP/RhACLFfv2Zb7vkISd0S\nrpckb+0mfU08opcy3ZC7Rqo0zt+ud5kbWxAFKZ0J3Pl3fz2/VMbHeWUGOK9A\nMQq7wHvOVRJ0/EStd7cJt0ItqBcwUcIMKXrxA2olyKW4r2fTvexEyjct5aOs\nhJzVs7e8xrKVNIe/EoqVw6Yjei2aJ47LZ8sA1ZN+U8Lb9ktndhDq4vl0Hv0u\n3rgtou4dq+2ZGb1gQYhKvc/DJJ4DQJ3ahCIY/TTdPnpw2BXf8i8UwbGk5g0l\nHltvTQsOWtK7chsjakeJGKmpcmf3LVn0JtV63xaTFx1gdMafvp0DXAUnJhW6\ngmfUI4IP2SW+m3zvubHYXCn1BjTpEBJ+EiCJDLdSfGf6kzhoU7PRyexT/vaZ\nCCRchr0LuNV6lGf+9r7LY7QGLL/TrWwLfX9mcp4FLPRUkdv4OlPw6h1I+kSc\noTq1tTV6pSOuL3IFVqNfFvWhvTqDYmdccWoKfybrUdIFO8seKicTx+hoA0sm\n5su0wxWciIUhT4MUm58U1Z2kOXwIJUrH5ALYGOPy8R/6kZ4vIygHroGu2PCg\n5/aUqvseAiLlArscoc8OdXzuMumprd3PUOj+X7+2K9MJ1hrrV2kdnl1jPtYU\n2o/w8BirThoUAdBNrfATy1UNRMmhRrMhVXpgkjkWal8cMpmm6ATg4uT9CYPz\naxWe\r\n=xChd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/touch-target":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.d6e507b5b.0_1613591880533_0.8420987417070198","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/checkbox","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f2658381b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7def6db9f78214c54d9ef9b4f48193abb1150562","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f2658381b.0.tgz","fileCount":43,"integrity":"sha512-7s/iBCSWhb+Me/qnGcoF6LGOnGmM45wZj3tbhNVF+lqecR60Nn1/7h2Iz+8L+usqW8WEogIrs/vS9jSd6Yjo9Q==","signatures":[{"sig":"MEUCIAOAxIXQpBGpHfRggZHCUPZbcnIG06KEtSZb6PdNHVYfAiEA5jXB6zsXYhgDqHOf9FBDRceDE1rfp0TkjB8CETYwnFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxLCRA9TVsSAnZWagAAt+cP/iAEE82Pmc6L6ZVssPh4\nyXCXCV7eC5T3ONs4h5XHhWp8vtvLDZcIhx8Zay/MOlV0+QwWTPy5/WIDcKFP\nF+rqNSIX4Pby7tFhTEmenKFNnmBs97Mjj+W/6JZu4PQbjP/1ErDrM5c3/XXf\nq5RhcTwvhffbAksXMH1OHWqmKNpSHvE6A1+HcZzP1/APNEjRYliXtoUrn7R9\nMgU4+nK6QtxVd/fcUUIirudE/atq/Iv2kwdUItesa32O6bfaeIQYeiQ5X9CF\nTI3ud8dEZFJQHdlFKsyP4+UJYWB/LKCj8qZSY3ZPyUJLKkJQMfUYugo78pqq\nVPEog5XN0WCw1+iAP18e5wGl+gYACo4gtiUU6M1NYJMvNoCb4w+a5JFhBcLV\n8G9sU+Wsx+aQvnmKJKoLrCKycCfqy/OE0mgBGeFmS2xkX2EEFDBZZhRBUpRZ\nQoachCK/b7eJm2o3TnBRq6aazsTSa0fkwN5ZBMnjiO5SWAYgYuQ7QlMU4r/J\n4w3pflHcGVaptjdodk+gYYRAxXev7H+zG/sxSoZPTcyCw7myWT8w95JT0Rf6\nqDBf68h9Ah8SWcjEdfp4tPnYtQLhW+JVg/ZrEWALCfcyJ9hft65f3xkdltLO\nCUzQzMsLChww2GdoOeOLq1oSDP8xQFveEjCyiKCUdKhGp8f1pNvxaXoB9qzR\nYhgq\r\n=waOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/touch-target":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f2658381b.0_1613601867154_0.2640707115575971","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/checkbox","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b36fd9ffd2c6fc91e37b1da4cdef9ac81e977c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.97c4d4035.0.tgz","fileCount":43,"integrity":"sha512-tanNn2AUoF9JafpIlihL4CRyZCcBKdxoC0PmbejmbBbl6cY8hTuW2yWpIa7uUr+gkhB+FK9YtIZcKVcrqPUTpA==","signatures":[{"sig":"MEQCIAeBFLWFK0MXCUUIdF0WOJc6XJkaxDoGlrH1SptVS4+MAiAr9bOhZPYyr/V+cVChpXXFahO2EjRAqmMtS3WZsq6swg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJSCRA9TVsSAnZWagAA4u0P/jUKhr906dhyfOVASCNZ\n6EhA0y+i27symlJrb8JBj8eJdvDt5GcfE3synVWJSu+3Csgq338H6DKGoCjc\n+yso9BO3FSDb+gASXtqeBqtcVIlsAdm8VUJkxFXrZlkLn/PCTe5Qoec79oAE\nN+CDMqQ+OaNsLLDM/gROXgXFtzAQFlky2RYeWqp4ENUYe1wDIpi89STsuD5n\nv7uYW8CHzV9vMlQuDhUVuhs3ga43jsdo1gMG/024Lv6ZStQlM7y7pofvjUw6\nzkfJN9Rjhv/MFf1H7rABCKY/ecDsOXS3ZylWgCEIuXRcIJYJakjS8Nftay/C\nLbyvHVurnr985EoL4ldHUFj+WL+/XBRskLAPfNFpiVwQU4mo5eHtQm7P9iMU\nP6O/IpKBgZ0oepUJpdpwKNoQDrAHuRrsmRJ2VHPKzskxTAwZ0+eaBWwW4RM9\nvovOghdfni3h8BLo4M9/sL74A+6lHtvqNHcQvm1pXVTJ9QvDK7gFsf9A4o8m\nyAhsK72xLGa18Pb+eVwj33oMuge32LxL1WXa6cetpW7re2ELsoj5itWCg87a\n6FUUnrntHTY8MZYRQ7hd/lRRMzcIYYZM2Cjoxg/spQ/L1rff/qwusd/dd9/F\nMYfcTvfOXjZD/Qonkpl3TKMAYesqdeiNfV1OGn0GuN7GQWRNzLqiPqDteLaH\n7EJR\r\n=XneX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/touch-target":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.97c4d4035.0_1613615697942_0.40723512848928434","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/checkbox","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94fdcb05c0c2bfc223794732ed40d32b1bead7eb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f5bb4648c.0.tgz","fileCount":43,"integrity":"sha512-bn8nw4z9SNJNhOjlyrQzo/JWhHNjtKtUoC9UPJjbG5Q2vN3zKn6hq8bfolgapjQ3SnU3l3HeM3oe345VjNVYkQ==","signatures":[{"sig":"MEYCIQC/JRZRsJqeJzQFgguEZYdPOSNaduUhTa2qs9eBL39DrAIhAP62qUEt/K6DvHZ59vv7wTuvO1TvZ+o4lvprXhD8pFLN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpAtCRA9TVsSAnZWagAAwBcP/jjqq3CSPhfRE8zcwjzV\nx+2e01/NY/eIn8HKccAjSx14gs9p4feD5lcrc1FV9tYSVJBg1n/e/N766aIK\npKDYfbbbrXtWrbJ83izSlv9U81n8lMyqIMgv9MvNCLGq/qa+6e1+SfeQVn7M\nskV/RWqR4xgX8MeofWvdgzaVVGcV7etCfLONbs42d4i/D1Mj1FUpHs+yVfqO\ngoPuOvkkh4oxFXoMayJQUjc29DOGbMx12Q4GGabXaYcIQqCYEYHmkY1LWIpB\nPptY2KeJyGxzCniLf9w2Re9yy6Wu6DYCKg7mE0oCQT0CNwU9FBfI/dbJNRv5\nHCUv51DusMnqGJxKyFZ7klllzon1CH1FA3S5K2asoiDVYss4L7SPc/b3PSMz\nylDr4gJj3CpdkoHUvfNU1vj97Qt2W8Tu/maMy5qWIDDs9gLdg7xZ2qMa4See\nFj4LQqfvaAtSKRSq6rsgqkhD5fuCsopRjdXz8iTpxCIEa5927pYR9p287ynx\neoXdKrw3CSs6QBID3dnEAc2q1nQXsl19/nNhKsejsG1Fjmg9fJuqOdFvGJxw\nP/baEggUrrD4gjiuJQfZdt48Po+X2PJi0CVNEPQvApSdwK/q/9yR862whqEj\nVcqY7ZDsYI+0IsJDebCFKGDPG8pRbKclfvxeoRgYsdF1mFS4mNI25Ir1nZxW\nFLcN\r\n=h7pS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/touch-target":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f5bb4648c.0_1613664300398_0.03815918330128598","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/checkbox","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.302c7a960.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a62a32109414b20def5e2519db9950ce817109","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.302c7a960.0.tgz","fileCount":43,"integrity":"sha512-TsuZigQ95U7TUK5WNmAUebXmFMAGyFaRz/migXgGYDGxwAPgViT+TJMAjIgu+5VoQqg0VE8jmqbw5R+7HMbnpw==","signatures":[{"sig":"MEUCIHe+zMPnRZdUuKQT2TkfpgY2LhkBKWTesgasLdP/NLX0AiEA3k7XkkmFb+p6AZ3alnCrIQsBRpyPT0w1amiv7L357kQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrPiCRA9TVsSAnZWagAAiBcP/RUJOnM0Baj/ImWlO0U5\ndOo+W0KGj+cISKDXZqL72Eq8u1PsBkcLCflIXfs6oC3Oxoev8QU0yUmkvont\n+A6A7r5gW5vTgfuB4A9cgdVKVpQY0fQCR+EXVi3/vw/tAtA0rsNCg40WqTi0\nfeJFfKEasig2P037RYb+OYiVA6YxY886GWyxx6edmR9c8RNsOKzPF2dJBx5o\nR1CPygsMUS0ZKybFfXe/MbTI+BFJU+ITFBc9OCWDaApFQ09Y4YuSrVShXBHt\ntkBKuBCp+3I0JFRNCJg0Pzf30xp4VoMlhIR48V7E9L4gPTwR8ETmF6+PBqr6\n05wkCfBo3SpBjBHN2rpH4u5hd82MnImxNFWeXSEs1IP4Dg8eATfYEcBocGh/\nseAufazWQ17e3MDWloLkBBFq984hfOxeVeAP8q3CQ/VtubvhEX9UGhb7uyMZ\nMEpUy+iQDfufL1hL2uLF4SolixYo9sAUQbKMuRZiKGRsDJb07Mxf3VEnkKca\n0QssFfU02ZqyyRyYdAg8ZBP091wGDNLA/eoHfmdlAQDOaFtjvHsAIrc1cLrU\nM6bJ1UIM6deaZYAWPvWQXlGeauOlOq+O+mGc7qbmfKcSSRamM135+DEL2ZNr\n+H06k6WJazYukbQKBIwR6uHcBUsDceNaKipkEBrDKE2BuyHGZQ7cmnxXsWZ3\n4D0E\r\n=7fNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/touch-target":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.302c7a960.0_1613673441710_0.8313161602616181","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/checkbox","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbc95ce5c613b07b13b376d059a1c5ff55714054","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.aa0aaf026.0.tgz","fileCount":43,"integrity":"sha512-oU4Jpjomo5a6QYZxhNELF4T1uP4Tn0hGb6r1Fl8JqFBMQAjuj51c4JM81TXDfpFyvKxKwhMbC9Ue5whfns6xtg==","signatures":[{"sig":"MEQCIBBsHGOdKn/3cM5Q36UbHHNQAj61JnJ8ZOLqxUEduZQIAiALysOGMPW0Ojy1TaydxLZbct5bct8m4e+KKoVvKBtxLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6SCRA9TVsSAnZWagAA4DMP/Rd5PgEZRBpJjdAYzKNZ\n4Wl5WSzAltt2b4KdKEUVtfAyz1c80WKXqNLIAqkPatc5T7ei67HftcPSYGLn\nufFibboxqBN6HYEiuUcGzHbYxMg6yy32AlTOi+NUEmDfI57+nka5IzNuq+eh\npVJtUiKLKQhxL22JVMKbvZnzjyRdJcMYdHPi3qdxDwWihKCyadRcb+fNHSHN\npWxAL7+s1OXBFIkXQdzYweROyeqd71WFKuarMVx1jCUk00zxYAB38AuyFu8z\n/EmkCeMlsUYD2yEIxtx6fibIZS5VEdEpuwu/x5werMULYJvPLRdG4E5JcrON\nVENNuZWHXFkht+eh7dpX8UcBln/LbWQT/9PnBxUoMOIqrmSGpXzQFFjGnjfm\nk6EsecePIgPgpwKJZREld4aod5SyHe/D2Tcox1pscmYEcvHHBm9yeRY+Whkf\nd1DF/X1cOW9XfwPmz2IlWaAJzuciCCwws3rjvQsa9mAwajHkCzs/9mOxsy+u\n7A9qHTfpB7ZP/vFTlIi5Cv8x+RWglvAyd9YuXt5dODFBrLxtKrxBDAw35VD/\n55QCxXoBq8Nv6DELVojqXBV+5cgklqIreEpdIXlwtamSe5zWT0y/SQrGtrzx\n7jSIX2mnKROtLzVtq5d4gxDHR9sQWzLqxpdJ68wxpW0xmlUQ8I7g/0m4Va14\nOqz9\r\n=XdRp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/touch-target":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.aa0aaf026.0_1613676177862_0.9580752482974644","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/checkbox","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b12be58307dc9e9736ce861d55952facab6b4fef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.07ff0c452.0.tgz","fileCount":43,"integrity":"sha512-/ki2cvuLsfcnZ0BP7H0qI2wWiSnY2u4yvk9McSMojZr1rQEpsi5iee7nqZ4TIO/TawwnryXrMdgZTrBDRM1eaw==","signatures":[{"sig":"MEUCIE386JPXTuDrECrO/O2WeMB0iIqFcV3vV0toS13p/gcHAiEAo6wqy6Rw/5pmcsndmcyECyvQspzjWoQ+97BEm1W3Gbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMYCRA9TVsSAnZWagAA+PEQAJ57a4z6Rog1yyejUJkv\n9Y8s/uq2Gfbrr8viXWJTbZ7zuqsSPpczMIijdChFwZqt3fWcJsx7cVbD7Kh3\nLKHpBYw0q2eSo94Ze26c2hlkud97f/B7pKdmkbgjZFF1HLJwNtwOuqHN+8TD\nDWOfsRL6s0gasxOxaW3VbaStpnIoT5NDRGSP1Ed775rOsQ4VzmsomkLnZZc/\n9BdQzB8uBSDlJhGyo3kdJdpzSLbM+QUYtm2p72l03QR3eU+uvRLTZLhd3d4u\nYfpyvujThQr0LE2El74oZln3Scmnv7eez9jpfqz3PMvJ6o30mmWOQTzlDWV9\n8YM6+HtMd0IPaXVJ36DH/NlDrisPJsDKf2RQ8O1KcDVUtnsrLM66G/6ZKY8i\n3mOG6ZIU+tcSdlCHDDBYhMOwBIW3bzZ7CHQ4aqSnIsuM+mM34sDbfMouEMes\nEUlDC7DfuC65AYcFO392PIwtwqZcF3LffzGyMj02B8waraq3rVqCjz/VBYWA\n7HJDQXMeYZ4MnDHiOT+mjD+obsnLNUhIc3baFVDQwhcAULlHSMOHkQV4E92G\nGVs4ZL/gWiZOtG5zW35Pwu2pAy14HfSVkulAZyn9yraNU7Zsj9k4tYA7c6m2\nPKkgv6gxhBDyikvEZ3hT2RYeZUoUerMrI4g7mnfSbrkX/mLTRXzebLfwaS3J\nTd03\r\n=rwPM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/touch-target":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.07ff0c452.0_1613677335680_0.7033379426886675","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/checkbox","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adabf7599608a043e2bc7ad0ff81d3a6e9b73021","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":43,"integrity":"sha512-o4YXr9cBKHyWPgnOm/3IY7cqT9L7WAC9yJbuQt7lVtzgH/bS6G6VUuXOg8qT4dC0j8MPALC0x31ApRdKi39sGg==","signatures":[{"sig":"MEYCIQDFc4PMfGY8PndpPChJgD/8WfzuA3O2D1jUQuFLPM/6wgIhAJ1oKaoyiR1NUec+AkJUOT7+7biQZQ7mJyvtTzPqD8j4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfXCRA9TVsSAnZWagAA2q8P/3jtypR0oeXfAUWJD8X4\nT5MvZq/LRwDcnm4Wq/AB32RxLJaACrV2Fvpoj1gJxKdusikXB0MMWG+RESl7\nUbcznIfuL48hwXzSwJv/H5OuX01RSX4Z0mEiPqeyULNeLOSOxod7mCNbi/k4\n2lTtYxJHD8bTlPPWBXPgxLL8ek+O+z2PbrowNwS4qhb+kfjgvH9tcvxBcDRp\npSZGHp9LPCIwMsbVMqZgPrU7cUnGr/k+vxWQq+v2VcTRD029jK0NDlGzTtQb\nnARi30DXJnZwP78hdanWZjxRrxXHelQKU2hQR85OaDxRZspElZ7q1KphflXp\nL8F0iptfXEtYICLlTmnt5f2G83RbW0w9WwcZ3oXR+VdU9kQMwiyLNi/oIHH3\nC4s2/60aqAFfTElBbyEauPSQm0esSINt/J1n6o6fY2pyeWvGmmfiPqT3Vd1b\naw6eLPSQk2XaUnCTVISdROdS3IIXA1ymW+gk3+TdQPnlr5y++UwViJprcG+7\nMGUIZ92sPT0/2n73ZSQUTzeHTGGL39PKYfut4fHUHxBK9UrrmkD6Dvg5H8Wq\nmB7DiHO0Pc5j3F9YzkAAO6i0GDHO51OsOj3sdhgQMTrQ7vim5cuTo/0WsTp/\nq+iKtZ4Y71W4/kppA0cvi8CZBiijyCyJ90XyLFW5R9RZBOeux7RsWBuZsOdW\nYNAn\r\n=ohhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/touch-target":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.bed7ecd3e.0_1613690838946_0.019601748766325366","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/checkbox","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf5415127bdd6f5b9fc2db2913e772d58909d989","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.06dead2d6.0.tgz","fileCount":43,"integrity":"sha512-OtZW4xIHQLS6Fg+jH40DUHutZw85vSKIO8MOVRW7E7ERTVbNnyo93B7S2d1CGeQ1VMQVKFlVQYkcZ9c/N4HMkw==","signatures":[{"sig":"MEUCIB3YVvFK6z5msIzpd6+g/2e3meNQl8+mE6ezlXfELqbFAiEA4HKLeXthEkCtUUv7l0oUKEt50hmv/2eGIJOrbd7VoMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgWCRA9TVsSAnZWagAAZbkP/1wOYREyzgrUFveyPeqP\nPc0IeSVeU+Fr1EJuGGOOwJ3hng2wPaxsnBDyS1SyOwfbt2TF0fMZsHPLKk3F\nMFIZkXXdUbhJGVMy/POloCgoAebpwq52its6w++ExmhZWqwpBOg7+pFRtQBT\n5izMYgK7SdKUMimw6z3EUZTdPGyuBuKizBK8Hd50ITX1osLChM+tSA12ocOG\n41weQmae+8L4xTgJ1ODMWouygSJXzqLyH/2ZSvA1+FoQpU3517nLQZ1QfgVH\n1X4Ziol8EnSPZoQ0v7IHjxQc3wX/kWU1+7rkRwPXXEnrT3U60DSPXjGGODjt\n1BMVEYvzJro03ONDhSubtwpDYvJJJbFAN1FKmiku+dADcEjUP4XwlKHpZmrR\njHp28B1/hAdwu4BgNVSMPFf1cqNzp5FwRML7UC/I+4M4x2cmbHkPiKKpoRWt\nN6d2tk9yoXBrBN9ymSRSlzLKIn3hBYx6J2ss4E6kNIBNZ4gS4tkUkz/HeiEo\nyVDO/Uhuhv8HN7gofDX11sJHLRxhKXj/0rhneO0e4+Tz4+oO9quZwyDE/7pq\nBzxZfVlkMIX0bIkyXLiKfaPBJxvZeSqYAUULQj4LpSBDmeZ94VC3HLHxyGQP\nnzUqqKVHXaADF+aivQHi9iLWzt/FaRMSRJYcZlhOj+luOoxt8Fhz4ZCWQ2P2\nGPyo\r\n=REDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/touch-target":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.06dead2d6.0_1613694998396_0.6322836062822259","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/checkbox","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.cddb03553.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b401a5c9753c25757c02267c91a0383238cf22e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.cddb03553.0.tgz","fileCount":43,"integrity":"sha512-TOzpbR1oaMHPiaahgQB+8Pjw5P0crpet85ndJpQ2z/eZuiGyrKoVKtGjMbf1yA6RYIAlzDqYM7ZuEstJKjEn5g==","signatures":[{"sig":"MEQCIHJIwV9rGhXJKPCG5bVh50jWiGklca2QfdBsNLDatfABAiAIhK2W0KzK+jbLQF7QX4vox41W6b+eHzPVnkViwb6Vfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyy6CRA9TVsSAnZWagAAC+UP/RMtoqY9bl3GgtL8jTqH\nRHTkkEAJjgfUW947PHEVrPYu7lr7KfajvHS+QsiH/5C1wpiOhVc/CK7r0y8N\nO5bqbQMgFJTvEiSFeM9o+9u2ROU5Q4Pemzj6IhJ60nMaesn4RxTZXom7STdL\na3MC4hL8gWJlytFUjvfeR7EiP9ZhWJAzF4WyjQPeQ8T3N2pwHxpyL4fsuIcQ\nNLh3j8h9ziZgrm4vaQ6UTjPDrhW1TME4rJXIvbEQtEZbm4KCEdh2M/CtPLgu\naQWSHrM+/+E8KXRP7rQEFnw4BLGfAFLGadH5A2xjawjMXm8oP2d7zQlF8uga\n1s8knAu/P4wkKaJlqfSbiK1F5vWNoSzGe7CxbmOfbR+fAVMH5Z3Yqpqoz+GK\nrCumgbiNs8CM8sNeME9qDOnFPEiydEaSopS1bNjmvaz5RsOeaMxFTm7WTN5i\nGyFdVbf1Xy2UvAoh2VgTEDKoD9FyoJqQI8SGPe9h3SBV8oqG61r1ThMu0TK/\n58E32XzhrlqXwJOyzjFcRLoBL6AFs9A/sUXUpixiLw/bGyh83TQoYYtBt4w9\nlikIaPvCt16+dy0zQ3C9Ibenv2vCSjcsMg3ySz+oUuyraTtqL9hc+aGwf+so\n0slcTuMqcP7PcoQWKCdUBTWSQceSD/5CM9gZD/eefhDW5m9c9I+1LPBCi3SE\nhXqu\r\n=RisD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/touch-target":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.cddb03553.0_1613704378218_0.771710330861866","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/checkbox","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea842b5beea7edbc1be0fb7a6412d8467a7c83c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.d6d8d0476.0.tgz","fileCount":43,"integrity":"sha512-ixPgKrm2vG/f12Y8B673Vn2r8Sw7nkQWZhLKhXBMy9loS2CfGhzXuwMGb3TqlLnkhN3QURIaQTsc5pjAG+KZLw==","signatures":[{"sig":"MEQCHxHzbtELJTUzeZrzfpzenhMWb0IVzbPsOSi1+w+xcLkCIQDJwCWOFsOcKplMQU7sC59c4DggVb7KxDtP8krqiWGcqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05RCRA9TVsSAnZWagAAAL0QAKPF9txclDpyuf71R0L3\nbpGFfIwISvEtG6mGsVdYCBog1o9KkJi42vWGLPN3EZpPUscOO+5bRDhvMNEz\nBpeiqwz6z7ndRHddpmgUF6EHsH5ZcRyBu1idvvUmw8WM67tmJQGecLB9wKPy\nlmSLx0JpeBk+ve4K/my+oSj8BbLqwis24G72KSp8neJAKpy7LG57bAV2WO3S\nZS9yV536X1KbcnPbGHdzJsjoR7xzgya9wsB2CDp2z0lzLOqv4ORCCqsJLn6S\nK+aAO4nvRhcauuHe7sWzLY1vka8XMQsP27iGwrRIdpj3rlyE+Nmf7su7hLK+\np+IUQ7k5eAJrU3+OyEoZQTB960mu/2n73RWGsWAx5pTIUsMewqrJeg9kW1hC\nDBF/V0sCrXnLrhHVf+5YWYY/WiVMfP8NBWUZlL0K7UuBNBw5U2q7w8nXCao5\ndSvI5xrHuhnNTEavc4f8BGmv+m9qSlLftoTdISBVq2EkdhLvqEwGFrB/othL\nJRbUVGm5NzNl2J4ZuSePhpzbB92v4f/2tA82gUMKmimpCJkMJw9VAoHYFkHC\n9+vYHEfw7XSc3dyWLhriR4WPZFof0hltG08YHIyUBcSAyjmGV2HKOeNfFHCZ\nDwBTkwMVCqmiXi+55N/OxFM53bCC5bFCG7rU1QuOC74EWnev0SqTxTHtkLk1\nJJE6\r\n=AMfB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/touch-target":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.d6d8d0476.0_1613712976970_0.4109386176519232","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/checkbox","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00ee0126b54bcaa82e60d1c24678e6a7b46b7d43","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":43,"integrity":"sha512-0zePyP4EbhkDjVVUCfmcFt50whfHHSjGs1ahrS0mwULQQBN2yP9aTI7eIArIFX0Xa2FxbTmKyfU7sBfZ3h34Yg==","signatures":[{"sig":"MEUCIQCMVyJpo1Fbm36PUipmLevYgfUKiQG3lR4WOCVfH4YMYgIgJ+ynTWDjO5AJAhk3PwZfMGcQZA+yclfn9EKe8HQKqUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90VCRA9TVsSAnZWagAAmTQP/ilDpVeIvFuwZMb1+ANE\nwiz0nT6wX+88kfGTDaFnuaKIQp7wvxmdohG7lnLgmjt3vB2PKjXqXSywQLsm\nnQU6TMCnxLOheHezLmVlh4BYmEOTgde+xt8dgju4uVUGTtFu4YQn2AXyETdv\nBHSBkUx0s9UpRgqD/bOppF9jpye1LGMa4XJgSaK5MGghO1nacr05/ae4h84I\nR9+oWRd3I+1XWhpDGYcjh/z4lXDNFe7IRRvytcM5bsB9kpE1Dy1hooWvM6os\n4C5F92dc/ORWJHNVErFqwAN9gZJQKefNZzaxKHrBCPJg86pfIceMjKD/hq28\ndMsXt2hRCzMU+E/MWSu9Nt33qtEXIqD+a9JjGbGSZajpW+UKgJ79X89ifGd/\nGWgTriK0OFmb7N1nmxrTB6YyzPsuglDfHjxZ9u3j839niQypWyzubscfEq5e\njY0/JcLXRPEn6+9Gl6ubmoAMvxggQcpnE/yWPK8w2Dd4M6XOOQShgr5W58sa\njmmXrxACqzYDlWY7O2evfGpEDskVd1kmaK5uCma83kpzWjfB3w1W2/N2fZq8\nyojJ1bWubWP4e2iSQ6s+L8a0ugMCavi34huBjcYehyaD31abIA1Y9sQcfdwO\nJ11njGswVK9qKTgs7CjIhslyAunQGZcVBEJFr5UMaEWWkdswcn/bDw9ZdpkP\nwS1R\r\n=NB94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/touch-target":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0b4a4b2eb.0_1613749524537_0.7642787859763527","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/checkbox","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.3201cae47.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a759cf309fcf059421129061d41c4d3fadaac83","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.3201cae47.0.tgz","fileCount":43,"integrity":"sha512-OSpl4O3EwWG9gpcmLJimvIiiGgEGmP89z5ArXdi1maalZEVUkeIDa6G/oZ7aZ1XQAXu7m0RGN2bsIIe5x182Iw==","signatures":[{"sig":"MEQCIGOMpgFE0p7s26xBnBNa05m/tTM2T5ek7K3TqpBE2TndAiBG2oaCH5pKJAwFDwOnHkit1GKwcvZ4Mm8V/wYvyxD8IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMGCRA9TVsSAnZWagAA/3gQAIct4HCFS+1BkpcluQ38\nBQRVRUCiVM6jxCb5qjCLXMEghetbcGeRzLJaT2EVvIfbTN5xDNsC0DGlc3m9\n1logXi2KBMDrNPsD8kIO0SyBIIKeJnFNEG3pt0mw0xEkmwYgkf9n82IAO3dC\nsoMxc9V39JvrS0FJPRfZtlB0dqTxOU5kpbrk5I+LWLjxZ0Upno7fxvA30S3d\nxwBnlFxueGV2l+sZf8OFjrFPMklNxKg/ykm1COexes94PSd68TMJQoRpscNj\neSUE62XCWMDbiZOzfiDhzyv/AELvyaHvwcd6tsTY98sSz7UpS5z8kk8uxT4V\n1dV3H6OGiXPAQgoxyKzOZH7QnJN/nfhZRXaJahloD99vRjJaw1D/XnXyDfhn\n0h6wwnox9eefmx3J2FfVchIXGsduRFpsC/6XQdcM5S0kY/7HQCXPl2N3oIq3\ncD7YdMz1H+h/Jj+W9o81WWqBxvt9pcbYqw34p3uvxnBsseg7KmS3vX9loGcF\nSVqGb3SL7iQuxt8KfOU7+U5VWF26d8WmL3XmSfNCFffHXUUeZnrlmrz0b/OS\nzIUPdwMdMpfz/HyiGSJ27hfKwMoS0zawSUZlT7FD7PoeEHTyhudGl2wndX0K\nrcT5RlTr6u9KzgjNJ5Ek2M2cVGsv25e9rlGA9nIPjuTdp/wkip6q0IQzDEsw\nflqO\r\n=3nLO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/touch-target":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.3201cae47.0_1613775622175_0.5170104841277587","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/checkbox","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4163c7f5126eaad51b0c4943f37a26e0596fd78","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":43,"integrity":"sha512-wZ/cHGrVInvEBLIWJZmoML2a9I2hJloLF0WXQBKNQL/3pxwbyYaiqLCJGg22tFkVUaP2QnjF36WyOmEEj2tGZQ==","signatures":[{"sig":"MEUCIHbw89wRXsSbpoHgSqcTOaw41O9tCrG3R10qMgrHJRfCAiEApnTcbE1OurPxTO245rvrX5zNsZuf+fhPloYIByBojdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAq/CRA9TVsSAnZWagAA4ewP/ipP2w/rO64QkepltJl2\nFPCnB3eCNU0W+OMI5w18Oh1e7LCxDgzIl+ualJCezFwvISMP1cN5A28o6kCu\nOU8KabkPieEQbKEZRiOg6wN5AJfBbBijcW/FdalNivePMDi1c9EktqjBKItn\n+JT7kH04vDyuQNIKsbicfEd3vXQyB0A6/0U3KYGaGClGgY/CwE5gRXMtU+Hy\nVFltiU1D2K5T+w4K0LgZS519OLrgX5KJijYc/gMIJtuGAp7LTa5ZpPnDU2it\nZ+bdVKICRqSBYWEgMdvwf16WF3/9gCMwyR+5Cd2kM/aLhGOnq5VhVqV8vM+H\njMC4iZUDg7Y/hkd8/GyHCl9Z6YL3T7TpHegGM/RGTe00f0gH+S+Jr5wSpNA9\noEko4bNIlhDQcmObseUtwEgk8cODgKHZ0Aluid7dMyxWh4qkS0ewJVUrn5Lh\nKlAT7tUPXT2V4qoWoenMImwDVUnroQvqJtI1J8OdNh1RKGmA0nL86Ntq5lWT\n5JGQygBaqJyma+Yop23gXH4rvrBIRw5XFaiucRtIFax+gk0jhZ86SkCuW3qf\nnhKb+1I+2IR3jJMVi7OAcqsIbqOvDgcw/yqoIDh4uyfd2ptMabeQToires1d\nUVKezsnsR/0KHVkUjXYLao0ljETieCyPEBumHJYjkOWYkNSguk0HMetNEelT\nlHFF\r\n=3AXV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/touch-target":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f1b1fd5d3.0_1614023359421_0.516353736663554","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/checkbox","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9e5a0ec914403aaa943ddb321405e2735bed95","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.7899e0fe0.0.tgz","fileCount":43,"integrity":"sha512-K5FG+P6ImB9EtSwKTaKua9JeNpxlibeJaHvGuspZCcquRMR3Cq2DsZnWBZjcd9CeCZM3aiPy7e2UVXsHTVj89g==","signatures":[{"sig":"MEUCIQDzFR+gk+wV6emZJ27zcnJtgfLKKT9SOMqOWPZ4TeCE5gIgbhVob7Y6/U8UiBL4oHwEsQTUBtc2hsl5bLmtVzs+B0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQbCRA9TVsSAnZWagAA55YP/RHf9vXuql+M8rEfWXqJ\nOcmTWaiH3RPPyMWXJVHR/EZRerY1Y6JYMwC0P2WOetZUzcPP0B/94Qjb0WIY\nOs3ClT3YtCF116QhOkyhZhU5IcKSi8xdeemMi7+I/6ZY1Te69TCOAREihWaP\nOkaHOOTn8+NHeGAgipuBEEuGOC4W1q9+VfSUcwOsxXtK5VrzCz2MOsr/vfmo\nvHrauHkpMaMxIg9gNv1giuCe460hmBnMvgopulakuS8BfELR0YdfTPspX67k\nxJYGNQ0n1TvoiSuUG/17wxVPWXrc9ualjIrA6DSMYhUC1Csk6D6wTLP+uiUn\n9PXNyCWb/H0EkEWQC7kKGLRrWmURo1IN7kTiwchSIfMUWBjZKnokgM4ktZf1\nfBcTXLsUcSTcSCv6HfpvYPYz7tYScRxZBYmsMQxAAzlENkbCD6swLFVZDfCH\nSg/2CorOMOlUesTiTag7wCa8CjdacYh4/DIaXiRv+N9XYu21HJ2PuSBZEm2Z\nWgaqmY6cPVi9WhmMd+eueydgcVKXrAUoY9IiJ9EACT3nFdfhG7o4aL6rnTNI\nxJe+YbbxoPGOJoH9B+2d04E5PtUzLX5XWg2pYPqrCZ+xsXYs2WyIEM/Hex3X\nPz6iBx2YrhuugAoav/rafNjz9uAFB3QZ22zSTSjUi7hXJ3EE6PSS5MOSjlHx\nGBRY\r\n=cKAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/touch-target":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.7899e0fe0.0_1614033947349_0.4086727580344116","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/checkbox","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f0d50c1738611b4096157a45578a2c7a07cf59","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f19c86d13.0.tgz","fileCount":43,"integrity":"sha512-1JrG4jl/YbggNjHSw8+jqOP7KCjyBeBeUvMGoOn9A7Sts2uBgc1lrlUGogSI8ybzTnDWC6bARVx+OAKOt+1Ukw==","signatures":[{"sig":"MEUCIQCzzFyfuz8L8NK/yYe9xtR7leXUmZ0diFbVKUjbpZ1vwAIgM5FxVpirSZkhhYw5Ss15BEEUiratKReTH3d92o0EbdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6QCRA9TVsSAnZWagAAH5oQAJb1DulsANcLKg10m8HH\nJl7rz9bXpI2iYDJwC/tF5LenFyQcWsTUSBOMRvYJExaIF4j3/fbqFcp2ZvEQ\nG6lZagAIxlKGPmFOAl/uGwQGb8fFnOuxCYqIAscExsqoRiEmrlEaGcrsM3cw\niZSBt77FfS2qydllqbB2kUczSFOLnXbTeAG05nUJ6Wksv6vy5x/3AqXCVVvT\nBjIjQusV52GeCPCl0stGE779kjE335mC4GeMIPBbcbDPJ0dgsyCd7loq4llF\nNZEU5GssVJLn/WTXrwr46AXkuRV5poQXfmorxbEjrgWBGnnaGe90sVbEwPYs\nChyVcgBh/wTFKsm90+onA7QI/oxXQtz3xMbgEvmRy47+9CkvMEOtAkb5qcVT\nuqmTDxN5kWf6jKLoPSXYck8h/bKKL4+lBek+fXMjcAmNeKdZ0wsG8gbAjIDp\nlOC/S18OQxDUxEKRKOjYpBiB2Z/ijPa7esU6aVi2t3vbJLTsNDEp/nwVDtEC\nENH5tJZg8ZfudcEmmfzzdAoH3jFyi6/ZNKuqOZ6SFrMdBLknA+GH088kQiVX\n/9RhpltX6PeM74mE8Bv0hDATGMkIuVklgD2Jm2KXTnbCajtWUsHRYPE9tdcN\nzCOgu3gWxkwW/jej4pDET3kWa94A6qjEXo7/2RRbkClv6IMVi27PFaqen9SN\n6v62\r\n=roIL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/touch-target":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f19c86d13.0_1614036623625_0.9819007260580128","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/checkbox","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.60e892d79.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a802e7e3a858671fe41495ba116ec7f98720f84","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.60e892d79.0.tgz","fileCount":43,"integrity":"sha512-oTzQVprOKalPmWMXPJeH9GAdXIOs4PqRCFbOVTluEVBdUtlA7kWK5SXhl4MlTDyEOQ84Otj9ufw0a2iTlgLi2w==","signatures":[{"sig":"MEUCIQDUSqrIQxlKJZMPYpcmWRxaZlAe/z8Wk2FqPTOgBNkzFAIgQq2GL901eQSRd+tGiQRcPTWH9peYyENB6tn8zm+jQ5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFa7CRA9TVsSAnZWagAA+L4P/03RgqHek9ycF9ByKkUd\noPL1cIpEysqkDwy60yniSjSu/pU69oCYVq3txIwkTGi5QzfVNZHGoLuPfrXW\n2SMtkiv3TulehPqwzjGTJa2pK0RAowCub7tge7d77RlERptop6N5NvdHhLl7\n+ZJlEzDIXoKsDQNlGe43SGbzqhgWD+bEPqKLWmLru6sz9sZRrFCAKAJ3ZBu4\n0uMnXoZ8aPmTQZW2rXL45mg+i/tfypObKjLy06iS2C+3iTLC3NKETDr5+wh8\nSA07t43bVbO/0hYXGTjr1Whu47rOwoBrXl/GTThYSDjH61nq4jZKd3OK+XLL\nOh7HFsufVkcyz/9YxgFEPG17zf6/y5V8XMhlyMFHVafoDAOsLtSMbCwWjdoX\nINrziuUg1VLSDPJBjzUCjUeUHvjxRWz3xlIZ5HqXcWfzTZCkEcl8WOXUB7Cq\nlfQ85E5Nx2SYChqqJaCxdBbtdh82XToJq8b+6TZ/BMoln6hKTlg+BydnxASt\ncl2i5kucF/cZwk8PIThdX1NDZfDA0sQuKvPBI4P7itbCUHvA/S1B+bB97P2s\nuFPh3EQt3dbIDWOlk/FRB81Ei1LAYE9jjqRYeLtvmxOQvTI0qBe9EogibPyW\nNusomZqZuUlg7h+d+IaH2yzdKy/kDEHd0HKSIHKwuczYYL+bOYjDJtXnixTo\nwwWv\r\n=O7V/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/touch-target":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.60e892d79.0_1614042811257_0.3155034775207486","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/checkbox","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d637b36a3d3d3bf2befd94252e14492bf0aed30d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.c96bfa495.0.tgz","fileCount":43,"integrity":"sha512-GxCxMYv2KVmKd/G+pJWibmcmq/sqorBz8e2r54ctsMWbFbBYH5k2imnvYaTBkxndJIVPdU5gOEnssFgHis1t6g==","signatures":[{"sig":"MEYCIQDxBZpshJAeijZjozlVYzc52Z6TQ26GOksVrqiqH3VmJQIhAMsEplsZteR36lQMsnwyBmUOVET4W9hsOszgk2W6PoYI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhSCRA9TVsSAnZWagAAgV8QAI9eM7n+LcSZc8g8ugPV\nf9FgjHg0j/9Jiglv1Ve0J3duBZq1KQwR+ypfa8xB7wWU1u/as1MD+SCUW/qF\nkjIQ+pTewVzLNFOwozpVOb9dJpUueu5pyUNPT3pO8FbqLa99jflegfGwC+pU\nc2JAT1iMrwTchTySClwx42t8OcvJW/FVT3umZOQTstk1SJFdLXHGM4Tsp2Ni\nouaCfn6B5hd5mCooc8YLzgIxRRDm5Ddzc+fj49TNLhnvtT5BXglHzv+yOVE7\n2308nz8+OcofR0WNRNWIeUKrIrckZcxsdIHF2dmsJ8QU54eYejuQo4LB08Eg\nZRwyMFPM1dr56Kyvp+Uq+ShvlFK3CBGWEY1sKbXrwcKnOaqDSoGuxRC5oKhk\nS2FtONkfGNDdi9tp+W1cPd0XFp6Djgfu+ejSuUg+2JXCAj2z+G5Z6wNAsunN\nVbBQ35R9+9Sf6iKYU3V1b1iYSk+fpFKOSyfg5a87BHynjMGqdxiis9Jck8/b\nLH4fnOmKO61onjnUvptfD2gx/IhLsKElJEquI+bcj2wqWB1nO6uKOOONxOw6\njX8EWJRoivpwv5xt2r9cKN/gSUb+iVkSBzW4uPH/cyUVMP5NC0wV3QDEiT21\nWbFNzP4FY23cb6zmM7sO/0znTNzVGcKV2YWdyeaoIiYqzrSpdnVMnBLyH0UN\nTbG6\r\n=6l20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/touch-target":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.c96bfa495.0_1614108754078_0.7362883283237593","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/checkbox","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9373dd1c40108c7bb0ecad5ad0d56cf5681e78cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.fa9b59f67.0.tgz","fileCount":43,"integrity":"sha512-AlC4SDyXXXYP/Jq1WS4G0Kba8IHCFLc/ZBG1ioaFpHQnyQTx1Y5VGqAEvyBUTI8AmJ6y4m+ucyUBNoWjvN0xDg==","signatures":[{"sig":"MEQCIHiLu+jDRCR8AuPeUK7y7Uide6faT1bwtqM5R0wj4TceAiAnFKG418zij73LkESRnxUcqf/16HzTpynnA9Z5kAw7LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVilCRA9TVsSAnZWagAA0JcP/iRspY/B/eCHa69PM4e/\nH4H/X/EVo/OcxO2JDZqhOzGVQpW5k/4LqvIHgJO+GIPkdOHaQEEIPgqDTy5V\n6+OBxLPrqBQ6IRmfqZOK495y3iP0Bc7MBfjkGwHLnR4EPftw6eETQbZyzKoE\nA0mu1Nz3FslmGywnza1MZMHD150noKDnQE7F0CMEvQZ6MDqunE6GVPQbXLQN\nOeh7DSC25/pmCivDYp7whkCyAoN2PYNEfHwfDMLHDBJXhJjLxtyQNqcPbr8S\nLMbKLxBUyLE998E10/e2sEYYYFDy3j0l8v8QDCWzzVIkT7/UfHLWJZdU0HRp\nNNOP0Q5K1b57mKK7Z/e0tzdvLpkR28F2RIj9mK/AwezZRynwrIg1rGpGYfgG\nMqKQJpFa782hA8xAnzao0tWJ4yx3yppVNH9xn0oThdU8YQvFJwBke980Pp/P\nUfipo5IWkcGUF8mRGFzDNLH8N1w43Y7suoYFpjbKHxPFYxVWeTy6p9rADQV4\nMROuGkZKniGxGEpNHYR/BsEmbf11jZ+e4yMtmcSFHcrcTy+zR9Yu+0q4603a\nQQ0xWO90djpmZsVI/dqbc4FiCxoae1TKPXd6D67lwzPG3l2c+2wdvBITpX5O\nqPaRZDYSaTORcBC5BBibWQQ9fYRpKUnjJbFHnEQoQB6qJhLGU9nflbLbYfk2\nHngD\r\n=+KG7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/touch-target":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.fa9b59f67.0_1614108836503_0.1902371503944098","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/checkbox","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.869e3497c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d183f9e9b2d9af8ecd11ffa173666c5acfd6dd1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.869e3497c.0.tgz","fileCount":43,"integrity":"sha512-cFqKfgeXsNjDuSSsAAttLQcaW1cJ+jKZCznePRRpFfp4jx+gbjNeBAXUvBG9QDUKCAg0K/XtCcfFx4WDc+yk4A==","signatures":[{"sig":"MEUCIC72JqOLBvcByYlZLOeZTHHjS3qTxakWwnA1CttXrLnzAiEAsz96qfIIN4D1jThLEwQt1Xsz1VRJT/j46un3bbEf2A0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjUCRA9TVsSAnZWagAA0KwQAI+AvHXaZBnCNXWxMLz+\nXuGbCnQ3rDo6dH4QmE+w8YuwLoMi5csGqRs3WetP2/3hrzBqa+8HtVa5i8+C\nPDx1Ibns3hmkQbg+3NM7SBGOQAxoCg99dRMm5ZWy19c6cShlUNEO4VOovH0g\nkptPlTOVNTVH/TTmh50WBnrN0uCWn/1LWj4f8EW8+Fe48dm0sl/fsyRltQjZ\n/5up6/SKMuMTv8C2NYciyTr6bYDrVL8Of5rRUQ/SkzO9yMbRTKnuAGyQ7nf6\nn5g+JlBsd/W5vxMADp56Rf5l1XcV/SKqtxikxRKb0ReKhzi4vZQ2tgg8VscN\nAjRJiPFTs4g72VJQI30AE2WqvIGx+CXhfrUQiKAJCD4+e3HUsaGLiFc/MvUI\nOgMYrHf8UnAWcFwpWBwX/0kWMXUt+yckioQkbqcRUkzOLmb3FhTkLlag17Pa\nAX0BnGLaQc08LoYMmU2YWzEKRmJqWuve8W0NIn3wsLOFSQ+IjJ5EybY/iB1T\ncQMjZVvgT3VrRX//ixOxRsaJs92wVuH+EdUdD3qDlq/EESleVCevLDxBDFDW\nYNf4c1G+L9Zi+UzFkIjJvycOPnPIk562Dz8ABbecA/uGeJM7WKmkONZ3sMGw\nes11dzu+dVUBDdyvMemxRob+NI+vsx2vRPhphgyJcNEBvV5Fn20vrRxicWuM\nJQk5\r\n=3gT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/touch-target":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.869e3497c.0_1614108883645_0.8683740934397286","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/checkbox","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0c4a3ab37739bfc774ddc6ff125d78447dc8416","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":43,"integrity":"sha512-3gzeSGgTn53I8MMeDO2DvC7vV0g7/jI5Bo74T8s6UIpwxpIwAC05VaiOvNU0dG0Omu273rkRe7DYyL1sIsdd2A==","signatures":[{"sig":"MEYCIQCDUWv87VxnzKdtcjgWqexmHWZRTR07Vi5h7/Jfrwl44AIhAJ8ooCYiJeEbkbX2H8Yr1jtoeUguySZs+vD8rqJYXPMy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVx+CRA9TVsSAnZWagAAKigQAJDQghwEvtBRTImSEuvJ\nNubJqTqxLf83lfqQRm+zQr0ppvrUVw8MJReanvE2fy0WpIMYmbXBowyJrFHe\nKq/VgoNAhK9tWd7E/pA0Ol/oQ9JOw4S+YwAHZDVFIX3JCyvMbvzdFy1K3y9u\n2ciiwvEdNRJILtBefRgnCScHjtSb4FtMb+LxcVlQR7BneQUzhMeW12Q788kL\ntpsZ+D4d8oeywg46EiO4bR2xf8X0V2Q5GhVNMsgoKQ6S18Hwp/zv6lOWz8B/\nDj4uaw6qFVg57OAd9YFw2J+VhBVZPT94OJyFouxCmRYcqxk1fWYXIKycGbVo\nzWL4J31KgqZbqmN0HaldCjVmScbiIceEdUeOFCR5ujVeYP1R4ulAK4XkQaV/\nyjQdf6DRNiwgL+U7D2lcMEbcT13Eej6q5DJuKybBzt7VX0evEr/HUejt3fDi\nsV3vfA3Nn+XAHZRIvUDwnhgAd2aeQ5ETzMlGX9zXaOwrv7bgnTI4fWiFXZaq\noUnZ/wMrXQHDgi0MbBShSm9Q3eYYOAMhCXx8uh6IyihVr6+r/NRm9hiK/Jzp\nRez2lwwyVZuMAqMnQuxe4mCxjAzKhGu65bc7YtGuTHJrhWpaKLHZIZiePiKp\n7harz5KcYlaE4zWhvf6FLVIwgAe4af7Lb7J/JqDAjB/rze8beJ13Vcl6rehy\nJG6J\r\n=fMjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/touch-target":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.8ecd7c9a9.0_1614109822227_0.8577156879035273","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/checkbox","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33c9fec699f2bdaa9de2b0f075736a9915de2082","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.9c85d505b.0.tgz","fileCount":43,"integrity":"sha512-ZDgrzSh5dY1hd7x5fcMZGopd1V5YLBcSF2fmUqp/pIE76c3Jadt79MkR/snJ/zKOpqN7i1sB0/DjoKobczLceQ==","signatures":[{"sig":"MEUCIB7e/Q1BWYJJadqKm5hJrHpCm+VCSvR98n9429JVm7VgAiEA8KbrE1SJRQfAmzlbPuiIq4Ud3WHMhWAOMCwEUbc2yII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":681646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX51CRA9TVsSAnZWagAAK0UP/A9LQ0HOLav4NPy+yP7O\nJyn5X+E25tACUKKG8kiAmpd02JZVTRahlCsO6bci9VPWeDL5ZoRCrqJeR1jI\n8eZlbdALghdOa1dOceY/9gJvGqA6DuvBiSpT9wdAQ6p/KbJV58wQFA2vQ88f\nqVLAbo89GmKspJRYtZFD7Od+A85Yh5cqFQdUaL3Mw8YcR8ESlKMOkkKJCSJi\nQPzrKFJx8Ey+hVxe3o3wd7ANsNOlIKMAIDD2rncn8w2/enFjRgprlFl4DJg1\n9/Dh2fhYPTkYGhlUHauEorD0S0nAqT204h4qw26Q6oDp2g5UxxpTeDKa2Sbj\nshvRD7blowXYPTZzTO2kNeyxyzyKr2lbEUe2UklDANhskHsl9ooZgoFFXAMr\naqWaNWzn75cQxjkeWguZwpHSL7qgP3bAmxevlYB78t5ucVH5+CmgiJNzS9bf\nvNNpJF+p31qPAYf0JvXiNjotTgTq6jIKe52DCue6rVc1IZPeOyXoxeeY0n4r\n6BxC0m2DvUFOwRCPePR6zdlpHOSwIuWerys3hZhnZ8V4Y99SrlpCQq/NAp9G\nrh9WJ5jt+yB8688dzxQ63goi9UjWXKaOxm4/lziOEeqrKakQaOIP2AWItDO3\nhf1Fm7m2wNBQDsgEbeE3z51H201BGAFL/AhVXsNs5PNnFTxFoLNdTff+LheB\nFiEq\r\n=zVvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/touch-target":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.9c85d505b.0_1614118516853_0.11725183987273158","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/checkbox","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e57d0527b62607b6b9ca9625f4466af66d35132","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":43,"integrity":"sha512-Lrl9K/7e9EbUOaZVqdo91VGwgarU2/j9MV6Hyj/G7WhcOd/eAMSBeMt2oy964gqiiuptoLhFq6An+IMsFxvTYg==","signatures":[{"sig":"MEUCIQCcfboxemXumFC+8t/i4msvokq/IsDLScgsWtQICeXpXQIgFkGQCTDBB6NJD9a1EZ3aATUQJ5Fe1UdN2VERfhe5jcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbAxCRA9TVsSAnZWagAA7H8QAJeS/iPMIigARszVBzvR\n3BPugMmAttxOln+bWiP9A+490VvOG/+gppzRueKH5mo1ulQevAsSXpLGDvwj\nkKGv98jROQtGodMcU/YIId17XUicGBdWSSUqNiFhBB7TIzw95N9e+BJbRRWE\nPI/c0AGh6hqnXc7ESXcy+50RiBkTnyNEx2AjXIBsk3MIm6SI4wBGdAeKIAHN\n4ZF1fbzwEZvCM7o7+lUFH1PK9aFqUmSat4YwZf/eFVayCM6+ZUQRkaWDtqXf\nPwEntoMH3+D/gYw3CvXn7YJSyq3hPbCZgXm+7P0EflWdr1qVqCY4Cwv3y1YV\nVAeMj8RZPKGYnfURYDQ9OAvEOq2li6/ZzlHRa6qdtUqBMsvUwTuzeADW/JGL\nt2OwnkbwIzZZ6M/+Pumj6FUL4XFIypW6gywGNtOe2kLOLG3onvqS+R4dsUHl\nRHJE0Tj1wwJZucHWA60Zg8Y5LhS80s+6MhymAnRjI9oPTt0ek4sF2WMNFCZ/\neT53Vnc+ngma6RzrntPk2ukZfAaqhkylo/oZfhIHfYzQFcRMim6xM+l6MDPM\nTxmRwRDpXlMA5qxLiiSRB9o9YnOxLtmsGbUOhWAWAn96X9EBHqfg+wnmdHPx\nZ8wMh/r6483TLUtXWskMxmLOPCPrDxZJ6c2eH1A0qLB2KwOicj/eQQfU/6M4\nTzTK\r\n=5lEV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/touch-target":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.9f2e85fb8.0_1614131249410_0.5269353854677263","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/checkbox","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a42af5af709d385fa1e32a9256abf48b47e444c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.19c4f29ef.0.tgz","fileCount":43,"integrity":"sha512-1MP67Ym06ySJmr2N5fYPxUWD4e/dlZzbYOV5gZgLUIApDV/lEYdELYWNgHE2eX0A5ySt+E2lhryJFI3NSHCDcA==","signatures":[{"sig":"MEUCIG0J+f2qGJhjg0mVbPK4uR4sj6zsrccrkUwj7BmdeCj+AiEAl158bvEaFlJ5WVVnxJIUdvOUFreQvUmBzHdYHwjX1BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jmCRA9TVsSAnZWagAAXkAP+wcZgXRNlYM02ycBOQYn\nEcS6uKilnzu3y2zquthuVMW5d/TToMACh4BYN0e90mAiEe9NypOOwEIqkAVB\njZ2sjM6kz1jnNtplrqknaknrZ4TNz4AWv3WVzrPuG323+R2XTzJ0rUwHFetr\nP0DkIVEQ11IjfxH6ItyXq3XFxyrsw7MBOUhdEUJuS3RJ+5Fyl9BNBdN6UofK\nyC30yzV6yYYCdBTX4DaWDcg1mQcyIR+AjVPLg+w+1d8/70KRmWvf+NZygVoa\n9ocaeiCV5KiXeHVngQNXRUZfX9w/9/H+91SwtSQXAQdM+vQTtd71EJCXx7kM\nLY9N0wpE3mmto+yMzg4f2Bkghxye8FaBcquwJLTcrijifj/ooh9RPil5FTR8\n1s4nhBnnXBBVOcGhIyDTePURokj0zRy4Ji8dqG9Hincr8dTqhNIhGB+o3Qs5\njGnRYVUhch6k8kzK4dHgCCowuKeLYv+5XySPpJjWot0FLbKUeVDjcBmfqdlL\nB6NEoJFVTT7OxetNhYHKszfUOZElLZZ2VJEMTVaP5UJmjKoGo0iPV9P/HrD0\nczy6b09y4OL13Bw20Qy1Wy9D7MXk/S9yPyIKUAKZsu4NMIXOtl30lxDm0qV1\nCHCh8FHYba3hXiep3neNDzDrUSIzO3ORp6DQsqzD+ozwlKhcsMUiaWNPwfvu\nP534\r\n=J1CO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/touch-target":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.19c4f29ef.0_1614280933945_0.3857075819024327","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/checkbox","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9c992f70c9dc55930f91a026a0480b481639ec3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.63df6e9bf.0.tgz","fileCount":43,"integrity":"sha512-vFDOZ+fHCC2ECeF+IGUhK/kEbs9+lZwj3+gH2Qky0uJUrmVJSiQfWUb4QOo416khOK7UUaU5TtkQnxl9xynb+g==","signatures":[{"sig":"MEUCIDdFlFmH+CtOELDSduPEQzKiQHyfvf/ox2xNx/Dc4erJAiEA+VRYx84ZFFjBvsGJlJ1TsqwWh9SEBV+qOeP8aho8EqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xUCRA9TVsSAnZWagAA05sQAI8LRsvNSuIepo45qmu/\n+mpvCK/I72zqs2/DjUt2RiPGXaG+CMfseeLsONm03B+czjNyHSdqfAdqX75H\n149tpgOOtGO1Bi6EmJcVl8ZKELZHif+SRfx5Gun5eFctP9baf2hsSILy3iXC\ny+iaUSEqgsnGAHaJa3+DGmZdrlHg63x2C4O3WYKtg7IhcqWKnt79Y256H8KR\n+G9Y3rUD52WJxqNLphZixkg3NDVmrXd8YQA0D9Xbec0PWfDwkFtsia9xip2w\n0hNG9dOmcWcUMWWeaDWzviKCtRcPHe+50jVLXDkSx59AY3r5KqYrifzKWDG9\noBrVZbKPalV12GBI8I1OUOGegWzfcU+Nul1zGHWTKBcFP+nm/dk/aonJ2lnX\ndaPWWSaCqhfK2Ez4Bx0BFznTcWvRZMbACYJGpkcVtrmmT3VHy77uslmFI2mg\n21sUo3AtfRofT6PU1rOcU5yTCc4KHbwruMAiqBv4t0wLWP6pSzQhn3NKgoP6\n/bf5SPiSV5C1yHOSMp4hcnmq9LOW+XAqGsTlzoVmYwe+JW6Sl5X1GPwJcxby\nrHEPsXNw4DdDtal/uyyvKKA0XxLVLKQjmHRk9WAVNXHsslUpttIc/9hnZPi8\nEoMVawvZsrOB6TeVazXZCU/rMMeTkK80IrO7Y0Mus1yV9cp7koZXYXB5cFVT\nOpE/\r\n=zWIJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/touch-target":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.63df6e9bf.0_1614281811954_0.6001349243128109","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/checkbox","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.981ad970a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54f70098a0c0c5c720c2c6a7457f43cad8aab343","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.981ad970a.0.tgz","fileCount":43,"integrity":"sha512-sLYgMqvkAWa75Sd5SaBZtezY7f+6tqz5eiMhkDwoVoRTjzNck69mNM/dn3tAq8wROZm4qQsJ1E9JpBIryv509Q==","signatures":[{"sig":"MEQCIChn9hPo+TogY5JujBKdN2v6Q8vGvicuxcl34dkEsUMDAiB+aE8Wd6lfuqIQXg21azDwwPp9NfgCfO3GTgYmhsPzfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODunCRA9TVsSAnZWagAAzngP/RFvbzxgxh/HT4rhj29C\njuPn+jwonv8tm6fcDSDF4sBCKmiwlOg8K44TD2NZnHluxXHLo1pWASMNYm3+\nokDerv4C927HXckd8MCoOdIm3YtMW6A6iISVenVlk9kXt8RxgVXXDV1img87\nL/Wzk+KQ1BAFqTsndbz6zHTPUc8k833VpbcrdlbZYSZcLtYp7jQdvxXKHQ6q\nuA2DRpLRtWszx1DKOtMwa5LJiEFar6Kl4Wz19mqtutMqLGGdksVxk9X3QL9E\ntqo+0A1/5UYVcspJQmci00/qj1DdJuZmWOFHyOmbvkv25JCQfS9ZcP1IL8Kn\n9dUEuH+be9KhC9rh0LQe6NYuDHnwwDebTzeYmoH/OvmiXpzvuxB2ANxGEhcG\nMjfMBvBrC7qDH8xtw57ie1mF9vSwwN7pm0Y8eELf++pISwcDN6Yr1B9bx+cH\n+njaZ4tZi0ikOuvzoThiDatn0G5wpSh0elv2c65BGoTf1YryD3KRsM+PcAkQ\nXQ2RzCnWk+/jompl5hiLTCeNGJFJ8JOAJGZ8oN/xGofpl1A6At1QWmjkZSwo\nYDMbX6lLaQufWySlaMNWjn9tY/+DRPb9+gE4LydqieRs/n5bjAnoGDXR3k/I\n/7X5wd7SW2OAbTY++ovz94RPLWzgJs/1mxxzglJbrFt1oDvKwYcm4y5FH8fk\nJwKW\r\n=Bgey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/touch-target":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.981ad970a.0_1614298022074_0.10021338487423659","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/checkbox","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa83fb4290c9082a8a66ae36f977781e2d658985","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":43,"integrity":"sha512-AlB1K6rqL+NZIdMH5iMq5iuCEtcXOGcWPXQBvDzVpYzhcqNXcGfgWcTWj38fup8cQGJZNvxJ+6/sYZmmNJxlAw==","signatures":[{"sig":"MEUCIDIZUERcHQ2oeedCyfs/88WbfBGrybnhh93zf27SnL2cAiEA3QDMdH7FDeEGdc/YSV79lF4gJ1J41tI8uttGqE27Acw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAyCRA9TVsSAnZWagAAeKoP/3cCwF7FYx5nogpJB6ny\nX7+RkE2TdF+sFwucj/3ahk4qytbSRTg5J3ZwsjgM0GEou/icgdbub4Zj4kAa\nCyOnzEd1dRKrP3ESoj1NkDXgUgX4g60bEOfRbFqfNoAgr8CBYmOCBwjRl57O\ndZqCN00ZRf3NvhWmfKVGX0n1Yzm/6bamO3jpd0U87ReUhSGb6EaAetsmDR7/\n9tRMzA4a0rgMh5p+ir76sEqKANYc3+NK0Op6apLc3J4v4aLFYoUzQ74r1Y7l\niEtci1AgSegQTHtU6f8Gx296BvCFfq8D3Kj3qMvWEjVd+6IAsEKJ9JLcERU9\nIn/WRgchG/4HO7yCmbmXN+xVJTlAs3yhqihKreVIswGqeCuXed+3kN0gmMia\nllYkCBXzpXIAqQZfQCBP4AH81TsxVFLYJlEu62vSlT/9dVqenrvTooxhixUp\nQJgom774Knzcc8pSqXWyejA4Z7WcR7Z/VNPER3uH4mn6U5wtd6pv1vRaDCZR\nIc61t58kbJYz3hE5eIJkQ+K88PIo2g24i/Ojliy7pGmdu38NMgbBZLOV7jUy\n+SW5fssmXY+F4a+SsVp2eRMwROJbUgC4F9CfLti1Z7n1fVGP6AJJvalr7f+l\nUCDd+qVgrrGp+XeECPTYWpwtjVPzxVppHDoTij/L3i4wJTGxGiBtMMZ0v3Rs\nx2mI\r\n=IUyV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/touch-target":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f9c9e39d6.0_1614364721462_0.6165132115781322","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/checkbox","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ca2f872e2b6a2f32d24be4cc25a76bb5bdc90f2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.c97d7d881.0.tgz","fileCount":43,"integrity":"sha512-MOPMJ3t8rsDnroM+Gd9Sdwqtuo9WreSsmk4EtwziiMdlRoPtQYlZHdxo3644c9/2lycC0K8LBtlYC4uxMSD6pA==","signatures":[{"sig":"MEQCIC4G+jHKvXTwIU0nyKvvS1lG0gVMwdCD2no8TD4XUS2VAiA3hetyAQasDAV4ODaP+DIY1qMnbUCM39ZaRHIWA6+9Kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQuCRA9TVsSAnZWagAAKXIP/0yJJCuEGi9aO1ZgiuVT\njpL2TxtzKsiZw5iUTR3EN33ydm1AS1Ms254LBom5LT/f6hm7MexThje8vpOy\nWt9Ntl0f3Gx92/JdN3QPNmhcWdb1P12GYl1lAWH89ilhKLkJHKTtPzqMrLCA\nM66KsgeN3v8W1sTbEWN/+SuHiOFcb58t/wA1NV96FnrJ4jZtm4vSSTtVi6Gs\nhxPNs+NUSRBfSK69PoI+tKSsmQsAZs4zxOcWn0EGFNQbucqTseYgACT2JzvC\nFf60T/oamkVsFdo3ZgbgTHKmCAWUKLmF1oIXEymjCrOGNe2UJBp4Po+N/dgm\n3OlUC6fE3Fq/C7ChyidcnpSbpEh5sNSKQ9KpotERvH5gvCSnXMSJmkh1Veq1\nFelHFaeQoawN3DskkWx6hC78MSPqeXvzSzZihnr/JlhCX6IEmC4LSRyv4OXM\njMYcuCmSPS6mc6fADvwOVYNxtymJNrcnI5qKUOns6OAgxY5JHMHrgAWP0PrW\nM8Z7K3Mn2JDFBlI/6++o6ToYn7nZXBu7852TY0U8z0yUWJ94iOJS1a+rXHf1\nRYCXgnEJ9mgSGYt991izL64n/4fom6Q0kwBvNXtTbbkaZkGF4Sk9gy+1k0MT\nov1Wd4K8xUT296Xm6YkTkXYHJHcE+cvV7FHcmmW64a44xXPo3n5anFL0WPS1\n+SEe\r\n=uBT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/touch-target":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.c97d7d881.0_1614631982061_0.9799496223465187","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/checkbox","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1cb4cde9d93f3212e0aa60a939d9c0143338c63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.bf670dad7.0.tgz","fileCount":43,"integrity":"sha512-8NfcsRyWiHADZdVOzW7D+8eKeI4d4nvhIgYFUT/ADHGw1ZepqNQV6CV2NyPdBNhZOSZ2Uk0rDmjTQwW3QLTKjw==","signatures":[{"sig":"MEUCIQDy0dL/4Gy6l4E4eJsGQPD6YLMMoPZTpS8PTValdgkX9AIgEb8sRCOk3OGjgfZB98+OLXOIhIeWnJ4n/TfMb64O1kU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZVCRA9TVsSAnZWagAAfWwP/1XDLc8eNsz3sOrDhA5o\npPDL8VMICBcBrOnlINeii5R5OtZHB2+sYAzcqs+dzVLnnGaWKHTMZRC9md/q\nESmwD58H9Y9cLx7KLeoXZ9wFqh9+nA3zJjpuSulyONGK/59huS3J4J3433fa\nR81cCZH3t98KVQGfLfE2d+xZHjX2LrfucwiPsq6lyzIRC0qSKuRoq8TM/7pT\nInX3AU2krmJFZ2ZGWIJ7TXprEobgUkFZenHuPWxySneek1/N5GwvE8Cue1Fb\n4xuMF86lgOEsZ/a6X/irm7DwM+ASEQ8HhJXMb/qecKG0y5+Dvol7cIFQqGkj\nFw0LqyQMakqgGrPQK1Yj2LjCWq/bXbC83+4T+CaEvyXCFy0RGy3UXZlLYaKO\nRhOzThlwA06bJV/O5ALQ4cTUNtCiGHpEzf1uLTwESWab0kypTf/B49rnfkXP\nOmdIGebqAIn67KwANTQgzJWXxcRzURwVh4HeOWxsNwQ2A7335zddimT51xV0\nT2sXRb0WOcVd8RUnepBmy68/e8HTGxA2FvYrBV1Cv3oWAoNJbvjWcROmHD8A\n301mtKZDGlXSF1l9PCdLOjcwTwN7Nj5zNyHGtIDKZd/IwL5NhYNrKG5Gp07G\nQPafydpIwHRUE4XeVj7upEhQa0SZS3RgKsJcqrmCHxrhMM6RSpWyhu958grF\nZzdT\r\n=ccPv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/touch-target":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.bf670dad7.0_1614730836451_0.3323824243931297","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/checkbox","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45d8f9a95e99a1e7b7dd73766edea6d0bf173f81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.c7d98fcde.0.tgz","fileCount":43,"integrity":"sha512-UsG/MTum3/FmeH+EAqWz1rzG4DRVvxEtNF7unUsuAYCwzfrcESywpeGFrjWsAYV99rduVDy9yjt5V6ilEk+Eow==","signatures":[{"sig":"MEQCIHTUPJEkKsVZyvveQeLlKVJDLYTdJg9J665kM879QlgYAiAy3De5SRU9xLHBh++Q31C7pv2pkAWO2b+8u5xiZdTkew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/IgCRA9TVsSAnZWagAANuEP/3EWC0OwFvQRR60kS6on\nUvvXwbliN+AYmhhJYybUwtSE0eK/I6X1xvwUwXublMVlqmDvfJ1I5VG9AwU+\nVK7Gt8gN2NSuqJpU/drNrNMcnNfjibUqp3jPl0Z/nfebxgGzgtS0OVcclLsJ\nrwjSIRzBRZ8G0NlJx4Gc+C8gLL1EUSC30GjeeSyHrz60XfiicliYdrpZLAd1\nDPf3yYWWuxQRfmh2/QZDv58I14c/gAFY+KPb0hr1n/DF2zSoqLnxnmS9h+nm\n0dzwD/OTRCfasMl7PGE8c1EoAq/Hzj2TJY+u81gxq3u06UIJJiFMy/NKpd7H\nu0g2TJsUeJ+K72oLPAOGAfFXHF5iW6JcSMq9aF7wNa5xkJyaXMkli6zOtGzc\naMYZMv28sYcsS9Id1Q666fs6LHPogvd+6P9AvFi9mmRelnL6Q6mvpnSfTGt7\nScNm3hv9iGGCgn+PBNWfKKGMLBJ9vu9AKqFJ54SwTJglAZmK09si21UH4uqU\nZMKZiv2N8yCoex/YyTYN41gftxb9C7W/w9Y1iMM/Lew9feDqs8qwRGHmzqRV\ncFK/VeLrlbVHQvy7xG0GbS8IAtBovfOtOYsncZRUwovqdFlPMJ9bfKPmars7\nLAIumoxKAM/p3pS/WgqPLgNmDc3D93bTZ3WB4r88CoPpjDpUAGRq6kiDmrzU\nVFpU\r\n=JgxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"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/density":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/touch-target":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.c7d98fcde.0_1614803487923_0.5795610567977239","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/checkbox","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12f321e776422a4d2a1b9a00a778eef0f2e09aa6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":43,"integrity":"sha512-ACvomEelYllEWQIpTV+krVZzZmlRHsynQWf+5XfzYiXrZdP9grSy0QLottMf8e0aIKBUPAg4DoXtLY2oyeshcg==","signatures":[{"sig":"MEYCIQD3Lo9kdqG4XC73aNBOMl7AQ1itUAiAZkzSvIkOBYyP3gIhAM7JxOoii+GTNFHm2ja9WrZ+W15La/5Z4fXp9ArpKh6p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqNCRA9TVsSAnZWagAA99YQAJoJ3dJNpHF26CGfa9TP\n8RIEuRfnHdG6pK1DXyENf1JADV6neRsjcjN16JfrI9QSkpHkA3VN+16nzWGI\nlC9T5k/MJtgSrTun+huBskt1f6YWBcU73k4oyqyqzb7fS6f+F71e5UTQMHy7\n/FjRYHw/qLP2shNQ7y+vDWdo3+yg38rCiXSDNajJHURUe+oPXbpvrCagjsn8\nGpYT/WY1OIWCjB2f5gvzblSzfVCGWdh8/uXHBZ8thiTtCL1ksgBi4YksE+gK\no5HymkMjzEzaLMONRc2kIez3IK7BOFlZIRRuNizIiq4ZvpYfPdTUN6GOZCtG\nTZuf3QuU/MWrIOjLwnKhVatsx4eKOkBlwbU8BKnLQuGZv71NvjmCPW97iutn\nlRsAt9MOuiwwFLRQHTUs/LwWI4sttTuwLIzKyMPMR3Q/4idkKx27hYUIxwHu\nIFQY7iBGvQ97glmKCnbECHAlawHBFUwkeBiUXySQ7rVpLOpEn66VlklxnqRO\nh3OhsEYwPxLt269s5qCHDUqFAndQI8czXr71z3PGZz5r0R+gJRHml57/dWBY\nHA9PhzgQl+/MVQP8h7piN4/vjKkoKWwpHDAB/zcl3HfnPDwZ60ZdwBJQ+R9f\nuVCUd17HKW+VMOnB8kxGsae7J8wn5d9FUesJQJyJ/i3kSVKsMreNcf4qVZwN\nwj7U\r\n=eLYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/touch-target":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.4fef8bc1e.0_1614813836714_0.15818299506516187","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/checkbox","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6faff946050baf6651d045de7d5d9dfb4440ea6b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.afae3a3ec.0.tgz","fileCount":43,"integrity":"sha512-D69+d3an8onfc8ZEqlSksCR04tfbn//Nc0sDF0mZwMNq5rAL4/LIGyUJUJHaDkj4PlfYDEtubDhj5SqDilAPaQ==","signatures":[{"sig":"MEQCIAoxrE0i4vOJi8s8R0PenxPi8C+XDtANdRSTQt3Gtb9+AiAqp4lIdL/DYIAXFQqELdP+twFr22lOhBNDcIYHzTq7uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7GCRA9TVsSAnZWagAABlAQAKUqCPaRIsmPe8Ob9adW\nV2wZcB0k5zjB7QlsCvXe2mLiX0/7YXbRepM39a9c8rGR43K6N18eioyJPHuM\nOfONhKK50yE9LRV5E6zeE7MSDRXUlsq4/QJtWZO6NIlMC05L2lv05y+5FJuz\nFas7wR3+TP/inZycAcsVrMc73GKW5Abr7y99/aeNVVquguevxeA31VUASf8J\nG6EB+Gi/fwd7b5l+N11qhs59fk8OEcD0pwRPHNjc4TBsAz0DG2Qo24DSnroJ\nTfGKMImUghgPDFRjs2t15piPFDlcyeJ37E6oEH+aoOCMHrVpo6N/YCMHEnRA\n+X3z93ojSqy1NpAN37WefoFGyjSIdD6G6boqnGSCjLX68hA1U71mrK7UzIrY\nip2eYxvPTZPbY1YFLvmhxRpJAx1YvdmsaankYvWbJuGWHpoVq3wRnQDd28yE\nrqXCCT0aWS6p9gtWgDAg4h4z1LvwMGMgwz4xP2HyZHEo7QffY5r0SMSW9llK\n5G3ANA7jDOLjRp6YXDeb/aYzk3tuLBKA+4Qlg6AslapL/7altERffLPqoYpV\nlmWiQYHgaGmPucFT/uh7LSmefDhBh2iuoM6uQcptwlcsZ0SsKWLwcREQu7Xk\nXTcGj+86CLbywpBeV8jW5R5W0pqZtt8NON3TaBuwbmONU0OnetLQDcwRy6Wu\nax6Z\r\n=6ZSR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/touch-target":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.afae3a3ec.0_1614814917476_0.27564008340430957","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/checkbox","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bf22002684473d59f75d1424dab543b06bad83c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0a0b10f22.0.tgz","fileCount":43,"integrity":"sha512-kpbCLNm7s+9aSbPlwMK0s+Ogoj1N+psco2/Q56T3MEuulYR7eFrNsjwMe79J6SOjlWb+npsTFMxuLuDNRZTJTQ==","signatures":[{"sig":"MEUCIQCrMzm14lVdflbYmSLkvdzVajnTIo0aW0kTMUKRQTCDhQIgG6/jBeuCWn+TyQLt2B8n+kobIvW50Hpf4R7BtV+JMIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCMuCRA9TVsSAnZWagAAFqcP/1qKRNk0++sC1AHhXyNz\n6HlbY8fCHI37PtdnbyIzEsM2O/yCwji1L41q9zZtm6PzWzMU3fkILKsW0JgR\nLn4vIjZntAldZZDSh0Wzwi4DsCp3kwpfr3iKr2liCwhzWe1bAQ/UYj+oCSrN\n4ShFhfOZXCdUVapLdhAnunvFOhKEwE2BWqRpaR0kQKh5GTy0ogcsErWSarOp\nwBWQvPVLYZqMZsWIQI0tCn2P4MAMOVa/HjZOV5Uu65j0NDwbXzZXRwAGbVBH\nWdxdZXKpuajulZN4z6Ns8t3h+HFXjUIZQgxZB06PajcQS8ynatQCRP5nzZ2G\nWlbEC5DwTOHmxxEAdjDMucdkgZeuuuoJvTht3Kf1k9F5vVpsNn3HhXk2zIFo\nKasbdSkwW7uiTOql6DmoCbaIrrCCZsOCV640iW8dAwfJ4+/DlAJycH29/dkf\nuQPmqHfIHsS1UFYbzy6JGnSbhV4Eh+ZkV0QGqETZ+OO1XJDIp2g3m7Dm1qhC\n9JqNm7MJcmqALlGgGfE8JT+kiuMgU98ch7GcFNFV+XKXwMKiP5fcKkki+f22\nQgVsQme8Nk5zvW0enyMp0pa4wUw2F6WYgyUea8EybL/xhYzgmVOvziAIhz3M\nkRWNCIOJ8Gd2ta8WyUvVEGdkeRgbe1bEebTyp2gsw42s8wHoUtoXVCawfUAd\nLPPT\r\n=Mr93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/touch-target":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0a0b10f22.0_1614816046184_0.9196898492114833","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/checkbox","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b929be64b440f2bc96b1e0ba9adb5a29de72e119","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.6f678a91a.0.tgz","fileCount":43,"integrity":"sha512-JMs9LdBt9Az3KnV3mbyFZihGLwu5XMMVacJBD98IPo7bIQFdlI0sE3LSzYYgIPHvBkMPEcc8Z4OhwpmfRqKxxA==","signatures":[{"sig":"MEUCIDw7en3zUuKSWxPIFxs/Srmf7QeDZVDgFzRwyt1wvJUBAiEAieH3EvZlqsFWwh0K6oHAIawE/ron8yIDqgNMYZzjRI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSlxCRA9TVsSAnZWagAAQnsP/2QcGFdWqP/H3sJk1Ii6\n0NIyf7BaIQvslqosSXZ+ec9Je/6FrbW3OqO2I+6XZvYNKTeUYuxz8flQ5H8p\ns/CIBIkAgbkwVBxCrYkPEY+Nlqnrxyl9lUlVcb/M5QrH0K+saZSl+PR89ixK\nv1nRCeTx3OoxvZ05kVJjp5eWlJOqSzuecOqJ2cPqkGVX+1gzvJWqNukzLMj+\nv1BW/u49KmiC4t7YJXEJKvuFYAHijY9ZQzA7PdaLOHrkmJxO1eW5se26iT+L\nCFifaDovVc0qBnFJN47UisA7aMeHluhT2N/morQRy9n5wGijd4qPykqOH2WN\nrZlPBrZ8A3lvIMqkl2zNa9MI9IepKxw+mA9ox9ftZMJuC8nC7cNetTyLZmxA\nKC8g2iHeouKq9U49w3NOlPEZSkSiV+m8FMhh+fMMMkSgkw0xNDEvKcC2w76L\nb6J5ryabF5D7keixHANN54mNljTwAruNkx0peufRh4RW2kXosH1JRWAvC8jJ\nvaVlszHoDSWAQHRnbSRD/0uCLlNTAwU8P6xeRPa14KJA4Mx4QYP3fTUJ+God\nvKJkw2mNfbHAgNGBfThKj3LwOFwlvyVXCEDRQCLHWk7Z3E1WyUGm5kKpRnz7\n1H+A8wXwSuAZ1Jl/lFCR9escjsm9mN4URLCUSAySWH6S/AaaH9ibs6hGdlvV\n3znb\r\n=pzGU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/touch-target":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.6f678a91a.0_1614883184367_0.22979746683583913","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/checkbox","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20b214d5ff5a93f1f579a38f49782fd51fc4dd48","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f5f1b613c.0.tgz","fileCount":43,"integrity":"sha512-m7TQgotwWMR6MImQr1/SMvSAhM8OvoO/tWB0b7uXyprrLa8sU8Hnf7/RqdMnWCvBRlxJ0n1k74pObEnKaVdCRQ==","signatures":[{"sig":"MEUCIQCLmtOBqeZy+Es/96oyXEUpJzcMB53kuzTe63xoNTrvhAIgLfJG01P7bQ2Z1TWe2yhrac9K7PB4WRv0QUdDEU2Xuxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfFCRA9TVsSAnZWagAAtf8QAJhSwaBj1bpUH5Xs9hB1\nqGZ9YBMLmbVm/abtx3rHIKFndKhgIb5En3QXTLMH4IyUMI0s7JBh8Z0TvFgn\nRGT1qQnLbzplyPAj+umtIweM2WezLEU4lrILBv6qcoqG3HkpJwmHH87QEYCV\n3fzBu9CMw4pmHTg/KstsvASmXMIZAnnoc6Hifijdt8e+osn76ScD+r+qyJIx\ng6uGSVJXyc5PBDUCdm2EsIqJzFKA7PRs9gFMhAaT7o8HVAZTEvjx8Nz5kecI\nKbkDNcz1CwSiurJtizQkjcHakAd36CNJAuqbuCP8ZhrBAyYZ7MvKOmihcmrA\nNFGU4cS3SqQfbqw1wEdjqB+NnszUxYTqVH+8ppH0ZnBKnTiGyd3QVLqY4s7n\nJE2XGG8G/TxIwjjdewbSqc2HRYPPWAvU2gkF/jVLWP3lHHSta3RLGlYRwDRi\nPQp3e85MAWvPOUUaCZYvsQ0/PqTnkinGxs8CWsOn/4PWufHs2Oi9gJdCcdrY\nhmwHwcUXLHt/l0swnVNBgBq2PdOzNxVISO2Nr0aK/RnvO807cAKm+W1LU9TM\nYRouHdeBFa66r1fDY26b/3Q2eTusgHzH80RMLDttNLQsMtCfxe4x/EWWD/4U\nlAYXM++9njHCMCQrihXUj+g27hNBcthh76n1dyM0YoErVGMMvLQpBw3xxceV\nvGTo\r\n=pxtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/touch-target":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f5f1b613c.0_1614890949395_0.29236161880788414","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/checkbox","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.606e767ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ec97228bae10acbd77aea9f63c9a05a230149c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.606e767ef.0.tgz","fileCount":43,"integrity":"sha512-ida9IFpecdra2kt8/KuUZ57pJxfWpNmd6ku9Ez950hppFl9n+VXqfe2bJ3bmUT2x4FBNir+wpkln81Ex4gNRrw==","signatures":[{"sig":"MEUCIQDuqcp/anKxa2qeuKE/wflIgGi+Qn0m3DcSDuGqvLacVAIgb0sODa3XHyjtzQGr9S34fbs/Zq4uirN0z+wC5C2k1Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVTgCRA9TVsSAnZWagAAa/MQAI8d7v9P0ukerzEQ4i64\n8uEzRXuGCaEPWMveZb2pvLl15h/V1Z1A8+Cs98v1weva31zVlJX1nY5JeSp7\nAK5QkbR/PnCtvgOZsXhudrmcHYV2G6TO5JppvgN4B1GIhbUCg8rmbsTRkUHv\n8lRJdtprpHUH9l2h//LWyiy6z6Ii/zmKv/09IU5MsAerdRx/1XY3+NMQg/Va\nS7uf3Is9sUvnF5uTy9GDp2nhgzZKUFixWdZCx1ipjeKiE4Q2y59HUTESvTYz\nh3hCRaL2AI9MSP7NTV8S9dxXlR5PI/LsUL+1q6/l8bs1JPX+9hn+tDCiyy/z\nQQvAQ2yV6YURlqf+Go6N8nO5NmlY34kUDgwsOwDLCJ1+MzrnYOZ1URij4snK\nWQIldB83tcubFtYE1iBaOrsmI7oA4FAiaV46H4rnrAWFJOmT3KnIVFq4DxYS\nm34VBu9sBboaY0fNacIeJ9EdlCHAy2DHWFWA/MaB25Cv0RLSqOlZwsgjxE0P\nBGwu96QOjtKiWBkL5KlMx7ynNr5lTQoeGmlR0Qje2pI4052Bkkqiij4BbSFI\nxCQQMUU7l5Iej0F1IO7tRneensFUIj1Etr566wNnbAkV5FVZDj5XCEeXnPJH\nBg32L08ClS9pBGxsDgSYQdrYHPr0COAHQSIy6YHq16nwNRmOwLVRYs8nwb5V\nD9Db\r\n=bmqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/touch-target":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.606e767ef.0_1614894304112_0.1106852570606045","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/checkbox","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8beab5f4a18be7fd3ca33cb65f798d575bf33fbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":43,"integrity":"sha512-nZTqY5Wsz39gwBD+Mj7I5jZux/04hlBn3zsb6KzsFO8ZCxnYu3KZyJE8NnSgTXitw/Ivp8LUatmQuweazLc0bg==","signatures":[{"sig":"MEYCIQCjn8pTJMy/IziWGC0HI5ouD0753plHjX9kIcxXPenLvQIhAMFjjoS7POc0pbbRjaZfcJi+mgE9nBjGgt+xnpwQpTac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQweICRA9TVsSAnZWagAAyTUP/0N+KDAiWuY0nWY6ny0I\nuE4MGdHbZJPxaBeDpUaMiQFFB4/g4+mX64jRYO0qcRTvy6NrVlZzT0GCqvIJ\ndEcVIhylm2Kh5kQUbxF1cDSI/nkvphcu+pv6xKtYnTODd/SzN7mjVkysZAG1\nvmIi/5YLZhl/pvBc9a35HU5PdvvNUJj4T6kwlpf6IAF0YvUN/YFMfYGJqXCv\n35sxaQ3bztJp4zfheL4f7Cms9figqmfznemSKPxbX8yxs6HRURY4hkt0iOhi\nmO8FQJdu9caYa87wkhMghinxeL3v8gijtI7uq21RYrnqkD4FNPjVkGbZtYjH\nW9W9i9fMw1uE7D2YGJS7/mwReLNOcZj4pFzbFAMgLFDlZgozDBKTOptJY5lJ\nHn3McY6IxqrKLxDdKaoJ/qCnEGZHUp6VoGFymj8jXp+HI/gzTp6bAgBMLnE3\nyjUCpGhaccs0XmOy9eg+Sz5W34nbBTYaiYEo4Pn00h6EbkNVUubqTC16K1t7\ntkzJI10FgInsvDV/cJsMnbovilyC4o0SNFGtib2g200Kd1M/i3/GxO/nYyxB\ncaZWtrAeCcwn/YsUFj77smLH2XmgJ5Wbyqy7RCsYunFmprD5aDdd4a4eR6k3\nswNf+6NKQ5F/9LzRJhM3CPorashHDmEOQPVwj5Jwr5pGuiRsqi8HG60MMyEO\nseAg\r\n=I1QI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/touch-target":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f77a4dd1a.0_1615005575580_0.8001988737264372","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/checkbox","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8191b5796e5cff73769160c3650d73ee2dfed602","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":43,"integrity":"sha512-eaXMDOOppevD+gKRzw6R+DVFZjW6PT85i/FU90dvxxgW2g9jDefZQgtjOYo+w2EblfnabGXwcBr4mNrg09SXnw==","signatures":[{"sig":"MEQCIEj/Er62isUTo7rC9NjDBJ4gxN3PFot0/ApPSE/C2VkyAiB0/+394v2xda/lKi9xTAvJyNdkj1biiCIHLLKmM1iOQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqimCRA9TVsSAnZWagAAQg4P/ifneU1y+cFAq3tguMVM\nxN7MGgvgFhrdn8n0duFwRFgaJaNsTetSBY9oLDZS10fJYDJXh00drwm7ybBO\ncSnknr+G4IY8kqWXugn6h3J4eYMTqtr4x5xVutXdlFJI3O7d9XbAeR6xtNa7\nvc65RwEW1y6aCqJ7y0j/8urxBTU6C6I5v+DW0Jq0a4DZ3FuXD7KVVTYV56G1\nP35wqFDjJcMKMtUCjOywgAfbu6cH/J1gUSUi/r78I1//PQB/9haVmqKnpc+0\nJw0IF3LxGZlWAZd+wJ1qPQxgt4zsQ6zf42LGnJAvIdekT8jPjRqonqnwQWQS\n+KWCo/K4FMT/1kgQJ9m3MQoDWqUPT4C3uC6PsMYAkh5IPT/hxuaeP+ba2Z7d\n8GlQmPSzFlozj5XZlsehNI6FVe2eWkbfcFcbJVcPu6Rrhw79lalUqZFCCS02\nOAH2E/+o8jhyiuiQVBddC50IhIxTUwjOvS/4RuFs3bZnL9JpyA2NWFEkahnN\nTFpHg6evnOfDzp8Hy5BxohCo4DBOjS0uqWKjbHCcge/Dd+PBaqFBPp/zWdRf\nZ+0hWzU797c7OsOJjLVIQMDTnklGDroTfvzuDjKqNwkXzpr6FcvS+KpsMag8\nhkHdVgpULV3iQMW4R6TLdzHmYJvyURVbfViTpmWnmZ4muevub6nSrZO3hP1H\nuSsh\r\n=URkv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/touch-target":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.2d6ba2c23.0_1615243429566_0.20187944878479214","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/checkbox","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aea5d64fae946134d48908817fefc9b546cf3cc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.7522dcaca.0.tgz","fileCount":43,"integrity":"sha512-jCqC+Lq04DzX59FlVmDAlUA+UaRuReqwzJ2f36jGdEaJDju9EumpnJJwquhCgrCx8tGVqscuW+uy6BdM489CVQ==","signatures":[{"sig":"MEUCIDqa9EpmDNCSqzRNxD3zGiBlBjLs0LcTThlsaGwqQr8AAiEA/M+8HjoRwg4s+THdR4eC0KhqyVqE9/ovEhZQw1fXUpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDjCRA9TVsSAnZWagAAj+kP/ReEKmm7w8mMSf0QU9mk\nNP66V8S1ysItXC5h4Gsd9dvu1hXWlZeaPnJxUUPDE5IIro3faCcMLcdWujbJ\nSxkHoEILSDXnhG+0LUBIEc0bFR9lJ+sVsZUjrVPKa2YpPFh+x4B1d5cF9sHQ\nwt6uZrIMWg/U7xc7GtlE09ynCi0L9VJOlW2UTIZNfdsieb+tTVl1ZdQjSKgo\n5T+WU5FlV+YgmeGFP2RimUzcnqxJ451pfePEhCtCdd12QoqDZSgXGf1nCyjH\nCPzVVp047DChSI7PqGA1siEZA2rS/4ItcqWHKccxhXg3njEFjV3CD28+tMy8\nF3SU0hbXoLWxegLcQbVAhxVx32/XnMYgwpOdhskdZjLZ/8iYSMzGZ8NPBVwf\nHkvwY0ZmvANE1efj8dAqwkilxYLdxF8+tsnvW7653Xtdzfea9gPGhAJY7ig0\nnT1ekEoPSmRf7t4nS2RLHk79rzMmDkqWI1Bd0hL8+9UWuc4DnTBcRAdHj0az\noesnqhHTNTidUOWvNMO+OYtZeksw8owAJmnTMdxC8dMFn0Z0fBMHze6kMt6T\n61m3BKh0I3vlhvgcQsb8GMWM2zqQ/MeS4RNDgu0kFDIGq484ORb0TaxQtvLo\nUYcM9EwZe1RSiNJo3IzD1X/61EbO41jzG40Mbbht6NsYUZvjX6/117Q8lwHj\nQTcm\r\n=Olgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/touch-target":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.7522dcaca.0_1615249634826_0.9263207294900397","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/checkbox","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09cffe367b8468021d8fea87fb8374f042a9f713","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.5c0ab7401.0.tgz","fileCount":43,"integrity":"sha512-hVy+qiYW1A/4w9A69cDbcEUVx8+70TDwa1V5+fLhCec4BnzdwgRnUZsCsvTxJq+TsZLaRkDJfgqxEXTssw5aiQ==","signatures":[{"sig":"MEUCIQCpEwU9+i8W17VUhh+u1Cruq9VC8sOPj0qL9ume7THi8QIgcVZSu0hU6NScG2vF0g0SMWNko+aXPhmnrQseEeH1m9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wRCRA9TVsSAnZWagAAmdEP/0fqrx+uS2/uzpbyNX30\npyYuiWZLLQDMhZR3WDKslA0Gvzx2MaVmOlFAH8canaQk0grO3xsMLp3Di9Uw\nrgoDIkKEpeNojRY1JHuQKPVs3jcoWbhfK9v7mon/+YFetJ6OJNsPB13PSw7E\nEeMQw4SdsHx6Q8NYOj9tqHdO5q5kdZhK+VT12zfWNVsYZSEh7KVwJQrX1hiR\nrsBm6Vsa5Fi7fb4DVUECx3+vaWIIOdvgIfyWBWj465bWGqq8zOI0p73H1ZpH\nmhWjkvz4T7GzVa/K2Ai3QhZXjIKFI//lmXtFGhbaKkmDvrBv1C9C6AVHzErL\nnsxrUWgXCGAJl61DCC8xiXoc45oR8AKG8m0h6FEsERPNftJdW//uH/YsBPl0\nBX2mHlZpLa/c4pDswQ52Ne10RqjEZWaJViZf6bsdXHldHx5r3D+LMb1g8iha\n64zuYGKXg0R9BtQ9GIWsB/sPoeHj8+PyYnLcakeIQIA0yTSt7/HhFPXFYLxD\neHEaugNe6ck6+881YVgGYe40yGA7wilyuSH/P+sDC4Mnv1TSAxWIujC4M/LF\ntvsAoFjupzfOPVSXK6GGI6uoLyFixekptUA8xrUe+n2vWE5KpmvjNC1B8gQX\nXODgUhQeowD5yBozDuifMew+5HcLE6DfkO2GcW7+Nf0TtTN+tKrcaYqFgaUI\n8t0C\r\n=HGe2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/touch-target":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.5c0ab7401.0_1615330320627_0.9593824424981192","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/checkbox","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ff7abe87a65d8230a4e7d4d892a2d80622155cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.59010b6dc.0.tgz","fileCount":43,"integrity":"sha512-Y6qcCshTVb/TY7foxjs1TVqTr1AewXV5nbwoKTBkvlEPjeuV3/nzxINzuHSuI1Nt9SaETvIuXoar+0zIprzRIA==","signatures":[{"sig":"MEUCIQDLATmRgTDO85ymwRRUmYvweRE+dFpYGpMi6DrYkC61jwIgRKENa8aq+gV0f33bd/V+UY5/cbwmmmgBecWQ+3+s6DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpVCRA9TVsSAnZWagAACUcP/1DhdvLCfOtWqNooupMH\nsbX6JXW2FtskHhYESA6bAZ3Z+V0b1WIrxJJf9vXsQPbcHKJ1WWRkXD8pRf1g\n7GEl3hFaMBhm/ywaD0qfA7UX8fTW5xrawADGE0T1Ws1y0OJyqeb1W7woTSkA\nJISoKzr+uSFVUb8LkVZTLk3Ik1b1oM8kplyuNXrQfqDxL7LZ0aXFkKjt8foS\n50OC/wSwO35iMWfU3ohwxlwUnTqHLGF2gGv36q5asjnoOw/WSrJXE8/Za4wv\nYi2hzouwwAzO5x/umCb3FNTlq6spnG8IjRCzHGxPv2mQNOdsyfzhdcalzhYm\ntbq1a/u+2L28rH7B6Ulyvy/6QGULi0ajOdogHBOPzrbDLucfky4H6amiCxeI\n1wD3N+q0/RD5wbz05t0vYYjTKE4hujCm9+WJlgw8LB4XggftvVHh+sWPT3rB\nvIfyKA0tZs/cpyrYtzLHdXXOEarE90P2ma6r+PP9QK7SZ/Vs3u8P4k1oiJBE\nzdwy1P8+5ChK6mkNRa3uLGc9WIqXWgXYOuIIZdK3qsbhzTY9KXiCnfoIwQPw\nc2rr5I64WWwTz6qUwtn75hmksg3YBgHOfSvmOwt13q+5OorhyDoT/W3ixh7E\npyzr+G1ZEZdro60acuTp2fPV0ldArlmH9STxAVNUSO+pcsX3YnUPnae4pjXx\n42eG\r\n=XBpM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/touch-target":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.59010b6dc.0_1615395413175_0.3663454313644985","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/checkbox","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfea608d5e992a28e2ef9e5b3e0a6bccbf34cc10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.9e52f5544.0.tgz","fileCount":43,"integrity":"sha512-nZlAAgk8MLqHj/14vcw/0N87yb59GvgwGTyGxR1oXhau4N/+PlFcHbb++XETV24CZ1QyCn4VJAqfE1TDYMEYHw==","signatures":[{"sig":"MEQCIEKMkAmZDKSDslqMSVtD6GK4Hdj7AAk6ovaR49fIJTs1AiBF5Jd+0a2F4lgnaYRMdDud562ZpXxjPMV8eZXxRby+NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVU1CRA9TVsSAnZWagAA650P/jBPKTV15gaCmR/VEF78\nXV20GE3axXEY3qHw57RWP0pRvjM5N9Yec4wkni7xfj77Q5I2vLxwCX8QQtm/\n4VsPE+2lSx64Bmu/ubV28RTTn0v+9ou1sOBSOeVD03pN2bn9t2xSOUdtTd/0\nL8mFUif7gK+KqKpCR5w3ptpGDOmwlJ5GtqK/MiKeQYSx0b+4KAjTd+WlhqIU\nbhbXGQPO4/KvmMMEqE1xkixu/L+QYYCAeJMUWsYVMk2Ehs+iwB/y+cPI9XEp\nFnHKmF59c6aN+aXvDLicvJF6BKWH0wycVu0L8OywNZXi70EXD2PAEC1AsXP6\nScruP4nZiQ9h2l/3yAz0gjQiNgETKt6B/ihNF/KDgYIy+NJyxbqJ9G+g0owC\nt/nPo9PynfVtbM3D9en8rgPQlxLN/3IqJ6iAnJuhtty5z+eKiSNxvypZkdcy\nkxJrVGptb4jcaufYfT72wkVjUMSGiOEwcJyTBM0EZFhjkVQtsitz0zc5KoA2\naNYYpsnSapsrRy2+VM2BFMiHLMrUgEk43d5+PWPHRpWsqmJhXAqbe2e9oKUT\nuNWzkhgKwf4f8odhUV7u0VXT5G4tTSj+uLO6XyRyTwoMb1mIUv0Q/m90p3df\n13Cn71s+zYbWmaifyoXxvN0LX5ZkmNuL5S777pKx+7pwUrmdIe1x03GF4a7T\nbB+j\r\n=E26d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/touch-target":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.9e52f5544.0_1615418677351_0.18513605845796888","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/checkbox","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.a678806f5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c534a5d758d93ecd8378e3e1016ce6ed05438ab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.a678806f5.0.tgz","fileCount":43,"integrity":"sha512-CIkDf5d9qGOo/HT0UIiY4nvvRldO5/gpuf08V9Gxhpw8Aw35veyQlwBXcH69PMqDPn7PdQDQufu8wM26L8rp0A==","signatures":[{"sig":"MEUCIQDKB3eRNhUaDdtJAO0bwpSUD1Nwr+P3tToybVTswDIPNgIgWCDt1JYhRKZEzx63c3YglNShG6/5YT+d28t0qOFkZB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXc1CRA9TVsSAnZWagAA8AsP+QBsb7UNHjujYWNi4B0/\nAlseQfc4DU8xoIq+oyO47TewdbIFvdIp99c5vWA9HQ4GSk3O6k49DMpZlwi8\nFSDI8TYIGfTCk8MGvwIwDagV9L9kPQylSEskyMcuXDtK3xoCA0FDcInzHzjR\nujMHKPYRec5MiXwqjL0I9WicjMk18bl0A/spI+q2YJ+ZTMNp1DIKnvR2Ffll\n5RyNojnGAvKZWcFUKG0cjEoGfy9lurrDZog/3Z+tzP14jmPTVwcObeo4s3DQ\nHOQ7vEPjRnZJJy7OE7mt2kzUimv09XTweiTG3b1XUmKxXkWTdQs7rzEtxzFz\nx9u4eTtr9xdwBnpI9buZOHkAFFbBULjNULWSJNGEWEdXWeZxrAwxHM4OI/+y\nBDG0i4RF2My+Z1UyffYVMhx0hdM57hF8KnlUAW7zLnjgheepQ6yhfADqkO84\nR+13IqVGPP+WPhSc6uZllPhjtsgYWN3YFO7HSvVCChK2ur4rq7L8CTkK+ZBf\nJ4FHm/0c1lXJYHSIS/oMGJgLj4MpVzq+QAJfwmkC2CLM+s8hZwW1RhPcJq+k\ncm7gH5XVCXV6CcV9w6UbGX6qDL2tdpDdpn5b436M9b54W9ye0WyffCtFfn1t\nj8wkpq8W1JtuiLg9sMbeDwP/pszWgQuiDVNUoN014GlsqdohrLn6yb3aEImD\nwJwh\r\n=XO+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/touch-target":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.a678806f5.0_1615427381418_0.9048342770428206","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/checkbox","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0c9215bb33e2b7a74ec7cfcae72a314ea589297","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.b2d22df5b.0.tgz","fileCount":43,"integrity":"sha512-XlCQoQmbBPyNaLSMw6yvdaq97e4BTzcbdryHwZMt1iNLH7EuBtcxaMqTq0JbLetXek5Tzxm9due0M/8rUa3rGw==","signatures":[{"sig":"MEYCIQDykwep+44U/5Xz/qpU3d4fHqmeQ8JIScaBXMu9Bf32UwIhAP7Ez+54ltW2mW0+ZkV8H655QhlW2UgkAds9sENkGeYT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0dCRA9TVsSAnZWagAAnDUP/RuyKE6oRZqbcrrM0qdi\n5IyYAhB1rR2Yci1iFP1ABYvAIq6jdoOCg+cFNaShzCZWA0ZqVV3lNMDUMVKf\nuqSGpg+82HjGPm7CgKruQPQPCAu9SU7JavpAN6d+XTlF8dkLNHP/a0P6aLuZ\no9k8ckA+7ZMRyK5/N1x6cKxwV7+0Bd8Oo7mw06DjKN7YMW41XLMx2lCTv+it\nWURuwk/3GsNJh+3FhyvW7x2Y62xSmoBPOe3rdh2XUm0aeqFMLfrI/bwE4rUp\nPDGbdwzS2ZtuK4TMh2L9QT+IRWv+bWWy4ULOYFNh5Lkumu6o+KIDuILkXTdn\nbqwRxafIScksXzstIkReIAXrOD7MAhB/60AVmdrRoFqlmKXhErNN6naLkuwf\nnCQcmzH7pYD+t/8fFzmRHLATHMqfsWNDTM82rLP0ZSLfgg4uB7EW+aCJedJQ\n7NAo7wozJHZc4TUSZVmdLk4yZS952+0+llwIqKFnC+CH+VRTECwc1cTG9drz\npO+NBZEVE0rHAFxq1M94xz8WsvHxuNUYz3QTSFDcwEarom77/gaQn1h3FXVU\n2P3Upt6DVHsMaNCD4pd75MKYcDwe/x/LU5gELCRYv440Z0cJaVMQu4lJERZM\nzEPRVdrclnHRQJrE7dLwRnzHkUOS+cQ6Ia67nGI8R+HO7yMxl4BxBrW6xJSS\nEqDB\r\n=slbM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/touch-target":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.b2d22df5b.0_1615482140699_0.7083534609714572","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/checkbox","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.81911b707.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"341b28287938f5c398c86ef921befcf443bdb030","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.81911b707.0.tgz","fileCount":43,"integrity":"sha512-VMCVWfiHKHSzvo3id19f2iPD+GJMRB5Ti2xNXmlvK8CER87E6u95MSHKqPLgppsFdUuXFYet6sSyimden/fU9g==","signatures":[{"sig":"MEUCIDgBau2enNcUsrMr3/aqf0Gk1jlFMFrCloKN5CnstL0LAiEA+8clBN9Png5lMZRp02rnLIHK9f6CPU4OpcbvaSoNvQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmABCRA9TVsSAnZWagAAADoP/i/e366aBhps1On6jnr+\nDRnX0fkkFAjV6WTa7KFtan86JNDtQ4q++TgcW7VpVXRKNIc6X+zHi6qoLeag\neGvCh43pyH/mMOZVIm1pAxadP3C7KAIpYSbrh/Ls0R2gtADjDWnx4BB7e5mq\n0/IGOUJl0tzsbeGrmyzOrTciBIDe7fm+61xVhEJuI9Jdjs7GMMDM+rT5wUgY\nER+WMieKGtvBijvEC335ZW0VyaXKxOPreeegOR67KPGKHAWS/R9AqS42NutU\nXraSTl0himYx1iGCkRVxXIen8u2dcEUXhicrx7bFccdU/UB+zx4C68J2oyBJ\nAgSujHNj6mKAHk7aLwDEvGkagVCK64b52l8uIGSX8FPWlhCO1wq/Zk5hyIml\nYyR8vbtH8aHeOAjI721CLEACGBDaukFqLTojleZ6ibWhlnGINQgs+QAmNNQj\nFU0nKOzwALL2ns3UxjKAZrj6Llf1UWNSCqMNnDU6HX2oaD/pBLswmK6+p/RM\nTNZBGsd6XMcTO135j63pDKp6QOgfBS5/wGQZ4wVpPYej4gKJ/Dqsuw++7oJf\nS6eGv379KbTZ+tYFdCZIjdU4/9Eh2Wo4SdNHRD06mYQAYERrK/+D+LJFqheW\nrxWDIAFjBGi0IGpVnsz6G3zqt/VvTg3SQdR/ww9If/C+MlVNds2SeAHmoHfQ\nHnwR\r\n=CgN9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/touch-target":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.81911b707.0_1615486977160_0.9595717326236046","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/checkbox","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0180d1f190522c73ce7e2a19472aa95f998c158f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.9eeb35c38.0.tgz","fileCount":43,"integrity":"sha512-gKiM7JoAX1LAVB5hDHIN1xYVK9EZ4DEeLj6F82t7ozF+Ni2KNm8ppmE0mAXk+94J/l7S8M26gQVru6mbFCfKbQ==","signatures":[{"sig":"MEUCIQCGSjBshGo5yIiUTDqB+wznNdIagbhbZdfde+fA0GL9FAIgaJcnII+54VQLh3TJy79N43pvCtd/o1xrkB5Jtc57cMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnE8CRA9TVsSAnZWagAAHWIP/jUUu/9MtD5j+ARLVX8b\nyw5vJbKSb6C753KuEVbsFn617i/MRatmSEtcuiCVm5VFkta3+cZpCznYjoBm\neXxry6ltUYupPPvyS/2lmQjGb356WVn0jDy6qcmktCcvdhnmOBjOMjgr58un\nh2YFJ5Jz1JbcWEFqtzamR45aF2E78wKuhpkaLCmNhnoM3y0w7boeEvR+gBiG\notNFLSNgGlumUiKzMNEMBivAAMf1GCnzzmj8QZplh5i0D/eGc56MTlCpLJt4\ny0b+cHzEEdW7zDZRhsIjM2zOLD0Dw5J+geu/T7vRHX+h03Zlgzz9J9K+v/mp\nrw1NOXWTsz+4w4u06kUhaaGj8hAQSe2EaAU1ReNAn3lnn9rWiIGeXyl96fLN\n3CfaxsYwxYeEX321kJwqwkdCIo2Zo/riDhFLuY/6UUEvNxIyW7Q0GP+o4vly\nMdm/sUM3dXBbTDKPY7//q8+kSqsW5DIt4q7a0DTwD04QtHJWHKMp3r0EPeLj\nuJC0qNbGHh1XmL8dGJd+0a5OJRXZBZWXyWJiTrOwC/DFBhVK1ZI3apRIS2SA\n6/+GZts87L7nYI4axMCVUrzmcy7e8AYrQy9IFyAdnYlxcYSPHmFxKioABP5j\nCKnhKTKI/gwFFRl/CA8sxhpLqxPzM+GMbxx80RMNmA8dtN8CJ+QqpLM7rqgv\nUnmh\r\n=zoBF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/touch-target":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.9eeb35c38.0_1615491388219_0.2817595489918554","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/checkbox","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b481a2bb062b2a287f039fe4a16b586ce30b4c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.12be3e95a.0.tgz","fileCount":43,"integrity":"sha512-Gsn9zj7ACoCHUeirQJOmj2QUHCJE1+P4B9QqAoGocntgP2jwuuu3dAy33ANrKFJ6t8QyBwbwmuMagS/R8A5a7A==","signatures":[{"sig":"MEYCIQCYcLwBAvzXlG7AkkU53wMxJXcgW+G0TZ/J3oiKC1MapAIhAPKpQPz7z8piVmInQXfMyEGOhsYltheFtAEfgMJf/zU6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncACRA9TVsSAnZWagAAjC8P/1Zzetij35H2By9pqXra\nWv14vynWKO8NvHXW1ng825zKJJ9Z4rAPh6lH4IIrdDs56fYOY/4CkKpO9yYr\naoScFVjWjvNNoBZC57AL6VG5LgOEGI6oLOlitKEbeXEtRq+M+iPZ6UOEAx9+\njLU8TgyHcoYnqitYBS9ZWCaBQBB6GCsiwpKPsvbqTgnXLk9XD7bz+2BkRMrU\nsUu0I0zmKp62VFr3n/d2M1zZjRrSyyd7Hx7yTmoCSYMKeH3zAPmEwMb1zQyC\nx03/+0Ot1aOlFtcCr03yJ3BYOg84U+tWl1BSX6ZeP8BFmA+iUIuTvPnkFNvC\nk+CT5/h3DRVhDAM6jUFoN1R37NP5XlosSLZYF+YpNyGWIKoYJrbcBEX/mleF\nBADhDi3XaxZIhWmvJYhY7ZxSFPQ1dB1EGK6GZsMEBBCXzyxpGfQxp7VA1N16\nbMMtubH1k3l5/mu+PDyZ8N8FWCTEGMvHAQm+iCnpEqwkQ9Xfn+rB/srq9V9g\nMF7UKnAMGN/hazB3N2QiFqDR7Al/1toZr14Ht28jRCWVUUiHTJ0baORlq5Rl\n8JXKL0CwYprXtAz3CeA4rZtnIPthAgE4EulKPBnt6esYR5VjnIOvdA9T6ouq\nFO0NlGraAoxh9V4Jgp5x9l2NlBblJTaCNwoiTHMaSI0fB1852QmcKeFQtR0W\nt0pf\r\n=XL+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/touch-target":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.12be3e95a.0_1615492864114_0.8420225277010158","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/checkbox","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c91ed99ed0addfe337f51ff79855da9ace86545b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.e683bdf4a.0.tgz","fileCount":43,"integrity":"sha512-2NmJ9giNjAmBlabsWip5iLcMAqfDCHYVZrskQcBbPoQ6/IonuQf4aYOf1Pv1X+JzE8OYhQgpO6JOc/wDfmmzmw==","signatures":[{"sig":"MEYCIQCsNSa3+vSzres2Ea2H2QChkB0igEi4gvgD/89PQU5cWgIhAKgMoxlMnXNDH9jUBu+k41IX6PUg3X9svXoVLYCa9m8B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSni2CRA9TVsSAnZWagAAw68P/Rv/hqehGLK6JG2j2HS0\n7N8aEc0/kMijt3gwjsPt9K5xirHjX3Dgo80+BzZq+FhahavQMzipxUy79DQh\nqqTva12LsDDgxM9ceKrdYrDC1PiIpLjUY+t3ocNCTHSwIzOus/ZoxWsYk2bv\n9NelsvwnTW2RQthlYskmN+WdkB685uXd5nJ3OsavmLoHm0WOjLkVKrwUJJE8\n6LtkoTs4lKzugelxM0/qUUYdQl7N9qy+fbxdmwvtLWQP/xt6HpP8aWiE4sG+\nhhuoaVq+8ujdiKDs8dSECAODFmTtz2g+7607M4JeX1GddQsZuas5yOnFu1Cn\n9K8tu71xEFRTXsc3Cfe+yoR1FRUUGp/5Z2J8eQ1U36YNUJvuq4cnRenTHbi7\nQsiyCvMqiezlTQ5tgqDu50eORbCWlpJ4V3N6JZtP3PIcUrcplCSSeXiW/4QS\n2QP5XTgpIOAP7Gfz3jWeLKNtwm3pIumsOPk5bpkdMv1yOj/dEVEdPvw0ZkuG\n0EOoGydxFgdzhSLDCfdS4KsQAC8diHqbpb2EEGK0J5S5WxVmAhM6y7Fr+qJP\nWjz3QFCRUQh+yrJIdOhbTzy2BhY7rCGBMNRyw+KZtfPt7+iBvHCTZYmqeYaI\n/0b679X6LthXkozzLMVDdBadmmYx7Wa02gUjDa3TQNKrIriuZRFJVayeVeQi\nxI6r\r\n=AbFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/touch-target":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.e683bdf4a.0_1615493301868_0.2923373567636509","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/checkbox","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2b466f0b5687f68b18aed10a906c5c53abe1209","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.a07b6d486.0.tgz","fileCount":43,"integrity":"sha512-r1btrTViW/no/bXehwtahRIUZRC2+TfZ8D/GCBQ1/JVhfZKxRv+AzUMEiKamAC08Xc6plyyz9FUaA8QcxAFyTw==","signatures":[{"sig":"MEQCIA6xBAhTz68Ow9KqdL8uiyDOck/lDPqWvh+YCC7ePXrHAiBX3IU/OppLl89fNm2dBrrNzzgvPLpUHb4yNPlfJgvpDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn5tCRA9TVsSAnZWagAADhEQAJRZtPpwBXyxAqHuI17g\nCjARSNKeSWYJcm9wfJkNI8tX2hzvPwRAFZhD48R9UjxPxT+AHShQjOy4Wp1w\nMwC4EbTsO4DigxipjWNXx1asZY/BKKHVCRR+54zK9S2Xl6GtmOTNYyN+afKy\nJiaUba2B7vDavc2IjiWjI2MK4HePM1fzCDJE7hHF1QEjylkpanykHfN16kTn\ngyk6uX3IOXl6zsjRu/6ww8wStQe0ZzL5RbXAB+AVNj2OWgcZhTff6E4EfYTo\n5Hyv+Td+MswBQzsOuu1WTcbc2C0TL6bnP1InvCi3WcOxN0bYIQaSyZPN68/c\ntVvFgnXRKaP3XMs4IJVr2w6mQ1UuzEu2jAIVdz9CjZmippk88AmOjYi4c1UB\ngknrnhV1V5m1rlZIU28XaAKUH6RoRNgl6BtOhOB3kw0HWYPCAR0gqkFL0BfX\nhsBgKMBp/jkAjbmtfjzhKq/UOKYvw5eUY7fYvN4T+c1DbBvqSPKEy7uv50dh\nmKiPPUxBnWRqyv/+zPeG0YCFLD9CCt/CT/PjXAm/+u6ThnWs5T4hknCztSaH\nyB4nMXZMhVMhk07Y97X9/3FCUw4vVhs5JY8iXcAG1q4jkZOXfV89MgR41KS1\nuq7wPdGfmDCnDubzHzZI7w4nwW0PnjGTK4vAxrxN/vf+ZKEqcDKtc23wwMHU\nSbDN\r\n=THT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/touch-target":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.a07b6d486.0_1615494765285_0.5142288683928429","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/checkbox","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.1e0653477.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcfe8749f27f940a0d9f402524bc31fe845e9a26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.1e0653477.0.tgz","fileCount":43,"integrity":"sha512-6DAEnEg3ELzWUoZ+uL3erbhAQFPK5eTfYTCRRL+gDQjz6fO9otx0EuAFnVUgKnMY2QYRm34LIpZV3P1VWebWUw==","signatures":[{"sig":"MEYCIQCSs2XcrJ9aWZxjEvrfKH1FZP/VUra1Q3/aYZgMYMduJgIhAPhoK2o1btx1Zib5ZF26/eT7+L9LOKWbMpnTA5wMvO3E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoAuCRA9TVsSAnZWagAAH+QP/2nH/89TH9lJu61rMtW+\nsreZpE9kt/vOMpwa/WgY2ZvptA6q/hKOQbi2z3FWQpDdCuNtCB0gHk3oNJ30\nHMLQWB/OAWKN1QZmOWOs7zkxIt+V9gAixwg2/iOShLmQr21kUIRq01UUThrU\nPzb8yattZL+fSpGIv1ORocfwELMrJgmfzHEUNfVoCJdkEWvYrToQbTlcoydD\n20jw99jm9DwJy22zjZaYUNa/7JoTxP/KrSIf3NSRWrpGTvspF5d/KaZjYsgB\nCHvBXuNAo/NJ1fWbYLQam6awkp79foRBGwiBWxBPzVdxahJM3I/0Wl7sHdVa\n+xy4x0N/3UgtWRIDZ70CowaFqKZnlzWDhwFnEtG5xLsYR1Me6XxcQ7xq9VnL\n7q5IohxVuEZ+JL+3EGgDqo6L7PGYM9+3brE0WHsu3dtnQ7LoNSPEtk5T+29c\naiapujT39B98yK/QBwpMFxa7hRVs4RKO69szjIcsdBnUKfGOYZ1mS/vT+DSr\nhwKJWpZ6RnivGw1vhZISHAJO6O/qRHvAIobE3GPDSolgoSAXB9VX5yFJBsXX\nhEZMBTwMOkxXf/vAUfJoFeSuUnbYL0R1vmYmQibWVjLbv7Oynt99yGtQp2yl\ntC/Kmjouk/ATSHSI6TA0gKSMAGH6v0vGtrRpWXhSNA5bTp6uG3S/csqOFjxH\nXM8o\r\n=oZ5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/touch-target":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.1e0653477.0_1615495214355_0.6860070991606355","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/checkbox","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3748276505b4e8b4ba1841a02f1c3b696c4c9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.148e8cfcc.0.tgz","fileCount":43,"integrity":"sha512-Cuvmf19pMc+t4Ze3FlmOYerF4TLJ0EtGrsYn9pSKjgzrmicpIb7ZQVxKlKlSAS0FBBPZTV+yI3Dg60Q0EC1y+w==","signatures":[{"sig":"MEUCIQDP/6wkN+lVapXi4U2GwGOoFFZbuBCBOwtV1YJitZ52xQIgFccj+tHcfiMCo/iHM1AxllTYrJMMbPyjWAU6t8utRws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0oCRA9TVsSAnZWagAA+o4P/2gFaX15y2fTk58WWjma\nnQ35nUmId4RJ+GDWdl4vv4vfa5zVGdi4v1Ot3UlfNqLJyoRVnRf5GP9JfMoC\nW2BntmUOCbtSSjoszj7XrlsyI+fBfgi6gY2KgiFPdKHxajEepAODTv1SlaDr\nrwDpjlver6EQKq91pM8KtKrADRSmDnkjyBxsQVET3BHbKXuk4N2ub4s2xqkj\nDikXKAkNsVBex+144qlbyYBIwzFIO9E+7G1I/1G73epOFxoelU521CZbSp1k\nQAjhJkcv3tGn9d/IK+mZcHcAdsfy/jCaJbg8MAUpIS1sBuZKgyrh6t8j039c\nPng/CoDl3Cq74uMEkT9izXt/4AKmIJSfSjSQhsIiZ/zoVnhbnX6MYyPXpyRT\nQZIYcXbhgcd5AreGZWL9tPIjpuwKHWlj0pb4jdzGxrt6b4azfDZqLiODZX0t\nqM7nsnx4H4xmAn1ZFdPeev7frEskKXMtIOI1n7e8hj9b0EH5NxnrspSECaJo\n2Fef6/D55VfR5PkYG9NV++h+fyO2l6FUXQAtitxsTU56K8HIKZzR7JPMnCfm\nLvMXSJodUaKzgO4NIh+jCxTht0myKO/N6wCXj5/a3GyPOT1iQl2CiE0m8sPk\nzp+ENgykX96xlU5P31JUMZGP5cOsXu3gG03jIDORGIKziS2pn0Nty6FinofV\nEsOz\r\n=/Ymo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/touch-target":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.148e8cfcc.0_1615502631827_0.45593756109005446","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/checkbox","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.73a227194.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d6a73bf630c84d6d63ed9a9a01d1a510b3f1817","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.73a227194.0.tgz","fileCount":43,"integrity":"sha512-E30XDjyjMfVAVjawD1F1TtShkhYTTKN176/5uw5ascR1hMMyJPduymtxm7kojTUH1jM6GsXQLNK9w5qNdkgFwA==","signatures":[{"sig":"MEQCIBrkewSgoICWAApY2Fqzez0dBTDsFi+1a+GiqJrniA0pAiAM7i/Ueq4flOdscbGvIyYoHpH6qBk7pRKLTDZqOWHElw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSHCRA9TVsSAnZWagAAlIQP/1JY02sgkrZta/WvJLVD\nx9ijE5Zx4GvEh92OPVJ7nEeEOBmUM0oZopwhGU8+NFj8SW7ZvWdSzsnit0rb\neJc52oKkYHPqY92CQui17EgmobnsJgwqdHWCokMlsq/WJSzogqiu8nFXu2mG\nnbRa3cJ0ZfaPZIX+c8BefGpjc30roabOSphTW8G14f/fO/Z9XICHzs0tEBqd\nOVLTDbLBqf/0hROjyM+7lb4+lqYzIoetVUhGH+mrC+Aj/hKTflCygnaa7yKq\nhpIquT5DeiyqXOAIMC+yAUg5ZflHEvayObWZKc+UHOUySiC2ro0TFqj5hRgk\nKzaKe31axPFcXyssCW+NQvvCLvLdUKH3QVVg4PPFB7srAAuoZhC0j8v1mPd+\nZfTghGXaP8R5RWAe0tXLl9NlNVOA1x7TEJFbtUZg/ElaIWm6k1HnkU4/CmlX\nAUBOMbQIrf/ptL0kvASBo6B9EFxD+8MkIyZGl79FByqV4bj4g/aQD5JM4VXp\nWxSMiKkSaJw1iwgiP0D185boPX23VdPFgWpGJCfJX9mTwsYtc73pOPLo5VGr\nZOWMC/E/PZqXhav6uHL2zyvqS7B64K5gLERhiQpqT8mRhe14Q71vKeb8ZGXP\nOmMN/qtYMiPZ7Fe5N0BhxKNhm0lqE4Bs0d/PEAvxS6+9hro4WCG1+VAHcZ9B\nm1wl\r\n=lxGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/touch-target":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.73a227194.0_1615508615426_0.7010103377601149","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/checkbox","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49dc7a00d558b8e5f7110fd62f85fbec8cf51ad6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f8579b7ea.0.tgz","fileCount":43,"integrity":"sha512-hExE+xVCiE3WNNeV7kPh5HkQ/42CZ4FBWt9gWBdqlew7epb/0bPcSzlDrGEfcgqoybRx4qrFiE4MK0TMz9KIPw==","signatures":[{"sig":"MEUCIAazZFy9TB3K0FZMuGCBKHeCA5r4bo+sMyPR+yhOsnBMAiEAucahxmculu7Baeg5IiNNEEKRFTe7V1iPkds0pPcCGYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1ECRA9TVsSAnZWagAAXBcP/jV3xLO2j7y+KfjF5/gi\nn7PcRvg2KsMpsid1F/3lJZopaZJgXEw6qH2l4E/wKcSYrceZPEdHWo+W6KN6\nb7snqUC3QV9h/IqIA8XcUDb1ZR3fsVXLKtn23K0kRKfoKTLIu9CqlCvjfzzx\nSP6xpFWCCp9DSIobiDtfLzL6IkAAR89e4qO7ScO98a/EVet9auEWp+533sOr\n+EysKebuo3aP4lzfbwUeY1zAVoAWE+EFtr3XogYBrqFvEJX/rFYPjIgGmeF3\nGbvwQcK+Kk76XIRQnLHt9K6c0HnB2LQ+6UzZr75q8GyVpygi8DTr+iwZ9tZg\nzf/GANy2SwKWB+NW25VVfT8lGwq0biqqxno+gUUFbZmLlwD7mSeDkjHLTYga\nEiMoiIsjur5/NYNA5NE+VjfaabQdcQUIvn05TX0Jf7/BFdMgPaZ1XYAlhc1V\n7pHlwIJQOyNVCYHhE67oANbCiaupkIT5q0Ii/HuW0L9+l6SrzyrZVbwJWrHB\nw6mX6zc+cybn5OwrxYv2unr8ivECWhuxDr3hPewpDKP1K2S3sqBwoQRN/KwT\n9SUoYZh2D8EsB5To18bprT1ktWALiBjXA0cthOsUdG3NBSt5uEmpBU/lubDl\nnfyM6of91/t/Ihmf1S24Vz+BGrecwhWexMBgmgNsweNZoLliKin4evRMqF9b\naTFD\r\n=V+3H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/touch-target":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f8579b7ea.0_1615600963450_0.3881318522811794","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/checkbox","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa5ffb3d60a75ead5f97bc7c1a05ab0526ccc498","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.d2a39d300.0.tgz","fileCount":43,"integrity":"sha512-H7sY+CDkC2jY8kMwMLzjEumDV+rqt70IuN2Wi2ESeNZoexbenSt63cUhcHH++afFTmEdlPlgsOSO5U1dGsjXXQ==","signatures":[{"sig":"MEQCICltpjdevcQSqxRHx4Bxwp16DDYr3yFx0yeHfiHFv1lJAiBTFM2moW0wZ5XJL2fQDpL2Jxg5zIIRye9xHyQY20dm1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0UCRA9TVsSAnZWagAARNIP/0t131e9iHxaA/E1q9RG\n3WjDUxYatSvaOCxADOi410o2oNz8Bs7tEvrURsm2460lFPaygb1bY0OmJThA\n9EmG10Kt5JrQDNjMuC0pRI+j9J4WK0q0a0BF1kyYY+dvjRhoea/jTxAWONS2\n4LY9SJx5Q8SRrR/nQNfuQFULfsNcpO6rgxkzt/pov3qKJWk87EtukBVDMO4s\n59sVXA2SGifX44TDVFMRqJf8fT12Wmlmlp9eFSR+22VNHi/kgVh7OKh345Im\nVCarebojiirLWcS0mrmwXItaScugbfoQNjVvx8D1GU5cvf5WmuwiyaWRVuQP\n8DX9ys/6M7OWpfF/foAQO3CEfSL2z8zwXzNv/or4N+kmXxvYYnpv4J85/kqy\n5f+SEsjZ2i3LX+H5MxMli6Dsjys/KOgKglJUlxYHsASFX0C9HA9FN+zzxuSJ\nM/f/yRKyWdM1bVTsbzTLaXd4nxN3m4Dx8z0LFOjIP5xLqhp7FKuL7mRLMpu5\nHGvG67/YM5UMuzOawAhKXPvpi2a3ZTuLyPh9kGxsqqEtNiLvsYT0Qwru3Hhc\n/ypJezNu/+z9xnZWxY+nhHxRpsKbdfOp+eXV7Q5Lc5doc+3TEU0QoKQiA4Lv\nIOxkLHy2qJb7oxc17SIyE+9tI08eq9euziz6Zn6166NJpabTBYcjkBK3MCQW\nBycC\r\n=ueC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/touch-target":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.d2a39d300.0_1615854868192_0.4689061404577384","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/checkbox","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7434397dbfa72552330ef394f347b83df9e83b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.7cf67823e.0.tgz","fileCount":43,"integrity":"sha512-S/pWXDKDsoFH1+kSmt6uFxIlC9rrUAIcYPfj5ePPfcErJOlDdb9jXY2oCoi5uq3+eu7xuTapJbNO1WufQFyr7g==","signatures":[{"sig":"MEYCIQC1dRofI6+qN0ow9ZqxnEjgI23qOKuwjGyuoAxAfpr1WAIhAOunKAJGOApyDVLcWS1g5enI9Sa/gDH+AMR3Nej9hHIL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPa8CRA9TVsSAnZWagAATnwQAKMHAlONha4fh2zvPwr1\nu9eFqzbedRYOZeBRxKe3NbtWLMRoo4AIpSmewrB5yTExbVGerEstcjvV1n6a\nl3pyh+K2pZVQirqJPwuAz09YlQMC+MHcNeIbbqJ/gVhB57jBUCK4/UPlMXzd\nQE1c9JhiEe64Mv0DVDV47+KHZ7ck5vdWzR9UVvEGNHx/JMYSi7QFOMyibyh3\nsHt23Cpk2SoepP22wtGjg4ITMWrySBgczXB4YrmLbM1XtCqV6KkLR9Y5R5sn\nj6aGhaGZ4VTDjc7LH2Hbwvx2//GxMTcr09j77cAIy2UDKSWVMnlh6GoApDmH\nbApLqX3fQspWqiBhUXY8PQ1DxQt5zGSCR8ZqlEgWEKuRCjpnHFU5IRyRrPX2\nN6IjKyUrwyV7YnfgBU39bFjCzY58hsK2zuOWMJV5hxRd+VM6CbRINe1emVFC\nWzsYX/qexJ5obMdgH8X5lKtCbBglib4xSP1vaM0Xvlom4s4fhMoTV7QhSytW\ndOP+eX0yyXLitD58J8eNs1vYp5FtexffEJxnmo9JHc3IpjPXs2yPMTU2/hhd\nsnhHRN6RXfD8VtzNDdluy/0a3EGe9eI4xHFpS18rCMmR9BZTwyuTgDYGoq+9\n+qIsr6vutKKHuit1Sri3eQRnCzhQylXIxN66J98DiVec/dVmvaGlLfc4BxCu\nWDBi\r\n=XVl9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/touch-target":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.7cf67823e.0_1615918780523_0.9722313003126193","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/checkbox","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.67d780c79.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16b019466d98614fe08cebaefe4bd0269bc524d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.67d780c79.0.tgz","fileCount":43,"integrity":"sha512-kr3Ll+arZXfEZKTF8lrohxiPfK7TM8u7FIk6fFUStlfM89eqdJQUpjiNy4EbpWvQ9IfhaXhase2lZArDW9G8yQ==","signatures":[{"sig":"MEQCICdteVP2EbwZsiBKWjTz7+cmcQOA1abMvSX80Htd38jzAiBY7q8O1q+geGYbTwXjps4b8bK+Ghm76FHcG1nw3waeuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtJCRA9TVsSAnZWagAAVDsP/1DcxlmPTxAAlRCIfmtl\nEzM1jhd3Ows4FrJmvFysZtUdQHt3AsSB8PREmczXG7zFoPZtI7CikLkkqGkv\nimhBHyf39gsu0kIuDTygt/lxEBcqdSFzYA7BFVF2SyLzlBBwVmHPT/0jbpmi\nzVI4+ljLbmWqJ8VIUTduu8gOkJ/b0pZz1KZ/ey+ttyAI6Nx4sPwI5PbRuZRu\nkIR1xDQdjqW4RvWmFFwZi7m7oxWuvIRC7TidHYa0Davmqq9FvNkPj7iMJL5y\nDX5AQEB1VIp7KPMQiSuWhr4piOUAiDM2chhi704e21aXE3aHtzn8WFZW7QzD\n3Y9PQt9EBiHFKfMDGoBgKUnFASoTwDlgEaz6YG/qT/2KU6vvsuO/fgPpHt11\nGtY/sgsdAszqam2WCkKb9ekjH0HI0GYMaL020c+myIbYsvks5nTnfCSUiiCP\n4xuBBNhqj+I7ZFikv6fwStu8GFYuCu80yfyVQUM7Ou3Q40SpDYnaaekw45bd\nuXbkPdN1zaSsG8bdcPiZVFQ583Fwj3CQqS+Hif7Ae9j1FIIDPwd1rb0Iwpnu\nDsM4fuXKEl4CdbdSgQ9YLFrhY+/ZYvBm+/PTs/nVyc1NMMjMUXoJuckQlhDx\n+BDivJNDeqA9XmmHIc0F9sUHFW/J9RLCKIxYx2uVf58mdyejRcAHDkWuHsmI\nRJQY\r\n=YFhY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/touch-target":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.67d780c79.0_1615924040697_0.5878228038024595","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/checkbox","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56158a5162e44c4828e33c362859f1ce500086be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0f358ddae.0.tgz","fileCount":43,"integrity":"sha512-MGohBZXzmBNOp6hgEdJzPzKzhxV8FPThO8R+6j+BZ6IAe/6hXDsV95BaxgYIkIAAm5tdfsg6YXnXTqKwDrIK6w==","signatures":[{"sig":"MEUCIH/xlVXW3IxO590Xc7mKDb/2JtJWhV21JScKY/RVokHWAiEA0nCUSlENvF4AgjWozfWFxyUTsPdANwMnA9gi11dsj8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0sCRA9TVsSAnZWagAASY4QAJOBy+tQXHuaQYx7gYpk\nSdAxDGwYrZU2+wfK4FnvxnKBie9cls7KdRhhZi5po9BGoOB7wg/Krjz2Rk6c\nMSq58v5Q/USoxesM9zTN8wYq2mrV+EBLMY6K1vT/F+HoeUkydXIcKDPQeA8G\nrHtF0sYzSCW/INQuHvvmdV55QSO/S2rjtEVw8YwQU59mUGk/Sxx8wSOc/v4k\nAWtkLcx4uEf+VdyWPrgBhpx0fW3DQibbI1vIIJIHeMdmxg1r0r6Ixj4s3Kl0\n7PxuGOhbmNsK4s9R7mA6g8mscUC48NAifjyICKYI0LR/yw/PiXHzHoxJdlQz\njPAEPcjhk/7gjDos9vBsB0Ria8WYwHwANDN1srUghg4o7v0M6jEd2SeoYZoy\n/OkEXmCCuZB34Hv6V4e0yFkeLcCVN2Oxcg6GvLznlpwWc05Pfc0CEMOhL9gl\njIxDWU7uE7/VPZCyqNEN/coorqIgwluClx2hxR32IRWS4HU1qizU9Q8dzzjr\nYOaBRYlwcunpeyXU+Rbxl2EECqpJhRczLQMbQ/WNQduqIrBaetwLj3KsxrPh\n42pu3orwgo2BSH9e/NrueV7kOK39Ibh8Z0Mu00QwpGVFPLXNMXq8SqIlXnru\nOSBU6k+a+0MLBNFXNOiSXHXl8T+Q5hfM72yOmP+bCUayPBnJ419zveK6OhKH\n/TBY\r\n=uRyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/touch-target":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0f358ddae.0_1615932715663_0.04318090264178531","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/checkbox","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8866cade9085234c60ce3bc1728491351546679c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.67eb0df80.0.tgz","fileCount":43,"integrity":"sha512-acKAfxjU9N739LzMreGq2X78/+evuOtWPJm4PkBgcWqAKbUWNg+d/TrQei6g7IT8iRbBBZG2FJ0ZdCR4H35/vA==","signatures":[{"sig":"MEYCIQD6lwtb9RepBSwZ2zMX2XBcpHxRSbWyUBQJj0MRVIxwEwIhAN0uxt/Cd5zrYLvfdG6m5oju+pka+eAtcRnDHDusGYul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOJCRA9TVsSAnZWagAAzR4P/38cTKwYK42j7cHJoE1g\n4yXoKigg1QHPMkx5RhnptE2kTVJI6G0tcONUvIw9dWKB3ZIlg4ZbcaSKlQsz\nf+G62ydsL6ldU2uclm9ePwJFJ+b04RgFrloXDROtKLvgCjKwoOjRG549cdYm\nFuN9NPjeniXgz/fScVLxiKmy3aw+mxXZY63OFKK8soYbAUsgLBfj1Yg/lP+V\nnox6zuP6DMNj9HwBj57InXtaVId8XW3y9Q9jLEuiGSDGDBDszwZJHFT1MZ6O\n5IYh90ffHVWniKKiQV+GIMp5ZkFJr1NKPY9/sir50XB9r8c1z6C/ZDQrAUsi\nOnb7r7502p7s56aWAQuLplvJcuHx8aIgxilsCjL1ph5lwV1E8iEgQ10H/rIq\nJ5NcLVCi1ZPV5C0Pi3CUSG0fFTb9Hp+V/deNklvN1OSjkcBt/s2E2I6+tvay\nsPnmT56xYWLhV02028jJzML/2r9XgYpD++ilVJDhAF2TaBrwTWN55TNuqkFT\npe/kbHIU/hgIQO31WvhK3QQIl183N6aUajHdr7j1ZhV2vga6IJZw9gNmaaia\nv1HkHJb0/f997GU6pZSiblzXt8Z5VBlTZn8JivOR4378oh6x+Aq/lVYlPxdE\nLnegcs/E1c1ZfzYhGHuMb/lA/vJK3Ht2bW3oQD0Vun+SdPy5wBOYRFw+4FA/\nL/mx\r\n=Bh3N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/touch-target":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.67eb0df80.0_1615934345470_0.06331926039106017","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/checkbox","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e91be695099f11a849a601126b6f19600f14d5af","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.941ca3b3c.0.tgz","fileCount":43,"integrity":"sha512-PIfLVYheo+yeDFPU48aTqTvr8OVnOff40TdIasujzN13QAnLQIjS6L6b12yUCABV9Hzkpw+SIcEA0y+SKb4gkw==","signatures":[{"sig":"MEUCIDPsbX2NN9xWDVX519HZ7o/6w9wTR4z5q8Kdw2f26fKQAiEA3DIZn/Y1kA3qr4L/pX+lUQCaHHLX2PGtVVxZZKukUVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTP4CRA9TVsSAnZWagAAsBoP/15guH6644kmaalVV3Pb\nSAh4CRBc/0CLFS+KT6UpLmnDmarvPFWtKE2TeHGU4jAGeu87u4czLWQB/sx/\nsNT8X/foTFat9WfsxvpG4c54Z2lElQYy8DmZ68HWfonIC7B+ZBlWaCgmcTVH\nQMyklT7Ry2wxlgY2v6DMh7JBu8PDaofOEFrL4vz1Agu2uciRj35Ip+t5UQ2V\n+cNIH6kGDLtvpfqbQsbUiggkdWCPgxXeLZysIKY6mxxUbvApYL1WRxgCI5Wq\nq9bW1ZKuKwjhFcUcibvlS0rEHDNvJGvmpxZiy/rsuedeRE665qwlgW+nQiuZ\n1Pf3B1w6lKrtydDv7aSzj6T0KnkJPvzMxvpRFO8ETDBlyouYXfhq4FHWWeJF\n7MBfHUlK+Efk8U6hrHk7ae0+IxXxQcgExKDIlCqH/b8Mp/GPDrbW6gIPzgMx\nGs2raL86IyQMbgoxj2mGhozXOSk9GQWqwMWK7HWvnHoZSKV6bXzQ/GYrxkCw\nkMCsm9MtI7FUi37xDeVZS0wiOVXok3S8Gs0U0jTvvfOBj5nLhU79C4aXXm7s\ntcKIevsRXsbuPlmYYJPcyfsCPRzLmDtIvX2dnW8ANlMmaHGrmOFn0bARmh8R\nqExUNTwsP890qJHtmNgDKPW76au824MST5jB+zzie5+E6dctVBnVfKkQQhAA\nlb2v\r\n=bzpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/touch-target":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.941ca3b3c.0_1615934455987_0.6561813941956698","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/checkbox","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df5a0721155ba869faac38b3be99a2f1ee112c4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.3344d12ad.0.tgz","fileCount":43,"integrity":"sha512-P/ykyCTTui2qet6lFEDZ57HRZVWCO/B56mBDRi4X2R+kBqqIRV18daM3ZOspz17RF7iX2snQdM6cirQA+qSdWQ==","signatures":[{"sig":"MEUCIQCWGqAjzNd7c4PtzGdhs9OxHp6/Zm9ACW0jOWcNWGLdTgIgTr1cmSy/ydivGVdLxmfHGoJU9WMBVIR+R/UCdcUoYOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdNvCRA9TVsSAnZWagAANPQP/RXqOJglrir5Vhl1Z4rl\nzu+jaUrEz7kquRdK4CeX0a3JQOqddHpei50FWSQ8Gv+7tFFIvZJ8sf8xLlvL\nbHDJ61opZixF6ps7tJb6G8e6hh/EzZKHzt21rxr9fdIPIPrBPde3Z369B8mO\nsF7R+yDVi6F88dce6JgNxJjgvagf+Mh4a9lUujBKvGNtJ/egchX3DM3knwVJ\nHroJLlbhMv6CpIjl0GpL08lt084ZvBdgGHYFE728bvpaP919qHibJN66pc+k\nEe3AtWOJiAUHmO395Wota6fVcNALHwIgO6bjvufdGl+713IRm9+F9mCr/6Lb\n4qPW3Gbs5fzZCmT53fs0SW/30cWWzbj2hKO+8sJ3ncg+YJNRQ+BwqjTOyUOo\nC4aGOQjMA5aIXsLBnb2vijhAcwao1AOuOJImeSD+JKMGnZbHfnlB2bKAOHKc\n+qBcboZAj2qrIxK8Z2fH9quuzB4zR+NMN6TIxqwn0VZHOGB5dY66P7Hvaod7\nq2gQhytwTX2lYTMxQuE2ZBhymue9BoKk4D7cS1MknoXJOmT8DWA2xIobTdHm\nJGlJ0voMEJVhEK4N5ieClZXpu79lnPkzWdJv9JUapm2bWloIzw/YYxi4dhLu\n46w98N6f97w8U1/4/0fSLAzWdVVPiWzeUbpYnDNSZDC+k9qXaI86FbWbRxyh\n2fnB\r\n=zKV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/touch-target":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.3344d12ad.0_1615975278847_0.012409908188261154","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/checkbox","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.6072ed604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e602ebce9584364fd6e645005b56daa0d7df4606","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.6072ed604.0.tgz","fileCount":43,"integrity":"sha512-sge9BI34E6xDrxvBdu8cx8nQyA3EbeetM1UFScFbUsjbux7KjFmOotxz+L/IUBvHXqulMEJRPDDyt2AAGZNepA==","signatures":[{"sig":"MEUCIQD/7JU6RIfWxz+kf0i2gvsJZhQmym7eP3yiYkT/gi/5CAIgAlzWXrVmDJMlMs3RO6tqexPW7nhNMalzhe/+E1ZccvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUom3CRA9TVsSAnZWagAAkFwP/3hWG3Fw2QGYapCW7FE8\n1h+Nc7QdfFw1s5CtjrRPl8OskXd4CMDOAkiu0Xcj9jlYnx4XtEqD6+K3BcX+\nyWJGB10fdAJjZAs0lchnqczS4oaVEwVXIGitF3pRjI9wQMFxNILSJVh1GZVB\nJ/vIERcC/djDn2oC1NodE/c6oDTY09yvzyNJhE4rBSyLzB8mE1bFccx1f0Nc\nT3ckqVgdg2SSboxCiOX3SWtmNqt9Rr9ysQ6dPV9N4e38RUWmzctkPHT91TFs\nbFdErbKa9N65yenNED/zKI7r66CClO9utII3dtlxx+EC9d+7BEfX6M8gBS1O\noSZ7SlyDe5yVjLibcn75OifhDRnpuAEWyaGsWb8WPLKn8IDoBdBPcwVxCza3\nNuX/195g9WPHTLBU+eJtPJn9i5iA31CN1l4yyAf1c1S9fMPabqMJjfznXxZN\nGKw+WjcJ7TKID4GbcpkZA/V5MIf27IaB3FDifXxGPMkwg77+eOUbFEbuZYNM\n/vmO+YFcNn9suRM39DuvuFxQSjs5E52DsXRiD9IJ586rztuvW9H8hEsn6c7H\nD4FX1ZebAGfBTKazhn9hiXNzMfSk3s7WzfPPqHqzrEVKm64yRrnUskZpYSEP\nhsXr0Kt26yvwJ/2y7huY4IMSWj/lCS1a5TC1Qo/zoTxESO/pF3fzA5VcgIh0\nBeEP\r\n=loJz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/touch-target":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.6072ed604.0_1616021943165_0.4402428666304743","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/checkbox","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03f648bb1249c5cc7f147de37705efcca4c8d36b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.d3a6862af.0.tgz","fileCount":43,"integrity":"sha512-9n1wIdlM6+l5LgWHdYwTgy3dKig4uz0N4hrDtnM/BF7gXSqLn+Nz2w8zkB3dTRKvLFQq3CimhwD2cAmlk0TUtA==","signatures":[{"sig":"MEYCIQCaKgaGJ3wSILS/ah1aM3DhpjRYmTb1xhINAcb2PP+PYgIhANfOEGS/QlBhiSTAmnxVvfnltZYt7NFRzVnFf8qFjyuA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32bCRA9TVsSAnZWagAA7JMP/j/UweWOD8p9awaxPILT\nnTVf2Anr1Y8txp0T0WrgEBonFs0QzvwvpCkq79pViYAWTmnnjYhEpGufHv18\npu8Tp1ZETkAwOhVGyBHD4BU9DgJJF2EJqS1vtIaj+jKctqZrCjcFBi+eT5Gd\ngUb6D+mc+DYz5UGTcsJocn9BqSi5gUeCRBdsIr77BS+rblhcZdwUd2nx0d6Z\n/NjnupdIfDZE88Fe4HBrGFPDy88kFQ9bIfbkdCn0hbbJn/n8D3MeXqyyZUkv\nTtCIxjxn1UPtOpAw4XNTjSI5hIss99wvZbSXAO9LVAsdSI/n6WsPY2gYjOih\nWoDE3bERvEnAH4LjVxZg6c4gbPKQuHdak0I+9cl6QuYMTO19DFoc1D1fL1i8\nJcrhKQ8qho6oXsc8CUBePBaCy5HU+Nd/qS8oX4hIiHlO6pJ+N/uaXamFugCE\nO9NUziq3KE/gjkBimblUf+VEbytv+NO7JQAKERlKJZRPudot9XeKfEN4I+Qb\nsWlDyIOWDUCc/8KPORNDiYLcGlffiQWrjEQUH0Gi+SJ1R0YbVPKIoLjx6U7U\nanT1XBvJWnh1xfWdq6/n7L7pMZ4i+voqlELapwKVct9D1ZbMzogKbRM1LyoX\npjCVAtCWSnBQ7vnbOB9uhuO/LdM9dxlpakR9yNrOWB6GxBkeHqq6BsyFlZQk\nAAr2\r\n=+DSw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/touch-target":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.d3a6862af.0_1616084379008_0.7577441868018515","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/checkbox","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac600ef9341bdd79e2babe9307ade543e43d6d26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.40dd242d5.0.tgz","fileCount":43,"integrity":"sha512-Krg27vQa7Rl2tIgCk5oLKegNEVzjOYV6A1W7h1mcPwD15CkLYK0Wy+Zxn8N+EuDyYECn/YNzk7rM/W42GNBMNQ==","signatures":[{"sig":"MEQCIDTe0GCb8emDzL5ckCHU93Ebezjb61LM1aafQIaiD9/NAiAjxA7E3/RExiyb4H3xJtwq/sTERhtrQN5xYx9PLmQkLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NJCRA9TVsSAnZWagAA+70P/3eVIk6Wjc74igH2Sddu\ntiwSrCQiXw+ySeogWEuZ6ecLzsPqW1pNx79nJuQJf34+58HAcqF5LGSZexHL\n6KADF4qi50QZDBlEfKpZPptA0CQigvxBDtG7k09hIdqXsSm9wra+NT9TMBy5\nkC6bLNHe5HjD0j5e6RIxaEmqGwdkORptr54Qd8fdOFm7y/8PEzj+sXWa/9lf\n6/dVfEYEkFUTJNA4+8m6dPsRerjxoGAaIHu4v3fdrlmsh/+f6dXGllo3dRex\n9rb+GeXoxPQ2tQ4PZqdUJslu6W+mt4h0+H+weMbO+/7/S03FhZSDJr7l/Ttb\n0Xo78qXrXgjsEGwQU/8j6WO4mtu9HEpxONHl9cLreHEt7FvlY819N7SL+jDK\nL8MX5AJiT8EhdRrfKdINwreLp3rqpNjMENow9P3jAN+h4YM/ZWqDTtQU2gqh\nB29Z5RFgYb63CFD1EA0QQ4bRzi7u7HYtv5a/24alJNKsb+Dyizp8/YPjiZrI\ntNnZpCMkWUyxUwBIJSy/dmPnRt1Uak2+WU+yio+U2AMlgPDIHFqxXKKPs9at\ngIpitwvvLvE0HVR7TDq68RcwlrW/t/oDhnNj17B+UdD3/Yd6z8kBxmwLsce6\nho0cyKnOQEQ/8zjh/oY2KrgZsl1vM6w6DGq2uQbXHy6GIvzqdNNXTf/qlwmp\nsyqL\r\n=NSh+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/touch-target":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.40dd242d5.0_1616102217217_0.24434478620279032","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/checkbox","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13987fe02a2ec215c91a31163c9d0ac6c242c4e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.ec8f8465f.0.tgz","fileCount":43,"integrity":"sha512-uzJOuwrsAZACmOfNLYBmelKd6Wed7xtlZuvo3jGIaYV8iyYvNLPwkqTl3ez089g1R/RNzE1UxLDNgGwBM/kCmg==","signatures":[{"sig":"MEUCIQD6cxs5WHF67jeZBu9THOK1uZcaSzuT5GSiDjyojqlwJgIgSv5f2LH6/6tATb+qdTCAJftOjirx921k6M+QlruVYVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8maCRA9TVsSAnZWagAA8uEP/A9vnMGFUG+9mIstr8PU\nnzQIVtYNQPWmg69Yntq1gRkn28vTCPk6PXSgBK6Zocmo5yDaHrxvuo5UPN8/\nJGCnWsg/YF+Z/VK67LUKA9F0X7ift+y7wBxc8bRtqYwphtvt43N0vjeZQJWg\n1Ka1HXwUDt57Jl2gkKKz6QKw3IM3xYqXutBursPG5ZLnbKbYyYsOER/FudMG\nnpjOvtrd19YpIo5d5Bs+V7zZUA6K3VTb5yoiGk2gUhiW3U6/mt46zK3FZjvX\nl/Mww8g96vuL6XDxGpCo42OWPcM+XF7op/9nEXO0XCf9wTn5icnOce3OWAyz\nU15r7mJreqRVO4CHI37P/O/TUIim3/i/5L06ksO0tj1IuLvtTaXTCK2FeVA6\nMzgvQbhI0w9xGI/KHHARRcDdclP4NI3Au6WAM6UprFUqPAI18xq0PqGMdq4J\nfZf1x3J3SSi0z7+KPb2w5YmDmbxMsQwkH0oBjJrtWuRN24YzqUNxlB1BKDoW\nCPFfulJEFQlPPE8lySKOgipFwocSAFoLo4a+gRA1g3UpMev8GTr1HVJk03XH\n99agFAjB+2SUEPzuxkM9yHYor/OQqOcswd1a2Z9NjvuhVHmliAwGVcgeYx0I\nFnQRlm5668DwNlAVloTTAIW4cN97OtJeDShhJUJzVSIdXk4sME3IErmyBNqB\ny/0i\r\n=Pk0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/touch-target":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.ec8f8465f.0_1616103833791_0.35353520800761395","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/checkbox","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.da38969ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ea5895e944861098368733197275d564359a91","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.da38969ec.0.tgz","fileCount":43,"integrity":"sha512-BvxHWpYYR4M9ZFRp5hI++sdCaiaZvj6ojKMuAQAPFTuoT3wCdznzFPgQ5pHNutZpJOBXMQE/EVOhYBKnIlf6wA==","signatures":[{"sig":"MEQCIAaqBSEuYQDtpaBA9418h0deJLr6Gb0Pg2lO9WtrLWhyAiBuqz8WeUJlqwAP/jg6HBsas1pzmfDOUxSvExAkhyhZJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9F7CRA9TVsSAnZWagAA8gYQAJRzIDm/j2kkJd2NIpC2\nJcF9oK0SBDEbNxn29VwV8h32Z1lOT5tEZIA5fKgu1a/j0A6OsPx8hpzU+CF6\nss9MJs078ayB8nkmpdTJ7sxLZc4L9eYVoOtltFqF67cUDMERMwAQvLy3zbdv\nWUJN47VEYDoitr7URcGSm+VzbArd2yUc/QIZjPb4pmNp4IxKbZE0bw+2N4NG\ntqcrm0VEqEsEdYuAHQNBSCsHA7lX2eumsePrH2Ax6OxISu3JHXj2WAIwVeJ8\nBInXhWDcsJu5P9ToSn+0NmGpCw2pk0kbypwQEFAEayLMLBVbeJTqAZwccyfq\nY8D/QD/bMoL9daAzZqetlniDrQscocyjnyWQ7IGWln7G7+soSn++xfMeCwmS\n9uqfH6gOvYvbKQQKXreAsK+1yZR6mDfqE1EDR7O5evkCwC74pjoi2oR4H7e2\nY9tQDU87Xdos5tHreUcUHMOxj2nyIPueTf2AO4rqy7UA6DEUJL75/L4MkbR1\nNkwko7o59zpNNzqWZo8oFfXW5QAWc/RVxnEshX7SOV97JdWN/HgKXJuKKqwC\n5qNYL7kAEK5i+9X1DX8GMwRJb6JbmUe7SSeilr18y9K63+MNFqEqL+EoX1YD\nlLy6cyA30G7/apuPSLAnEwUUEi1+MUnzahPtlAhYbJM8Ecm8qMDtF7JVOfzb\nybYB\r\n=UL+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/touch-target":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.da38969ec.0_1616105851266_0.5662922663584202","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/checkbox","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f5246264d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfb5dec318d43f7feaac5fa98b7e3c7896a2c68","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f5246264d.0.tgz","fileCount":43,"integrity":"sha512-zEuMBjkgLIB2FhzAyjs69UJD3ydp7V/1J+etDYnO9J3YrrCslkY98sz4OMOZVT9JTn7jvVTLrLU0I3llETWEUQ==","signatures":[{"sig":"MEQCIC+epBhGCCBqB3G64Kxn08jGt87ekYNpeKB49iugKoM4AiA8WoW/crqFEKy3ZozjQhwV90VrD3D7M1WV1tXtdwE5Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JECRA9TVsSAnZWagAApKAP/3bwTINMKmkWwi5iC6vP\njOtECFunmH+LDQfmSu1mlJeGISVaTS9W5x3OFB2tjg8hCtNSsJhcuDh5Ipgp\nYu55Lz5xYkju5V5pDGCFl06+XMIeqwvxRPo8PDOJN5piJ8DDmF7QGx+ugR+Q\nnBXgm4Hp1pIaZRmdWvgZyzEniESR83G4RXhl1z5uP06IUXmIuNjifIe/UdNS\nz5iMbn3Ff7Bx8b4E57gu7hHN3q3ifOo8Jkaf53T0RveEWgWgTOO/fPnabpaw\ni46zbnW5jzkbA3KgfOo8V5VXm5kQJ2qZ0ei2qFTFAx1CS8LhK5m0DA0JOI+4\n2aXroR512xOFmwXKfQbcfdIzHywCUt4YwOg+VhhDxJ5SkuP3kINi2JuY6w1K\nt7sK29Tz+eurHiA2bJMr9+03RbfCQzx4bpgFd8V5aP3brvRFOXADHnNVrka5\nRbCNHT3fW3qsjGEmbLHSJ8gjQigY0s8uGMpuTPH3XmsXAlpU5u/+DwSWd21G\nnwhc53mvrA9lLsYt/WTU34kQixBJt6ywhFjQyDT0z0z3XtFxvbOIOmW0RQZd\na0814PimP2mYUa7f2/c+ubrBaunZfG7P28SDb1sSXbFM/7uf3FQuYWGyrVrl\n2/kvNBb1YxJkteoLo2gqy5XjRM+MmGSkBdxsgIlP8ENQOVIpc/HQ7QqqDaij\nsMt/\r\n=6Y/Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/touch-target":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f5246264d.0_1616114243516_0.5890501582277508","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/checkbox","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a13003758633c98d6ae315c2da139a3158d658c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.03d34bbad.0.tgz","fileCount":43,"integrity":"sha512-aXUZWvExz/ZANTOmTFGHx/d5e4zS1QGUK01ZvEsi75nVmCi7UKVVezzy+lfuJPUGECt+dW00zqTvBbowRrhLUg==","signatures":[{"sig":"MEYCIQCSBLnxVnaoyN75y/4S/tVQF9Rsz1CQegfDm+YUnPLVqgIhAM8u+N1OR1sYr6n7roOfUNTo/jujoUdX+T6JgxC2ofcU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/VhCRA9TVsSAnZWagAAMHwP/2WWzHyPAWiOg9dR3ofs\nLxtgqU8LlKVOYSMG5sljAaN0TtLshTpWzi5JeC1SalV5lR3oZmtGffkldv61\n8sIETW/4xiihmhniyMW+ayPRw8xOPE5FjHZPdr1MFEmWzjSj54nKU5OT8ylv\n0aNCpw6PBkhR6ZuWLthZDseT7LJ4vl/+pEd+419AYDoPF902rIP17prUJJs8\njpPziYxsxZh5GF00YkI9WOyRk8clr7zKYnZ8MPBm/h/yW1das8T/5DAz5RDg\nWOq8oTSroHUlWPD6bHEYtoLEpNhL0Z9k2dClhuPKpifFDwcN+li8S4MxnWuI\npUwulb9V/X/9zonOhvUbhwTQbC4ZLLuKh+463cOGU5a66wl2t0rPlR0w97KT\nceo048G5qxsTA1QQ3/iw9Ff1YUmv56LA80hh/BhNHx/4wWE/R6WHofYBTKyE\nIuX1vy+/OTCcMAWMYc9rSr+iOOxpQUjb+RQXiw0L2YEyV+pkP+asSvXBJyYL\nr4Sn4Mu8Yz+ItOax9k8xgIDnQA0X5I/Ga5f4wiuTtOK6HkdJNS8PyQSsP+M7\nqB2X7cbH8FOpUR6+37ZSFbolWqMC9+cjAVBQ2n+zmSBGOFrUTiRvmNdRUPST\n4motP372APkJAqMjeauOLvoZXDdnndk6dwAMO9OQM9GqFK/thcnzAm/mB7EH\n6Wiu\r\n=BDmP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/touch-target":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.03d34bbad.0_1616115040471_0.17353448876340805","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/checkbox","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59f79ca93c93bc3321ad52be5603a475106ece26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.cbc57c600.0.tgz","fileCount":43,"integrity":"sha512-KVtCg963s9FPAmEw5gsb6B4uGJJjseTDxpW09b2657a+jBuFCghlsdZ6GeBXsR2E10cw5ao3pyS2om29AsLnqw==","signatures":[{"sig":"MEQCIEwv+oMWvm/6K3Q+fVtU5u/f9GCUheKec/uRvaoKn55rAiAZjFDGAVmFcsSp2H81RM0byNAktLI8mHUAoM7Gaz5JBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/dmCRA9TVsSAnZWagAAHXkP/2Su2UHS6E4kgbZAdejb\nl30XlL9KWdt61U7ymC0uAKBSNFBWv1+FF4FytWzAo3K4djQVhziORhvUOopv\nu3XmJI0fBUdncDAT5UA8nk6F0bMqdFq0w4amTAKPgKG6bB4eN/xmw58HoxEz\nDiS0fNfg9B53/uX9jdruV2a7/dCjRGCO2UDXaLOAtzTQTGEkTblKj7rwbM1b\nX26M4DB3e6qV9+4c3BjBW0XsQ/FTnIKFcuDRS8j/EWkBAcR8MxlAnH5XZABo\nnO69ipdE6brqZPZ9wGKya8e5NoHyKB9pXVbbpbZu9GntNqYgme36aJbE/+Pd\n/Ixvh1Ptm9TKTMF7Mzbg9q4bu7EDqQeiN3KYORZzNi5K//ea+8Fcq5CxfXka\nTVlGMzz+nX8gEke0zBLGfw/DceGCO3voeko2itY97Q0cCTwi+Ipmdq6bRiLO\n6qO+vm8AbNi/y2ng1U6ctWurGoxted85jOi+6n6onP/d+MxBYttB1B6ydU5L\nPI/02kU2Edm+i9D/b33COwPftRfI1tfd2YGio6G8bVlfyJ7ZdDvl3lU+SOPI\npfju4W8hgFpPb0CWguTwSJHpADzl10Ed7793rAVc9SZmBfNKXbTv1emytb1p\nyBxJN4CZ2Yyd1pNhxDScjwgTVhsjLGjJqE558pnL3u9NCUoZsMN+Rw494m8G\nlhp7\r\n=YbRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/touch-target":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.cbc57c600.0_1616115557710_0.37380474232796534","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/checkbox","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b2a21e3dd7c7efb767460cdddd60f3518e9188f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":43,"integrity":"sha512-sV2gC4cB1a1ELmF6fATb+kTDh0++d6gPY2NTIq/c3/sgzc/J7MBULOly7LMq3hwBded3yXVCMviLP8KT/YQvuw==","signatures":[{"sig":"MEUCIDwdWmoZcoiHBnu6ACnyb/Qgpw0hb8tTKZT4Y8VcecC6AiEA/iDp0d5YWV2nK7R+q1aXeOTeaBV6HUMZk4cPWHtUk3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/pcCRA9TVsSAnZWagAAGDYP/iAW2c919zKpxSNJXGMk\ncc9mQCf2TZLid/3lWQMGgI7fG8eQafXjMKJFO58BW+a4DkFPv+KztsEkXcHM\nYljJFq6sx2MnXwfq3OKkC46VZsjsUkMDG3TchWnsI6tfgW0TiIH9zcnTpLfv\nNavu+4/5CqO6rvw9BbWZBkma5C+WRzZuOID30ZWXD9e7pZvM12OSlNKJFOU3\nJzpmicWuC0vWnPwPfBwLiEnvsJrtJdsgLkgrz/WjK9XN5/3I8imQQAq6nenb\nfR+rLGIn29zblitPcZx7CdQy5TcnMIkrPiXABirktvHVoA/kxlUZgNTpbat5\n3TSGPzULvjE/5O17+r+O9nXuUkdHkiIH1Rr2+xPIVVHX3n0nRHrfVUZrO9Sq\nWici2qhnIwIdDvgWp73iv1IjrBm4svaxnSzZGcA3lvrrPh4WKew7PfnhJe9P\nK3gNt7camA1yeKZ6rTgLz7JcxNbz8CqRMuU5+mBvhQFrO/Fg92H1HJqbChDt\nJI0iRh9/Kpu27bmhHolj+f2YLI0hRvuFEzpkPjH9pKzqXrgX3Tv2G8HOlXHX\naJQ71GL5rOnUteBQljm7KE0n9OFsRY1g3v/833TWffW4pKDy6NSE1SRw3dw0\n9g947WPa3Rs0F0x+aTVcSbpB4xZeqUy3wHu+CS73amyhygdqQoc0yDBqsSjq\nDZii\r\n=Vh5v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/touch-target":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.d6c5bcf37.0_1616116315787_0.6422395773186007","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/checkbox","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e6c0a5d273edfa8c0e5516f8bbce335149a545","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.fefc668d7.0.tgz","fileCount":43,"integrity":"sha512-pce+7qOXx0PWo68GkzbUSpJoUuQF8xNR1eRozqkVB7B0dCzIgzsB9CTbgZBgoE2a1Q8zSMLwaTbtEGqs2/7tUA==","signatures":[{"sig":"MEUCIGldbyn80DTF8TR1qjDj02NSvFRO/z4vxc0HCNDMutESAiEArD8RGzleFnW8RsALV0C2JlIB9kWtVdQvvCSlhv48MFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9iCRA9TVsSAnZWagAA48UP/3HGMThPbYsoiyYkZt6K\nktGOjiM0cfbaAVRsf3LFVovDk6npck0j7Y4rBJgeYZIExKfQxjod55XgxGdh\nGKkdK4krqfBMhEecT9ZNLeIHK7eKOzyXhSaHSt8DtPq2dX3TU2fvCOPelxXm\nbd6shQdLjHG2p0TkhqhtnMbL9BAMgChzDy0EXb1jicQmurX9QfcwRk8Nc3ME\nHDGBt8QTfwvFzR82J6512oRy0Z3moMgYctDzu2hfuadaSa/9s85LoKqKu2xx\n/iVJc/B5UUJdxbZD9OaskM4RCl8/54OmCmBvDgwGMyyhmQSNvgnTwOs0E4k9\nosqznfTTWauxQC3ElUW5+IIIbvWXzFGkfLSEYCTTD1OJ+R2+Dl65PAgAjclh\njFkScpT8XSq+5F7WO6dcRqumcMrdoCmaBUnJSgH+GJPKl/DVp+kOe9gTqcfM\nxXK9RHKs6L2QFMNx+4xkV/QCjLNQBCzJkCqqtJJFuISfY8qr/ahlfqyzl075\nkrr5NJKeT4OyCkwUwZOTRVz8qE8HLFl5rlkpDsHeOvV/q9rXxpcqE84cG229\nj5cF7aHsWCB1EiuM7J3NLeiak4gCZosgmqRlyV0QaJwFqToZb2hBlnjb/u+5\n5HyW9zrxUlB/qCgIq4U34CElea4UcYOiFDX9QqScwwNGTO+4zPnBqDpMpIPQ\nNm+K\r\n=+Jrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/touch-target":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.fefc668d7.0_1616117602074_0.21195925457191556","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/checkbox","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b914f4a281d5eaa8466dd5514df5cabd440015d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.faa7d3226.0.tgz","fileCount":43,"integrity":"sha512-G8AO6ckuvxFdKMLtZ8SiqlbPELGaflNfmrHx6Qr2wxVauqUPTNJjSnxqmrgpBevEMCqqR7P6IYALCwhrmKzgmw==","signatures":[{"sig":"MEUCIFfKn6Zmu92m1eB2FA+NflAgX6h1RIIzLE/T3RfD+9RqAiEAnEuaRvT9U/nMNrw0nls4nkP9QLiaQIgI81z3na5ddJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLECRA9TVsSAnZWagAAHeQQAJ+zbxCTG2Ir5u5H1nnn\nYge6yV791Pl7hx2MXC3iBvxdGRLslIMviPIxs5Z3AigglzIp+tjraj23HZG3\nHp6FB/Vn70ydNkDTNwVG9AX+v2SQTUPvPjtbo2ktVJdbjey4qAM93lFMjEvy\nOp0CxARWtB4MvV3yUSwpKhbNstOxw2hWx0Or2mzuWuceAm6Tzh/HwuKhzkbj\nnXh3IILr7BIAWz1USBOJoj91hPgEBZa6rZ60MGkvV3rJyy7aqWUY7x9/0/gI\nzTv0zxowfXhz0wgCSlcnPKglnXu0QkD91/1WTl52yG80XaNqDZclobkwceBT\nMxpIRHvsmTkasRpavFGZaipnugeaB5EZhrQltXiLad2fEAmOVwB8r5f4zQU4\nNmCYKDbuSu5a/lhycZhsmeMZWuaJ28H4t/OT/NpSkSe5fKM66TDGwKw07dp2\n3z59pzjflr4Sz9dACx4kFd6DCu6eSGaSL+nqs4YPr/RFMuGzprYCUvmPvpwZ\nUy8BrKGFzw/acoXcRP2IQxtXDyDOY+jy+asiOhoQlnb5Te18FXxRnElto2+t\nBEVjqkd2dI2hryVowTIPH0eSLpqDdXA1Tus7YVuK8cMzdzdNy9DKuoK/nOuR\nlj/SAUFCwrz2Br4EJvGbL3/uzxh+t5aiyQ7y4+PnuwD/kvMKb9AKfC1/Lcll\nx1df\r\n=aHbp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/touch-target":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.faa7d3226.0_1616175811530_0.5708304512158557","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/checkbox","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d11adb7dd631fcc41fd413b78ebcc9ecb605b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.c60449bc8.0.tgz","fileCount":43,"integrity":"sha512-1a8R/rd/qAYtqxhY8Pu7GVenWynz19cHvcgixev69GtIzbLIMbcUcunApM8MGGggYOuSuDEY1b283Hr1c/9LmA==","signatures":[{"sig":"MEQCICxMqq35qJ5a/U5bvBD8rNeeBeMGZ5QkgJxh8f6jTU8SAiAmvyIMED3A4R7BIrzPoZDzu1cUAUxWay/b9FwCVXuWyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOe3CRA9TVsSAnZWagAAzGkP/iUwJxKGhUzUgTr+XEbm\n1HY9UjChHVfZrtPUVWTHvL3R+ux1ZPZI6lPpLQ5crZ9b/Jmi8MtqrT3ktwwB\nvBCQZrSY5y9enOcpWl0BTsF7hZQltdI0ixFbHn8EKrSVW+7e1XVsOzXqf05F\nKd3LCHKbP3+9JluySHKGEgSCZYBUNg3tMf3ah9crbemqYYUciCc3FZMsg0dz\nQoNpTtKX2eUtifk4hXlV0lfAeVj4hCY3HqNdO66NUqVHF+ykfjmYWTMrczIj\n/nLtdPoEYI63Hj6tiVq0DteOwlLUf/n0AyIJQKkDe+XTWtOAlf8qle0x30ws\n36DUCuRUxcMGUQ47ESDJDCSsx+49ur9p30LP4v9+Z7eTAYgxsPN3GoUvxRz6\nFrE1jIA3apt4VGeTPEv2raO38tUSBJKiNbry+6mtabOS1Wd+lnAQv3o5pH7E\not9dxQBTMImA2p1Ru768s62znhRa6fOp2G7I8JGTHrItBuRa78uVPyrUS3Vw\ntPGl5aeqvWhcFQ/QNuFIvlr/6g6RELxi0FciR20hndWr1qiqbP10b67Gfimk\nBTbD+JfYbNyZNJN8j1hWWvGv6RiBmUCNJ1Kkz2a77n3EmbHt9erRUTWoaGHI\nwGgffdK93lBznWy4W/+4lo/dmqsqtE2z+Ww9VqBv7W4q7Hyidfvf6WeGSDFP\nhyP0\r\n=n09b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/touch-target":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.c60449bc8.0_1616177078811_0.3725374150510461","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/checkbox","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec5d7276ac65732d8bc4d7f15a505be130dc1787","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.5f0fc444a.0.tgz","fileCount":43,"integrity":"sha512-nGeTA4hWNUAH2UfbDPzDtrGlMmpdDGFRNz38hAUAJHVMVfgaOrA+xfLZIYBxM1r8urbdnrPcHWgwzWJY6bY6gg==","signatures":[{"sig":"MEUCIQCgXapM8i2k7f0i+T18rA1QWJV5W7RvvfoNuvTI2Uas4QIgUwZzHJDbNZvgdLdBk/mPSZFPq5jX8AKvajAv5GtsWD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9cCRA9TVsSAnZWagAAbtwP/Rej4iyvOWa7VaJhdzPN\nOC0uizd1oJ9xdPj8N0/mlNb99/cwDpwJYZx2K0HBOsh33NLFceUtmPvbUCJD\np8kEYjDGlbr+QPG2iQ9+UseJ+zNVMGTgqGZoJNS8qbj/sRCd7PyZ6OhqytkN\npNi7eqwNzaWGdoUgqwWNBZ1wbgUreIWEQ7T/wN1V4yCoEn7jdWzYJWVVUAfW\naFclX74R6Axpit34uCEndkzJL8V97sNQKWaC/3ePRVIkJCdukBk4t7xMlv3H\nED98YmvnDbwydhjhgYfjCgystQgAZBEOSU90Ym0JPhV9dBgSWkx38715UQCR\n6hYmx/Xtldh+JrKm+cNfw7bcyby9cZBi8cNitqnxJIAyRkq1b0TWMp4t9JmL\nRM0j+2/HKzYXYu0UH3La6GkW16CAuYZCSCyIxI+ks2wcNizFmBnDfYzAk/Vm\nnWXPFyag+BbV0itrudnHdlXbKBdyAXY3RQElUQxosf4KY8Vxyu3ejtHGYBz+\nQ4OXwljDNSVQlRoV8etbapvOk2A9bgEAw3VEOaoyEvi6YwDRtJL2iove1L02\nYcsYAev2g/EPv0oU02k6pcLLIJk5W3UgMd0BgtrdtUsWC9yMV/peymxbDDSC\nDfXjVP3vgKLI2lRkb5vZm/o3DQOAcikvb+ABqwXPvLWsmCWzJ1/OjpHCt/2r\nEDWd\r\n=Ss/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/touch-target":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.5f0fc444a.0_1616179035797_0.11578683956681002","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/checkbox","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.4567a750d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1247c6c9f3b59d4096347610cfb0a5091e981e2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.4567a750d.0.tgz","fileCount":43,"integrity":"sha512-opmt31x1foldQCPj2fI0OGXptXpcHDkTpaiq1ZbqHtoNvOtWUFQR743r3JwWP2Mm0lNmZzIiPjmWUdZqv9wnuw==","signatures":[{"sig":"MEYCIQC5pm4qOhfkHdMFNLNuce6b7wBi6l4VlCMnnta/P3a+2gIhAPX30WxUqKPG6i3xc/BTqE7fIfKwCjVnYksJW+VQuNi1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjVCRA9TVsSAnZWagAAhmEQAKETOywquro5vPtp1XLS\ndGotFaVqXKHHFniwLEiz5RHwYxG6HxsvB9gT+3gcKayIPBodf0mcD5DENwK4\nnPPpVRNqPspnIxr2cxbQvXHEOMr8mpGh9/e1vaL6T3oDUaPPgtIP5lWgddzO\ndTh8tkfFovVfq2tR0Mnoi4ROoYM1P3x0Nh4F3+ZbQLX5dMNWjJSizID+1oPF\nNzkBZEpcGIMEkawnBWqk4BpDvvlIWlDW39GTMfdU7rZBgI5Vwsl2bb/SuTpm\nDWKOSh0ahmHH4VPswYdJSl4PZ6QpCkjNtK+vLW6SIj/FNwSXRglGL7O5JhQs\n/LjbwmoFSiNJ64JblnBv0x1XTm2vzYcQpWczA1kwNChN/N4Zhq9rpgqOiaHf\n9hrqs4Yh1QtuDXVnpIbORGCqTbFreqUemWc8yLCZT7JWQQKvTQQtR/tKX6/a\nDfJfb73Pk8zV0cWLTDcAjLYw0CqXlQrYyc04yBoVrqBN4kL9V2Sftuv0fDa9\njnYHlyB1+U2KwajN4rKxBfJl3mYwDUo76661xomdcH3m1DpWAC2zRX1zZMV0\nHmvl1t7QYe0vW8GQZNMeGwODqC+MQmY14Yq8hy93/+xCo9AsiEab1/L1XOs4\nIkmmy/kbYRwDZ8HBSYhe2rmsNfwfPGIahk0LL48lEr3WkWPk+CbkAFlbhg4T\nknnC\r\n=toim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/touch-target":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.4567a750d.0_1616206036633_0.949853734928692","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/checkbox","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9dea157f201b9542795ae1c3fcce398ced8793b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0cde52f5a.0.tgz","fileCount":43,"integrity":"sha512-XwiMYnAbS3aHead1rBjvodteUaJHzO5vkHup+G8tfSkxZzp82r6EHvVksG7y4+yY9XDjRDMfsi/NpPyL4T6VPA==","signatures":[{"sig":"MEUCIEvDJjJhc/wVU3uNFeDLQ/6x2xBZJWj/Eg8JDrxb2zEvAiEAvXszZsrp4+IH4kM4Gbon6tTZIL1SvZCeTx05HsG6e+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAPCRA9TVsSAnZWagAAckQP/iqE8hZdLxXGTjSOnrJD\nYEVKVzQqHsa6Jp0tuVdE5Yln5pzuvjqPSoRz8SPvkG/1UGRrNqIewWWaPQzf\nZtW7PlPFspQMGPMKpnS6O7of0JOqyZtgWhtMuek5cFgVUy2B+KLHXuhuDn24\nQ/YdROiVlDOAy/hBn5cVuvhRYf2yU4xbf2d7ORNKo5t23yPVDCAPCEWIefL+\n5+kXscYjvJHqdzXrIWgkjR8I1IMa6WmUGRODkGkQ3qJ/zAXFXEFhgQGz5tO5\nOdQ2hRXSbhucpprFcZ+KGnQ0ahhLVmgxb9fZhgwRXX8ILaRV5qbn7v3LOChR\naIJygKjBJvsOYgV2JVPV7ARNcgueukepP3AW2WoNh4cVNlfDN6GS9OAEMwbk\nF9pX1M5whHTkOCByW8W9VcPxS7qTvvLzC4F/NLja8P1eWeHi22cFFzyilIGo\nGkPqAqPgw5DDs+DWin5RF84juo0RShMh92XO6ul7+WqZotAwT3ph5pv7yNwS\nL1sXGm4ck5AYD7I054Ke9LDD5pQjiSDdqqzburfJ9qbmBW3bIX/0gNdIp9Wf\n7uSllRqAvBtTEe6Z2YTjFmYQ81mHlx3OYZWIHlwk7gkNxgvu/lAq7xG1sFcZ\ndRTAFUTCXeH0YvcOI4Sb90E0Vt5hFpRfA6se9nY4p6AQmcn6av6FLP2WVbea\nTsR6\r\n=lSDm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/touch-target":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0cde52f5a.0_1616457742888_0.6206773066520921","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/checkbox","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd522bba9521c2f2780939b203b91abb673e60e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.48f4b67fb.0.tgz","fileCount":43,"integrity":"sha512-l6qilGz+i6Gv3VbZUV4B5oiq/AwDpQEncKvf8ZstEI4pS17ccUS2uyKG8clJztg0AgFZ9PEl1dfph9QJOca7Hw==","signatures":[{"sig":"MEYCIQCGrHDMxYXnPgNELZNcYw0p4u75CoIQaREBmZE1u1aSpAIhALLzswKYoAFVDUGZqVKMtkyITTj3MABV2On85AsrrTrB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkdGCRA9TVsSAnZWagAAh4cP/0hDW3dgTcTguIySBFXH\npAW227L2O97C33jXdXQsoy82yfIymDYpHlgyQlqflNYUKIuPxUbpQ2dgwHYB\noPz/4MsnmHTCsDj1bHkGxd29K2mm0dTh7fuuVS4yaq2fW0uola1USjTiOQTr\nwDo0QJM/lWQr94GiGL1pAooMXBUjQIVn2aqiOPLh3dyQv/0TMDnIG1TAxSnC\noldJNShTxw3ENPlGAOFPFvxQ64rWTO83xnZQSgcU+ZILVn/+JTsion5JsWm8\ngRw2dcveCUqqycmbD1X5DlslqCkE1AbzPxEYoozKj9WwX4aZt2YxJ0cgslVw\nf2IOFT2138sYm/RFljocF3B3pI+a2/ilfYdVeibQaPwZcDB8rYnh1FZ00RYy\n3gsif6l6w3/ew5E+XcVHUgcTHUG6ck4KDBxPk+jfQaSnZ/K5vogF1NaXZRe1\nPnurkaFmqaYFKS1SMuo+14lq9GhWDFmxnDVneBUVfiFL8usnBYOZjJHgG7iR\nzvA5adV5QBMO6+R9ZvnoPb33VvrpBxZye++UeEzIcdFytlJftw+7lFy5Obam\nHcX3vyVMcrrtHLJEtDAhUVEa57uvIWF9mH5wQIICngb5OSkolOm1KNChuNT/\n+UAJKf2svWFXr9jNruKsWQyTYLkHt9KbDTGA6KdIVOWNsI6WYSWojTIXvgY5\nklOF\r\n=K32q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/touch-target":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.48f4b67fb.0_1616529221635_0.4495876980864437","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/checkbox","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd2052f3723c33cb19a5a371fa31fe363fb8a7a8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0b8cff734.0.tgz","fileCount":43,"integrity":"sha512-4UdFhbluu3VqVJoh95P0UEY5MAffpgw9SKMxCsIlNc1QCzcjDaVwVdAp3LMukg3k31oqT1WkRyH1iJmyZIcOww==","signatures":[{"sig":"MEYCIQCzk31Re9XzCmx66E118+K3C1qfJ20NK7Ht1n2JNnDKUwIhAILZDa1i/Ik6URMpugz6Yn4sBu4JigHR7FI9QhL0I8i8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkm6CRA9TVsSAnZWagAAzMAQAKRogano3r0ya/55Lqi2\nhI1OARiWwNdNNhATzrPqvwK3jgvueX65okjQWB4Mq7xEnvsQXrWXDfMbG5cj\ny39/8zvh2I9m5BjLFt1QfIi8GOdhx3svYlS0K6g7EwzH2j7q0Ob0HLI0Bwf0\nK3Pp/zIW1rSDYL0fgBXmQ/tjosLwhZ9ytmEqf2sCERa9I4sOCT0zIkz+J2XE\nss76Pd6QE6HfV91miFuUvdQArXNW5E8QDYkrzNHfxRRm68S5ZOzaXjmZT/i8\n20mocQm2jEhywEim0cBwziiddCGidSBoD5VxOZMjKBO3i0JDmIlajuSmsBop\n6e6kOCWdfx2czD2AGQjyP+tN7yORSxuiPddwtnvg0AC4TrZxLnYz6XhdTpv9\np8F4PWrJ7wYfB/pbQkMbL4LbLB2NsWuKLhJSjFlbux8805v5+GS5yQFgnJ2u\neDegNnRKsmV56gVDkehgGCftkL0eizY0PdFD/dY/pBIGyGOxrfL5/WrA+rli\nDkppccQOpIO1k4W3eCYREWyvAwwnN9d3LSXt2a4IC0JoTQMV9KeV8TO5La76\n3fOe9aIPFqPZ0pzw+iICCmYwrLSq4kh67bFKtL7L5q7jDPrhUtSc8lqtryTb\nUZJxN4Q7qoZfMiIXnQUHCmg7WzLf6m07EvnB+NElM1aBanLfdrZAG510Ifia\nqNcz\r\n=Gb1+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/touch-target":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0b8cff734.0_1616529849883_0.332200210237545","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/checkbox","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.8943b991f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d06aa0030af33e9d2f10a84cb02a89a10b7efed3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.8943b991f.0.tgz","fileCount":43,"integrity":"sha512-1nOMc+vfOQuqHh/fF8t7BPtkRCRWd9x6Yazwj5vWoAX/3TGBFD/miUmE5z6H/Nb8gNqXX9XnFsLNmOn4PzQCeg==","signatures":[{"sig":"MEUCIQD/P2r9VomEgGPXNyf1HqpkI2gah21TMw/kGV53/aYVeAIgV4M+8m+Vafnwi/cV9gttVXW8v+ETmsOei2bC+O2Umkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+UCRA9TVsSAnZWagAArj8P/37wCHR2/7TnpiNsu5f6\nFckhYVHIsscg3li7EEqux9K8DZ6xyedHGBDHrBv9gN7gb3fji4FZ6n26M59p\niJ3ZYFf+UYwTQ6m9W9kmZoeZNzfYhDQbX12pp3soi5DKf1r0VadW06DC/TE9\nM4pgNcgX0LxddhGLqCuGsmqDihxMKlkhj2t8zsibPUq4nY3SI9gAQ/WSC8Ii\nDzRxOJBFBZtTj6L86FTEAB7uvLv56fcCCDL/oWF3BXM9PeEBfa251mSAyj34\n7+nOUQ2xAKqZ1Rs/0HwOvrUDl3eVitaq6GabcvlrulVQTrMPJdhbhaiDlybM\n7zFhG7ZvgpSNqE2rDtyTQJ0NLJXE/SXVLFIhiBFD9GH3rkFa8njoneh1I8ex\nf+m20NNAJ4VtX2C3J8Q19YSATiCLQRG+Rii6mHG65GVVqPmeQSUR/CLQYufy\nhgfR3G8986CJtbzMW4jUwqKNkm2VfINDAG4seQ0NGJzsDPC+7ATxwuFuRMNq\n8jW/SHV9CIzmnq/Xg2KH2NUlfeoM1wxt1SKaGPbixMSiC+dyCD55eIjjUPmW\nMICKxo33oa5Yj6uvGULO3NS8sbFSgmyvo+09HJ0Ydl02pTh7YOHZrYqYyFtw\nvnGsHKy0CrfeMjaWgMW3Jeqhu7CUF0f2IoDW+yFzUR+QlHbtYlBS6ogvJtPM\nEcaR\r\n=rZMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/touch-target":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.8943b991f.0_1616531347420_0.5815930266309481","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/checkbox","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa1899ac72fe068a4e70b7a720bb7fffb78732f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.3955d8d3d.0.tgz","fileCount":43,"integrity":"sha512-9HX+bFdmIRhaOfDspFQTw3iPjsNhMNcWFsZhvPPwvf6pf6wPf8PjnHIK9NtTF44KdNoQJ6CaW1IFoW5hnpRxqg==","signatures":[{"sig":"MEYCIQDUNG1RlVoaFDClH3ZdvOhYl8iY8Fr/o6djz/5dTmzvkgIhAPyoTCPp+u8SpIaSxTZaYly8w/FIT9hX/y11LHQuo600","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/nCRA9TVsSAnZWagAA6Q4QAJrrlM2/d/KDFSYbhzWw\nBKIltTRQlQ9kiTQz2nigtZWZC3+NeaJDH9MLGtQcf6i9YYW1vu15y5nkCA5D\n+34n9iFNxxOtmrGimROGABJtLydvCh5RGzYmkt76nzcG+KFrAijwB/ytGlxj\nnlP831DTNnQ1Q/0n/fv/oHY0JHEITf81utCFFobToiSRShF18LSCjVDKyE36\n/yAb4PBoFwsmFBnfF62VH9En31NvE6LfN4n+SyQ4FlEphBy49+3/uyp2kRr1\nHP53jTWzzawAUKHELGdqIVvaFy9A0hNksIvatQZFn44MRt3i17ZVkW1sz9DB\ne9ie0Fk7E/E4VkokFyXwrUM3TAeST4sbubGYTsBTCBPg29uAL+P3EEM5tv2R\nrgFUhzqdu2/haMJA32UzQEyvw+TTYga08r++ODQmHFDTb+Duzryysuj9wtVX\nYdU/A/1pUv1KBL8cVx5AB1Dt/ARJly8dN0C7qV8MndAeqdVva/PTf4hkDekN\nXRClhlDRpybbM8MTDjX+dyghEUpEvaX/SWCzvFi664WDJn56u7a+1MDcRUp2\ncO8CC+CQqrK/FzgK60hO/SrjWwW/OYbjJ8O3pWOQ+EjQ65sTOb3DhkOlA98e\nUgFrt5AGZejIN1bguqxQ1IpTSP3c2RNEXk9FgARFy0pJJXMY0x9jIvH2mcx9\nFfDF\r\n=KBAJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/touch-target":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.3955d8d3d.0_1616613350884_0.6954310182176975","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/checkbox","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99084ac8217b9c5b549ab76df77e8bc94c5e4032","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.23ea2d85e.0.tgz","fileCount":43,"integrity":"sha512-RI3Dii0l7hlhnkTBXyxRtiGI8CPPuOkim9tqM/StcN60dWGkuch5aHGELAfW8KA8lNxLAm3TNU1ENDe8wbPJaA==","signatures":[{"sig":"MEUCIQCEYTQEtYH3to2BJK9UmPoNBT9jAPK++yosFKhurJSwFwIgDLLAPN0QpbTcjiwMsv916ogdTOv+wgJqYNklFIdKYhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMkYCRA9TVsSAnZWagAA/6wP/1GnTVzLyr/m+EvPK4Ip\ngxKZtEBwA/6IaDoHYigsEBelR/TAno1vD+BCZoUxmKk3J7uck0ylupxIeFi8\noFmywkWqifY5urhEnb3RLFwUtn6q7ISGnJLkOD5sFuVYbwEARmSRERyEqY0J\nuk9rcLHSlI14tv7RveAFUjwgs8ZI5mNw3N+z7L121SEi4BY/DheLGaRTs3ik\nEtQBVHayd/JsiF90nugu17dPegm0i//SVzh/IPGmmv7HfQjQz2+7eo8piZQl\n5zQPlyAWCVmGVAd+drjYHcMfcWm09+t5D72SW9yQLjsW1doSLOtvK8qrWskv\nYsBWSUj6v0AtviWvO2pQ5zhVREi1FygXhHwe5vvLd44vil5XHy2NugwSVDV7\nTGxCX9jvWV75Dlb6SMbBk22svM6Gg/Xh7xqWjp018eeiyFaopnVUEr4B4Xkr\nozXhvYn0mNokk9/uWLVMknBwmivDq73+L3VuVQn5X1OkZL6Xv6CVbx8UR84g\nhHFylSECS9+s3I1/P9/FBqXzcNuX6qCVk1cVWN1ew+mvUbrHERBWFgpC2DFu\nlDTbYzH/Uf+RYUuRacMlSSXNRoiD0JEwTBw3l6JyMxATGSfZ7n8mHYSNax22\nO8U99bl5Mcw1S4QdPbqrtC0u+WpAii+3Q0m13X+1+pQwqPWdb8/cTkyggPzN\nnCrt\r\n=9iXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/touch-target":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.23ea2d85e.0_1616693528180_0.598470260694441","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/checkbox","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bccbebb2ec84479cd595366c9a9964b5f29891eb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.e3ec22f45.0.tgz","fileCount":43,"integrity":"sha512-AQ9t9CaahsN19cMc9ithhNFh5mebUjC2jQoCrV3m2Ae8nqK4lKB+qss/kdPHJzws7GxZ/VU5kutDaodE5fOp9A==","signatures":[{"sig":"MEYCIQCjCj9NEvDrgvRvBVU4xHhy5qqVK24ohV/W093+2B2rmwIhAPAWwvbu8cW2DHE3QSqrNnY1t+nGS8CzjDaXBah3MJG0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM6VCRA9TVsSAnZWagAAwqoP/jIPnAWEQrUeWwuqYvvm\nhGEOOT3vSTQkdPFxApfbrxHqLOeJHapVHE3PPyToKZkAXaPlTvUKctKzr1xz\nDBgdH5yK3xY9GXWl9SDVyTxteA6dQFY0dpHjT2t7XVEC/M8FsEuomfjUa/cM\nAaEpIvCWqg1SV6g6NV8T7Mj94MQv44bheUJ9VgIe9gjYJ8TBoeDjBRWv2mql\nYLW44xPo2k8U/mcnK23YaFKc49cCtLDRAzw8F+tCuTDCUATC47dvWmJaEuBp\nOM+ADJirJliL0rFPvl8WPB9euMpnn7S90Ng6els0mV0qgTahBzZXIic+Slzw\nf4dOp+MhN9m3H4gNNXrLLbJuz+b3DDGRT2eBEIEA4QroiTPhaDITujmJXUTP\nauWyaZ7Zn0HUc4rMW0CVKYzu60Q4Om4YBco92rWDylSfFNtb34H/s+EP4LRY\nqxPjGq7JgQDxnmB4jG0NmmmyRo4TTCN5Yl3W4ckr6uNj4OxGMelzZam5SStm\nfynw9Qu3uswdke31CEPcXZ8UqXiD6BggSy0D53C86DXHB2g1lC0HoYKXmhm+\nLO2pNIe+vei9rnI2PVMWEjtJqVAJwPAUsY8C8NrvNLwRDysd5EQ4becIZ0mZ\n4PzXG+NSdAFGZBG4kpn06wo8m9UOj+80BiNkn+eBqkd1YZshJgi5XedEPVfV\nGNBP\r\n=1dno\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/touch-target":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.e3ec22f45.0_1616694932912_0.9074186309073766","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/checkbox","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585bca1b6fcfe1c77134203230f5a829e23c3720","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.4ceb42220.0.tgz","fileCount":43,"integrity":"sha512-M41Y4uuufZMCGU+iGTGDwz2FDcarT+wMiM0qciOgWWiFFw8WPckSa1n3JPU8lsy6hfvWi6ylR0v0VbJ1Md+66w==","signatures":[{"sig":"MEQCIGNR407YoZZnGlmfpuPNn6X2HJbQKZzXzMAw4I5dZ++KAiBnaHnZ+mHy2xyPOY3GWboXVRYasyAPeFJ7ecDx0mkKxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPKCRA9TVsSAnZWagAAIM8P/3slZJ0VCoVbYncMvzs7\n/pT16pOH3UGVkZnd0Qf+GaWkQrd20sqFJDY9YiHGIZ4mgOFLCYN6p0kIx/U1\nrSo9o2NrqHAgU4pbWE7lffX0y7AA/xezkJi+bWHwM4VjU4rN9gbf5b/i0nSk\nblLaD8N/tQt3oOUIGcyHybaJd+1H+Ol/XhZwnrDg+Vtmg2c6cYEG0AM5KHnn\n46M2aK4RBjbhLSJ8sp0HjUATWgTVhIcWLFOwWhbCCXnEK9SdMRFNsho1mjkc\n+24ntF1EKx69oBChBivV2AH1m/pIxVZjrabS2MHKL346q9znFQty9NTZ43kw\n3seiBF45f3pGC7rZYnCGsftO6N/N1miM7e7VQSId1qk1Rp2ayWyilnyYivCP\noX4MErUhG4Mt3f7b6Y7Zxyon1jMeg+nPr5N5Nct206J5wAyyTItomoJhgk7M\nCrfKBxaicETP0CX7S5G729vVEx7CfXumbrAys/vUzO1MwDl+VA3e2i1wQiGt\nKeURUTnEVv9iuBOwBVbsD7PlOXa6wTLA7yv/ZFYSH4giDGRZ5n2gGbFGI8IF\nidJAjWwXriPCK7FH060PWwlXc6f2Rjtv3nOOimHY+HSsfn7upQIqO3GphiiU\nrklU9AWi5Txw/STtP7jCmxvEVfFCix97IB4h2vTGjv1QOJWjAjxuWE0thrn3\nedGu\r\n=M8jX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/touch-target":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.4ceb42220.0_1616745417589_0.11731867448727651","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/checkbox","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6649024e57f97757b4700e2a60d9f96ba5de8651","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.dc9c84023.0.tgz","fileCount":43,"integrity":"sha512-WNoVnRkjKim/m+iEo9KVzSr7/zlLdOCWmn6VxkF5mxQCf40cz9Qd26H1JyM5ofqLic4aFXb7ksoi5WLV26Nyrg==","signatures":[{"sig":"MEUCIH4VfkUZfT+E3Fp4qFt98DRMDn/IlcVw17tKaSisLRgMAiEAli2qyb+ExIUPTvLb0bGUDfHalXRAjpC/2R8bsg+2OyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RjCRA9TVsSAnZWagAAsBAP/3hX8ct1vJuBTVX6XB3J\nBV78+n6B8/S3crZJtcDn1N1AZT8eeHLAw10KgiOfDou+Ab0H6RksWRAIM31T\nEC+mk2Xh7DczMHNSZFaBd8jA5QXSHtH0vIfLkgfIEYU4X3dWNBLcgxPj5hT7\nO5ctTK/ls1LAoWzVrFve6LvTkTnXJCB722Fh33BYHhSFYJr+WDyuNgUvzWt3\nryPOU61NcMq8mSbB8gkru+xh9pdGkMg2ForvlM7yDj5237oxabO52RoI6Pbf\nAUL8KBU0iSyl30SXAvn+oH1Aow/nqag6wcZU8cC511MUKCkCv9KfPuVEtAhK\nsLJNvJGwdGE9J2tGIzKIse/ndxt9GlseIQhk8yYdOGZUfs+b9TylfARNlTVG\n8+0KTvpDOQ1J1VSqYKgXZ4dkNKdm/kgtoWgjlXUuojF/aBJT4MNP1aJ+cBWv\nbfRI9sKaQ7xR9V9Ham3r3MBOxu0Eas0dUbDwHMaRJT8rKR8DTvI1+VrBnMH2\nVdeUre2qkj199pKFHZjecBq6DxDkhJsHNpqB5FnRc6AioJy5ccymxhPi+7cO\nGnEcuMUpATJAAWitmK7MHYzyVhM8Xd3GKdh3Vy9Bljp8ZJYC65RzPIhudk5r\n0m0VNl0utiSZw0R8Rzdj8UVOcR63TUrUrPveGgN5DMncOqhYQey7kGPO18W8\nPrFl\r\n=YjQV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/touch-target":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.dc9c84023.0_1617126498530_0.9243163498244107","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/checkbox","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.56fc26962.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efd407a63e1849d0c5b7e75dfacfe4fe857f224e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.56fc26962.0.tgz","fileCount":43,"integrity":"sha512-jWx/RYqznhka1/BBEHpQykBq0ECJr4sBhs1KwBEdv5FnClgCCjrCVXuQKkiTnCGki+g6o7vdhDsa11zQUSAjiQ==","signatures":[{"sig":"MEYCIQC3SiRtmzroi6bG5cCl2eyprYtOeEHn9dPNO++RF3gAIwIhAPQsSZuZfuYorlu3gRTrJOWbrFKu3UgTYOv6FHtfF9Gh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BKCRA9TVsSAnZWagAASTYP/0cx3uaAImXSwhhOHSMN\nBcWwLU7Ayt6zHRAmI1B/pWU8fik2YsTSXqG1qnZzd8Ng4lUPgOK1aHsAydBx\nHqzhA5YAfis+uU+KzcoUih18sXSCVx/CzcZWQLcZxVeMNpImauvrb6QvVv2A\nXs+cEA47lVjuMe1msl385A82AxD8QVnRbsuf7/jDvDJWvCvQd28Prd6zo0gI\n/ab6EyiEFFD+h8mcJeL68j7/EiXHj1/JZ2njuNEr412bnyxzP4BCZGkCBJiP\nlV44JmtO9EYbH3Vq6GYDk2EWVmOvNIlV/SAe+hGrbCTvBh6eJTVwTR34eUY4\nmklvLy2VJUUTq1pqSGVPveVWOL0dVifQBjBlcSOzFZaenWOGXnjWOL9rbaTZ\numP6BSmzw0cHZ7V8xJQwFQeRPHmTdS/10brAQvibmNE4ydT51hmibSdXrKga\nsUL9265jvJybfEblc2sjiaskd+5ptOzhDymIFsLbv+oUPaRlMESwGv8icE53\nlu1nyr7VQx+xuN+AfIIN4SMVlZYj8PO8BUUlre53B79Vr0p7zeHyAxFSbFnn\nXlWd+u/g2Lhj6SgkUAap6DsMdlryoR+ST2hos4eYOuGdUJz1WRm2gz+bZB1+\neny22cMghMrm6YZfywFTHiGoPClSq0+pd4dJIUYw3NaG5GmxAaWAEplIRdle\nh0lZ\r\n=oP3M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/touch-target":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.56fc26962.0_1617150025616_0.0558149399647081","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/checkbox","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.bc318250e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba47906c65f92daff93562f742610231d56df1ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.bc318250e.0.tgz","fileCount":43,"integrity":"sha512-wqIa7vmn6hw8/r3JU/rrOXrnucmpG87qrGdxUd6f+7eY6DH3zFAVlyg97waX5CA7W/d1E5zFA/yBaN1Sa51ZRw==","signatures":[{"sig":"MEQCID/tZEOwKa+elbcZIDe1x5T1M5ZANpCawas0ZQwbMtXWAiBXBOA8js6lFb1ewj2ubzg5HIHuny2y15RTdI93dDCifQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FfCRA9TVsSAnZWagAA2YgQAKGaNbyBcgwx9Nnj83CM\nPlQuAfx7zWPjhEl+zKGzN40YRVfXYj4TVTzVuu8Voa7wWaVETLOLUZa9nrR6\nycnK8qzR3d35ghtKT8hD67j8CwkjpQrWxOTI84WW9WhDQAcZVBKGEXdHvbM9\nF8mUoOhzGDI6m53vQ4mPQzLyHdgpL/sL6UjM2/GSlm7AdRbBpS1mB8snlqxI\n2vHhDpEdcRzRuYpVqjVLcXS/Ia5KMKMqaSZZMrLu8i1TsJcvABvR5sd4khO1\nRmOBcPiGQJ6rvZdFKxJ60LeLx6HPEogEvJgBE9Yns+kwWq8MRIVnfxJ9jI1y\nU5fiENVcTBxiAt400YzgfMVpUHcBGYxGsC7tdxol12eWkjACA+i1nf976uhl\nXN5iGm+zIggUmycwZDejE+cXaOEMdOWvMhdDQqywqk1IN9EhTLG+YyGatmm6\nr/HEzlBGVd3nLlSRhLkorocjqGgSY0AEO6V4k15Wdc5bLPtpXCsCWJJF4MrO\nAHnftUanCd38/1rsp1YP8s3W8oQOfjco6q6VhS+GgfyVTJTJR0CKiCy7dHat\nZNwwos6ml/PyqQOyzFeguSQGglBsJIalwmDowYbRiXJAsyTp2M2U3YB4eY6U\nHmvVSBSAihQXw07EBMNMEGZc4sh9Zo0rOq/bms5Zkb7T2l3DXwaODr3xz+Ih\n1MlA\r\n=MIVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/touch-target":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.bc318250e.0_1617154398578_0.5601708359188196","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/checkbox","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffe9821675c96ee601cf94c86d484538886cedd5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.edaee19aa.0.tgz","fileCount":43,"integrity":"sha512-fwqlxjEJft4P88DlvY9sLbqFTp6QqrUKA87eGL8qxIkk2Zww/+GedpMOKInIjYZ2+VISMuzvsJX7pvdk5yHooA==","signatures":[{"sig":"MEUCIF2ucGU+QTpxA1kCAKaDm3J/WUjWncNEPzsU2UBEGAeSAiEA01LNeAzzxX29FplZD26t/ZHVcR5mcCs4yn3EqA0WvnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pICRA9TVsSAnZWagAAaVsQAIR9POX2ghUESa5jdaxL\nCxBHZpN5JajwyRY7TZnBN5/2U4lbGJuVFxD446Xji/0vbbihvBWZSQv8vZVr\n+NFydy63fRSKIEjSNvgMwRe3PYZcUGxdtHMnKNXXVStkaO+JN+LGsJpB4M7b\nNuwGZP9mH40rjdvx2H9VQPOFRHWfqQcv13UrdU+Yg+SmnvXx2v25d6AP0pvf\nB+8jy2zaDbtuGqvTK42jQ/kwFUWumrc60Eu6BldkxoXU9GSmB3hoK/fUZBgn\ngZCc4cEVe9HKrnJOb0zmIfSxeFkLQs+MvEAW89YqNv0t+Op2wiSYHWEmppEm\n00VbEG0zxe8H6XHdjLtl3z/zX0rSOis9Cy4PIy5PHTqTQSfmn05yytWU+vpd\nGCtjB0kQ9JnyQvAgnIFuOvQMlx6sEgMX0dj1MKpSCsa8je41oZRzbAK+40h/\ndXXKkqhDVBiIYN1pBWikklDeiyfjsoqCysoAPcZrkAIdYj3KwjdL+sRKH15L\nmvbPZzvyLtPxaNkzhZkH13aiS68hAEon8wQV/DBaKIAcfxvGtyDX6X98gUhN\nJSqt9Y201oo1Wnt8viC2mVhno51D82+nzup23pt4KLU7T+cL/1gAIo7Bw8cN\n2RYzdG4s0RTQfutcfFOmyrUVrbf54uEDZwIOtCR32kSxjOx/TsGFFk5bdhQl\n6O6P\r\n=DccD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/touch-target":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.edaee19aa.0_1617156680213_0.805908588217326","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/checkbox","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.24609b822.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a772c6df843e7028f18d9b331e8367ee5369e4fa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.24609b822.0.tgz","fileCount":43,"integrity":"sha512-7kve4K26QwxMo3HsvRzeXDY3rNM49Y5YJpfMgyMxeKNn2oAmoVV10jjXG6uR9kdfFGq66MZ2/xeWxCRnzlZYRQ==","signatures":[{"sig":"MEUCIQDKx/PKuV41mTdGexFqQH9EFstcKTS8jLc7OodKLbRNrQIgbwGCOUvZyD+IBLDaQ7Lyxdfoeaxib9uMp/JoeUvBcFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIVCRA9TVsSAnZWagAAPg4P+QCAalAGEFIVY/6jkxRm\nzAvNae9JDbwu2n8Lh7lEGcrB0PTVY2WjSwxbp7mv7mR2/qrD3hFkOsVbQoP7\ng9vFX/QgxJy7eNp0+gOluHN+JvRbLDKS8IW7gEuyH+iXs0JqUR5ZPe3Ur9pY\nhBFL4XxSTIlwNS5AaUU39/6kqUJn4dG/niQrrM2qYzYBarpS0FM0C7/qBOBv\nidcWNMT7teLBMQSmSZWz0RLtwS8JKBPJkB5Pp4jUjZ7F+Pajtx6exZuPe7no\n3S8ROb4Bm1eh04ZpnXA3IJffsGNyeoQgJ3JsisSIu5HfjufA/TfTQIzFG5cO\nbTqI+5RFwEd8ysFvaYXFBOc9hgDMgOEXfznABvFHHL+oDOyggxRr8YI0nj6H\neZBsrSg/XAWROmohyvvkH9N1hRbRJ4l0TsFUQvIc1MQkUC20EVkcxGWMBSsB\nZjDiUG5EG6qpdVbvk8jiCfaLd8kFR258YiyKmNtWoQY7DhexXj5e2meJYPKX\nYI5R580bVqOpwtmZWETkV9F5j/szP/dpDCuEuwN125O/2B0uJQlIgvTme7be\nqG4P/IQvXFH4z5SVWayCoJzDAOP8X5WmB1NTHPJ19M0tSsjSZoIickJdIrQE\nDw91i/fsBkZNdRZLcPJ0msXKQBbPAlC5x8tKuXk/Ydv7N/yfynhqTI38FAoM\nDsLB\r\n=3JaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/touch-target":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.24609b822.0_1617224212602_0.31705042856917043","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/checkbox","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f793815ff40a5d247f6c705021060fa1dde4a782","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":43,"integrity":"sha512-ou//yMsvxXvmaRPNV6zrZpnPCl1cySi3ZpKVeOuDFcSVE647gQVJvnRDiamR/5L2TNKuQmxWjBEy9+jwAOPlUg==","signatures":[{"sig":"MEUCIEKZEAUXkuP9DdlLBAARbLSQzwZqb2bMOPjPUgRVqPyKAiEAox/g2vSj+IVrtpSv2HkxU0ChvLWwMYKmSgDx40CST7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEQCRA9TVsSAnZWagAAgFMQAJP/40H827aZrpFUKj94\n42m2mx4LgfDR0BBOLhoC5TIB//1EdFh9aEbT2vKcOHunK+9Au2+OCeUcWOAY\n/SdtojWbMfiSJD00WyhkINqsGgM5rtuKrrF64Pfpe4slhwLPyGTyQ987YH0B\ntTEiZ7t9nb0DybXGgfhbJJvgxOLSw7HOt15qVTdenDI7QxvUfdzcpyuesi3T\n8IxXYm4FffKu2Lr4WDZ43JKixMN6kMvXaGzs0aXTWpdI/bS5PpbTlMsa9VRP\nPUwLojNHrlrKfv+LYD1zakHoll33JibqDXPLK6sItyLga+8Jad4Wiwk+b4Ir\nHmPzA5rPzZM8WtY4DCS0hf9ScUhPTgX0rfL20JndpNVXbjat2k8CGYM3nbdI\nKFNkwkRUt5P25Hi/BQ5alwyR2llFjfRgWNeyKa1rvSbtarMpYaCRwDRE9Ogk\nXPTXEpgoSE2q2WUUWq2Ob6pGwnRTfjQwTnT6E6jA2Y3C29b6rtq0QjswH3We\ny8Qk1p5rzC9ufboEm6gkUUAy8NAvVMIuORMC1gEua624yQvtq4AJtUICHlNk\nUTuLFX0LecqiR1KUc38SyoWb9KGNDZ8hiQ5WE2e/gc50K10URx+t7AWybjRC\n/0rc0T/mSNUaL/f0o9fbdZ+m8u5cfCbMwE7YoNHvLv57JqiNd1ygGhj6yFuS\ndHab\r\n=X8+W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/touch-target":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.b6cddc2b7.0_1617289487795_0.6418428254773252","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/checkbox","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.94937c78c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f18874980cad9d796ab2c97e5eb8e5c5053921","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.94937c78c.0.tgz","fileCount":43,"integrity":"sha512-h0kKEM0MjsPjNFHuUB4zg0CW5Kl6/e8i8Aw9rMyEtR/jvkFuZ9+nyK/WP7xXs/jUKJQAEA8sHyuKEOxh4ORmGw==","signatures":[{"sig":"MEQCIHDJAcTNidB7SwwIOZxZ/1mNUJgaz+C/z2vOl374IJWiAiAxVQMWMzNZEQ4hbcjsaa1vDCjrFZE9cF91ZZEYbIUHJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjRqCRA9TVsSAnZWagAAj30QAIL3mkcFpk+CKl1uvkT3\n7nWjgzu+Hc+PnKHq982wzoNRrvSSCj10qIW+YTOiEZ0BpFqFYMGBRGYZQwao\n8Xo4u62hW5JsUKNbyvD9116axQ2Sw6DGNqgKk6FeAbd/yVKu/omcAV90YBu3\n9UW5hb2jXF66rYD+hJQbKGaIO1bVyexxvtpvZGf0CYT5aDDe9x4bhwmxIrVe\nuymlnUwoMqvx+1REsBCXIZSIGhEztDKLB8AyQ1dS2EbNLx15fOaJfwqJV2Gx\npo2GdGeC9bO1q9/tMzTRDaC9U51IsBpJydruy8tg3iDyyD0VG+o+cghQDpVq\nQqldZSB9UyMdHsExs9iO6poE7hNR8muQGY+IjOD3W8pUTb2T0FqtfzbZUtKz\nzoQgdmPG4NaN4uMgCxBV1mCofvdZUwVi64H3MzblqPH+1YV8TSuIOWAucbgA\nhUmiOUMfGMelBXBhkGrq2A7caePiHzyc6R0daiS2w28ks1rfhBGG5ZACDfD4\nzuSPlryEguibV2U3lD94QtlZmE/cjX9kQf6nV94rdZcR48v7D4jbllnpEbcR\nRTFSzkwKiWdgWshZzy1SW0N+M4iDHyUvILS3qWjAdgK3o5oZ2KNXAHhqOEdz\nDBiTUzOW8AbyUZmiSq2gzbiresQtNsrRJO+3fgPDsQBvthoGJUkWUXLTtiLh\nif5l\r\n=2/r7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/touch-target":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.94937c78c.0_1617310826079_0.3661296455591241","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/checkbox","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de49f97228ce3e92ac0200b27aa314592d545029","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.e7202cb57.0.tgz","fileCount":43,"integrity":"sha512-8DzZaupVt3YcfkyWppWSl2A1FIn0A6GBPhU1/iBNOvOnRl1n0CKuADm095WrUYiARTQVXf+Az+ynbWkuB/NjjQ==","signatures":[{"sig":"MEUCICJYqT2gH8cDtnwPMgccQ0n32a7Qeke7boom4ubiMk5tAiEAjtsWfIIOSxgn9JjEuHBrEjgSAjcqsthdUqvbFzTyGzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1eCRA9TVsSAnZWagAAeDoP/1mux84f7dbfkadg6rqA\nzfRjnULaVc3H+xSWUupLjN4F3NryTTzMktnttBeK2Jltaa8Dlmx8pCReEJ+Q\nZtQb//VRk+owxTdJ0zUxQVkjvO2apvzukj5NppJz51J6vx7VBGA8tf+nXOHT\n53oZFfACMpmztrFmA4IHi92w3PBBDV2S/6qj3XR3WMtpKu8b8zPfwOp3e09L\nRVtFkyRpmiyqkpCaXkqZi2vp12hedMrzwB2xwEd+chku0NQHP01+9bhRR/Np\nHKCl4hc/lkTinw09npMWkdmELf24dOlGq9PljfPr1AWMP8fyY6s1qR4MVCSL\n1fQjmYD/T/E4i0ZHMBwzodCrTLrDyZLbtRAZtFeCysA6+3NV95KWmsTKx/BI\nqL5RGm0C+0FMYTd/Hg7X+Od17x0KFIFNt+Bt+GbkKwE8vWcjSwdssdFDeKX4\njQpBhtKZr3UPDFr+KoAYa8KzyyRljLvnw3IUBXKBHF9QTBPYFqV+XGGDjHVl\n51L1nYZg0kQUhZ99oBdZ+xi481h6ZCB5hi5WpGx9B5FhUxJR4j9CB/I6DZ82\naA4iASWnT0Z2sUIEw8nBd5O3bk3/ef0fTqkp2U0Z6r22JEoOM0G9ODXbqpxP\nsPVwI5BOgnGQSuNil+b+Lhcl9686ex6yRmbcICK1GNJYnMdrz/zOsw8Tr2e7\n292n\r\n=OQ6K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/touch-target":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.e7202cb57.0_1617317214392_0.23935512233096756","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/checkbox","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.1f636b205.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"070c7f4cdb0b549d1e89a7e3eb5cb7cdf0919664","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.1f636b205.0.tgz","fileCount":43,"integrity":"sha512-urwW4GKtFIB8sr2jx81pLn91M/S+L1NIm93tJiYacdVvUX9+Gi74HUqBoe2wj1nwoLMIq5zTmPw3WgDK/Vx6ng==","signatures":[{"sig":"MEYCIQDHoe8Y85RIZbNX7YWkFNT6GeorP+Bh6BR17eyyvzarnwIhAPTwWrXEe2Aaq3XGgtmXqe5zw6HSrbqzATcVnntfwDzy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5lnCRA9TVsSAnZWagAAT8UP/10RBkUXMQFrDkkDysee\nCQtyq8JE/Z8GNJGUYxaSkL6j6CLgfxpOc5fAIJR7pcURtKF1RJpq3tOmxlpo\nnV7ndMliug9YleRVwQh6Jg/vIQJO9vELDqZP+Fsp/tw3QTz44aE210RV/zj4\nKlAESrPKbmyXP3muST7UoZKFzj9YlKAFH+v5NGm18IzEh864RZchWN+rbayE\nU/g97X4jlUJYVBU7Wu9me+8BzUmlvK+YtTncgjGfd+XS4OXnnzadAFcqSowx\nUxP7myDVtmn35+ktzcummPEJzxryr/mmrx2latv57KRkpen29zH4jgg5X3WY\nJpY3VwvHm94zvEHZihZjxNl/GgZUHBsFXAZZXgZ6dyJYAoFbeEKU5i+0WaIA\n9te6tlPeXrdUBc02/W2RWCKJyCwwea8KzrdNyMh4+WhKU7YWa1YmsygU6tX0\nusO+sl4VIGO3karCqzhz0+Px3uJRdlXRjLJVsupfcVFdxOq7QmHidT1CkJCo\nrRcpqgldafuLVMq5nq1ZV9HgQ345CvHr8VxwL5AQqRx8QmxdwFwScI4ZbS3O\nofLF6WGPf41ZdVIFNLgkm2ceWp8c91+b7ZPmtpVJIQvcFvFzeaZDsQgIrAQU\nSce68e7KKjyASQVJpA1pFi45QG63uoTB9nTT0px6QK/nD74s1pzxZIN1gfXO\nOyBl\r\n=6alt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/touch-target":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.1f636b205.0_1617402214876_0.2789794678638202","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/checkbox","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.94f50b260.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38bbdc5735434a4ecc2d2402c80f8265354e4363","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.94f50b260.0.tgz","fileCount":43,"integrity":"sha512-ZDrTkMHeUGiXuZAqeeEMid6LmUxeFLIU6cWA8s4uRRdkQLIt18AyQk1/hULlN/WpfaiaKSmEg6fJVw/U50dYLw==","signatures":[{"sig":"MEQCIFhOxmDmKA2Dl6L5VM2tQ9FTeT3M4tqmnO1cUIo4xq2gAiAUjgIIEo8Bt/rixHY3C7A88OMEv4/DNpgR3dbInb1UZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycTCRA9TVsSAnZWagAAJuIP+gMWgzLffbIvNB4vY0/J\n7eR4kkBH0PPqLktiPrXStz8vLLDDhSR9ZcWbJhoKEWAUX+RCkfCtbmruOkst\nf6+66xFXOdZsd1r+o/5HyGOlDfAyPPZsCdTQXYm2vb9m36fRoGQCZb7Y9LWU\nsfNMdyqiHDh2m3aiudtyeYopq712x0iaDunFDNGxWgOFUpwigDl2j9VznnEZ\nko/uWUF18iVNfaOEtuwZTyUBiGAz6CI5AyQfaQufL6vcljlUMTw2nf06z0p+\nyQWIu0gzeQQw7/hvvXBJon6EZWotaFTcJGlkieXL8j8L9MAKfThwkxRAuizs\nTtm/J4b9it4xK9yeR+WSB4nMM6YagV5DKJnU0AeFQmFcgkXpf4MT+sjRBYk+\n80BMZUDt4Zt8Dygc7oxKUj74q6ylfjq3FAW9OUnyHCXEOICvGm4aEavWTggO\ny6epyapwp/pDUTIWYETFCrce6i4QX8DoEcdvHdY7WcoB/FeAzlmk1g2M88SN\nWwjTloFN2sytYUgf8b0zHU3CJkEOE7En91IfsB4nCJpcEPpz7ecZK7eLNqK2\nKZMhPonkkTUxYJERi7CaJsWEmq/czPOsiU3fwF6Qpij0Lngepql7cEgTSfqS\nVrnJhfzGqPdgq8AcH8uOl0vyXBBshDbxytSiJz3mV0Ylj3QtNNs2TUotUcq3\nJCBr\r\n=NesH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/touch-target":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.94f50b260.0_1617635091214_0.09799715107209694","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/checkbox","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb173c4c580a658e749cab87dc2a51446bffa880","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.a4009b80a.0.tgz","fileCount":43,"integrity":"sha512-c0nntwTGeRlaAg3NZlkW7t/eL04KCJGBgZpIL5R0ulh7rbFpZacB1VUM/f4ZakB/sQOJogAV/Rmu73oWhuTaiQ==","signatures":[{"sig":"MEYCIQDh+qxOVlSBkzs0mZ9w8I4H/doFh/hp9oML5AWAY8c+4AIhAPynh6Zwe/6P5e/r58eFqerfktzqCbfF3gKVh6pRBaMl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4hxCRA9TVsSAnZWagAA4GYP/i4ONzrcvsENRb48pWbR\nu/6MyH6e+Wjwpe97/+rOdjBgivmvLpt+of5BvRdFVgpfZsoFIIsVN7AmO7ES\nvGtqthPlnw4wCiUCdu/i8Po9knoP3SuWkXw361YsX7r9P4EgQ6g0aoK1rgGa\nt3pR64WX4PGUyfg9cM5URnN9WSfLUePOffNGeFZQfrCrd6IlkSAhGcabgxwB\nIWyY2LpDGv67iaH7sia4n0ofgW5NLqwRN7RGB0KySO7knGfx491OtXgxDNql\nc9+Uw44/gat3jfYH9SExbX7dUkmgqzZrQ1P4w6cwzGhjFecYt64VsmNIhANy\nVhThQ7zu9fk8JcvQI44dEgFBkuIB+1GhCp+bJjSjBVbVr6JxPJPDPAvSHQ/x\nhWYyMYtttIeJyB6bRqh6QzlQq5/O2woLtfaHo0G3VdurrAjUS2nejwXwFjJk\nbTazgJfg9cbaeteu7S7VhR6mQCMYayuZropmx1Aj2Ypj1yQw69eYMsEOgTwG\nj//V4f0EynTLYaxYZ3D7svqSZG/jMlLgOiaEQyzkLeQhDN5i7/qQkg+WxpYt\nMzJ4LZyDVAwrstRLcJE7+VvGu0WaA6yz2z+/QA/kgYQZM6+5H1Af+b/D1nA0\nq+3M8ni8Nz0F1sAhzUk9tuWOl7eApnOz8yygyqnGOq8UzceiKvWTzkSK0ghp\n76qV\r\n=RJEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/touch-target":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.a4009b80a.0_1617660016668_0.3334494179162881","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/checkbox","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd4e65a599e2f6b5e30cfdbdce33d7e3f68f9998","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.15604bd0d.0.tgz","fileCount":43,"integrity":"sha512-1nfWw+kvJo6tVQq305W1pf8yW9plbzN0Y8dr6UKcgpgwGKuedt4PIzSf7PMK2gmnu0D1+DYR19sdWGGhzzUUig==","signatures":[{"sig":"MEUCIDAhNsz+I6oOnvDEiNbCYy1Athqta+yXR0+BaZIdtBnDAiEAne2GufvhchnxQZ/eyChoL4TfkhWQjrn6B+sLmnwelSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5I9CRA9TVsSAnZWagAAV8UP/Annkb4VI+I4FB7J9ldE\nL8ncJJK7KtlIcKcZMjgbFM3NM2YD5qXIcoUW7sHRk+76wMRTCm6ef9/tbidb\nKFQakmXNO/L7x/GZsVuwG9Thr8zVpK/F01oFeIDZw7Z22Sy0P5ti9JauuUUi\nm+1HiFb2qgWuRt9U44qlA4+mqezMoeBBr1ByIqzuy71p1W76dPmi0WpthWrA\n9RW50aX5ZSPt9cDxNDO48xvaOgmr2uobb6TKahRYatIhep2N2bLTa2q22Lh0\nMgB22WjNEIK06haT4qwflmLidTMCf4sAroXJn7ejd/kFrjOQtLRmvYw7QmKC\nX6e6EIBuawGoBsfU0hPJ74w2qRR6wNF2FSf3QjeXU9we5tOaYlBvewSD5a6E\nituaYlWrt0vhD+hlrxvF2MintEbFEdfn/0/k1cuNrxIMAqGxO9C/0OC10uid\nyQdOZGZOzsVVUb3vWw6/YOSmUhOoBLZxIwT1mPhpQ0Mc98IEU30OA44y1D4Z\n+SotB+NH0gAJanMu8biXkGJCEg60vunK4y9WZZkvZHic7nnk/4OK1pWrUJEz\n2JpjNPBhdp8ji5cvTKKwD+e0Wb2aYRYXJ9DvmeRsJ6Y1Aq2cMU/eayTC6EVT\nEBoE+U2P/BJSzUb1Sf+zqheDW/yvYaOdhHwpwhXSbt8DvOqvH8BknGUl0D5d\nyKHk\r\n=/GSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/touch-target":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.15604bd0d.0_1617662524518_0.21811194389201982","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/checkbox","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.76da7876c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddbdec6632d34a9b56972696e06546643de94e3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.76da7876c.0.tgz","fileCount":43,"integrity":"sha512-fUvVd4/wWa+nfzBJsPiM0auyhYNKroH9e4xgsN9+4CU71eZfzyltAoeXeEJRbozK9X+yvruv4MsRuSUGCUBEIg==","signatures":[{"sig":"MEYCIQD5Wi5kOp+qvK7S9p7ECM31AINnzR+R9DOibOLmNOwh6QIhANxMVwqpZkGBovznscPBwjKz4KR9tMbjFG27T/rnUTk3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ54CRA9TVsSAnZWagAAgZAP/1GbpvuiIlRPY35oRQVU\noJKW+nlIeHffg/HxmdD/gz5ZD/RKlsRfwdlZAbYjYdFAH4BfEtC8wlGTPu4U\nCemBV7181KHy2q2jMoCDglThdyXADE5rv07bGdBoK0kLlfpc/gpZbJ+45pyo\nClvTtMfV1dB6wnPsHtYpLuO+6u2egB/J8id83YiW8A4iotwlOBynjCLVZR+i\nf/09Jn3oN0Hvti+IRouBXj9xlIyt/Ve/gnZlJlHrccAXCJl/1Dml5AK3bAaT\nWRvBLghadnTAZM8ggbpsAU3QlZRKJmk2lss3HPj/NYH/2jDnKfaFJ5xACpeS\nICAj7r5UWRXG9SJ/pm6VsFqEXG0T9Sx6xYVO0H7en8wt2UnPiVhZ3GxlIFwg\nQrBckwKAc28NYn1OWcUNfkIfxTWlgIIiKSlMe16bnAdEMYbVygUwMlSiffn0\nziz9kVdlVb3UHlyp7DIwmbB1L5NfXfwCdILoQmuDTKtpicP/fY1VJLguf5Y3\n9RLErJFIYA2XyqQbqhrszycfsLVbPSwqLVuZ6uDI3pPVKTqkhTPB5nvn/ncS\nqgIzq5lcMRxXsQZdMxGVd0d7MQg9KqjXCP5kBVRhJ6AgSDZvIKp3xDSzbmwn\nefHl2Cz79VEn1WaU0zfrSM0+ouJFfA4DP0alzMH0RdKdIRBoxrgtOf3/sgiW\nicsi\r\n=WmOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/touch-target":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.76da7876c.0_1617759864143_0.9863035792400834","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/checkbox","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"face9c46fc65e4577528c2b717f0cf735aaaa325","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":43,"integrity":"sha512-5zW8F4Y+I91rV9xIyAFePlrnQ230ud94KHm0SkOgIvbISZRQPUQryQi4mph+UnmesV+x9+WLvj4ClvAvQ0ApHg==","signatures":[{"sig":"MEQCIEVm+S0hiUtXf+kHLGsZdNyixSiyCShKDL60yAxOfY+zAiAjDos8fwKKF2ce9dpzi3/HnSPLS4aEmCcCg6PKOUZsuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+sCRA9TVsSAnZWagAAXVsP/35hlImtvRNCsbbYCJiF\nA6AeHU7dNRAncufAXAbMPfrtFZQ33tcvQmbHFdIAvJIrxsTgI0X2R83lpuZZ\nSm7jH2WfMjw9cAHUss5exasTSzw+p4Vf5cGbG6DGvh6YNDqR3BxyReVEPHac\njt9g7u2Bu0UucGQzpMcWBRDJ/1NMDso/6g9tNdrcd2IxqYKNmDDOHjTMM/7u\nWDUonuh0QF9zcbqlhZkkzxm1c2Ritr/WZgtYn5x4jovn6F97Qn6JfDpKTNNe\nInKJ7VDXGdGp5o/BDUd3W92mXEGjAvRYn9mAXvGSlFSD3kNebc7iLjLnnanE\nMMfgBHROohGs5EFShsieC8UJm5zAeRPeFRSAW3CFxsMpWh8qI2pjY4bSWGBI\nSBHwpxem3yuWNbpSG0kT8mfNuTfduvDWOz90CuiPqiMfVNUZe1uPOMiqcK4q\nd7xVuQD1XScINK4lqkwr1b3g8emg1ifFc9aTbCH6hEnb9mydy+a6AFu4sa9+\nAidtYM9AZd+aAQtrME13DLlI72zL/XTLJL3Z2KoAIDLkBk4tSvsHknPK1wXo\ngSjkBKgqqJLE6DRQI4YXIYnrTelO8fWYaOTThKxJcYszGEqexYkxVg8+NwVC\n3l6uo1NDCPhOX6O4BcTuVxL8gZDg2+awsUF7Qsgkgi9eBt8t51/y6Biuy0jw\nrmGQ\r\n=qv3i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/touch-target":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.6bcb6cbd2.0_1617821611988_0.25778100643561985","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/checkbox","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e31fffc691cb86511ce971c2f52204feffe97b8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.c91e8d141.0.tgz","fileCount":43,"integrity":"sha512-jzSM/UQ5Gz2iLdvJaSrGfIRFJYMxDYpnvnDA7SQO944jEoC4O0pwEsdlX4EKK9FrpAfrr2qIRIdQ6AQ/I9Y2WA==","signatures":[{"sig":"MEQCIBJQZmp1mtHuSqtiin5+glsOCX+BWSpXmGL83xjDZ34wAiBcizUO0lLoWB3RX6HOAFMFDw+4PZzeOLfDSaa1J6BhkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCaCRA9TVsSAnZWagAAMuUQAI9AfglQ4sLH/8LNBkdT\ncAOvPd254/o4/x54jkEqgGOo50igoOxPFlAwIPWKS3dm9JJHWpohNYj3Dxin\nEqX+NEqDcl6IJUfQmqgxQMXKew3jWPt9eg0AREu37Ppb1LzjVgBS+eDqgDXt\nRJvTzFmXob/YjO3Egmj7tf5Wij3RbrOLpXuaZlogidJG+F2P1x5C5WlWUKC2\nc0pHfHfEpxniNdnHqN4C7D6kd02sioIUWfCCXE1GvKMZQdiMk/4TuI2rextM\nhY1TUc698G6IGaHjWn++zQxPo3ALPtDY1DWRGxkdSLyOLxzcTuy03tv/MX23\no3pAMw3NB5HIhVyKBKpQgogW8XawS6o2b+gaP2/tcX9+v/yRS/YnpfsbNrHQ\njAvbEQQ1JLa17SpW29OjLhEXeF/Z6QMpSiTZdmqBJumCvzm/Q7sn/M5O91hg\nUERV03dc6usRkbA0V/3+ZomOCxEB2S+OhrkPfPp93ryAU7zJ0h36kb/BnFOf\ng7pSfLpgg0rpT0dtGAZ4S4UTp4Rcsu+JBb5lcstHz6DdMzKlWDAhVjzfo+Od\n5JqS3daEybIEUgZrfoH20I4DJz/VaQpZcVaQ4Hc15aZEhBxjsvXmsqHbmNjZ\n+L37nBXDb+gGpn1zJs0z8xiyvPFNtFft2TMBoelmzVZiHkgmZlmDWe7i8+da\nctgc\r\n=Ycvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/touch-target":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.c91e8d141.0_1617821849657_0.1775496867352182","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/checkbox","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f77c50860.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a679d603bdbc3cb08342913aba0666a0683d5cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f77c50860.0.tgz","fileCount":43,"integrity":"sha512-XU4MCVzTDsciGcy1ewDWdwe47FpObqFnHU5sSwowq0D/z7L3CnbnziIYkfmzDBgvMKP3SzrYP8ciRnHmTMSsww==","signatures":[{"sig":"MEYCIQDxPQrjSJ+0u5YtNEp0++MZatXMW/eF/eLfY/Cb9zdKTwIhAPc5gQP4t1pPp8IPwTdUTk5566w8+U4pCkSaee0NApWt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLSCRA9TVsSAnZWagAAiH0P/22P4eslRGei+wiinIoh\ntw2Y6QDdi+AF48bHGWc8D2hBfTxSIeGxGbDq13CyzHzGQ+2f1GWPiQe95nBg\nCg6pNO5rQ1AhPapz/+vloJ0xTQuPiqLYiUP4Li78NzCRoismz21VD3eq94S+\nWCrwcwmY6CtNe8iTfijT9BYfj2DNxsZIkAmlcXQ5fURQkolxJP2/5UNHNzd5\nMNf6Hq1tPFJFG11gKsSn9Mb66Xh+xPBvVpeNOfrh38heBeYhyT7F2ijGwmOO\nxoV8Q7aPNtEaqi2xreSD8TJGN3DhUwkIxoiJsATcCAPnrAAcRnZdte6xmLPC\naghl3RKcbm8+hyzhp9+qLnxrtsi2emVH3vHxbTzyJyxYtyIFhqnSkHahmkiP\nRs8UzayMqIzd6v31iaARTIl7MxMvhja8ijWVJ3ST1zoVzIZLlwL+x/dJNfcd\n7b167uUyabki14uQubiSTIBhBZhxc8cujpRfIASgsKc840PnQlSULY3w7cLV\nCv04tLAfBpNsPpRPGcZoJLORnve00Z/U7nNQ9pGdmUODTT0ook8rCCYoo29D\n6/cox7clEhn+aleZkRhb/4TDvK2y8knMX6XWDYWVS+amAaPZeq7DV8xn5fBK\nQuQhE67BHXlp8AU3Me+2ywwTwpRE16o9qeh274wMNMIA9kqW7OI3egiqMndG\nyFBf\r\n=KGLj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/touch-target":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f77c50860.0_1617896145794_0.3016547700891459","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/checkbox","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b295d42b110edb5db40e75a26299877d16ef495","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.367d88bdb.0.tgz","fileCount":43,"integrity":"sha512-84bUaWwJtO0Xp2a1GDgsZB232LsaWrwEuXXGQWs3Fsnk9VioeojPta6hSaSwJQLC7GRlhuUSbQn0f7l+LYjqaQ==","signatures":[{"sig":"MEUCIQD+6pRHD0fK6Q5Gql+Rjdc3+vopZrOWqhoh3eAgLtgk7QIgEXlxQEn6UZOLiCLAdqYKdJ5RH2CcZY+1j5CrA6ea/Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzF7CRA9TVsSAnZWagAAJX0P/20Xj0mU31dr7wteuD27\nTfFpratKbuQTDKR4OgznzvXT5W+noP5uYTH8DCGO3FzvqDUBfsEMO1GkCLXG\nTWpX0QZlIvaDlOWkQIwffZ1U1XloDxkrXZKbYK9ewVu1NiRmBgwDsV1RsNkp\nlLU2rfzzc3LcMyyOsF3RyY3VPP1hvKQ4xmh7PXmvRxlqwZATQ46aHDPNYLvC\nJVg/4OohbsWXR5hhd1eHtWBxblC21Js0vsiRbgSstDMfowklePFy0m+1QAL7\nWkIgnC+al5UuWxQaHXBOn3T37Hw9zJjAgygOnLKUhzdGeJ1WBaqX/w8O7exU\nCf19fNk+9+6XWzoInWS4t+Vk7DHNSUf4gIYMfILVtrMT3uTbbESAA+SL8fo7\n9vwDDIj4sMOU+Ff4UKReNhc7F8pIJpKuIQJDJFpTxlKQhTnpyovKdtnUJpH8\npXkkn61HocKYB+gQac66Dmy/muADmEjZsUHGcG17xCDdk0on4U3TiVDMe/n+\n7KvhAK3ibqccKFIA3ob4pfjHmaY3rCy9sFkFWTxFknCFPMqX3/plmHYJAIm1\nwZ4f9wDdV3bKXGZAtcUaLJnDZVmMVmmasvIBBodwhJAI5DroicpYwMKgKzOC\nhdW3Pmr5W/kxpVSWz7AqFPpeJkAm3kL6iG1RRvR1M0Y9EMmMTccE7hawffgB\nv73b\r\n=sxn4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/touch-target":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.367d88bdb.0_1617899898644_0.6829753665622447","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/checkbox","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cacd1a2c2da20d50959a6f02d8a30bcdd32714ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.0ec437d3b.0.tgz","fileCount":43,"integrity":"sha512-EFnHdSVyKpcqYdFih+DkLRuSnwkA0D2XASnK6tlej4T4cdGVh25UwW+I9JnC2MkJqvVExhhLx9O0Y66/XVe+LQ==","signatures":[{"sig":"MEUCIQDs3Z8KGST+ERk3UB1QsFEdwx2vOZRdlXaJYtP26RCocAIgEWFXWt3go/S+LTzObAiZjJb8zd2DdIc93zVYTkkE9j0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1roCRA9TVsSAnZWagAAZGwP/RqDP+7N6jAms6CjbYhN\n6DSb4Fnp+bgACGOEB+dBfuihkPXLxDvJm6t0iZT8ygBswjoyrQsOwy6v8e7X\n9mVTRGvkgXq1u206aX9qvUWdX/WqZfaQ2hj2R4S/txkNS4+GnthOmYz3eNB9\nkC72zYSEng2bOr4OuZu+S0ht8TK2Rv49j7u7cTL3IMbkwQETLQdLc9dYHJW4\ng4VaE0yldm3YSECza+PDCaV+ZRBScGh38zVVgvIm8JitTcs5boTnu+5I1JEJ\naDyDJ9mfwiq+sQOrl3c617yq7UObgT5N91rJAYOM6Uw0Cqkbvs/v5sb081i1\n5nO5Gse/HQKatLsaimX7+iDSRHDP5XK4qQag2B8jPKZ+funsGiRinOiNEwiR\nw1v09eKGUlVqAJ1HioeMmqZMzSKIqiofeA8+RlSAnP1bhEQHzor9XA837D/C\nyTdyd3Ft0VWhgGqxINA0s9jePtdC4760iDXryCX2Z3bG/kr8eI25wuDx67xD\n5jvoSBrrA9eHH6MmE2Waep8IcADsxe+iPJyKEb2CQheU8JoE6ZO9AJsUk0qv\nalVG5/2MEpAFavGm4QoBrssNjDfhhGq69O4DJ9W5Oi1QKux96Wfb79jt4n2L\nep5qiSk3CMPqHIra9ZGI9IlHld47LosbEN0lO97Co+MzGzOIFfZ9asiS9gyH\n0Aft\r\n=iY5O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/touch-target":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.0ec437d3b.0_1617910504289_0.2639260247411028","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/checkbox","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75f6f4402c44838572e2d6d840b8f9f06622f30c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.b2fa996a1.0.tgz","fileCount":43,"integrity":"sha512-qyXcVF8gCMLQulQzCrjEZzfrIa8d2QHCszqRqPahKz1vgIB4nHO9pWElFRmgOaZiyQ3wnNgwAi3nSD7dnFgNkA==","signatures":[{"sig":"MEQCIQDcn61cjHavUHMVdfQX08NCJyR57eIgd6HXd5Q0vt442AIfPAaH0dRHloyY1s1VcshAkzKBg0CLuqUNoF0LTnlYMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG54CRA9TVsSAnZWagAAZe8QAJqujCHFTYt4Vf+nUZ0W\nzyvqrzv1ezR9FGHPsXMH+CBHlzaznjpZTMqdJhvcGm5kR4ntnRi6QVWqQY1l\nKI4KNTodQFwwvaPNIyxV7KqBNRlPDZrfb/JfAD+m6LZH6nc3iBSdnKuwtgFd\n9k6y8/XGovFi6rjOLDG15CbZxycNrkmQHd9D0udcYWskdh5hPQWHV5iqD+Xp\nixAgC9ZkEwd5ld7v26TXZhlIKM7MPwpiravmWC/uz6R6wTHtGvKtftdMmN9m\nesL/K1TRTqT5ZlkhqiExfFvzJUREjNNGbXStaHCjz15m1y79e6MP8nhSmZay\n3XpmAEckbqwD1RWrep+3wW3WpMBwrIPrsaJz1DvJ6gv0TdVHyQCYYk0D2M2H\nzA0cyU9hlFmudFzxQloneY3ChOVBXAN9BEfMJn37PV62T1+pEQ8HZw2ATsoE\nTT8yZblRNxHdQAk55Ojmt3hUjG/vJDo243SyMqvRI0inIucyjmtRm6hOuqWV\na1F1fJQopBoET6WNyvYfWmq1xeIGqO+3fhnA0x+8CJ6sZ7C8kGRQ8gcCjt90\ntuqRhNZ0LOJ2mylx4CZzwUGTiOgmWHF6QFdc/E2F4bBwfMekYzHZ11F0Qytr\n7bz4dbCsso5AuOArbsb6asdQCL2Y0h1SmVkXxeNZjzVTfBgaNzVUjpz4XQdy\naVxG\r\n=HFwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/touch-target":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.b2fa996a1.0_1617981047915_0.7026298781500822","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/checkbox","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.24255c408.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d7be5c49a85526f6667edad6ed8013fe7180b80","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.24255c408.0.tgz","fileCount":43,"integrity":"sha512-AM5AG+zSXcA5QFoP/tRVxLGjXikEr0Mvi24ZKoWNw7lR3epbXr+1NSuCm0vQQxqL6Ey1+6AGssEvmNCf181Vtw==","signatures":[{"sig":"MEUCIQCC55s/sisfTmN2hIdEzsXBQrXMbcngYzytw84vBaVJ1wIgHN9LL0K/AhLr6EMCKOvmcBbFownkVEQB1By3QRqe3yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUfCRA9TVsSAnZWagAAUHkQAJ0QPoSQNja5CAccDf+r\nH2ZIyjFqMjIQsN2TcfEeD0cr4s2viukGaD+qb+kpBeCs6BM5LCrvMiorxn3Q\nir3fvzI+2etkxNEIVYZqkDEDTOF2cFxbfZSU33ucbn4SeRHxVQQTe7sc80TT\ndwOABBW+RFF2GKgj9o+ONharsVQgOJsdetFnuV6zKAi1Dom8OUkje3ub5g0c\nR42vOFBx2MXyijXboEITYuA7lY/84fByW5vqfksZXomg68mKSpyYkHqXyVt9\no8Y9zzB36rYehQ+ZB7vco+qnV+8FWS+jUfsUR2VjAZ/QdjU5mlZQQjFIVmUl\nDg8KiueV/kA5EFX0PdtKyYXSkU5Q1m1ln538yjPBO6tAWT+M94OJHMKMcM1M\nYkjhQzhTHI8tlulUYW44FxDFUkBWxPEUNZm88iopoDyKALjukVRW9sqjcwiQ\nSDNz0+IjZfRu+gdG68PBRMRzfugsctiJWxe5z5GFew9X7R4Q5J48N6W/ez7U\nfXdpGN61qFFV2DNgQXJTZ5gxXxtX/wMZ7eVrJYPmW8nV3O2osTJp8SLjqbqO\nkYfbjOrOTTrdn2JiZv72eh5uvp2cGpYAiX7Qvg53g9Fj0BCapD+VK3xqOpNT\nOsJn6n2x0Gnbgf/iSDOneyDNetibiZtXIZFU/Q5JNsXc0cc40M3xEAy9W9sK\nfiR7\r\n=nNWl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/touch-target":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.24255c408.0_1617999132154_0.8600160100041103","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/checkbox","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f6bee4934232df1c906cf42a30f56d1a7b20e09","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":43,"integrity":"sha512-0mNMBNRrk6/bJzzktz24nNlle5c18YT6BlFFJigxiBZILfSYJFY1KQ3xELOyypO9JjwZaowgfiPy1M+aTB+8kQ==","signatures":[{"sig":"MEUCIQCn01rorb5vuZ1UtbOdARKMjFeZx/BuhdY41WkPIdwKdAIgM0hMmkUlOuThHJMex+6fgJBzAGkdpGXNhlxchOVL3oY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNraCRA9TVsSAnZWagAA8fgP/1MiMnS07Szs1+2JlsuC\nvVoLx4vqJgxe65NoxwCu9sK0RhiTx0j4V4Bf7O5u6DiklD0FkvsE7Q7d5BZB\nSZhTDi+Z42t24i0OT1kq9EV7n+PSIte0mRpYF4+5IHkmLBhWJdwuFmLYH19t\nW+Kcs7s0QoNGBBau3Aa1Rw73nQSwPvyglFrg8jNYjeUvPVfX5mlwEGG5+jOK\nudqeScejeSE6l0rywW73vkPaZGkgcCc4G/ucWAZljU7WzNI9b3OXAiYOycMF\nlydqptYYrYpPH+rHUiJluiA6O3osDrI0pJS/RGedNMcvIV7tNB6ArjqjL6P0\nK4MiWDl2CUBhIdDd8DxycAzInu4mmOIYz8oGTY+reI2dM3nBJai15Afk8fg3\nCPkBEfgZq0EJ9yDLleyj4pZGDSO0/xYZmDYpb5AYSAmo+nBVtNb00tQrvnrQ\nMYSfg+reofRyZbFgBuDjVutK2DFmkpkBbhkNwragOmEPBjn5sXNH0jTFqGeh\nXpXJVHiCIcVu5MIQSkm/sYoht7bcE7P29/Qdyiv0Xo4z/8F5ipodCQ4+SjGT\nG6WfiAojxRHFIIJBZNnSKiiGl/gA0hvtKibzpEI+GscvoaUfB+OrrLXrsUz9\n+n8K2G8kzHbjnc9L3XSd8kQI2S/LnzE3frlUTckSVrPfpGNRU9ol7i2W+eRB\n5ije\r\n=Sz1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/touch-target":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.7d6a4bb72.0_1618008794217_0.40084419454951714","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/checkbox","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.352b295c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c240a8787d2b32bbd8a55ecd18fc6ed69d9e1121","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.352b295c1.0.tgz","fileCount":43,"integrity":"sha512-MJDxz+mGQDF9vMG1HH/gDtma1U3EHkamDZUzHJahTNwTMsa/4j9Wdjgzw5vPzl+Vz0Rk6bCR1+4QEHHeGlrQoA==","signatures":[{"sig":"MEUCIEn8nzR/qgEsK3YE93Og6mjRPzKdWuQbu469QZ3QxfyfAiEAwUDPh7sqW1wHCe31FjDvCEEXW4fgzCv62HBpt/oBYPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI4zCRA9TVsSAnZWagAAXdAQAJrwXiqD26ElTbtNHGkI\nQyVSqWxse3Ndoftno+vTCMCtNr2Bt/jZIda01gr4f73cMfUMdwnRcco5DinK\n3BBZHuMpGpOtxL6iP6uDQhuUilobVSMJqYI9ipH+Cv2J6wjgw2tS77gQnaqx\nbNXSzrYEeTJYDHCi6+GIVYFk7rKk+8Rtu60j7sx7PtnYeN7WhQudSUmo8W9h\nchaiyH2nrUPUoeocaJYaunYK0qIOKW3vPj3lsAqJSKITOW2iKqyUHAZH+Nyg\nvZxsvqBmlvrFkW/EW+/VWuC5Il9KlxiqTqNWuJ1VfDX8Tap7gRXhTrm+8XTk\nk7E0/xA68eZXSQRlYo80HjaidHBe+2ihKfvW59orl3ONUqr+K0ZlOcqoa1Pz\nfLH1I7XClqPGi/UjhU1z+TABy+LNeltu52wNdYki48LXr7MaPmwj7gHcvgM5\nwoLlivMT3pqsTL5yfZJZ+wNOM8x7zejZHdlL4vNQyb9WP38pTI6S/6k764P2\nKILxbGvTCYcYhzDPGIllw0ZEbNxn1CdbhjOhnD3+/PA5qCYRuwH4ggo6U3d7\nGlMaPNQN+/1Mw4SAigrDCUNRYB9bk4OBGf6KWO6U7McadGr9KthT8p19X5Mj\nJLiLavCdw3EoVcxBDAwMnDuZfwpo6hbuytqHBFXzQtqdQAKI2tRvI1H6eKZW\ntk/O\r\n=3aC5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/touch-target":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.352b295c1.0_1618251315388_0.02926326535564794","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/checkbox","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b4a67e06ee9d863279a016a6d86366fc9f7e10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.ab99b8064.0.tgz","fileCount":43,"integrity":"sha512-mgUBNJuIjX55TxQsXD68lpUFTvkuRd1kCOBf8fcKzisB1JdTdi4gtuonIZ17wthCQ4wwSvd3wfDuOz8mpHoobA==","signatures":[{"sig":"MEYCIQDLNe0RtVI2rUYdTiPC7TxNPokFFFZoEbTvs9x5Zs+i4wIhAKI2Z4GVqxnW6ihcXGCoh9Yylepk9E5d5b97iY8b2ItN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda37CRA9TVsSAnZWagAADCsP/0v+F9qD+0jM7pna50e/\n1qNUhRVelXU2jgQsAyXrZUSEItskufyGLYZM2Sqa5cp8nRasxkXtvicYwb93\nkUXACWw0+4cREqAR9KnA/yariMwe0WHkxAvbJK4ZArufnEgL5sbYE2USJVy+\nRBazJoMGS8+ZD9vpyMT7GjgJmn0r8uZDrnKW/XuT8vzqIlW31hMdOsg+DaXd\nphMNv3EoUthXUyhJz+a8XUFFpWdQiVoxe8LpcWFzMXqVgtvHZNB9McVdp1wl\nKBvSKLe8JzxZBjpW6IGdXJ6yvPtPVYWOcDML8XQviaAhL+hWz9vwhl6tCyuk\nDfsesfq2sdbEd61+CyuADD9QCO7QcG/slHf1PA0BS1C+puOlwFWziI8rB0vR\n0d21v0IsjX8z3mA+Ut1dl7jXofZZOUyXEwghEHrq54wIiLcILtV+r9hsvgda\nQmu2nqy1I+PKxci5wIeyln04dZ+s5cqDcsE259D4gtKfb+qrTLc2MDQCwnf5\nEoFH6hz6hTRgGE1PHqFo6S9LfNmcTjAv86CUEkn+lmfXoWT5eRIFPJDp8b76\nH2hCn+hJDrbzduRu3JX96lAWHCL/qR+3Zy0CU5n+FfnrWlo4MV8HHjCvnG83\nackaVbC/CEqwiQFiqFEOETJ32ALqGpUcEJClkzKv5KvzuOg2O7LMJHXWTWcX\n5jbr\r\n=GD1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/touch-target":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.ab99b8064.0_1618324986840_0.16964226716786568","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/checkbox","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ef6f7b1330c2e1c4c429836b0f61d124c65a051","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.8f0a11e32.0.tgz","fileCount":43,"integrity":"sha512-8p8AIQpaY0NzSr9Q5nsYD1PyT1TMfbBS5jvo1GMGqwh+jTOlSoIF2e99CT9kyYqbqkoISZZF8i45Lau3oLsDxQ==","signatures":[{"sig":"MEYCIQCtiTwta3Nt0rwzI/87VVe3e4Ulguojm4SP5n80nzTGWgIhALa0M7p3PvnjIY1nP2QvryBrvZmGHUdKhLahLxL+Kj/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0pkCRA9TVsSAnZWagAARdwP/A8wPQvdfzfoisSCOWeh\nDoX8fJPf7Y88PftR8VzUuDQt9wvUb0DxivBTDWgKjM9nllxEcfRqxdqu0gdT\nM84uthXaOPIYM3UExxx2709qoN3OJz/5Qd0OuRN94xCJM1RiaAenpTdNwfMQ\nAIzuClgSCfn4lHQgrY66EKmcyAKkcginaSFMc+C4VZB7tqKb+SjTj8gn8a4c\ntcmMH7oPw5eH/a1kc6nSE1wiiJCQE1e9ZHfK/QjLbr6RtHkiT/hVjHSCYQ7A\n2YXoVGVkBagSdLW9R7fvLBmMckhoz5J7d3VU+GAZosY/rFnO5iZoVfHFAY/J\nMjq+cXqmIgmM5b2ad1bklx9X4rG6d7HSMfrc++XtayDUqHnuWrG4UXEame1n\nV7cpMkad0SxD0Fy82CDuLaQclGWP+Eut74oB5P972JnMY9RfEf8y1UT6oM1c\nWsaLZ/0H6FqIa4QvuZP3hiaMHaji8UMmh3pRbYprKcT9VVlk3nWVHt3ctvhB\nN7zCOlHYFfOIyA6bJcNowQZEzbQ9pjK94BJAvbtH11Zy8XMXg2eDHPKuZ0jk\nERyb7C9UHNyZNLhi30oOBbcvhUbSKL/3hWsgqpqrMXHnfsaZaanPD7GhV7ZK\n66sUrFq1rzRpsp8PX8Pk7vxqs5F9VThQRT+1nafOqAbGmJSU4wEwfSb8AEyB\nkZgY\r\n=ag/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/touch-target":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.8f0a11e32.0_1618430563845_0.265716951181757","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/checkbox","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a134a39bfc08befec13149b316f301f74caa7d3a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":43,"integrity":"sha512-lnE5MF9BdbxmBlvsmE/3ObwkJAbiTQ0FdiNyICkCXmd43GxH5F62xPz5HzUmMFitGzEL5pYmCAUfz5Dnw/Gy8A==","signatures":[{"sig":"MEYCIQDd/wVMSG+4Ut8/1LalvdPXVWrmQX+GcPG1f6S9Lj2zXgIhANfUxXxi/+M42xcI3IiLGU+4F1t4s1bHZAHlJ1JJVr4h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAHCRA9TVsSAnZWagAACs0QAJJd1cg9oPJ/ewe7GkC7\nwiJJpsp6njN4VTu8z4KL9dfO+Wboxm6KnxK0rpVYbrjzzqqbeUXlnq+/Hzow\nncjQFgldhGo2N+9padqlo7Zy1RlAuZFejXnQiJx/j7elxRgTb9M/FcFbmMWt\nqvnSL4q/cxmDi40qmEiCPW7lp+grqc9duEYL23Z7f84M0qc9cig6E9RTY3Xf\n9F+1T9Jh8hxCnEZAMQCSNatVhOCachKsz4MPMZlNtEhIT5zfHIOSgI+wPZXD\njypGz1xrqwA1EVGTC9+Sj/6k2hB8euX8r7Zr8WvgdY+tNBhebExJPUgpD5b2\ntg/uL05EGWD4o0ZnFpVfp2hje4XKB5LljPo3s/uK3mBuDYxHIS+ILqZ+M7VK\n05wM5L3yd04NvvhnShRXTqQ55XfGd+WHQ0XKiVAYoKhGKcug3AArAl+2gdNm\nXIiZpvWmPkifNm0tOEIJgJ4rOq+5A/c6rTD3lsLxz/ax1CDBjvPCZtIXl1iP\ntmyd9OLxrylhvUk5HCHA+OHYnI1r2le3uFArsostnpVSOJBF/UNj3kAAxial\nS+uSrJ5fMcMEYk/xn7/pF9OcJsvEtgNBlytSgeVYRKWCQ574mpTtqbpowfE/\n+ZVOhaNtkjS8/8aD++YD+wRmb1cEFAT+huyZEpBPNV+zPFTvQbg79qtqyyoT\n43Mo\r\n=DVdr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/touch-target":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.f5c6db8fc.0_1618509831325_0.1791380629091892","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/checkbox","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.3793a3143.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"203f3cd38651b16e231ae55a0812b1fcf52ea81e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.3793a3143.0.tgz","fileCount":43,"integrity":"sha512-YRBxwOB3re0s9XKnxZ1T6m83QpF9u2RwiXGozQGbcK+qMzHsNzR4LhOt7JW/izKgE1Za+3+/kJ+lFs35bjFvAw==","signatures":[{"sig":"MEUCIQCS1S76fznFpXN8mkTaLZxmcEcTzaC1z7HQlXMh9uF9igIgRlryceg44D3sdb4jwnOCdIB2vMT4ZuvHJE3UG6j9F00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZpCRA9TVsSAnZWagAAqRUP+gL1mvJ2FECvGN5HAAxD\nE6evtcAPhaUJA0gWLJ67QviKz3Ho1gxIS1BkwSjE1jDTk5Jaq3gbF5vNDI9U\npCi1v70JpFdlaZpsvMe0fuJ2RY7r22lJnG3kZkDIPXePCCgClf91dGIuiEWm\nqzdwJVCRoT2+uoBjcEfshuMFkKTECRRRzqglznn9y0PjCBHbsCEsXx7i4zAZ\nBMG90TLyB0bW5ubBM0eGsOkXBMk5rLQAZlVmkApfZ6PEAhV7tZ5EdRyOYY4f\n26bMFpVcyAkuGmnOcLP6JXTCc4T9Gj2dpu2oSl1pWgROYYqTWX2P12JUzzmH\ndYPrj9NWiagQTT1mbFJG1nqwpAJK5PLT/NWfPPeistfaWSKZNfQJUClWrPal\nsoyvVr2CPolg+fo/yg5SvQOa7xK2taCS6DR0oyIr3e8FDhqZGVRlIChH48sh\nlaFmrbY/13Ip3l/+HTtulrkIxUV89fQvZXWSTx53OYyPgBeuZS1GtN0CcOLv\nLdUYChl1jdM267oB3zJr69ZRUZgC+nq/fSPEJYdkcTOL0MRCQNPIGT9rs0EH\n2EeylGhiyH+ygkMueBZjGLDHMimDrJSkQo/j4LMiAzSudqAXT+Npx/aTYMMm\nDIxuzKXRokR87kW5FLkF33PIKhZZMRzXmcAXBPHj7Jg7OLGf9v4ZTAFGPIy/\n7b3b\r\n=5N9T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/touch-target":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.3793a3143.0_1618511464605_0.44286548275339466","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/checkbox","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89d4dbea2b4553541cb6f2f0f70582fa305e5e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0-canary.bc104bae7.0.tgz","fileCount":43,"integrity":"sha512-CQEX+rH8s5vtiVYKx2TgjL7FLyFH5ixoL1z84sg06yors0QmGwdEKmq1EGvJpA1ffO2RuEQkIerMhgF0urIDPg==","signatures":[{"sig":"MEYCIQDAjfdktUvdLXd4JZ8adyxESEhU39YN5lXwriVatlU9OQIhAIC61Z4FTT/IgozE3zIm3ifOwGOZpNMDQRrJb2F2heAW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJfwCRA9TVsSAnZWagAA4loP/0jD84ipwQwSB7EKLiMW\nExFS38nYPreRW7TCENEqSUjH7pQYPORF2haaZMsgWSsqJYvrH6hACbUvQRsM\n/B5qtAkciidw3ggUcDyaGVgEOmENW4O0Q19QmsHTxQ/GsmbwfpJ/GWOUmj1l\n6xUz6+Qimth89ehTHXOEpi0yvBugqcsPN47iVNAoSC1po/Nzc6wXE53wvUSE\nIHzwAg0P8IO7lixf8/xDlcE19Q2GvffrhAKG3eI1BGJAzZxbUyjC32ISsyON\n+gA09VznNZSvO3Rd1IxjXHJzMBD8qkIDPcEqk5izrQZt9wMvsbB2YR5dApDJ\nk3TvR659zJ1ZtfpQl3BoVqQWkC4iQBWbAn+/m1evMnEGf+rf/NM17PPmWTds\niaHPyi5dURmdjN1ACzznhjSTn1ZHIwYFkW5wUaPDoc8fvUrkLPTbIAhK1h7j\nC3PL20OipKTUE12BRwDm3Bjl/5j81YgFQanB7XjkZz4qwK0OeN+C7TFzFSwv\nKwTcbXRRV5bvFYkIcf7GntHy1gOxu4dL2EwZdJV4EDCYwj5UgsM14REup1mQ\nqHdXjIBkM1Ua/xBKICaOtL+FwXiZms19SzZo6QcFwi6200OhXiiOKS/MnaWT\nn12Q+DAkKZS3fDC0Unvz2T7bL1mQH570Hq7XaFgNsPqkAYeoUoANeWxP+lZ3\nyEGI\r\n=lfLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/touch-target":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0-canary.bc104bae7.0_1618515951759_0.4512170740826298","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/checkbox","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1dfb7a9edee3b97683018c5e0cef19f995c0e55","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.3f342c3f4.0.tgz","fileCount":43,"integrity":"sha512-yooZFPPGwtM/9FSH7Yu4UQKZcu8I3HBg6PFFRS4+E3saCDZkTtaU8qQk4Css27GJZhC0VR/LytsOY7W2MFTgmQ==","signatures":[{"sig":"MEQCIHocmYkPHl1l5xoyUiW35izn1M0iwK8H5bBbfdLOPYN9AiBNwVPGFKHJAQQVoNX0RtyBD3HKdKigJdgiwu/Xzb16Bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQNCRA9TVsSAnZWagAAdTIP/jsLUQUSX0P6uyqQZDKb\n/VxkpA40ghQy09EkbzCBYA26X86oi0nUS+fyUr+imClfoZAdk83rkouJWj87\n4RNPUleUZC9giLDK2cW3x4iiTsvWH3NzWoXLhwwdZ15Ub/RhF0RhizY3Mo0Y\noF0a4gJo3DzWLVfuOz9cMeEHr+8KTaQBXUBGFiK/ZNStJG6WwqWwW4iMZJlv\nge8g5gE+ceTc3FmJOvuVXYq0F9FvUIfdWXQluh+gqX8TWyQ9AqUNuuPPmIvY\n2/s4kvpmWV/v7Isz8c+zMS2DTi51VsH7mpuP/AASER+AC4q65MDRXv37FNlA\nxAjoLg8FDE/rIb/29ga6sgvg+dJlCPku1Ks3y/GGdHBZZZpqyVvzIOQAFWDu\nNhyzkSr0ec7IaKftbgdyB8J6mGM1CnKTsHUi1M/c3ScNpUQk3JyjKBORMPqI\nj5+1+utE8RAOz5kBKkIxyN6B+ht7IUHw6wpc8E+ntmtvIDO1jAAcl4myDYmY\nwqmoq1eJPHEnuCaICnQhCqqHq2MnEVGSjTxRyeFScGzxORgCwffNz28MaBm2\nkJSzgDR5x2D8bf62DPaQTCY0IISUnDOoODb8oEw+JKtXF/XgoJCAj5Bka5BM\nL6DCgyJfL1Vp6iHvt0etWr0EhC4H8aMewjF5YXrqgKnWM28b7IfT9Huq2ZUj\nrQHw\r\n=vj0u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/touch-target":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.3f342c3f4.0_1618527244752_0.9990665262484542","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/checkbox","version":"11.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@11.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec5b0eac0007ccacfe6300db1e12591703b7ab5f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-11.0.0.tgz","fileCount":42,"integrity":"sha512-vHBG9hK+I6SAn2H1/5u5PUscsHMGc2525QLWeWoZ5VRj6TKtxJ8WKZaPZKea7iwJwKYoe4sI9hOFjE1QQAL/tg==","signatures":[{"sig":"MEYCIQCqskq9loU6jtPRBCU8PjDoplduuARwb0WJWNI/8J7X5gIhAIZVzC1xouMuTI+sDzjoPQVT1wxiJj/3KwSIpOxPccsh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":690914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMT3CRA9TVsSAnZWagAAOtwP/0ApNZPJ3wTP3GHw5J8b\nDovUdYfZfUyVUOgkXlDBuNPyb+e1M816pfFraMno3AwEgXZ1+RxMdjTI4LYn\n75UGm2JiNdCGL2ygk9XU0Gkf0W3NCXV9ZR/2jq29pdG/V/GfiUokbZq1dXrr\nGAbMpZVFm/KeZmCb97KkQlBnzk5A5a/6dCjjJKmR2YWyYl/yyAv34HQNsHMA\nf9JkXtPtJ9wTgtbX6dlZsFoPdFrmfpROjXd5vXB9rU1Sg1bSAE8NxkMXSbSb\neTE5prB+ipl6z4dm4nfXLhxZo23BveDbDUadm2YTF9fWGAFZhJ5tj4mZY9bv\nPw2+8m3c0DONat2HudSotYfbUV5YqwQAetXSRAa+korYjXHSNIth1S4UNmiX\ng99EO1f5i0StSrdbsxeszPv9y4NJboXG922D+fGmn0cOVv8gZQ6aLGL0KxPG\nthDLWdHsXn11FRxLmiMvi9ZBJtNzbP03RMAi7mSgzYKbRkEYfWqdTvRb7Tv0\nffohBMrTSZrIFJFDkUvNJjhNPn2AzYv7JFYekJ7aeVRu5iDxsNQHGa3J5fXv\nBON/vEwXVxkNZXhUpvtCq3+MDi+kB6l4X/c5z/bam6kxjPmFsEVcE1/1n4IS\nfFuzZbZUBWVvQGCPrTXgOpQmBu/T2oxSw+YJRLcA9BQS9iNVF5sPcw3QuTf2\nNhTy\r\n=f0SR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/density":"^11.0.0","@material/animation":"^11.0.0","@material/touch-target":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_11.0.0_1618527479436_0.8767380073743114","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/checkbox","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa4d736d8481fa09d50f6c483da109f87dc2f6cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.2ebfc5374.0.tgz","fileCount":43,"integrity":"sha512-eQApaUMNNyBW38VM6qIAHm5YxMUpFUTJe+niHqQA3Fmou3RNDYQ8B2hgJVE9RyotoAgA9UM0JXEpuStKZZoTgQ==","signatures":[{"sig":"MEUCIQCcmBoA5S4amObAuwufES8uZekZbJjEEYKvkvbpw8an3gIgJ/2xObp+kzIP5sWP2GAWUrrnHolC0VbPTfoSmVQ+KOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefc1CRA9TVsSAnZWagAAMyoP/074H7ZcfvC3IEDg3THG\njz/bhJVMKEgBW/UdFRlitWiAaKNi7tzhzBeZ0rjNM4Z/k+Qkfa2Q1qn/wh3k\nquRWDBCdkfPuAvGgCov68oPrUf8KSqwUZhIudYD0LIWRKJTZnYFhp7UqL05s\nct2eZKjiL9sMij74YqhY98gRvnLO8EbdoRLvLhG0jiRIYpJskMt0UTOrkbOt\nHVav5dfWRmm+065edJ9pkB8BK8/97gvg0wNHfyQiFnRwfvjvJSgmHhEx13YT\nFMjLgNS+pAlBIfFy9W94X/QVsOfg32POgxjyrmL3kzZYTNrIxkLiXVLgQZ95\nzTIoZFjyeI3Omeu4lcfx+Oayb+qO1RkeT5XqAvVABoVb9aDWziXu1t9EtCSk\nTxQIZ+FGElTG/sV/wYCqc9FqvaiVusTt1kB+BP0pTpa81ENfFTXh+GWfSVPw\nTjZxz9ovLAaWzPEZ25hhPwulIEWRsTdopyX8fIWhZ8dTKcUfaoyLGZab9tNE\nLHUoyWsIinbqdObcL1z0qaOnmNky+NIlSH7ApMVM/1B4tm/3tsOl+P1UcqrG\nzXqC9/R4SfSa2eEzO6NSO6yLzzjjWQ3EoxoHt+Pt+77GgQADmAm2dRo6LlKr\nvL2iPkKGZsxSLTwg9Dh5+dLXobJ9Q/5+KZYV1DVZ+mcZ/3iCEHrAben/3Dp4\n7rJ7\r\n=jTjt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/touch-target":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.2ebfc5374.0_1618605876718_0.3796266978554874","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/checkbox","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.5631828e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cc372a9a5dc88cd52088d0aa4ac16d51d110f14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.5631828e1.0.tgz","fileCount":43,"integrity":"sha512-wOWL1TnZs11zSf8kI55O0Sat+cIra6dRC046NYpyNWBxj1wqjBP0kkT/fIWUQQxPIQP1CU5hVGmciJRrkxT5ag==","signatures":[{"sig":"MEUCIG92nNiaTwZSaBhrUcQmvZt/8zWtzUaeiuPnb+N64OYgAiEAxLQUACIjj249eWiWj89b35LkPNkztfgK4qqwrfFD6tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJZCRA9TVsSAnZWagAAbscP/3zMHDEb0wbONQSX2ktd\nLCZd4zv6cB6ySqJuVp9AOlKiOtY3dJiPBLRaTY2FTgpu0JrQ8wTtcbb1WM21\nwqmI99NG1M5MLdgTwTgDE+ze+ZryybFJi68trewO1GDm1cJI1KfTQjvvaSXO\nZII0mauzhUu2Wxf1+eiOEIoHfSbuM2uu2nvuYQ/LmnxMrQhQwadFxOzylqXj\nHF706oxriZ5aBm8Y3DdY71cmLk5DlctbhISf05zF1XPQYfHFgoJf7A5qDW2T\nyGsFZ1m7NZ3+rWMd/kYDZGTuYpcljCJAhI0d7dTVFW2iOVA6uyIJkZyLaby1\nLYGJQmtqTuxOOSnecZdQaaR5Izmt39718fV1eoVWWrmGHfPlhmcil1F3pryO\nfYV2cbIkwZwpdH8uC7EueRwYbwUToF9DTNWIEH9voh4NxcWA3fJ9CUDyVKJ6\n7392ojJvwqGVPebbeVT162/WQn42D7yDOgZPl6yau5SvV2/MdovnNLRFm6BZ\nzyjy3Cw9aZrHYU9ww6nCFtuS0sGovgfJ67182qlkfW/+Ay+1BYxazUd4xK7F\n6UGKfuPYzr22Md9qLBxyqK1pZYTW5y9cUM/RnB3rB1ozej9Z/He/SmKdTBdy\nR61c7whrd+3hLR0qeX/IVyuTTFSjpAiojLEun1wYmRmym7oVX7TnQuqE0wGR\nUFzp\r\n=67p6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/touch-target":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.5631828e1.0_1618645593398_0.8113535607398581","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/checkbox","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.bd685395b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14385b908f0a4fae42a73d164afc735e234c67ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.bd685395b.0.tgz","fileCount":43,"integrity":"sha512-6tg7V++8+cPDEvu0mBBjw0KliOh7xuUtQSDG5cz8TWCSd2v7RNKkxqkqJk0ZRIxsve6DEE71UDw+t3TKVo6/7w==","signatures":[{"sig":"MEUCIQD45ZUPnK4VBnX+/6AAHbaw1CazTZNYG8DkPksSZlNG5AIgDAhpEpA6zslWSXazMNGKbyKrrX6poOc91d6ivl8qWUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc6/CRA9TVsSAnZWagAAKOYP/iExhKkwA4MMRaJKlqXh\n3l8BixBjMCk/DHoTgiGCvrzW5FN+PR5gKjTr/hT9b4Co4mSBodPVBWk23GDN\nvxXCa+EWmkFsXpEWsXp3Ii2YigtpHS1zA3ynhW+8s/lV88ipdR9a1/ej/gxO\nieIuCI6XXKarK4dEk5oK4MNLXOekiBqOnQv8vZTTrZzWaL8OirNIcvEH91lg\nPqJA7uQ0mLAAWOoA6TLGZkyiMfdyrA/UOXzaOAjVXH3fVJ4JZ7dM6etsju5H\nKPQMvEAmS0YkNkbX5bQBVoEWrwIump9mvYiRfJe2kP+on3CKpZJyHFJfVuEM\nIKlExKi4zFrH3MsHvmVzx8eQjEbv38/eE11IGO/PFEPP8NCwSdTAF4BvAIqC\nvaTNN2rK4S8Nw5gjI67vhUOjIgEb6dmyNHBx/iP1X+clhNSFcCJRESxoHmO2\nLBqD1fKNO1+NMFtLXexitT6aEt7ds4FuNzjPk39hxYgbhMk5E89F6jVjH4yt\nh/mXltyxjOZS8BbXto0X6KBtgio5cgznjbe3eeRPc1/gY0CUQOaIWEamD+GR\n+5gW0UIc9OdXjZo+E0lIZGDc65aCQftAHWD6Mj0mgCLW0+76HJxq9/bfeqR6\nEsG/UzXl05LUByNJn8dVEO7ousvof2Wo94yL1PTXzrbI8B4tmHNDb/J7Np1F\n1RyD\r\n=Xam6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/touch-target":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.bd685395b.0_1618857662679_0.028492675520710442","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/checkbox","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.b52196498.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bad053ca99d8b1ce8c997bcc09f66f068339cce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.b52196498.0.tgz","fileCount":43,"integrity":"sha512-ZZpme/oIdJH1to5ABpc0cPjCI0/NoX2SOv+saOcJfP+mrcnPHoOAoPYNNO26NSV6CFDBF3mv5SxfGm80sxe69g==","signatures":[{"sig":"MEUCIQD4KrT22XUdIXL8dePMxwgDujJytM7kYcbaiut+nrB1wAIgGgCdglT7/S0yMYCR8b9et+y/pebg5/TfhHMuVIoXnbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeCuCRA9TVsSAnZWagAAEIIP+wfqpRPeVYlbMF5D9STj\n5t320xC3kopJ4CEO8q0vvWoN2u5nNsqRZc3/IVxLCrAMzpV6MmbTU0uNlgbe\nhWQ8hFbWMG9gXwEHp4UYU4oTgpuQPGsI2OtxMVoOJSBoZIi48vbj79pQjQNm\n5HD4foj2TbFn06RFhnLbqeOs+jbe4iwhkczsPcBnbFm01PLS1CwlpOVqBzZx\n7tg79KKjpIWEWYVQGfFqwTmkjpkbYrzOKRG/Dl1X5iOaqnf6bmbQdbatuLF8\nsvKayUhVTxYJF3y7T3fBH6Im9dXriwGfcKSMim8in8e4t/2znXtrNw08GgCx\nf5R4BKbom3aujbGnou+2WtZbWsaQOPWhjJFFl0gNi4uQg0w3mbWD0hjDsAPE\nr8dlLA8xJqDhr31a+fDfiHGogfWJ5Y0F/C8VbVvpeSrDcZDLJwtq+fQb9WHB\ncIPCxZFdFlgyPcmy6eMSK621OREggji9FBUhvjec4XjRNCPvQNWl8okUe9OK\nPpRzDxKpgJxg1qgwbd6ucXivpS3nQlT6D/nW9va1M17m+Tb0W8HkT41zQIjG\ntxluA/uNiIMbD/jC2vBcI7NGEoVri9ReTyTFPLNtiHNhlWoOdsmsVzsn5uIO\nsDsAONubkZQVF/zHggv9vC1jt4s11AcWbLAnGqxFgFzqTjt63n3AhbdZ9HaL\nF9T8\r\n=bJmf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/touch-target":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.b52196498.0_1618862254294_0.7814469529820802","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/checkbox","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70bdbf5ade01ae9c06c0f840c210b3b5378e36d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8ba3e298c.0.tgz","fileCount":43,"integrity":"sha512-xswVooa2Eq+xnmlsfGwA+p20sN9bes4ZC/hJSIOQso6/+nkLqmazzjTPcQoFaBBPSV0LhWPzGAwuPcbXpj56HA==","signatures":[{"sig":"MEUCIQCO96rbIGfH0663Y07FCJecN4jBP28aY43BHz8capGwHwIgS0r9MPtOO2ZyzRlBMkuvGZXskMoN6SYNOgXTfsROD2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHOCRA9TVsSAnZWagAAxTIP/3AnFqg3z76QQZQJUaww\nm8MUG4Ff0WRsgOyku21R+XdUewomvMVdwZvzvBeYCBJ5m15TA1K9YDTwi/Hg\ntxpzLMawsAlM4DLKWEZLswE4Se/Qt/nO7m4zKJgdm1+WQSfbafAUfw2/P0eV\n+14lXldJV58sFrqmeigPJr6RwK7ifV0Vqx22bZi5iOxJ3TUmxbdAJjH3pG/r\ngLE5C5nKGIHA3igeq9df4CycPw5BbjfluoxcMW2ur3wCwNcqznSYgZuRlYHO\n7sSRyIb3Iz30laD6eKGclgKxZQR9O5C4q+QaSzg68KVfaJpMPwBNmBcNf9cV\nEsOvCPzSNuZUXhE0IaX0PFsp9lz/smYnbYIfwS66m3x4WTC25rOtI/4CKULp\ni0teptwTIjxwYZETiKJQXvFhoGt89O9UBt7iCvU7eXZSq8VH+Xo+J994tZw6\nsuozgUlin2u53OLLn1JMgz1NIdgIOJEEOj+QMhFQ+eJWZLSJbhKN+IZ2z0zf\nn0JpmUEum3840HBZoDJQEWn0DwO18Kb0/goS6cpx04eFbVEPFN6IC56hVVxW\noE4x5WIT0L7hSVVOTBmkIzrublpJBcXVn0RyDDgS+tZK4cd/RFYepOdFhsAr\nQkOIzKJU6AfJ5UL1pCNqLWcLbBmCBF+XD6B0wP4pw3kn1QimPrzwfd63XR7J\npczw\r\n=6P7E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/touch-target":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8ba3e298c.0_1619014093519_0.24230550869037026","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/checkbox","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.c629eab71.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5cab81ba806d600d6acb70ef48122500593bf05","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.c629eab71.0.tgz","fileCount":43,"integrity":"sha512-zn5sKo+Vb2UoZu2AydVqf76W4at32ehlcolLfRL1nV02eLR+eIHjD85zR/AuIzCGtiogTsbcWW+smlRWsnS61Q==","signatures":[{"sig":"MEUCIDW3r0OKhn3CLk1nbHcW0XbnbfAdk3rAwg2aIo0XqxOAAiEAtwMWuKHu3U2Zew87ISSI+L5+O6ejq5d2wgC0XOZLaB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOOCRA9TVsSAnZWagAAkmgP/RrWt1lQz4CwG1oyXPL5\nWi5uU1Nq2DombnCVyoyXAdcCFINPSrEJyCFtmjzpyeK3NaZu0pKTmXIfyhAk\n/n6FEs4efhMpLDWbM9WUZCj7NWHuQy6XYu4UFjKNUxViyc8J30ziShGviiO2\nZiw690bLO734uh+nSRv3QcGYVV6tP7OqJKxE/rb13ACNcml03q/A/cY4ukT1\nOmD+2Osg0KDSAQP9/uFesaxsPZUng/K9/ehmB0oWsIvVdIyOzenTfZAwxHuv\nu0qzIdVl1LzxsHo5vHhrdwN7I42VBVJ4zJiZQmS7Ym3DwL1PA7FkHqjTOaOO\nSoYIp669ym71gnldBOh5UWkrTu1VHG++qqYvroKA/vWyMd8USJGJp/BSck6m\nrx77YgeLEZ9AOlihMhjIvUKrrBMsFU5ww4FmueBAqbCVeOjE+TtM+Kk+Cy0A\nHoL77CkyE1Bj2DMd07n91nSYyHGGAMyuXX/jfhkfVW5IJPwa2EaJYPlu47vK\n668gA+p0Oi19B9NAUKAQgHOn7ch+lR2BXvZZIyQghsdtYiF25H/0U692+4rX\n1O7lGCwlB4VYZ1JdDM8MMnFV1FfK/Sn+Q+YGs4oZKb8eBDoJjNoVmslIf2Nk\nAhINB2FKVFWlG+MJmvNWi8a94W0pWqHCxuqGt9cLr8tbswTw2gxn+dyt0xRP\n7AT2\r\n=b+Hz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/touch-target":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.c629eab71.0_1619035022215_0.9743411569033353","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/checkbox","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b44585fbfac386234ac3ffb29cb6b00565c739","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8ace3b810.0.tgz","fileCount":43,"integrity":"sha512-typ76EDGhdKY4l1g0EtpGovDoRgeu5sW6D632idp2b+do9gzH8y3CMatZQrVTd6S3K7POgmGrIGpC6+8Di5FwQ==","signatures":[{"sig":"MEQCIEp6NyCHlnTXZxPfGZOlgsTtUMclT2fQASiJGnI+gTg8AiBfAWq9FLj9m22ZVK6VE8spXkI9L349hVmoyTCUnrZDSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0OCRA9TVsSAnZWagAAq2kQAJVwcL1DLsl86c/3CQlt\nlqnMWNfLkc4JZtDlZzZhMFfnZlZjY2HBdJ+iKDC3DAIuj/ZGIirQ1lwl3Lr4\nDBkf//Nld2FT7AvIZWD/gHFlf7pfHktjiIOypHKxe+m3n8RpDIsKW6gJadqh\nt5I+ZMK3Idu9XyJijmpHJp1CqKFomsyQWgHpss65OzF3/y4mABqnMsKBwt25\nL91himPReHp7OsNo5GHv3iIA0ZVA6qN5l4AGyO7ZeKh4uDyBgA/Tt6F9bAMR\nY6lKrwkRYjzwGJuoBe0IOUTlJP5Ujo8g6gcZczITIZnsPl9bI1dM+1d+J+AZ\nndBNoP2D7uZizYlvZtG6foS91Ht+573+t08nM9j4hH6bxFl5TY0ryTnefN4B\n6tt7gUkos7gzHyi167tcIwMUqCcn3qBMSjYAQzrPq9UT0vTUjXlgQZUPrcfO\nKOdIFdDiu4O7I9ZyD1RgWTiCKwDdc7qoTGITmR5byqIjI+aWKZtNI8fhif8g\neWcHWeZnFfch/zCvksQ1H6fUcXne19r1kA1xsLHJh9rmSwqOMOdyzjjp/YLH\n0z+nmGQ6fd8PSkfWIT0rNi6QUJgnSZ0QEcOAiFYkpwmKOxjzqUAyMLRp8GYV\nyvQQjVXr+8cN2TPgj+BuBj1jR3rUxKSu4jt9gZz3SWXA9KbGQD0I24okVqLv\nUuV8\r\n=d5tX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/touch-target":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8ace3b810.0_1619037453995_0.39610772638227076","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/checkbox","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4dcb2e130f414f8f2568a1af71f5caa34a2e155","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.70beaf42d.0.tgz","fileCount":43,"integrity":"sha512-DQBYaMGDgQoOWsDfX/r9T0mBrpjcHyjDfP1ECcxzNR+HCiAD+HEiT4KdqYF/4hgz9b7hbeeIa51L8ozlzlPjQw==","signatures":[{"sig":"MEQCIBoV+xsGR7H7rIII8/1XHT9CqrlVgHLrzKc9nKZC53vAAiBo4H3IVKl+VV2PkpmRvjCNL51bedo4yidYCiD9KXyAmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/HCRA9TVsSAnZWagAA+yoP/2nkaLa+bAbL2Oxgc7Lv\nj2OsmL6Llk6EeW733hJoVNcDGi3V/ZJjX0dkvwbqXWPAHdyFVkRaueyZ8sRD\nv3AzhhUWirOITwzJVi5a9334u8ijTOpzoEtc1xECswi6zf0Kvhffn2s2ymGa\nS9ndvF5zGhpSNaamHYBjGqs747vuK8OqfT8AcXreyktA+R77I3RTN5MU45/y\nUKjgn4UGAbws4UaYYrWBeVmFiWKJL2hrMDEQyVIun03teUkh4BEdYzkY6QVL\njomze4tkrvXzTMrbziNlvrO7M8LUsV98nqG+aEatSo63TE5pUpn2t1wdVngF\n1vyovF1nJDlcWXAK2Uky0DiBoWXatfeVgx1X0YlY5ZQRq+0tIBzb11PZcjlC\nKl2IkIIVHizK341GxdkTKovdw4DQFVA9ereKMe70/W478ooILplR3RvkzwHv\nG2m+kAis2R1ETWpwWNU6m+QYC5nQ+hZp4YXH2BG7KkHSouuyluV7Om3xPeQq\nS/Vq9TioNuX9YRKXRfv1X+GalBEVE9if8EqlsukfpEkWVa35CypDSfcAog4k\ny++kAkvWZa5B1wkMsW5123CTJVf+eZOuc2NMOmSHyxVoSb0BD3OZigAbc1IK\nNKbIL5U+ZUq9AfbOgZ6EmPda9svbvLoyqJCFkQ4ITD1hEjGyYhh/MJ2RHS2n\nhSBH\r\n=dcP/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/touch-target":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.70beaf42d.0_1619038151004_0.2913484973433178","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/checkbox","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.cad489689.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"032644ca820719ea13c041c2854e042ca77286fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.cad489689.0.tgz","fileCount":43,"integrity":"sha512-ihARbo8myxO0KfrUYeXgGwKYnH451IYmmX8aqT2EBGhshVNYttpgPbGobV06oFZJQ3pjnu6iaa43jP2tNDBEjw==","signatures":[{"sig":"MEYCIQCpLEw1etcMuCmGiqZEFuhwB2S74Xi9TLPpx6tFwbRN9QIhAOfSf1ZoHlC6zAePW8FNER0Xqw1m0qt5fJXu+ucF1FvO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakRCRA9TVsSAnZWagAArPUP/iQ4k9NybyjVdYALEf/6\n+f9hP86oSqj59229GOPuAPKRSolrd9Y9UQCc687SEFVZrRmTzUxzuWM2xjmc\n7EDN/D1bghmZRhKt3cKB58v8q1jNXNxiWWJGcekffhA/iOHy8rQe0xGn6q5K\nbvn8yicER0B0ks3If0s17VgWBZtF3sgPg2+se69ZX0TuNWZ1Mc3TT48Z85zv\nEvbZeDZ8H9GJp7RqNvuEMJ6dGaSalK12M2yXAG1isxeV5Z1eG6WjdCHnSmlj\nWQm077csOwQGhifyDN67gKwRKiRGeL2a0hswhn+StsnKZXfTbsbSAHxZkeAl\neGK0tE0z6exexcJEVqG1WDisawx/am9kHj5sHN6rCS4ml17b9os4IeJRK6Dp\nmBSpQQbm5fh+Oi8Xg87xoPyEDi7ivKAzun50jCcRyLOtSuHtIvuSiMrA3x9I\nuVq3ruETvG+t/FNdNW1T+26xUqJaa0K7mHKcTR3GvFiPTDtWoXxWiFTKqUad\nZceDjOR5+pe4a5zPnyA9f5tGZkC1chOrZ3hUbOzg52Khbn5fBOyoA6QLglg1\n++sbfvXx45kdq1lpWjHSoabU5X8Jz6RZ8Cue8vHc8NiQ5Idd3ZENdCa9fE8C\nZDL0hq3vNYFYVqXW1RUOqzW/vsihq21vdAnoPt0DhrtVrhFpWvh8bEDIQZaP\n+ivV\r\n=uFYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/touch-target":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.cad489689.0_1619110160678_0.24145504602076318","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/checkbox","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d928692b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a14cd048a59e8c3cc9fcff343b857b9bf67593b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d928692b5.0.tgz","fileCount":43,"integrity":"sha512-jhthDojPne055/3lrHiGKYyhtMrqg/n4lP0brxPJd7S/7kXK8J2bash5AkoliKzRZdG3lSERBqeAXOwHYzjDug==","signatures":[{"sig":"MEUCIQCRv94ToMd8yDfQqz980QsLzs4AiFQoH1Qqs5PUsAs4VAIgLIh7d3sBW8w00U0bT9Aajag8eQqV3iTN/REUgtSAAO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUQCRA9TVsSAnZWagAAlFIP/iZ5AHjUbR8MpwlbHKfp\npC0eoMcNuUf6DlHABk9dPKZGGS91dXbhYbCntxuYcb1jkJGtz8bebvqUqqT0\nBHoHFizu/MzkWLhSIaz6dXg0jVPvIwCRAWHMAb5p51jJXdNdsII7yJQ6z6KG\nC+cdgSDUE07obSHYAAlEFgq+6Trz2cnZTEN4r5gtOiPdrVse7lVONydWBe7J\n+mmN2esTjP1QMb3rJt21V/kHEXUPTNzcmorcRGSanmGc8TlzRzg6kfh9N5tK\nWj4JddosPe5ELuL7SHz7hLwls6o0DJc7ZjJDICXL4hemlH/ZVT945/0gvrq1\nGQiMT0MOAx9UOZW5fwhdSKLYr785Z1kt4QB4kaYmJ87mYeOAUDilQLrMws+G\nOsbsHdjFVmwtAElpHCmiwxaqiwco1bbCWWSbFSenU94qFWuDi3UhRcIFkMQW\nLyLhmAr7nO6M8u6uWUWpmv+wbLWmfh1Z4a8QXImFoWNT5InFK1nAy3BbAYXr\nNOXfMkdYZUOFmvGBbkka6+6cp4FvtUiADd8LADzj1zY4pmMS2hIFKqD3Owz8\ndBWcN6iLfAfezPxh+Fva9fIgxcRFUTkoYLK/Zd//617zimwtxzcg8CuzH3c5\n+R5nhV1t6PZVuV5y6gMMiHtf8pCmeZrgEEe/jLdtDEuYGr4WsayRvBGnKXAZ\nFnEu\r\n=3p6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/touch-target":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d928692b5.0_1619199248258_0.48790355955150844","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/checkbox","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5620646f1b8e2843636258c269a043341d7299e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8f68de8f3.0.tgz","fileCount":43,"integrity":"sha512-qNskvSG5mg/SQDHaV05uvc4bUxgm7H9R4XvFoLVjf3qDC4NV3Da54eYt5ihGWJ+5siA41Lwdrb1tsHgHlrcpgQ==","signatures":[{"sig":"MEYCIQDt86vssZ+adHMPi6UGDTLJ9WUN4hmynhjw8yJ1aLWD6AIhAMU9LUwHhJ4DgwT8HbcOWxRJn5AjA9aTDKLq29mrFES6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw4mCRA9TVsSAnZWagAA/MwP/jbfq2MmuGbthrYJt6UL\nK+iqQLtmv408LtWaFL4jaEtVglOYEmswuHkWPubAeSq8BlyGwwKVkvQJE52n\nL9qyw54jWVNVmk1480A75PCSYSSlMxyzw/cY0O77LCKLd4AiD/c4pos/v32X\nhkbVac41sNMqTdg54JA9O8cU3rYK3ezq5s1xfGzqYVriuXToJWCmylNhoRGB\n3l9sID+TW26bdJYC84sai2dkuQmWWhbxJuz1Ynxaaa6n5vnCVjGOo/ezInKm\nxZgcYyYowEqxBYtZCNn/tM+1ul+ssOvsNEJumr2tmhtnSP6VFoASQvtT6JlM\nJD6fQmLu4RysNMOA2vjNNrc5i4xodjHkzuzTcEVbBRz6ZeXfKUKVQ3Mi4uJl\n6cZXgn3qgJzundrJYwVraNIEiVI61r2soF7gJSQ73LuGYxSUMF3MOXkUpzA6\nBcp7ocoZX1UjcBXB/EkXWQ6UAFC6RRhJyIADKQOovvhJSYJZ2DWJ5ehPLnnG\nmIkax9UppmhLh5zM2hZQ6A1Hpl+kgr6TMbOse7FHZsetZrSWWd9ZCjuUcpcK\nR6BGn2gKgmlRnLsglMT25QweIncM24Y0tPFAT3GaQrgNV9K+i3L0rrPTOlGC\n/197SX9v00wGyhuoeluqBgX3aGcpNRQukJz9/Q+FaBBUTBTqejtUBvp+VdMR\nC2vc\r\n=eTEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/touch-target":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8f68de8f3.0_1619201573940_0.9349673867797912","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/checkbox","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.05753cf77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa29eb74457094183b135ba7d0ed7935214038a4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.05753cf77.0.tgz","fileCount":43,"integrity":"sha512-3/X1xsCQ+H48v55wIV1dBuTbmw6Hr7C0WfG0X/39SzuoTmjbRXsZ/amjXUhdpxy/IkdFUqWhcLdVNw79yZHivg==","signatures":[{"sig":"MEUCIQC3X4lNCbPH1YkS0vaculejCjwKM5sZO08BzBPnO4FqOwIgFd4Ii3yUW8uv5a4SNp0uDrM7mzh99D354ONGDKgc0Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1t8CRA9TVsSAnZWagAAWrwP/A9qQ7uFJiIQ2vDYQxxt\nT4X+TRp3Hh1W2n4yOa8/XnlvIohwcWnJv7ZjLRGLp6QBtib8tO18/f52Q15I\nsT1F4xmk4jaMiFkZD+SI/Sm8y7vGSKxlZEQtHaOtByBUjcchDy/1As1GbVWN\ncCsC1GuV9N/DgIgEO4MxafdyrYPeAtETlvaYDAXPAI9h7MCOlKCAZlaTVWEA\nwlsYeMUmc/0AHjSZHeHDsGrcRk0uA0fLbDOMZUuwDmp6FbymitQcVf9GFDZ4\n+I4Oe0YZpw+vMhoXV1vgWg2q5SYwYQiT+WUZXhDggeS960SQjynvI3nNF4uX\nw4f6mxkKA/lsIcbUdG44pKk5hsrkFPSaEhIQSeD44GrrJgWkapF2HQb9YySe\n3+m0vduArZBElYMHHivQfnmgnYpaYBtNjggLnw3t7z387CP50f9Xev/751sC\nEDjWqwohssOIYEuC1IcKnt5uQVdkUdpbm0cgIXkV8B69ckDdHsGm0VKt3NbV\nxogkc8lBj4vpuN6Uir6mJZQP0164FPydWIQ/q3gioogWnUCWqvT8OkTgb5AL\naU1HBuXtzRvbVf8TsusQIFTzN2c/Ls5K5DdV+yD8A9T/qoaI73l2iXpl7fyh\ny5E6DYfyRt/zYyINYq22oYv/ellOl7Tbvvmy1b9zVjsGfuXFmBXnmi4c0hK/\nm3vH\r\n=xuMi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/touch-target":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.05753cf77.0_1619221372323_0.4162737891779824","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/checkbox","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990690e618c8a490a2448f04f99b67e5c4bd81a1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ef43e6d96.0.tgz","fileCount":43,"integrity":"sha512-LIZ02nAHMfx7/kYzJxedWkto3wwdLd+OPBHyTEsp86AY+aUjAjw2lKvbUKg1wxk5vTt+o9bfdAfAGVBCdAA8Pw==","signatures":[{"sig":"MEQCICDvW/WLSQL1g3Y2/TMKp7i2o+zOs1/4KUGfi0XjyL46AiBa/GNAIEsCq4LE9DNfGy3FZaOk+mbTk0DHI1vOWU+dNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1z2CRA9TVsSAnZWagAAQtYP/iLnyXAmWNkzMZqTsXBZ\n9QVpIhki2WaIJGohgYMbpH58pU5vaDDmidY3IyDQ3lfCwwasf4JT67acswkf\nPLuIHEYhIO88G0ga84XLGICjFLxWmf0OnveFTfU7pOf/AuXSGvkbakciQG9J\nkYSucEaxJgHRyjjgBvG1/5ESm2SAUAG2KuNiO9yOlDgNWsHKq0LBrOqrcFKH\n3PfAYtldtgd0yAJ08ww59KlUSXrcFm69p6RxkcsgNLIBtkiXwmlTLr2OUDO7\nD/+Q0nbzBL96w9SlA74ayh0t8k64XO9qCqZC3QgRByF2jgngohNHCTFGwb3q\ncdUoUPSGyXPKaY0A9xCkCGCMdVzyh0PlehnFGPFKv06l1ZbZYXRh++0rTMy8\nKi83W1CN+jMfjLy5Po2y0gYNN1xCv3nfiVuiYat9Ubn9i+li8qjUw5CpIaZ6\n9zOZPJBo/nG3/DjS8bgByB0SLdi65OB4D8YwFdG08dZ0ls47bpFWrXbTWIRR\nR+oLc7/5VQwbx9FwR4IIwYRyviuc3gvNPZRE6ey5OdBIVnoEa/Efbl1hdXVZ\nsW+Kp3NLN+Tf1ES0pPJ+iwL8Fg/if+birg3cO0tS0yjGdx7YYtpLvwp6ZKt+\n2VN5Xk+0rVs7QaHIFZRGAIZumV2tuRghDLQULOmL+nxVqtQTXw5CxTymBYYd\nR8tq\r\n=2Ovk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/touch-target":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ef43e6d96.0_1619221750352_0.8174008832887547","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/checkbox","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbac4eb69856a624fb0049739c1caff9f5062294","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.197f64fa2.0.tgz","fileCount":43,"integrity":"sha512-+0IVoIdirKF54DSmsy/3ClwEX0YDMqJRLXhbVEPxk/rDB1ClydQkgnm0Q8lKjlot6S8QLXFhaXvi61swK9mKtw==","signatures":[{"sig":"MEQCIBFIO/Z1H82KOD+1uSRcpr4AtnHY+6iaHfk0ecydvscZAiBV6OLoRJRAipgdox1IMaRlLYREGdvRQCnLWVoN/aeisQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPCCRA9TVsSAnZWagAAb5oP/1IMNUtTHQaarvKKlTOb\n+7Bi5Svrda/j6LO7cBciixjHZpUul0rojt7QX3sE0fs55ffWl51+l056jAda\n2rItldqF3aMgj5ab+QqdUwBd1SCdFGHKMbuLyuHxz3wNBWrGU+fOlVbqaihz\n8HHx4PRfTOCuGXp19vobj9rToIdTQvcy7oSLmsmMEdwLUnR+6yn2TLEJu/dk\nGwgI01ZlfZySh+0zmKe5R+f+/A091rMnNZp1ET/tC+FHTd2ytRGHQQsIEFmP\nWm4ysZ3syy23fSbCa3inZNyIrkqmjpnCT115hAfkjo/QGNCHyed9dMzJlIGe\nuNPZ0sTbXTBCe/pBSZ1aidXge3yRNDPWQyG/BKXuv2Db3jLUZKmnR1xxzPv/\njgHjmjVmfOH1hGvEIIuDgcznbM0Aczqcv1HpJuZ9V7hHUjfrqkTriLyq8M1m\n8JwGD4JLAuUhDqfW7DcgX9DmaFOYw1CwXN/Fd/IzBhJGtuRRobl9KzVtiiIo\nknGsizeRgheJ7Y7x84KTd0y+pDBA/AnmgJ1aFe2cai0OXKaNSnqUZwR7XPSC\nznaz6r/B2WbBCfj/2ElcMAeu7ZpF4tETH24LcIN0+NWJBTWKkPQ4oj9ouUyI\nJz+9h5Eqpt7FIZWJwyKF8co46Yj9sBYuuwSfqmz0Z/nQOSYoGZDeE68D+Rw3\nAUUE\r\n=bFin\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/touch-target":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.197f64fa2.0_1619456962348_0.08624471101449571","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/checkbox","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27f884e66e1afa3b0285ce653be0738e964f9a1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":43,"integrity":"sha512-6+zsfpwWWO7KU0JKrPLjj0np9jMZa4DPfx5dYN/OkaRs8gknsqiU3EYZ9X1HbFTIQ/Z1zEdWYMAhQPHrpCTobw==","signatures":[{"sig":"MEYCIQCIgiIIr7wTqnAFl+W3ylCwU8gAdzWFfPJNglWdMBnw0wIhAIr7INsOzSFW1pQ4PS4Tajo7fquskGf9PYhlfwjnW/74","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2anCRA9TVsSAnZWagAAN1sP/3VplugoLvqErLbXLxNu\nJ9bzhw+8fuJWQhz6pi2ceXotAEtse8ItnWRnKetRtR41frnLQubqa5zlNV4p\nf9giNPfzfrDa3/Ti6dG0I4IMEdntOq5FLArFU6VoHDLcGtd2lqpBSRIrFuX0\n5My8LD/N5J92DrqMga62MmjevBK0+lCdLt1gmMJyzASgPgK0Gi6zSSc35mPj\nKFFD4dUq4q350VZ7GerYpdBLR9xWu6mWOx4s4HPQCgmseOlvdaBr0en8HNRT\nEOAsjGXOy/xrMpU78Sd5uiSnGp4BLqv5GTONzn9p5YD/cP5jYSfI0jTFmP6T\nyTRKcHp+rhzMnX64LG/fIoyqMTN+dmngTlc9+22jm1XZtH42Wg8+GCPG9DMT\n/8Mzl1BM3N1TAwuco52Ad0myy+vT3qdnRpNs3KDKykg3CG6APl6arrfuqV7u\nr7nYteF1LWAmk3419qi8V7NYgEmGsKWWf28ByZHZwW0Py5124fgbX6KHoOWL\n0wjyNPDHHr9hgC+6s6j2/+SIEX8zBFsi/iOvjhP0/tQjbIPmqyuM3CCHMPww\nVB9hArNuVKc+R2Y4pM44GLTBDDu6n98KB4uW3IDlkwtJ71O9cIo5eRb31ML9\n/mWFm85uq+mrgMwnQAprEwkxSfBRZOTYZqpLjZGsqCtpUXus6YLXGivgHmzZ\nS7ME\r\n=H6gz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/touch-target":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.55ad2d7d8.0_1619486375143_0.5804666149171489","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/checkbox","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4488ddb9701cebce3b229977483cc5ada3361bd1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ec4ac5234.0.tgz","fileCount":43,"integrity":"sha512-sUTL6SnzvLb6PkLP9bCeDaOBylexpysjHY7w90PpOoVtVN5qNSnQ/fq+kY5HmsiqjZL+KFMHHnNCF/4SjIEcBA==","signatures":[{"sig":"MEUCICo0y6GaEpw8DwH90tcG7Lzgza06sQaRZ6nA8d53exZUAiEAns077hptaI3jkVVrmiN1r65w+NIZua8/asVNRPect9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QgCRA9TVsSAnZWagAAidkP/A+8H//vhjiXw+RT8sVp\nyQE7+8dpfV8t4boKzahL+S5Bz//AD+yKCgu1I/1bUJtcHqbAeBjbCzhzeVQr\nEJhqTYbY1cERQAEaUkwCiuQ1qyFRN5geAQC6Cg+G+7VhMIUJ2VTB0o1uh3I3\nJxZyub+/3YARmKJnp2hLNY5zkLIazgsjLhvXqh3Kb2ZgFGvcRjbNiICTu/Yb\nEp4OZ9U46N8qcZj9VpndgURnRpSQeEMrMjOPcv2D7VaY+C0TPJrApeWlNoWg\nKlymkPevlS07i5Cqxe+fEaquc2NqYplp0WLKIlUwlsqHzL3jgJJWEp/KPhWJ\ns5jSN1XePTofx972Wf+kA4Ivdosmaf46Z7qFPsiAs9nkl7gBnYcSRSCfZrly\nF7OgF6Wy9K9eX0E4jHwA7QrwTBtjTBB35SVOjQcWert7G9dhq8xoSU+cB1LP\nZcmC8O/EOk/F5zhNamlN+y1DwWYvbrbUNRetjPJp6uV6APlaNkqbyvOX9dg9\nuwGPhdndyN3sCdUn0vh3NE/u2CV1IExnpegBD8seJfvEltPPVA3GIVaDQ/e8\nNYYjsy+Vjxp7NAerliJ2fNA/llpD1PEIS8XsU+G7KsWio3QHUNzR2fgi+Xqf\nz+EnK7ALxs0y74MHnofMAnxosynZAOCaSwNaWnk55aDYwoZdfzM+WpBlNHon\nEfMj\r\n=XcOy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/touch-target":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ec4ac5234.0_1619510300591_0.48734985478910975","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/checkbox","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7680ade5ef62225cf2a5003b7ce570f789f3c15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.b0579acdb.0.tgz","fileCount":43,"integrity":"sha512-jbUfF6tKbWIZ3GQYi2u38HE+QJvW2veKhf6sK93bWgqBweRgG9CjimjMancW+/AVJN4RiZah9hUytPaDGf4Ywg==","signatures":[{"sig":"MEYCIQCubTctQNJubdYR5Y8AsJHy+LCiuaURX6nhR+jLubja4AIhAIIkJwF/8t2m1Hje/7/M2f5FiPDaasU4JCsZxLypoywX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8zzCRA9TVsSAnZWagAAPzsP/1b6feI18NQfsZfKIaF2\nbaujscGtD4V7/zqmkeQyOfSkQ8qbCOrY10YZlvhvrVpmm9qv7vsxrsUcV2LM\n3n5qpaz4G0/lgSkDY1UpY8oL87pTFVHHi+zsU0M7Xy9Ig6FFn3DqLkczR8Tk\n/ZH2nCAKVLglmlTmZ6jBO2zSjEikKIG8hGXBWa2XQMga0w5dedDr8G3+AmeQ\nFGgmcy2G4M1hgFwYKZhcBVcgQS91HucueAyGFo6xx1JJtUodiyL8oKc3Lxck\nm2o2417OGyVqNVTot5b+Cfvnc/yJ0w6kxRx9O8NED3qmg6jnLX4OmGcB5QII\nFKtGjisVX4kY9RjTez0ilSfTFni+uZnVXRZhROiezqesnOy/PNc451WRc4Ei\nziXurcshE/ChyAqzJCB31r7SsYONgXRJWQd+HPlZAf6tyZ31ZL55nQ9m7GTI\n3ilYsB801PM4A8wR5F1uqyD1s4q/9w4bb4vsN/pxPzCSWkMfE2eSgpYSis9/\nIbKksXhto6JCqoKj72XY0fyDEFN92+upceFsDgKZ/X2KRHsVrTeFNyBOMhmk\nHVykkwho7EcRikCGp1xM6T7BOT1ONu14MPUwcoWls/PGTcEO4Z6bOzd9EMwa\ndQXMqCSReRVO6mIzeU8q/weVCDjXU8Ci76ccnW4wjZ/ngJvkKCL0CoQqeVjU\nR/KH\r\n=lhMC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/touch-target":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.b0579acdb.0_1619512562850_0.5097739908156307","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/checkbox","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baf4ec213bc0edf4187cfbe78e52442728259264","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":43,"integrity":"sha512-uhbg1xBcOEsdvi1OnoOeNEjPTfnEftCwtk2lq9DsmKfs4tStHTTapwhrlYB0NWM+ECjHOu6kIxm3h477H5akog==","signatures":[{"sig":"MEQCIHTq4wALbVbpuuv0GL9Nhe5LeTJpWY3JSBP7GNbZ4GF6AiBPBMWh6h7JGZ/DtRVy+yPWPLqEE2Y7yBVKA15U8goFrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHq2CRA9TVsSAnZWagAAYdAQAJCcYAKmPdOdcL80upxp\nu49lRlUMveetIha/lE2S+HCyAbZFHq97ZpY2RdDXprUYKq5zFe5HFVyhmh/+\ncBhw+5cDX6AmCQOpR8o29W3r/Tz+PFsO22UtQFL0zNIC2+irV/EPCD8bXGkc\nISJH33lRvtybnAGTV/ANZfIjgkGY9UKQTa/hUPQm2q+D8xbXJN5zw+ZVp/FX\nIvkc9tNd421jxyRfJ/HqeM/pjjeeULii6f2TSv5HNFNviDqR13KEE2WBgqYv\nBMGWZ0DdfaYbF+U1gLtw4W62ND0cVjd/IJHgcjQIvhNIqvlIdCihhvB5ptLS\n23CE++VVTfqJcWSYct7mVEB44glownnTIe5rNv0ek4SaUlLe0/2yJ9e/XwhM\nPzx8VYbYS+u0YbdnMezWeXY+UK9LqMAPZRVBScUC08lRDYeWuyv+JTHvkw6D\nviJ1EKLiRdlZ5+j/lgZBF8BdoFLWw3wAustSIjOPjq4kwg1b6yKw2S6xABN2\nyomUwpTbRyhqsk3/QdHOdzEZwIQd/WJW7HX+/HGY7qGZe9SSI1LzHk3Tcnpf\nrXz6F4+8VZ07MxyF94G5+Pzb44gTQ0AY3GoO8y6drMTK0bbE242ti998dH1k\nlKIBiI/MGeD1ephdZJLu/fxgcMUXft/RZLCjxHdFZpnyV3t+TlK9JSkHX331\nj5Yr\r\n=HOmF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/touch-target":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.81e2d4ff3.0_1619557046170_0.8370129716049848","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/checkbox","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f57d010c9176a68661a5b3e6acc2bd70924388ad","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.c8edee52c.0.tgz","fileCount":43,"integrity":"sha512-9gC/qW7oxGRVboyVxJgsms2GUWY9WJ9nkjlhDOqe3gtyc6K35sMqp1JLft/FzodvJqWPFWW77SHKnaGSzX0q5A==","signatures":[{"sig":"MEQCIBiaW+kvpLO5fJnBfbZOMmfdvnRPfDbFlrI0GKzY0Id1AiBXdD4SGMYfmo51uAbyk7QjxZQOLK+LKYKDFfBePakR3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYMCRA9TVsSAnZWagAANqcP/jVRxFZLVtcKGg9z6Nnb\nQy/NrakXOzuxflSh7WQjWq/LH0xaiNqwX0/AmvK75QneSB0tMpRYH+BGx5Ku\nHbtHmctKghpfIwOndVPFuDcX0x6O+ZSNaUdtfAEfTA0ubPIIKc9IzdR/rwoW\noldogpjrplAq2r7gTJjZbqGyVTy/Go72Xwf7hmrWVZ1W0bUeQ+3ODBLiRDUA\n5yr040lHCdz3yeXon48RuR9RDNHvsHgIqEe5/MsHGgKDHkMLz8MldxtYHm6W\nFvjQXXXFPaKfuOfLjAK1Ym7XozOpzx9ke7VGLa2bWXe70DcmzF976nGEi1q9\nu0v4B4/BiyHBzSWYm78k6AUcfhDXyoSbVfMIVSNxdl2xsKJ4yFOx7PWRgB2M\nUBDurq3xyS2RTNZKDkzpTsJx4YxOt6R4S3SIm8QyQLr974SOH750GySoRHYN\nHBP0bxFS/tIAWyOf01qRwjUCOWDPGNrjRxdZbejF09IFROcw58AWKyPL4qyJ\nimsRGOD5oanVlzhR6T6E5s6QgNjmK9ed5ASHo8Cv8O/pOupyupru27W5h/Z0\nnZrq6FJ+RB98M2dl6ptlOg/E5kKWbnfTTa8K138rko6vWYeOMPHFRRe3P+5e\nvQl3TsFMOqYC2F+nY/CoR5sUa12oEMkBWEnk4jNdj9Cj/vbmaa1CPLYsduM8\nr3u4\r\n=Sz2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/touch-target":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.c8edee52c.0_1619559947694_0.9242094057520802","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/checkbox","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8c7e0c3e421b51362a04b74a7aaeba0151f0ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f5b6110d6.0.tgz","fileCount":43,"integrity":"sha512-YDxgIxc0A52EF0R010mH/Fg5Q2JcqWgXQOknTHJ2MHXLmkci6z4ywZEgzZpijUOL1kZLaNFapgTJOiUUnwqmdQ==","signatures":[{"sig":"MEUCIQCpr0waKUyDQL4P5vwKpfPOjL4rogdBKN2U01PBhDq1VgIgPGc7xWhtviHu8hfR9qF+wG82q3pmNQVP34kDzUlRpyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIsaCRA9TVsSAnZWagAAtzEP+wVVyihN+CRZcNU9s0EU\nwrre8b8U4wa16K1mi/b7ZytSjTbIu898Cz1tz5JwHNHqtsL44g0x46anZ9ts\nLvmiQjglB40W2VFKYuCjGU6qHe8KEorIbAXKFOJ7a5c2OMu9KXGDRgD3y5Sw\n+ccL6EWL/kCEF7OmcyLbAI5Ue1gKzomMsp7wTS1ZvIwtByT9uJBDLRg1bQoo\nCryrFDTLUmXIhG3M+cyrDcIjVZD6MYTaLmU7fuh4Q+quFx4Qtk2YQHdlj/WL\nIBJY/IRCerQDe3rl7xqywnxaLPx9HpkOuUa/lq+ZxaP8cHiEVBmUQ5G/+yrb\nIkZcVxgTOb9ZBbHkRqbGKKH/VZUDZHE+M13Xoo5CHZvI2C3hFEFSHENKyAMz\ntL+H+Fqvuc88z/gU+0QZxq8k1RgZoc+w3f/1rnA8JBKJ55BzzQ3Z5I82VshI\nd2xz7WGInGo/0QiQWMdgoN25Ok2cbC/X8MM40WnQUOAoVbMtrmlu1KFAng75\npai3iMndHR+FbebHrdH4414+R5lU8r6tOtP1dOmc/0PAgbk5kY/0KHE/HGVU\n/TnXUR+E4uH+TcRzoyYEiX++K9ywGDZ6SstwqvMh2iO4VEmRFc5wkUL1bYT3\n2IWVF/sWV7i/Xfraf2E3F3nolEUUWlu7Sd4LtBmT4vVg/uq/XbFoTpUGvomq\np3pC\r\n=fdCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/touch-target":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f5b6110d6.0_1619561242115_0.7055496460729025","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/checkbox","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aed3f73c3ed89131c1c3a76dea4df24b383fcc0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.cee9b9e22.0.tgz","fileCount":43,"integrity":"sha512-5A3b6P/Rni9gM8wmPMqcYFHro1z8t7HQofPSPkgPGL9FN2WxdrPkVm0lGgfF4mofmDgGNXQWm3aoSRvPeva8OQ==","signatures":[{"sig":"MEUCIQCeS1mjyM0ItpAxcxswi6YvUmT2MtcPi7NT/eW47VKV+AIgPIxSsKkpfqDfh8f+dBg2lNDz4LEyIam55o4cAMWSwT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKh6CRA9TVsSAnZWagAAWz4P/2w8ZQclLl8x4w1B9Xn/\nuVABMmjqrZsgxG0MaqmpzeXb47m1D2VwpdQ6fGCVD0rrOPLf4tR7lAYx0x9t\n8+couQ85B8H4Jh+rrvnYRZNj0laksYGeOHmXaBVhCzEzV6WhuPL6nZs76lRi\nlfqEK64loZdGyI94ezv+FbZFprV1NhqfeNyJjpNU+z+zyfGv4PcwJJ/DT6Zk\n4AkLpR2iE2CipLb5Aw37Qzu/c/wCQH/x0ZgAKRaiPcLk7kfKLMx4SW7Gy/lF\nlEr5C8ytfkDnu105fngH9XcqC0wtjjD+PSorHwTIbF6mgWWOERecvgYrX2VV\njSwfMmeonVgqrjiiPGdLutoNwdiM5wCX1cxbFNNRTt04ta2/u/gTSp77SJs5\nsl/gfgMN/Cu49prLdvDO+wQHM6G7zCDFG28bZqBiN9exkiKJsbL7B9xkbKuG\nwv8oGMLXYodFjfsxs8oryXvc1DqUNL6dSIiPgHqiz+rtQAU/U3aiJPwNt/ea\n8PV2YP4eMrzuTcIuBSnPLAnyzAZS+MpDqrLRJM5JduZ4rlnEb5uJbI7BjDfo\nTmEftMXVvNWid7UXIMXsHW5Lzrc9mNKUnIRAO5iUkmiQlT5SDbogI9cAIRCh\ngl/KhCAXNas2gNCSa+5SVPMgHNmnwJEEfaueXLtosZukFczkzDB8VLf14dTA\nluGu\r\n=GbE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/touch-target":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.cee9b9e22.0_1619568761441_0.13155317185420756","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/checkbox","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3896496e717927fc86de81027882456b904f8105","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.96e83fca7.0.tgz","fileCount":43,"integrity":"sha512-4fh29Y+vzP5Cb6AAgEMu4t95qQn64vJCH5lvrSNjCspXnUQBFJ0N3Ko0EKIQABfhBQO4Ze9Xp+Ep5Cvobih7JQ==","signatures":[{"sig":"MEUCIQDLcI6wo7M7KrNvROY1qoIAMx7orVy7/pEMIOCdFOueDQIgVWxH84OlsLa58XqVHEf594dtk6H1OsE4ZruqACyFq50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzKCRA9TVsSAnZWagAAIzAP+gNjRpV+2OmeGsWy2XbK\nvIY6DNGRrUSDX10hl2xhMa/tIGLYBBUVjRnSrGSY4hacMyaDZFCk+CM8s6Kj\ndO88FiHb4p2Oq+JB8oC4qNsAtrgBCPxWJF399Wyem6sZvyx9qfkWercaQgnZ\nWYNgXeuMcfS6pNB9aivisH4jF6mlaVgJ35UEl4uiygOaTInhkCSlg+UC+hce\nqz+C4h/AkyQa/8wLbAMZ8nEv0AK4oIUY+/Z/RMlOoSdYwLdQ58BjNy1JqMNV\nqfMa9ACEWXh7dglOKsp+UPugSRmc4+ldUtXoqbjpUOGtbt/FcgOXUgqHTX+v\nNPlre8xpftIpifoBEXmRtdan1DHXqWk3gs6mWo2ByUjUE/KOVCvCQtniq9cJ\nyo07eZM9BwCklhQVyPdDKSEveRHjR53FCu2luRZXNkjuEgu8VGVBumQP4Lfa\nzRxB6ttsFA/p7sS4g1dLvpxP1GhRvvtp2dP3/v5knObWrjqFeQ4LnGpAzGfV\nyAAg5b23sjf93tke7F04DwBFHPqilN3LRP1crorZ9n+26VfIvrn2rWLXaWnS\nuJE0KkuDk9sePrdQ3+PEG3u+5OkSwIa8L5MysUt7AmU28Ky6yvSCgeVSdfNT\njN4yOCiTqE2eQe/xSIxG6BDfKfXF12MyvPn1CEzYb9/qMBQONLzObJwYP7r2\n1V6/\r\n=XEkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/touch-target":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.96e83fca7.0_1619578057817_0.00929438463488852","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/checkbox","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e918096860661c4b4d2684b442cd9fcf91a4573","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4c497bd19.0.tgz","fileCount":43,"integrity":"sha512-CT8beVAO/GLh8DpyZhGdfU3pc//2sVTQP2nEPjux76uKGUhZ3qdOzIk75zOYw6QNiruZCtkQ7Q0kclb/iAKfvA==","signatures":[{"sig":"MEUCIFvxuhFYFZ7+x6kwMzNsv9XKEaCsw6p94eiVDPegIAr7AiEA3TAP1aPvT9IO1UmxZFTwR3oR5vftxfXUPkRjpt61BjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEOCRA9TVsSAnZWagAA5kAP/1UcJcZ/5ugeXwPngtcp\nkZLv4j7hCEZ4M11gkXd3tOuNiGLrP3D9tExPA5drhrD60XdA7RnvGMKGjF3u\nJCyzf7IYU24eFNvRiwr6WqbTk2bTHQFn+cpFbTXeAlKY1AA9YrzOL9xK+H9Q\n6Pmq7OQ/oqL9dFLbKzm09Z5ERYUVnx45HYrlp0cDISA4KUkvUKpRjuMZUnfb\nBstItOiT/PSz7qkO4ImYBgQ5ULRkTLPV2pxcW9LwCuhZC9mCAslXsY2QmY5q\nHJWvnvaPdAzJl3NH5mWY+9ses1NUe9uul5YlNPGs9bNshsThrBPO0KV6D657\nAQDX/6K8CtlybNPinS3BNBhwUTuE9hPt/sltlpsg2JhT/qETTZ69heSZRrDe\nms1F5NJ+EGFypAc3t0TtcMeCZGv143A/CvHk5LctlDEkhNq7BKVnu4DusUBK\nGDhf9bW0sEYHYfmtze5Sz+xZW00XxwWkISrGETwon/m0rnlCbXA6MqvvCr5d\nIgPKY1xK/jvwCigObNvr74dyg/38gR9ovW61t5eEhfXgwePg2YYKBt9+5wL5\nMLRoyNviVI/yA0qmpum89KQjrI9Br90rZG3DIZe/2cKBh/YlLCzKlOiGyNgE\nOD39t9i7RC57VsiAQpK05ql/0LYZ6/r+FDftLQPCCvKbkeJK2lhoeu5qCksi\nMDkT\r\n=eNyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/touch-target":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4c497bd19.0_1619632397644_0.7896975287730741","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/checkbox","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.105b15b96.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc41bcd0ce2750e619b4a9032ac2401424e96330","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.105b15b96.0.tgz","fileCount":43,"integrity":"sha512-uLVUbGp5/AZZh14L6K/MIdGVqI2wnAQOh/GGO8ZDk8LKuLWoQLWNPPA3nT+oTLkKoKE4paQQcMc6Lki/g1Tmfg==","signatures":[{"sig":"MEYCIQDpUUk3MCw/UAxiyjKAbGAW0p0k5SOZWFwht+MukPGsCgIhAOb61dlhUknwtHDqHW1EVl5df8jR9WpYq/I8cjSJtbNh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidc+CRA9TVsSAnZWagAASagP/Rk0ftCPuhQHYbj9Z7mC\nHb+liAuhQGE4NCezzj0vvmxhR/FiBRJm8lv0mqGl1bym4XgOjozXYkEMegAu\nml6mnkJYmAQKBFgPfxZPA+7virqqBNQdXoMJn+TzRlys87o20ht2DScwPK3h\n2eONJ5H3hdBrPFKv38Dvdrg9KwG+8fDVmmwB4HU/tf5MrjiMlmDHL/xjbLlP\nXkxxuagwlkeJJZjRs2va1pipe+0W2ZyYYmh6uDQll3XVfs8DIRN01MuqRMQC\nXbW3atzzEnRAiXR8ywg8/jGLNiFgUZKl+E+3NuJnth5ysJ0VNTfPQkk5e0Q5\npE46FE8xmsSRV2BR9GEhJiFy1DA9A0PDjKnHW57vwxH+ZFgw6HW+GP0C200R\n/GL/Yb6NdmSlXh6TBD6/Sya4DA7T+WoJtIg2iIepHksml9iSIRxbpu3w7pFp\nUNjTTN6330E5DhQysBQLllGPM96aNTjdMh/yY+duHpCEvd3DSbm5OAfK4OZ1\nBIteQSWqA57JQqrLnDYgEtcgmZbT4DT3Ubk8SPsU1e8LxY69jzL6wWG3PUne\n63reUiM9BuCPfOjYyYXaHHWs+g3/RBMU1lIRYOQI3SFQpB/Q0CBJ110+UeWK\n6uRHmnchw3VSZEbbywO4JTqdG7WnRG3J9dGf1f6MgfrjezUtTUrtp7u9z+Pa\nAxDC\r\n=MJGu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/touch-target":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.105b15b96.0_1619646270227_0.2417399507656086","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/checkbox","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f98d76d95f2aaa28f0d7bacbcc81d6e51ffd1fb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.6e20259e3.0.tgz","fileCount":43,"integrity":"sha512-1F4ZWX/gWflwbpMseXxQTHFpY0UIzypCY4tZQ4uhEXgPC8EMIB+GiDTOYzaD6RtUus7KcpORJF0Fe/2V7n76Qg==","signatures":[{"sig":"MEQCICb4CH//guu0N2/oGmzugfmHtQES1ycnrwxCIjjRKA+YAiBNTP3NXWyxQfTKrCFPhi9tg1nMyOg4qLI/YuxdSuQ5Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":691456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhMCRA9TVsSAnZWagAAejYP+wQAuKPdkfKehGW5Tewe\naD17N/MHGGuml831rp5W5HHmL5gGREwAo8EB8h7Vg69NXA48MPco2BP5qYin\ncRBk7l26ENtMM9Ec2ZFr9kdzuMLo63/Ic8XxUpBycz3KIkCF1hzWpDyEaVZ6\nH9N5vLY8KjOxWkilD6ncH6v85gNbfPTSWfOwSVsZmEAnS9y75ZVuGIazct48\nLWucmqVbHSXtEpLjkTNQxduhMWryp8Np8r0C28/ZxYgJJw5rR4iAOjTFpy/f\ncU4zest2WXMK4f09+3O3FvOWXRTCBr8QMupEyHf4THQfqdLEZfQRECj80IDV\nH98wXC1LamXlr0LbMyLD9zZnf66c1PGfyAYxs2bwsqq+GMSvOhLVapK6Lfqk\n/ogsKDjcMmOAAy4iglkOPooc/aKwiME6lDRIi5l3Zf3eyNcxmBWiftF15YVq\nYqWDOyTRvouJdsfZLWU2U+WE0vPrH6V8wKlh1xCozOU0523N7WFjNfSSFaCx\nv3YOSM6AJhTXkrzgN1r9Ufxbs9dakusbUE/DoYMPPQLurrvoe04YP83SBgq7\nKElxutf9f+DMaaTB1dtMz5VtizAy7le7RWPl8iGuNo0DW2/fLEiNqbdwMsIJ\nF5XzaYXRtKUZUfuaMmuoi2Sl9SQjmXwFVUMbYHev2XP9DHSr8LZ7DZyah/Rn\nhfKc\r\n=GAHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/touch-target":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.6e20259e3.0_1619646540126_0.9714872565601984","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/checkbox","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39f423f738a73f425c111c30c5283736d85075ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.0f79a5d74.0.tgz","fileCount":43,"integrity":"sha512-GVf4HIfNOtABrZwbv107wDg4gYNw04gOeag2wGRVG6eJTAc/se8jbnLQnyb5+zgzgoEOM8AQUNf5vMDmNKunIQ==","signatures":[{"sig":"MEQCIGdv4EZLK/6m7E8msJX+r+/Tn/MVI8vjqpPUpgLX4UdVAiAImX7opr5WaRuocZ9pKImascrFm6rOY/ACjVCyqSgE3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTmCRA9TVsSAnZWagAAPBUP/2G/r7q/mhGGjcjhr4hX\nR7AflaBwyFFIYwbeO3KUEOs24JnqE54XYBsas1U36/XVQqPfmTAU6Le226By\n8WsZmwf2cFsZgus7faEdGXAN88o4836spDokVZkjqT8cMsq8tUJclO5i+wFr\nQ0Jejh46/xDpG/4mvsNCToyG1g8kkr0eF93IRJLE4RKfYCkDL/SkMeBqGdlz\n5xkAiB9E+M7RBtPCGIFqyjdG1pKP0H7Ma0FfXBV0I3vIoi1FiSmOxv53uDzM\nfDqcvcvRJJmnwqCtlZQlMmMEzvngdpjE2abtOOLycimuXn3yWL7uX+pfOdJ6\n6DjIuQTmKyUNOUAL3qOR4l5j2+OuzUBrjwN5+mE3JIw3itmKdoAl/i3m3wDp\nDE+TnH0J4fnEU9SsCZKtlWaD1Plh9hsg79AZ7uA5ISlZq43VWB8po65D489B\nquuUg3HiAWpE1WXkSkPkKR0/L9CXZln4rSi4yG+4ndLAJsIMujV1GKZATRMH\nhqP5UKJYDxtWfhSqJILsSqNMyNzkfzXzTzcXByb2yAttfjxZHH20/3lPBYXB\n/NS6EJ5XCUThXxqza90pJ/J1Jk0et3/RxD5MFqWlHTL7M1pP1VaTQhyTRVJu\ndsrzuOEyCcmoiY5mh+v0W7hjGXDXHTUawk0dNnhQ7Pn/ggcJ8sn3YR1yYjIr\ne9tq\r\n=xvsq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/touch-target":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.0f79a5d74.0_1619649765976_0.25222503143682395","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/checkbox","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e654b26175f5217c6f12ce96e2edc6cb67111b86","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.84f3db9ed.0.tgz","fileCount":43,"integrity":"sha512-BCf/tXzjeGD70/vxn4b+2J0EOf99Ajw/1PVfU7FLoJbKaVdM1gCzuoMPySZak5xn80dZGxgE+HAcAz60u9NNIA==","signatures":[{"sig":"MEUCIHxLQcuzOfSTEbbm+JqXVborK1rREfd4O83NcIx6fQ9pAiEAtKGJLRXHCqHFk6tx11Ze+BpywntHhrIIcGD1dje/Hk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisACCRA9TVsSAnZWagAACn0QAIexw1SOMLNGuTzUcbeV\nBQYBKA8nHwF1p8QBM/jMVumKhw6h3dxVoCzEmAxTMzkB2KmbM7FIUN+T8Gp6\nr1aoYzhA6mLHAVwRD0Rz2BxIePMX56d35hws9vyfheI0dz+Gp6TC2L9zNLJa\nbb14HciAoGseVvm72tYKWvHl5Wp+azdecBQHi9C+HRUSYmhuyeFGBYO6KXwV\n4ukURHBYIWYb096Zt7LmnsbGHhJh7D5NyCbruZI0spMOfm5r0A9KwAuXFg4k\nq5v0u8TOjV+NRJUsuWGRU41mKTUfEZ6bjrpZM7BTWZLGJNZqnlCdI/v7lPBb\n/7vWsSeXqITAEoX7P/Ki7UKzFPY3Ril18AhiOYzJtwzJUhhRcatM+5YVXFRn\nf1ruLiIGIADMg8XEjM19FcHv5tGQA8KgffJjXPeNKrIk21kb/FbwtstGJaOI\nbknLavQlgUKXSUd9V68Jlh49YCDZM/k/TAMgcrTqQ8yod4n8u4SWcz+8e2wQ\nDXUizR02MrDEZFF/1WadKwqlft+WD0wFOGik3IvotsP+iZuv5n4LExGIjP9H\nJx7mcbX84Km7v3E4/xZsUMG7pnQq5ST6UIO1ynLM/1TNeIoegwXdh2csnyB6\n3QMLsUeGSWWzUM5W1yAFjwr/3pgs7ocyTB8jHOti4NN3TfrDO3KH/aHDLbCJ\nvqYY\r\n=YAj/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/touch-target":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.84f3db9ed.0_1619705857799_0.8914525883883646","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/checkbox","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7b87ca83412f608f4236a02291935c791d33fe2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8fc29273c.0.tgz","fileCount":43,"integrity":"sha512-3JLKqzL5GvOyTma/oC+E+DmrgWIXiNt8aHEizLxS0JAGtaXnwSEJDClQxD3vzC8sT25iKL808HOgfZwAQgTbKA==","signatures":[{"sig":"MEUCICscDk0vcvmpClrNuqnuc0bs/9zfu23CjQhzdKoQ8F26AiEAv3dCvtpz8MaAoN+zMFQQokx+iTVDSEmsXcT+o0PUnzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPHCRA9TVsSAnZWagAAUTAP/2DYrIB6EahT+DBR3VMH\na5fX1sEl23BgV458kx7hbGliMTzz4eKSZKTefDYOhkYUHcs9pKXt13ojzhJG\nj6v+Xwj9/hfTWCPP5hoEByaZ9i8anhGmy4V272iGSD2R45iTXfeocfAY2owd\nFF9nE9qKKizeDxloq0nR8Hcn/kbjFu64f362cOv+s2jgdiM7+udgI6sgHzVp\niE1QlOo6398f6bCTzbYtiKJLDWq91T4Tg7s8XuFRgWKkdwJgcyVearfR0HOd\n/3XxYKs0ZYGqvQC4C034NcVksOL8ciZZLVleV6SRa8GO44mV2YP2D3DnBvql\nxq2jD31QTuqQMxbekbHvNOW1RofQF39sZgIhisIFSxOlYC4lT4lds1/ZyBso\nNqPA0SYrvnEq62G1MKDQPtXBWbvLLUrYGskpy/Chdm4salGamy6T9gfl02yU\nE7nMQlIxFQtJTadmxzpIxpsWFIBWmNhw5YNHTBCjLAVMH4UZ/PhxsFy3rG5O\nqZiG43TpbCjboi7A7TtVppV0yjMfnj3guN9SQ4GyYxu4Q0orvOI0LZ7x+Jg5\nmBcVNk1byHmByu9fePcXBet4cSRWzeN2Mj+I19ZSxo2TGB6QuGLs+8cIhwP4\n9X8c5Y5GrgIyTxcJPJ6qrrIKVmiU99HXfJaDMQgmq40OkehxkVij8WT14q00\nxd/b\r\n=w1/x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/touch-target":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8fc29273c.0_1619731398725_0.7002798602435929","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/checkbox","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9da71fc4d1962f0ecd1ee5a8dab323d59006bd7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.c50d20bab.0.tgz","fileCount":43,"integrity":"sha512-LKXIrkoIjd8JjuyWkj1lxxRInAFTh8cP7RQqMhI/BvqHUEKNc/TR3Bh0bK//mI743mQTcXW+YZZBFQ8SukAgUQ==","signatures":[{"sig":"MEYCIQDl68bCJzOEYJy7K3Uvjjz9HGoUextQ4V1WYbJ5ZoTnzAIhANFDSFHg6IqpHheVYhj+MXdcLy9ThvMOyI7jcdaQoLr7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrbCRA9TVsSAnZWagAAs/oQAJhBscsECez7QzQudfGf\nTINSJvesmAaSxWzYoL+JU1xS6TGMScs4mcAA40pL+AmaGJimZqhOUHeaiXun\nw+SKGiTRWGQl1/tCR8Vh4yOnnqAbdTnnEfs4Iun1xUf05Zj7pkaiiUfMqtWl\nhRxpEvSwzg45+08pbjUiSvMv9fDfZt8ycaqcUYZ56XHacaELY7BrICE4650+\n+kFWcE5ug9X+L4jMgbCm0Anywh9T3YN0I5ejGDamkrXv+9+X1kgVGZE1/AxS\naaLg5yhsYfCr3xhUuFkrUsHw50eJF3gQaCyukljmHARdKJl04uYRAirv7MqM\nd4C8I2Mkb03qlOAeAMHGmSb2KgoaKZkKOuXfIQ9wmIhx+CJT5QOjCiyXWy4V\n/9JCyowacN+YEIjrbWqrS3OAlxAmmsGxpzxZ8gBBRT20lSSkVwcCTN35Jg7c\nNi+I2TEj40uy7Go7hIl1FXcCRta6JRV3UxnFbiphcCIN+D/C9BQJdC9LZlX6\nGsoQYXX682SVq5WPs4a2Sbf5KAmGEa6gvBSpZ7MEdNS/NK1TwYH5H9aiSRkk\n22wxTyZalqyd7b0xcTikBONR8qWz+vL4FwMVRZy8BdiKEkj2LyXhP/rVptVr\nkdgI2BgE8rejnnIAWC457ZrPiJfGrGDN7jNdqqL0RTrcfZuh7KQbyEidaAIA\n/mgX\r\n=7u7q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/touch-target":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.c50d20bab.0_1619737306810_0.6717757642007569","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/checkbox","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.474836ad0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16111f59732962b4bd3a430d27d457edf295089d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.474836ad0.0.tgz","fileCount":43,"integrity":"sha512-7lIlzMx36py8cr0LdM3/ZkevFyUCHewFyUEbY4Lu+NtGa/E9cHaUxL8LAn03WGK4z5RDMnaiYeTdfEklICZZOQ==","signatures":[{"sig":"MEUCIQCPp8L4LXns66vzKxYkiJyWbZ0lu0e1ldN54W0M5q35zgIgLqLKUPU6wAfxJ6HgjGNYUAhM2YN3IndEfOJ1Ku6aWlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMz5CRA9TVsSAnZWagAAwesP/igoyIsZBS0Arr+TqEpb\nDaVdOi8R/GnFKMWh9Nfrk/o6IAy6jGU6wVmDdPJZQELaBFJtoQmQWDKldTtz\nYO5UujuVBAwV6wjqyeY2UKJ/AhnhFGKcBFzpoINZFeBWOtW5Is4Q9fXDsewl\nQL2GFJRqbcaZBbzRr0yHyz/OE9wWSowQq12xmPO7jF1Iwni7bjg0ceaJNVuj\noXkdWgaSoYVbuW+bj4ZUNktty7YbTI0y3000YUSY5X5e+vBqNYCWLhwQrrD6\ndC/P568AiLecM6vbgqlJPm8uXMnABnDbXeLfC+oKv4zgNvRPbI7uZ4n002oV\nVsy7anXnMb1Q/YL5o5X3vJvppPZU/TLB7VPu6GBk40w3yN7qfT8GNGpEkUH8\nVg6Bphlc5BeH8v7Z9d/IWaiEm5sJxfMizmWCxRPrxEPwZjvJqHLA4tC4ljSW\n7TYI8JhPcVgWNd4PWJ/BhzZsu3Wuyfus2UgBjKXA5EqST3Dgu71TYQYJZH+7\nx+paa2HkL4NNSRiOeVIaJOb/h+UPWEv5+uecbobKOb7nWcClf5/LcBB6MGxf\nUAMJKG6MxV+6XCSIl8rtV07p8QuxxnXhdtt3OpXo1GHNHz6QUMAD2TliZIFw\nER4Qh0TN2Fg3Ox1s5UYhOC9WmL2DBQrs7UM7dPhcY1/V1kxuG8im3+qy7IMI\n7yue\r\n=1Qtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/touch-target":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.474836ad0.0_1619840248479_0.7814659353417013","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/checkbox","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08968517c78eb6915efa2cf65eec433031377c38","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f5ad92287.0.tgz","fileCount":43,"integrity":"sha512-nLxpwK6ObsiPECQlByQksnw3BhxtWMLDLjjQ24ZJ91MtnHaBFY3yn4pG0GBXAPGlyU485fgT84xr22iQE6bnKQ==","signatures":[{"sig":"MEQCIDvNuzmNkvogoRVzBM6r5PquuSEA+d/9PF4UatPFUfbeAiB/GD71fFFZZeBk5Bjjdy9A2YBqq2GdGrDN9APZuavilg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9LCRA9TVsSAnZWagAAE+sP/jGvy0riudewkTLDyguk\nEYObDYuNYG8jfg/DQTaTZXfoXrgZ785tdgPhEvCDQrv4KNA1fRdVpT3IyR1g\nwzkbMsX4S/zMCv1NDPCRwv3COle801hqqY+YX4n4Fqi5lrML/tYI/VLfRlKH\nbOV6AtnCF2Y4AshJcfuh9FXilYOdgtHh3n/D9TuFA0JOLQIdla5wleQl07j/\nlRSQPFtCI+bgel2UoRfANmhFpQKBMtY3bnR86kpYr+KaOhF/BzOd1m4u7FWU\nIrJSoA/dnfdlVVzxKBLgFDTV1k9cUw7EcEU9b7Jn6qgmbYYMefq92qHqphRk\n0e0e+k2jeOlrpcrGvESIxrUAxcqDI8QeqtW7GKNEC5g49f7660n74tLQv4cB\nRvH3tiq8vP7KzUVJen2y/ToB1VB2KALMoeyVMqM2q1s2f+E3N8rwagDDpU+x\nfNu0W2UHGp8TupN0/REJZuAysjPocBRw2dSR/wLjg0DKbuIGyIJZvfHyruFo\npZf1RdVUjWNmTTM8w4AGr8J98ZrKI91kkYFltOqg/kpChk5IZUAbgjDcIiy5\nW0aW7JE9yivqq1wQs0lVgn7viZqx4V9YXmVH3QiopibHl3nBGVGfrdUgnSeL\nORClqb6MFUxO/n3p0bRZqn3FTh30ppiJbZsqYIjZQcQpd979Fpt3z1vzMp83\nSZMH\r\n=Irdy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/touch-target":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f5ad92287.0_1620066123442_0.7957318890923437","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/checkbox","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.af453daf8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635adfbae34bd54257b90ddefc149f1a8c466c55","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.af453daf8.0.tgz","fileCount":43,"integrity":"sha512-1kZQaE2vgDNdRCV5Pyk7m85RG39e3YxIJgZIqu01QPBl1TtJU2pOgrijJjAw+0AeBQcYo+XwlxiA0QYQZqPmaA==","signatures":[{"sig":"MEUCIEdUpHB5bamHM/Mz5hBwMkZkwj7jk5OIjIIb+VlyIby0AiEApPx86s/BDvy6DcWScklfYXgAdDT5Gk50WcIVFxnSFGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEaZCRA9TVsSAnZWagAApm4P/0h5d9aYTougUGkhKO8j\nrA5CjquFogTpX1dcDmGCr3a1IEUOwvYIqRwzgssJ+ecsIBrY/xbBHESFg1oZ\nyC1Mz6kXF84t/jiuEguXA76cFxeLIfKv/0HUGxazpqkkNhw87HzvgxsrZHq6\nGAYsLiew1nZy4xK07OLFOloH52opcNoYpt7Y82q0ax7JzM9KLvLfcK043K3s\nCeZGMae762FRfFY6zwsi6N8DQbjIL9Hc7O/KaYcAn6TkJPAgI7LfUwdrkYSg\nTcG1rRsPOU4pNUejxVuD/sCwUa86GK4drulvvreAeuLvdht11jffFE4xZS56\nzvLfB5yRjwFgR61uzVWVFFiQaubOBAh7V4UaascrMtAFhA+c/4EY76wBhSQI\nBV0VROr2OJoYlb8pN4hOWDp3DgXzrX8oCHjAm+gUOmCirS7rkUQu3YF2EJ2h\nVy/DdD2FlQgM4HZ8aBgOdEArFVM02rF1qBHsqvogMB3jfs75I0g/5w5CHYn6\nVuB66nabmji6sUmeYC3hqykz1ytBgeCn4zjQPurqQ9Iqyl0WOmHf/2uQPXRF\nIOxWQVVoRKZyTmKS6A2KbiR5YsAIM6f7F3M0oooAZa509FFp5VqFeaerpgC1\nb3g3e1GHmEK+Ucyem82J29MAMHRJM+/F3wlA+nOtJ9GcbNSKOivnTvD4EpSU\n7NFS\r\n=044T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/touch-target":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.af453daf8.0_1620067992515_0.8610356329349469","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/checkbox","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"816b208a9353d08d74d5fa8cf1d281e200e4cfa1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.1f1918c24.0.tgz","fileCount":43,"integrity":"sha512-zVwOHEXtknCd7WfYAw3/CM0xnypioY9Myk1T4e2s7+X4ONuey1DLouRk1nqOcmfgNdwAMRyTaexPknKHPwsMrg==","signatures":[{"sig":"MEYCIQD4PPwFFiQMSd/x4zPKexC0y2HLDkhA23QoFGwz8MzWNwIhAP9G2TTrU94wVzNFrX6rxXBj6ogCOm/Bfz8xisyMJ3Hc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE1rCRA9TVsSAnZWagAAuqIP/08/tqnbk7//2SSBXjGz\nlbEuiwoMqFCpr1SBnGc7sqHOaBJSmxnCuIcaf2CPMghTMhF22i+Vi9SLcnIt\nZBKpsQy51+Gv9HbEqla5e3BX6VMt6XsyoWJpemH3xTwizHEMMbHFTDq5Ce/6\nMpn/xHufgFaAuQxpvqIgRw3jY5cEQdRivtwdL0r/HFszMheTF/GW9eaNnWo6\nPuB/1xb/ccXQyk8W/bDju1c3tLmlkCdWiVa8qf2KHhwX7jK4LNaAnllEjt9l\nsi72lFGu1xCZ1AlB9NbHQ8QZsivUAzspBr1tSPSm0Q+p0DoFJCuSH1raMgS4\n+tJ4opUK5UzFB8KqZIzwNrKcxedGtneAN6jOztZ6/rVf4nG1qhro4B1lVKks\nm99sDd2ZfrGnEOtFOJ2L67EjJ1P8QknnmVBIqgxmHfooa0uwoJvqT7NYVGPA\nSFfyj47a3PfDrQUtBjiORYPgc++z7It+thp4OxkawvBf+QOBKDOzaWpyjdZg\n6+dFBYBrYf1xllV16ZY19C19poosc5rv+IuVHP8PjNYtAA+qDIO6ioMDmSZE\nSAvy7F1SCzM9qJFfd3gFAOTN2OJeu9dISuPq/jALGgpzsMjTaGwykW25nQsO\nYbqOrePaZEzLOWzf40szYn22aYU6YlsFIdLertG2iYqw0bub4hhBCHi7QIH3\nbOoo\r\n=bYBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/touch-target":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.1f1918c24.0_1620069738952_0.015880113417753527","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/checkbox","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.33148231f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcba187c6dc013dec25fa379b9f1474911cf25b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.33148231f.0.tgz","fileCount":43,"integrity":"sha512-57hawz+VeRHfJpye43VzPKa+CvK2i9H/9K17NYyODdXjQTHe8xEMFw5ylIA4fNNyGQbN3dvV8s5vt4XuE69zeQ==","signatures":[{"sig":"MEQCID3ZtfKRwHC67VyWP1YH59OYQMvwKEWr0W/ldk3zg9PrAiBGQzFKdZEsCOmn0gzyHiTU46e8ZrRFHll4vTthWR5ASg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFE7CRA9TVsSAnZWagAAyf4QAJ0Z0JIAEbsUhn3/nfBK\nZS5u28ZeRiE+lmujzNarycVS4rUytCx0qv+Kr9ApuXFBvykvuUbq34oRaLmQ\nqvQ4pilydAw7JOm/gViF/cF6F7mkMRghTLi2i91mKRD7zpME5iOBobzujVc6\nahUaCdA2s7/pK7eP+Ub/iQ7P7u52AF3NihAipqp/o88iXni7hToi/Yi03ltp\n4M6eTcgGTjXw3rqzzvHP0TOmIeqAcEmSnaWJfwjsgwyDcjk8mctAZr0YrxiD\nwJLSZiTFrWkSOcA1huBYnvF7xPk+VYStaXXpo3IE33nycC8QmP5mY4O/LoWI\nS3avV5n2rjyoPtK5R+niFeIE2mRb8Q81zPrsYQoV+c7WSoK1Bg+CDAAWSv8G\nTB8fv/ND7qiu9nTfwzJY5AyKWz1McggnCHEfazXW60zh4Rhdt0fM5ei72aoW\n3c4A2W6rWpnsBBBCWjyK6jMSPTYJBCq4VtHjs/1U5biqQz1Cv8dboakPE9KL\nLsYISs361oh58iIRd+Lf0FPiT8x0Q04avgg6w8rnJvTF5HFbDrehTb6m/w8c\n4LtIC26ps6X2E1TpHcylIFbjGbFOXArxKZcjeJx+Ya1VxHYEeTVkMgP14ZFJ\nEdLHLxmP+Bfhumgt6vxKV0PGbA7FFVMne6UfDVXV2i0U6L3uemhTwuv+Q1oh\n9IkB\r\n=2QD6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/touch-target":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.33148231f.0_1620070714669_0.48822550265584486","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/checkbox","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df8b07d1b5ebadf833a16f2e4110900497d27d09","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.06b76fa74.0.tgz","fileCount":43,"integrity":"sha512-ZbLlrH3iqjJjRHzVqPhxj/2aSjZOGVJBFWb36TQIIyH204kXHHLTB3EsYUzMww8cJdeqwYQhOVvj6EEXfVD+GQ==","signatures":[{"sig":"MEUCIFFWR+WwHO8/nQt43qYlV2p25ZzlaDFIqbH9kMavcyLqAiEA174vfjbrxTkTMqz474YL/w3aE26Br4XZ7Mof6CMXLME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFLyCRA9TVsSAnZWagAAE/sP/RA/d7sOhlDSylQbAYBN\nrv+Nlg9pe7mt2GBUQbU/gXtwjv7VPVr5wDhZFfCz7k6NnQmJKg90DgP13JZb\nOH8V5AjvEkyLGVh6nSQUluhmzSsmU3XxQOKRZve/MIgOIRPy7JNHSmUdPomF\nEbUoFdSRS6nnk3tD2JFjNQh3l49njcQLBffFDxCrfSkgtGovQyHHTer86SWk\nKqAI5CGUQttORJZ2pUvb0mF2uRxmf7V5qMvMF2+I4aYUKI9eI9jHDDrqs/qW\n2r+/T9Gnl+4k/g22M7SWjvL9F3zX7VTM1PBZOVV+iT9jeRp5A7Qs0RrEMQhm\njRMuWDJ1cM4u1HH2vHd1Zo567h92COFex+5A7FyWYq//DF19ut0MXBt4ib/7\nB3mEBZfmL8RThTvBdrEFC8L5bUdMiB7i9ZVrOwNrDZmAoXURtyCe2NnlraG1\nfr/EEhGj2MurHmy5uj998t8gkfACmG8eznZZpfKIA84fHrTIKuwxE1ZI5kIu\nmE0Tts/L3BAcL6PWEyTWg8LQSL9fSk1/HMUGUxaivwbmoA1DWdmwyrR5VhyH\nw5t9bzwfXbdUmgivn3fT0328NKHowBIAj89zrHUix1ebGYfGCu7S1+RHsOUY\nGPS5fDVKK92Rs8aMEijDv+uHyW14a0vqi+DpJFBuQc+eaikMyoMFFaRcycb0\nw/z2\r\n=mMOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/touch-target":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.06b76fa74.0_1620071153394_0.3216879123102747","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/checkbox","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.7c5000473.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"338e716a1c2a6b70bd03ffb39932bf633eecfde2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.7c5000473.0.tgz","fileCount":43,"integrity":"sha512-DbfbBdlKIS3IOXkgCGIK/xaNIVeDwTuYrVNM22kt20YJPzLBozItJ162g2rux+mqev0VEBAe25x+6DIbbsbr5w==","signatures":[{"sig":"MEUCIQDEczte0P9rwCgCZsyDnt7AYsdD/yWNX9S1KD3butP+MQIgK9g5FTIiJmlm46VloiHy5xleVsPpU9Mo0GyhpJ0vWMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":695790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwhCRA9TVsSAnZWagAAlX0P/2pPp6bWFlSkDoh5h9bI\nivF+c84eAw54rLxFuFOn7QRYQD9dazIGRexH8+xEAKbmGacItEBwS8+6SZMN\nQoKS8hwo4OiP9YtlX8cjfXDlaMxLwOjnmkQenmWqh59Z4pOM0fWaBNm5pvma\nNVnLqR6UMgd6F3JziNLF8AYmgl/sX0T4+2tL50YoEfxAB0dFE205vwxrekJK\nOvEq17BtdTajV6tf1zQAMOg7QPj2RToI5Gj1WS5Lek5bBxRf0GCoR7Up1eb8\nTZ14przOs1TweLxFusxyz0RkMmVdU17kBT2OAbNoWTXz3vZvjwYTrhay5iQK\nYlJHmhzJ7v44MWQAcGsQBgt3WtwPYL3LVDuXVkJGHsfnw1UaVh9hBUEglLzD\n/fxrFaE/5cT0b74MmELAWbFL0qkK6zWZPio1MS/1ttCdBnGvPOBQcRGIf3aM\nq+gW0FA2VBlgAVOG8XKyPj/v5qKkLh2lY6U/6FzRwFUgfIxvR95g4mTCY2lx\nTiJCGhxpVVmKJQx2u6Ihn3H88XdRi2yt5EbrpmiQY4z9rSYEJKWYY4JYCX0l\nnKezk5vTg6SP0jUpHDd9pfJk/YzJizTDgfOOU/hWdruia0liyUdfT+UQZ+yC\n9Zr61DUC8/OdYCXgohGsvqxjrOH9ARoGyuTtl4Te8FeU/HxJI/sTpG4/PTuD\nw7YA\r\n=+iAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/touch-target":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.7c5000473.0_1620081696559_0.7271195748209354","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/checkbox","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.de997644b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4f4d8ace1fdcf5b49d0b6d0a9d0aa5521fdad0f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.de997644b.0.tgz","fileCount":43,"integrity":"sha512-28vUzVMqXhswBm0Sc+GAQrFOF36nn/K2KxkWMJv8DpBdBbD7uyrDui49uXwd4SC+Sz6pa4mLPZMlNa+Hvawvfg==","signatures":[{"sig":"MEQCIAvwG5/Pi2oGidAzwGbC3CVxpiZOUYAtblIPmDoZY1sVAiB5MSAlPdrWYjJ4YPJXIkorn/bFvf5oHSyEOJYOXt1fKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQeCRA9TVsSAnZWagAA/6MQAJN6uoe8Ne5YqwpVg8j6\nn8nh5rSUOyExdYOqmUVHh4eDLbMJm/R4gnxs8Smbrc1C29E1TW8spijsun2L\nUTWX/TrwR81FOQ7CwGUJKWHOqDL9Uuo21Zade3hSnYSvMB866LKCKUGHnWsO\nEiyQDHV7GJYptAsBJlbVMVa1qq05iHevHqvf5uX7wT5VlP8JIzmIeOP0oOPR\nBQNx2ERTmoDNoljTXhp75JRMz8sKZ8I6OgZgeAHxBihO5USb570SvGkscLxn\nrMQ/37AbzjDdB3vyTFIEHEXhn5luQSZmB8vINgkD0/lxJSoRFCErkAGf9oTs\n/25mfjWoS+KUtrPIcntBvo6PbkA2ezBArztQaDoEVWQ1nQHr50NG9yBNnSMx\nIHDohWFl5+18vhjXSKwDUZo4/XROsd4FEYZ07tiihjHRzPr/kxIuv3cqn58T\ndjtSGSukor0tfbUN2fjqrp2wfXdMmx0QuvypfAPll5+QFG/P7FJQxnPZgPxe\np1KTuHRnAyLVpcmuk0sC7iJQrmzHZK0g15WHIV6iI2cTaYTXoj3pfJjjVCrU\naoMpBs1kuZL107EYMsW8SrKLLlqGnPNLFsWjyH8PUAnw4PzOfFlxfazRha1e\n6mB6NfJsnBzIwOXrN1IsqrfFf54K8Bu/pBPyYkzljmxNcBo1qXK3H+hZNZ8w\n+9mt\r\n=xrY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/touch-target":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.de997644b.0_1620149278484_0.48361022193051806","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/checkbox","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2e02a86c2a08339d117adc2855bd4baf1b6cc0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":43,"integrity":"sha512-druvtMzn0j3B+OboMiOC2R6VIhOKYjYiw0etWEpnxKPe9VPBP5CIVohaQAEoGic8RXmsvvRRjVxhMY1LWTJV7A==","signatures":[{"sig":"MEUCIBwncJqKtwkBY4yUUq4iPDY6jfiOZv+tZ0wxZEly/9wzAiEArRt/f4zTIqlnMT6gwgKQ5I9jVtK6w7+jx5+ycoxcgCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYpmCRA9TVsSAnZWagAAaogP/3O0x7Ret+DnncC2H68d\ny+wh1X9Z30Si0b23zZtT2H2zp2JcVm8vo7WnnPm7F0Lw3LMqX356yxWj43Yx\n5Pp6uRqCO/45pLPijTrWvywmr2z8cCoAFc+dS4kCXD484WuErdRC2hQYOLnL\nhFPTpABSmqVXZnTS6Tv7hT70T0LxHwNaodteQA+27peQbLZ/zmcGpt6IC8bX\nwn/pc/hJo2Rahcvk9CnGf7a/oguucVNjrqupphElh8EmsBXn7W7iC94tCv7h\n8laYW5NZC68o3mHM8jNchhrXz3LIKMxSLGurR15Md6p94MEdQIBE4znx//la\ncqDDLCX/xTeMBPquLk0x5w9V76cDkYvSCbYw6K9Qa/Ui4Xeo71ColUegQvRH\nKHfGrbQrgRbVYtIgo6ZWnldIUdMeA69n8uCnWmDBK4DbviBIhC2cF+0qJwSm\n6ushEVZTecaEDEg+FsHJeW37H3RuXb0PRXm+hY33h1iPqwoSIwdfGC6SP9vQ\nPtxTy5VQrdPkQmaRz58d8V7UY7NSaiLgbJ4J5jF/ndEyQbxLzjVUkeH/f8vM\nlCeQDAhbX9Gkqo0xO23xFkNbeVu385SiSsI1pikXklWboN24l3XWT9+IGuch\n2Sq7XNGXFbFwVj6QJtijlOj5NUxIPrJTpoOINpRDrqOso/i/pL+p4o/lreB/\nqlP+\r\n=fqHi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/touch-target":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d4d7f1cc2.0_1620150886207_0.7627034596242983","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/checkbox","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.be999eb08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd540f99138dc9cd8e655542d9e6af32db98bc0b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.be999eb08.0.tgz","fileCount":43,"integrity":"sha512-DrnNLkdHieznnne2CNjJxE86LBMe/yx5HuAGk1KgtjFJdRQNhttP+l8vbQNMewcH4P0wxJ0b07D377fuUbAQ7Q==","signatures":[{"sig":"MEQCIBglV1zJrlq9FvYprKzOfPOktY34UghI32rOLKUfyFbxAiBEZJGSGLkNFq7CdjRWrJET68S/ghHZDgj267diHC5jrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYuvCRA9TVsSAnZWagAAnNgP/iqJv5h0KHh5XQT9Qble\nm9P43+99dA0VXPeWCSSavbQAz/DOrnmf3OyRJsrDFq6ocFsocFtjB3OmXYvj\n/fApeDM/biIkyrxo2n1OqOm5jFZk2xRq8Qs2et4a4BpKrwJfHXMBOVcRMKJS\nauUDlo1kEIp4Tantl5yay0FljQ3yNljxCdyMdpknm6YNcvrTlZl3MuM5gSUX\nb8Wy16FV/UfjqJCenNz6emQgd5Db38Mr+iwREl1n6YyYQHLjS75dZaB73VN3\nkPwCbrsCOlTU+sDvxYxkZUUwaEeSmQC/6xxuT541cuRlGAEMewp3VMi8W2uo\nhORN/IZzBtDne9vBJ43tX+HiYEI1sh2V2JCHD33W08PXtd48UPfR2+WX8+5k\nDbBNd1m4PhiHZaQ8VrAt8o8eIMHxAbWpqrIXv3m0llUHNvNP1g9xE+rGZuuS\nsXlMQpJRfVLwb8D7v22A7VL6DtCBM7vB3+jABXo/l8OrKgysEn6eq3iL7vW1\nAVAhawHBY3cKpxKsv2PaZOUDDAAXQnIZW+tDdULxQmVvCcET6hU3IrtCPgPU\n0Ne//edmJG3EDSgnA0sbDXCV4Jk8MkqSTRaiPwGbcruUq2ay6ZnsWAOx2w6u\nyIegNZjP5tMQy8Xscq7R+WhRdjUOk5rdr8KbOsJQjglzltv0Po2XVT+fAR8K\nc6S9\r\n=sluW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/touch-target":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.be999eb08.0_1620151215282_0.2783716668512619","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/checkbox","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"812c3b2e7e0b195e0744ce38afab29ba92876bc8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.eda1705fc.0.tgz","fileCount":43,"integrity":"sha512-LYgkmXlBJQaESLaxHgbU26mOuI4z6D4xVG0aQr9ch3fNJu+6RILKlc824r4dQi6OeiaOp22P8pzidrpGHruDmg==","signatures":[{"sig":"MEUCIQCE2dDy7/ZUEbZAAbilqvgqgkFoKKhCib8HQxHqZImpOAIgKaXNsBoL547OrGIYWvBl2k8CN/bK/43BYIgbiSBXs3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwNCRA9TVsSAnZWagAAX8wP/0dvBAMn0A6shAzaDmXr\nz+QhOnf1d10yTsypz9h5xzdlWj32phDoZ4H/u0UclhyxExmjeHTCa2oSduhA\nW88RIUr+F7cCkYs/I4NetDQxNW6+0GBd0+k24XLDYP4wwdAp1r1qtBX4lquL\nZZeEWP7f1QVs0iXBggcYls/Kpml0e6PxwwEGxk4yDc/rqfLcmWiZxj6l7xDs\ntWcHXlJ2TAuMVwdc4+wr1Hiwpjk5croOQ+GK1A8PSy0P1hiJEaCBKrEIS/BI\nGVkdgaPCAr4ilpNNH31KPCFCpJm0R//puaLaeno2B5CqzMr/F6Vk1VQMK1FG\ncAqv4raEQaNVjl7//FR/Xf6X5vRfZ+Hitpnv8XGh50zDSABdFu6+GpaISiWk\nMhGWos0lfgOBtSxwFSdmrbB/34+6HaiRhEcNEwO6F3azDothQyv0nlRqA3UQ\nFbt6rOoGv/ZQjLnhHFKUPDbLFfcivA9tlnQrYV9atMGYLETkhQ7mAd60EDe9\nHbV1rexgiu7Az7Pp56TLT/KqEPvdEZ0pY8UAI0SJXeLusHYRYIgM2jO3NoR5\nPEgblq3my9jc4VvaMklrk1fRu0ZsI5Qvjt4QiSkzTzPvAGC/4tWMROKEkjVQ\nvjvvgRB9Vea08OcARVDZcEpY49JnfGXItrxXTpmFMsavQ9MxaCIdNGLYA0hH\nMImV\r\n=+ljp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/touch-target":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.eda1705fc.0_1620155404810_0.15997427900900218","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/checkbox","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.718c90178.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1850b18b355b64116ab431205a5cbb2a7964a2a1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.718c90178.0.tgz","fileCount":43,"integrity":"sha512-Qe0jL0jUHe21LnIk8xZOyPMCR9YXrXPcbr29r0tgFPAcynaRzKbnMQwFDqH4bzJT/1okXKiqkflv1Q2JRgyqog==","signatures":[{"sig":"MEUCIGVO1mneZeRrRemU4WP2DsykM/CiZcYS6/Kr0rKCgrauAiEAgYACYU4xOECYko6eO+O6+hg/x6tH9mB21E/FUR9QJn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaAiCRA9TVsSAnZWagAA0dUP+wfo+R+TuqMWzgTl3Jmk\n3n2ELfWT5pdgFL+k/8diSsLgz0x1VgcRPrtFt8kXGPWt7t3tBgfjtcUX/p5b\nf/O0ezldYjyF+Pq41f3PriTQFQxgywRzKmEb0b61MdQ3BbTNuTB0NbAjidKp\nTTir0bKtzwJiBUAFDB5RV6CyWUCbgRKZXnEXhH5gCpASNf4K97OfHeL9fiX7\naKTwBMW0OUuJvvLA9syU05GdFw7fAy23ICSridQyXwS3i04qKtN4B06jP8Ik\nB4r9wooHLCNAAbIDZQfsFf6LBojgaw370Fv948sgDoLSUYQnxleBp05vYkux\n6q5pzh0VQHMQFLkso2VaG1QEWBeK0wurvV8H/vjlPj+1+UohkYcFCjwZsMKt\nM0N5MKjnfZyC8Z6wa12A0zRHhWQetNzWD2Tcp2KQbsOPBDxxsIWIbXaKzxMu\nvRoAPNdy4jyNxqavUVzvfhbDP4vMAGufvA8GAis1vCOSmpqRdw1+V17Tl1Qr\ngkJQYvomEBkg3g45nW6NYsNvThoHiS7BKCaa8qUtaXZd+IR0wriJxpddxpLE\ng40xhgkti9T2e2thbdbpcb7zEqIX6Q46Xh+C6IBk2VqIPlPOtCUtkWR9o0T4\nNi68Hzj2OllOeySCgBNtl2gfPkjLeWczrZIprqIkxiF2ywmR9Kl3H5BApRAv\nv4mh\r\n=GyPL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/touch-target":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.718c90178.0_1620156449765_0.9208199467980054","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/checkbox","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.0e3917299.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed83974d2311b539e7d0fd5244f90f6597c5b88e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.0e3917299.0.tgz","fileCount":43,"integrity":"sha512-tz5kB12a3rr7KWz7fWIVcGALlPsTdOyM0C0SBquNo72oyp7+ev7p8Kbx7cgA0ZqoMeZ2oYFE9hhQFezAG7bWUg==","signatures":[{"sig":"MEUCICgiEnc6LHY/pJmExwYYhfNpHZ1xDzInOvWLfEm4m02cAiEAuKEQmFIqk5OSpd0bvZi/3G2zeGr7UkDqb8BIOK8zc8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDECRA9TVsSAnZWagAA15QQAKPfudfPvaxGqYSNhQIy\nlKwcMunYyjnDjOc1EjKJrm1kTrEiaeE4HAlzd6vCfSROuAJeVmabeVtr/Lzh\nldqA7v32hTY2r5vBmJ/FfuNmq5Lhp9hOGbLpM3eL3qbiMpTFFS1xLIjydPhM\nNmmQMR/r/gW2pAhegzQW/Q/KZd+pM5l9BzNbo+3xgCxLTPoYJUa8QmzkmcRO\ndAW7vRdIXNfX/5nX4afXqhNbzevq0b20LxpbxGxS4ELc495u1I7c3FuB9QqL\n2k+koJbcW96kStMGTb9YHx+HdomiQsTf0tUT6RZO09zReOHAVULPuFK8lq5D\nbW7eMqb61jxiTWKoVB+cCTp6NNmZ60Od0jl7j09G5pPGd4QktbP4fU/dr/Mz\nFsW1Ma7R5NaSn20Y93yXOdVW3nVpegWC2unj+tz1TjF4UOt3lRqUcsQ0oYdv\nby8GTOtLWAbf7kcqZfr/iu3HMizM0Zo622buIIFg6jAmjEdj9RO6hTlAoAQi\nPiQI4ixCIDleh0LZXJGavCUl7we7duFzAKUSkUEpDzGSQJHHsnkf+2PPpMQJ\ncyuHXAeptrbQqFcLgZKjoQboC1lcSvebHvqK/qUoq1Qrfr2P736MCR4Iam2r\ntLVPJpu4c4NyTW1pg5oN9x22zLj8MU074Ej5JxR/u+ixutz4ZN+PRy0mKQ5O\npeny\r\n=0n1p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/touch-target":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.0e3917299.0_1620156611798_0.9221538086757635","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/checkbox","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62a3a34c6484a5e0f31c9b012085053c93315d7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.836b3c7db.0.tgz","fileCount":43,"integrity":"sha512-o/9CH35/csYXMFu5dTfnZ0WIpubevQJZIDCPpcEeXPtjkj2Jdhh7RsDz8bMTntnZoP6z/Y5ZZfweQyU7TwxErA==","signatures":[{"sig":"MEQCIGfQAsHSZ8QbfKJKbXVOmQZ2TUBvj1MfGCLx26om4PqoAiA1OY5WyvTkC/8Y3/xpIHSQzr0mKESCgOox1RN2JRQY0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+hCRA9TVsSAnZWagAABCQQAIvbvM1ZnSNGAT4KrdaO\nrhxZ4CdrOhu1HAykJzSq+q7y/X53svobo2hfISHxfnGwrm6IfA/ra561/75J\n3PfRpfV8Jp1jrHRBhzNEf3f6XhGhUInyO5ODZKY38m3g+ooT1etq55QFb45+\nvU19q07R+z6XHokC87in2kxV3ya3ccyiYYXCqlSrLmWwAPAODrYXSTtFRq+g\nw2O6b2vIJoHmBpu+tacr1tVD12LbslcQaOgS+vVsfTKt7EH7hYcN7bGgXoFG\ntVt8mXJMOvnoyLfhSCy1v5nmocoxxwPFPUrNuM1enVozQQQUqZ3BDsmeK20+\n2N+LERxqYlzdtszf4fIRyAZGb/9lau+GYJArF9FbQAXoVRTgXlkJq7fTdj0+\n/x+NNv7+npM+kTRMF/A+skfUMgrcRVZQinV6ki6HmxlpfHOxFeUhN5EHviF/\nh79N5T92nLYX7fnGE0oOniqkKAhtLELvsJr2W26AMS6IynP+gRinP3pzE2Tp\nfc4NtEH/WqePgHZ2XqMtmcvwGPwPDybLttpuqFrgXR4OEghdsDLsz56MhfhU\nUT2F3N3Z8ohWJBu/zn5y76kFifXQvLVDV6adgTPtv/6ehpZVoafaZfi43Gqf\nvytqXjewsUAwsd/g/sgnkQj45AC6j2dN0/Dr4Dk7nbN+UX2iWs03AvdamXWX\nIC1O\r\n=EgW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/touch-target":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.836b3c7db.0_1620160417433_0.4366945318155975","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/checkbox","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad7f2c57077670cd6acf6b1d643b38d3f39c7290","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.53d4e6d59.0.tgz","fileCount":43,"integrity":"sha512-8+si8TWkRlChmn2C1uNCH57ETZtffqIa/f/nXUJJAg/tlOs0jlcFjSoTAHwQL3oLjdI/X0UvWp8+L0HbEdwlbA==","signatures":[{"sig":"MEYCIQCTNB4pTIrMQyJnNTkxy+Mrv9VJb3BuZbiv/vqKGYM3NAIhAN5RtFmajtZzTakR0waxlQ+tn8kH/vLeESPIfc+L1ZDV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNQCRA9TVsSAnZWagAAIz4P/3jrUIRhgk6hCDeHAgAL\nRg4yj6JZUdG/hnDHj1jzJ4ZnqeiYYQhWDBS9CkZrEm8u/vR/fMh4mZUTUHlf\nnwQO7DWdilC7qLRw0Db9IvYlX5N4JFby88O7VXINF254rWgc99kPHABvyBwU\nGmKjPDgTMrboskvJCZ1WLqt268VVcHPSSnnU4cZUh/1fb+BL3FUbO5kncAyM\nJX11vPCxBsfFNsJRB/CWIMYKGtxqC/7VQy0AbJXUpJfmUQ2NI5pe/Esp6DGB\n0dZtdX0LpeQJN2yrO2CKt99XD4X0fAxlwp2EEzG09qAaAV5IhQhCa4pLpT3M\n4UIDECEc1J+4vpUCDN0b8L25g3BjnKi1qHNIIiD/KTbf6+iY7vVLx2kY7chI\nMUt5Zm3T8aSLMgpspzhhS5iYPTmgmgz5z6EDrbe2MsGeTaBaW2KOU0PlTXw8\nI11o+tVhv3sE+/20SEc07b3H9N9Z7NcEBpo6RQ5qOwzb5ndXcil6grW8Wa86\nK4uBaR5gVdTntexk/5weBYhkt1/ICo620s55nkhQelFzavb+TwJd/0h3c8H8\nMBbBTlFcFYXCAkPGcNbSVYuLSEEDKxOmdfNhGNkbxJkkZhGzo3tlRHb/Mt9d\nFEtnmJn91UuEp/qrK1QkrSF+hdmuGtEz2DvRhm+j9GeQHIIGtskIYDgiFW4z\nqPUe\r\n=7Dkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/touch-target":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.53d4e6d59.0_1620161359660_0.5834353353573554","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/checkbox","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.18d147e27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d711c761df384aa08e5b8dfbca38575b79e3b671","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.18d147e27.0.tgz","fileCount":43,"integrity":"sha512-GAro3FBlCywg7yGX0ToLl0H10uoUTwhQvabIgGaXnme03dle/gBJkNEUpieW24QUyr7Biv5Iif+4mskBSETTaw==","signatures":[{"sig":"MEQCICtKSOkfKb+G6rKzCTtwuON/RcCtBKTn84iby4YASnSJAiAJdYZ+AGj/w3Q5AIwu0zLcUhPJfU3krxf9yXuW9MlrWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVQCRA9TVsSAnZWagAATskQAIv+6aeiL1RamT4DX3pt\nCO9vD1KQy8MsbeYy7BKwQkFxMQTzccuK4f8D/bCoOv7bSyZw9HzwStvqrO3D\nIfqdV55Jldx6NH2k8+WhlhK69bxT5K27wZsk0/bpStNP5JokmortokesSq+T\nXkPgSILMugo/V/Qe5qAtd3M9YpEUEE0nWuLwXK0KKbSIfwm3PIc8UvjGW9v8\n4iEOb4zxqecuLjNKtwMjRrE/lFLwHe4HZanW/RT6EsiuC5xOY1ZtesaPEbYv\n/yoqDGZ674JUCoamCOF5Kh2gqzTtYtwuZYPpqr6fBfl94ZcI3Nbucrifk7KU\nRn6Wvxed+D4MRsB9SZ7F0PHzjGa3OOesxoop2aOpGX2634XuTaHbKf77mnbm\nv0G8S8Q8tCCiRsThPHYV3dNQkrTmdYmKvsJ2jqBYmnONTYwxiaHyJGWxaT0B\nru7i3BYXHAOw6AsdMrBIpAd/WE+wuSPwPaKp5u86/oYfcN+eTM56EA7aGdct\ntXshj30x+Zy9Rwx7ESMdojBI4dEhh6uZqNU1PJ3DV7irPZ8ghqDmpcUbu/CG\ndQzBlyGajMmFGit94BvTm89YIfnQeiQ2vacc44chghr0SXo2riXdsgKYrmdt\nJGPNaGpUC0EO/loTjuGLUBkJ6On5Q5KZlSqi/EM7yGAd6DIowA7qcTqn8bQt\nKwnZ\r\n=TmHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/touch-target":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.18d147e27.0_1620161871694_0.6565747179273569","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/checkbox","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.b9984794e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e3829c7e9b4ba9a03c8484037fa29e548aac541","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.b9984794e.0.tgz","fileCount":43,"integrity":"sha512-c57Gvl+IUVj8jlWSuLcB7c8fu31tjdXiiKCkbqdN7c80xwpUqg0v0NITObakavWxy0vBLDnrinSYXl1A/jcZEg==","signatures":[{"sig":"MEQCIDYN/er0JKMgTE5aSbj108vIarNxLus9hhRfUQv2iUndAiANfA7lb81vGB5xM1668cm88PbBzyi69oIKKpvuzgJFmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKnCRA9TVsSAnZWagAA3yoP/213vVdLmVx/cZTF9NC+\ndESHGQeZUHZt1LHohKdCqk+zcUyJQVyRTay2P1pa400NNS1Hb8AEcBLcRsNK\nskL99paJ6ybHGgxwiAyl6L+8c6VIxENcLWaYZUC5nfoa8nI3+Q6YFB8YtgOo\njLtF8G3n4Ox06JeUKoTZsE6wuDg1e5sxV6zl1TTMBjx4uQEhH3SrDqb44MZm\n9Pa0e+l7qGkH8koO1PdA0zWj3lJw9BRuBtVDcmlVtDH9tG/rLjwkw2YAp7gW\n+Pv1YXsyJTNUeD74nCgLbkhe1yv/gLFI7iROXLLVYfnHh/oi4uxpYJ9+rWwC\nikDZGif7tEt2xKeAgzoCIqpPGaZvJiR3e8xU7d4FTJ+234PRF6GILV3nu0p2\nKLcwHkzF1lU2mnX3+imiM9Ut2VblLi3y1sPuas0N6EoSqwAeD7N4N9zms6Ht\nk/4g4aoEve1h1l5FGiGw2vaZ4yXeCsLztH1QOICNbtUsA2d1MkVJb14KPnIF\nFLM8tpHWdSR7RkmNUlr/pVaIgB4OiPhI4mv0Tfuov53iuzPhzXcpKElltDN6\nTkYNQHlPzpa5R2AkQJt5n5nOHW0+TxMNhGze7GyY2q/aVCGnD5EoUs6W9GuN\nm1soNNvCkmhv29JSk9EL0klo4oWbKWUMwqu4acC/+31H+aAVtlvPpelo9v7Q\n5aM0\r\n=tsgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/touch-target":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.b9984794e.0_1620169382513_0.42917466587433317","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/checkbox","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820a611101bbd3da81fc004f4e779b3d9fe9cb06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":43,"integrity":"sha512-tkCdNqFD9ePhNii5Si3l765C6hiFzg0W5eLn9FbBcK8joBIEITWD7RopULZR3PpgSN6l12IUzNG4VtvUs1rclg==","signatures":[{"sig":"MEUCIQD+/ikEq3kL8lW71SeSvXl0p2HUaNm5r13k7L9o5FyJMQIgdlleRD5x+wYppyHCXiaG2I/FrZS6rJ61ZoMNIQy/oP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNxCRA9TVsSAnZWagAAy/UQAIpuO2O3EIxLRaAX2thI\nKQaDGOh3ELP0AhBGtL2Wo0I4QS4/r8tBdzR0hlqBf+LTJ5kLPt0wxn5BqwAO\nSK6yL2uWoIjWWAaNgVahIiReX+pboCqlXo24uxnShcn7dHN4OwAlgak79iGR\n4QrQ8rbn/bhaL+VgUvPvLcHaiXfziFZ/hjZeeBB9/6nWD/+o+cF+BgTqSdlc\njAOJVvSu2dnfWB3xRTmgX7UFdqZoouhlqL7QfdNTHVXcUsN00RU5lNwqdgzH\nQJJZoyzCqUGAggBxtEldYntHcBZcoN8XJrDFHVgbYD3gROfBMshldJab8U6z\ndrSwG3E3O/jxvBNq3OZM7Bt8ITqviVFQ5Lxoqp4XkgexHcQTINmnio3zOPdb\nrVPYyINipzhKj4IZr1jcUw0PFCSMRIYjCimpSg5/NEAyMVndfkat7iJxTRvU\nPpEy48ez3PnJDwwcLy1OPDd5m4bES64oTJUL2qCemPBzc7K9Tl01J2sJJl1e\nDOYUiMPyDfVNyzBsNmB4FJc0W+lAseblPdFs4SxvsroqrNw4uzo4Znhbp53S\nv9b6Ni7pqJ3G2W7UzG2RKWFufGNwybRYGRRJ8Zu22KBDnozA0ER0slvX2irV\nja3XF4wNyotAzWwSEfGiBKuqSgaPpRHKZenBPXvMmTmKfMSx6Si0y4mjShg3\nzqbx\r\n=vSFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/touch-target":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.b76f5fc9d.0_1620169585036_0.5494149544097886","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/checkbox","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1975ecf4d58bf0dfd43ccc160749b79d98e2661d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.055d4f10a.0.tgz","fileCount":43,"integrity":"sha512-cu4E85MeMk7Wz52s07tgmvMkLd81lV7OmA+AQiiJJwN0/q+zj8kY8kki0NYQByQEerI2qjeZPEbSLjEOyvnlag==","signatures":[{"sig":"MEUCIQCT2seNDda6MCo+x9aVGK2djFyl5a5064umStGbE3XKJwIgTJMobIDqwWM3dX3vXRbdGvVVwL/hTdKcBqnLu0SkIn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdb8CRA9TVsSAnZWagAA/woQAI7JlY/MXoW+AeqKPtWH\nDLfv0A2VkXThSbOhK0cgjBSuwaH8oXEy4OKx4mnqu2We1Gp30J9FpGA8H1y4\nfhQy3vf438gc9uA0WyAISrV6k438rWjuBZ8bkk7FehSBkfoMj+MH3VAle1c8\nbAbB6DP7q8FG3OciwTIL4ChI/PeY31m6txjWONF5z8ZJNivOscByR33qwvQm\nvlu2PBsn7E9Juz5ZDEW8I4dVpuJpMk09sK1h6YjVAO+mK+IQAAu9SxPubV08\n6SIQOHVXSmtrUjUt1X38/N1VSvZ8JfOSAcjgy85FwAOMtEECLKEIzQqKV5+V\nhbL7NXPduN6bJDdjemuM8G9uwOAWTufLNzoSvZG4RMK3c1mXkbHS6nvduBMG\nmH0hwN0+rAhwJZBzJmXLofe+40vLMCMHY1F8CNFWNNwsuZ1wxN0G6V723I6T\nFfnXbV3b48GZZKTVYMNhu9bQkNr2mYZwQ5vQgnc13rMGDukOFhIUB4eKrSNL\nuiXjn7gNnfRh6Twej20O+rRaegPj9JjRimSqFWLu8Z7vd+MoiXSnDmFtEL9I\nJsex+CJbwR7F27/LCzO571H7unqWYK+dgcS/FqXloUYQuSpJ69m7dt57ClbU\nnhkwVkV+mJlyKhEJz51CDpTOYPMvelUNKIrcRBRyT8heBqKAi3AK3eG3kbyG\ndn0v\r\n=scqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/touch-target":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.055d4f10a.0_1620170492316_0.11828401634533492","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/checkbox","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51fc1003c62fbe300711a588c1db621cd2013bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.5b6a46016.0.tgz","fileCount":43,"integrity":"sha512-k6EmVxvEkRLqfpCMpbfXUCgXqUwKpZ0Z/x3CH8e5fjhNKVNmNvHuJlDuhPSsoHQ6JTupiWlZLmqZDFa2eVs15Q==","signatures":[{"sig":"MEYCIQDU7jHx9nksSC+Hbb3McDq0gY+SvZBaDm9ZzzzgitDj9QIhAMLnkZnwUQjjFXcsHlpoJMpYfD1mPiMJvLwG329zIHZp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTFCRA9TVsSAnZWagAAszMQAJFy8hl+3QZfo7+uE1cY\nPqOZxwB0dRl2Lv8M3/Q+keGrcNN8rsMNgA732IsqtPfudFUzw6CQsiDIZKuQ\n2K0iLVEhHcwfI2StTo37xAh4Jv9ymlv1Q5cSVynGi8e1r5SNtOzjTlKk5x8r\n/ECutFXtKh1JGD3ekjyVH2xHigg95oAJYni0RwgPETYcIVa1ec/2QzeEhhnu\nzHXSO/98zpXvB+tLr/ei8mAVhlvIyljd8Mivtq4zrCKEdRxSFBK40u8vgmkF\nUlXC6DPpQnDTZdQlrNYsk5PpGMPSRnp/V+3QpVdzmQP5Fv5e8AGoTiDBhudy\n7qXHkwo0OCxBXth9wJbJdELiIaCAGS+DYSUsUChP0rWQeENcM13fm8l7KjY2\nf2sE5V8ytg3sT0KH80DlHLXK76cVhe+84nwtqzvoldGCwzybqPRhKiMbrV59\njH0Oz0FBdADJI0toCkcmPm3LE43T7RzehcR1Adue0TO9Aw0cTIRzbLdAR+8I\nz50QTx+35lgf34ry2+Xwr/DuqwgH+MOdDh39LTQAEmZoLEfXx/saUOHHmyPN\nIEQkLB7cn8NnmlewmV8giK9/IdrSlnYJnuk4V8Pw2XwJu86nZrh5mrZO1o/T\nGqzIJrqG/Qe7q7Tub0sn5YlYSRjGzBtXJW9Y5MeqSjqlDYlDOWgNe9Wtd4kw\nHdAl\r\n=C6t7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/touch-target":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.5b6a46016.0_1620231364452_0.2701552690357101","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/checkbox","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b72c5f75eb15070f3b10821997bd7b53da08b95d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.33c9a737a.0.tgz","fileCount":43,"integrity":"sha512-pM3ETluU62gD6SX6LZ4YPESjCCdc/QD41OA4m18WVfZOfNUHAljBUne/ZktewvUFwfNuAhn4l7iEfMfHFkYrgw==","signatures":[{"sig":"MEQCIFuVAI8CvHrGPUOx/p7F9CugGS39aVRFprXGPXKRona9AiBme7EUPFQmyT9CkL+3hdqH8sRcEqURb/knYIaf9QKS0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVgCRA9TVsSAnZWagAACCYP/ilBp6CbqUEmea2i7K5J\nJbBzQz6QpFlI/NB5wEaEJj5OQxDjL82+5eGS/UPGzgEt051HkoNk55Bxys36\n4WW9WdarvQa2HGnx75i99lVh0evvmwjnxxXyHCnmGuGaItLS1yALGAILyyCS\nriu9iKzhPVl0Sz+lhG+bLgShpWzmx6+bQF2fkiq+1qo1jMX/OFWKHvwOLx3+\ntzXOJWyJwlbqo4zUUfZhTBrMRg+umZw/hEdc6N1L7Xamxntd9Sb3JJfz8/IH\nxIup95Pu3k1n9KziU19RSeZ655UiEazbyOx0PdqXKsPl7WxUm2mZvLggmL7E\nn+lLr0wzWjmGApHedg17qQpXTBktxqZghydTTgVsEbpzOkaa274hKVgczIW3\nCiqtjygKR7d6bIu6EOlOqZFPfFqI1dQvc/4ozDTAFfxc8dtaV2SwQ9w+XIxS\nQmlcaPw4ds+Vd+vmw7QHinryTlm3KokrQwvexxPdmPNl47+/xKmrKDF/p1Vu\nKTB0T22a7J4Qm2mJBLBJZ/LU6yeBkPpgGYyFlaYwT4CvjzQJXiAM7/MQgdcA\nF9+QHqEo120o2B/Dg3fjn3O9wqTmTKCbPJBtVrKIdHby9QLloUmoGpk1rDnZ\nv5nRr3Ic/ClduybTQhZ2bjUpJXrl/vJm3g7PfJqI4mtzQgAKEpK+Xmrk3ip2\neLNZ\r\n=Bm+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/touch-target":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.33c9a737a.0_1620235616161_0.7540326656572469","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/checkbox","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d762b4ee3663193581e06d49ec8a32c00fa1c4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.9bc0effaf.0.tgz","fileCount":43,"integrity":"sha512-deaWsitRnAa00UqrL9REP3J6yiCFcWKlmUan8RJAKLRQnNZU1pEV8Z1wB8ijWkNy9trJf5a9OiX6EbFxi+tfSA==","signatures":[{"sig":"MEUCIFUyDiCvoLTJMK6mHa0ivQGYYzz0nhCWjt+ge9c9knubAiEA8h1c9/M1jsdkLphtxFkvsQ24c7ur078iYnhdW06zUe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdMCRA9TVsSAnZWagAAlAIP/RA4iZYsnuX4y6gnxpdx\nSId9lGKDrOaZjBpHeF1mwcvk1uzvsmSaKuoO9+lssMvxPp8CsbtZ7Yt182S6\nbyEb/MigUkIZ+Z69aZhxKwAwvDeFbUCmZ+OwFsdDqjLbQXouLQRtu0RNrom+\nIQmd9eYC5pVZKahidTAikPTBxtuJQUuLX7WM53tZWx4u+GCvyFT+CQmqhIfD\n938dl9+QVqI221v2RNTB+wsN3Vd7Eoekyc5LfHWxdUJ9DrDb5kZtX1ZCbmXY\nBTUvjGq5lxH/4ZQajXySN1dNZB1c2ubkO2w117SR+TbC7aNXgXqtq/icaSq4\nPo/wftYhsx2yumoQ/86VL1+XtGqPHP0DbIfx6nwmJp4QtWOv7XRFavgOc3Fp\nL51uk5VWtni2UctrDBMg7K1uOFk5j7VJ9bbWvxmSiilANWgevAkdw3RHaHhy\nywjOAAQ8zQ774kI89GAT1cGMN7hKKqCyq5pGbGnUnrLMJyDqGUOBAhLUocjV\nrt6ZtqkCcSOPXt6gtxmxqQLkU/PIR6R+jDcEr9Cc/aPOiy/e2jdbk0id8Pen\nlqaMxlHocm3hgi3Np4/7vErhxihaG2TjhXFH7RGyu0uqtfDjdX8cOhU6pXSX\nWcKjVFTaIfOn7z0gG2IVMk+Izs1fnoEBExtFm1QDsvsKalzldM+D4knwqHa7\nwAMP\r\n=2toe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/touch-target":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.9bc0effaf.0_1620248396195_0.15331878106401886","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/checkbox","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b84d8804752b2548f82d8c97d91b9c44a38d26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":43,"integrity":"sha512-hldtCvPeQaf09dYkUg5XWoMmOH6kNiWXgKJ1xBKG8X/wM4OEftEL5dJLyMC+kUdphSmGRlhe/PQNpZEHIonrkA==","signatures":[{"sig":"MEUCIGh+clyFeX/VoweMcQbzyzdw0aQbzwzIBStiznKF9HiDAiEAkp9Lvs3uLM/bKrlbuFXOlCAQhHMLAou7aZu6kL8MlK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDbCRA9TVsSAnZWagAAGwYP/jR0zzGJzJjykPpV7Svz\nZOWtoA0Rrm/pifSwH5osQ4e0mnTkf7/t1LokuyP7pHpXRKsH8Xw+26pKEptL\nATHTCwUpBJ7tFu7v3VPQesZRj4Q/g1Obcc1BoCpOzEMSSmZ3XTfspF2YTWMa\nzZdgc6IkFAkIv0b83ZywuABvz+xZBhLMbrGMWcsved/7wRB+l2Z4J5XI0/bo\ni3DxV+SAmu6O4wYr0mk7bpPo3EuquBZJQUlAtD/xhFkWLteVepMEUhhfKNS0\nQgKyr3qR79VLueB+tK1VB5bUwW9DHo0sUosd0qTpqet+280SbTj5ixu0EpZG\nlBoNfmshVZ+pqqpPy8TUehjJ9ek7hjJ64c2X50ONlPB3XSzJZdblvAGRYm6X\n0Y/GpeGXHy83ki45qxzWXOBIz2qWot9y+C/DejG+FomBRICYquFpJPB3/5vJ\nSerGy13z94G/MrM4cCDRmUaognTM3sRuh2hMLBlbngy1m2GmK/VwfeZOR/7x\nYE0+y93a5HphruhP/04P3lbU2hqOcTKfAUd4Wza4uMvb0qlM0krXPoD3ZgiG\nwkEP6iFPX+H+GNAwvLH2GU1iN1Uqyd+bMtqoAFgCdBA9F5tCQ02oGWj3Bzns\nFGB2OWf2xtUy75uSs4s686DzZd5G07x8cCtBQRsweSfLeHwxNcg8c8jeEzyE\nykgq\r\n=RPji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/touch-target":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.a1e0f2af5.0_1620250842705_0.6938290076732243","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/checkbox","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.06930c96b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd9c56c65cb71b5c7fafe94dea9deaafada71d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.06930c96b.0.tgz","fileCount":43,"integrity":"sha512-PT6u9ZpeWAJnldJqi4NAfKJy9Tt+jZoGQ+UQS3StLZrd+gDAg40ZqllWDD3a8E7qTo3GSgdt5tCMGaFI/V2FEg==","signatures":[{"sig":"MEYCIQDx8JoPDweSqvwkYpLkstP4NM6NrQKDVbw2HpSFozdvoQIhAMGVJKNqdv2MIx6ZRC0OAyq/GIRHl7gdPVbj9ECUkMR6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyyhCRA9TVsSAnZWagAAZ3YP/028RIaB8R7bsGuNPEp8\neXDvzW2CdNYVyJDgHLZxp1OYrvpwtkVQ5I3FTH3y2tGJa+U6SM2cMl0mDPmg\nuunisCcj+bD5WetdFh9v4ub5LcSAR0jLUS/A8RkS5IK5LHftPsDPXGkmIgso\nKUzJzalceCigKuixj6jTsX05PpnhCJtVXYftX1/pyDLPNvjVGWFZuyNEE2D5\n+ihsslCAacvtqIzhmeTEPix2LRAfWP7AcCaxHHBgq1E4CbnhzJjPwLnCpPsM\nnlCIRGk0y4H3nJgsvzB18Mpwki142hINR6JAE3e8I8dl/YBbJaXZzeRUsfiD\nVck9oL0g3lnIs0/wBLDLEHFf6R1nAqWgQ3M0RyIAo2ngjr7xbZ/sSXoaXWhz\nM80orpkoVBG38K/LXjdgDY63BHgNjTpbyrFTW84QnGnKTmmRV+wzBGz7747U\nsO+m06KhzoD4ISYuhb/WggBV8IDkacprqS0tJ00PT2UiVCZECfQsDNzBxgSQ\nbaihOMuvjcWYJqBdOU8gkeP9/lFaEgXR/+28Q9G55Gbm3HSaHP5ZPwogJO1Q\nCxoqe4IZSrC7gNbKep6JNzBV8CzdaUSVmOjs3mFqdVigttLDzzrdeQvEWFaa\nsMAsMyYKyEKNYt6JPkv+RBZ0UdnzoB7SB54OdTt6+jVYqQckN/hZr9++nQZX\nLHp0\r\n=TrNu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/touch-target":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.06930c96b.0_1620257953272_0.529184365391218","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/checkbox","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d91dd3e0bfb8b4c0057e5745d6f7ee48875f1b35","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.03f525f9f.0.tgz","fileCount":43,"integrity":"sha512-wb9dRGabWzdQHfnImMMT4QHth2pHXRAUr1yG4OMo3SYlvwzFJpcspedl1upJQ8ygqFaRaHz1mbTmY4Iu7CwcTg==","signatures":[{"sig":"MEYCIQCmGF3lJ4/zz6erQBkhBLPrVpEovywTlKQAv4h3jCExKgIhAKIHkKt+HPejX7p5zZSTNFOh6Y/A73NYCiQHEZR8UK0J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzh6CRA9TVsSAnZWagAAkAIP/R4IVOkIOQgkgVD+lWpi\nZ7olPDtjfgslofe9DqslzA0OE8KI0RVtBO1hC4MaE5YTxUqO4f3W5lv4HZnn\ngbftLWBBcuoSN87OfCFKMjPl40P5Pdk/rU1ZKqEwxxsFOP83UeDs+qHTbN66\nHNTdZizJgl4OPbCXs+zixq0xRKq5bX/alYkPMByYSMY7icAMEdB+HCZIapwd\neoblizgl4Yi/E1zlV6xwA8x2EIFfQd3Wpl+1dpyUhq3KGxJOZXM/vtOn7rOq\nuIHv9RjLP2eG8M4ON1Whg6J4IttBF2DHy1YmkWwTOWSFt50vc35SBTtSjDrJ\nlVmoHKJlm8dmAe4qWm2bSqr8ogXzwsunBBeWf5USjK3DbVXxkS1v/js6lL5R\nntwhoETZf9DT+5EF5THXQ4FEoiUuXMWHv+LVh1NsBIXsc+EAe0y1GNTdhf3p\nM/j1AsUyAc3/8opNPC2CgwYZuSmSu2EW2hXi1bbepb748TsqicO57EN1B+3s\nhglk2pobkO2l48YQrROAs6NTiWpRcdT/KRRwSDW5Sy9IefQa4RAd8PnKdmwg\nTpFg+rDi5arKXgbsO5HiB9VuHtmrg5L6FMWwq8/g0zd8vYOSy4rsVS8+gPcg\nLvkmWY20LECEb0+13xII/9ZO88080gCvG1oMcZQJP0zRaFwKbQNDxDo9Y5qw\nBMLT\r\n=LUq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/touch-target":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.03f525f9f.0_1620260986138_0.5657063548031647","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/checkbox","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"533dcc9744f0df6ad627742a63838a8dfbb8197a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.e82ba2a26.0.tgz","fileCount":43,"integrity":"sha512-/O8u7NNB8I3xNIXMCpHFl9Zpl9WeDiq00NEwu1YWGok08MAh9olnh8huIsShPFyBc/puA9jcgv1yKUBcc5nEug==","signatures":[{"sig":"MEUCIQCLD+VQ3Mzzj8l3Hws+7zXOyS8D4Y1eA/QKgJMdwfMGCgIgJWLqCiS4ewZCEJ/NeQW03eivhBjKDKJPvRJZDWTh0+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGgCRA9TVsSAnZWagAAkkkP/0IQb2nIkFcNY4SEIJHU\nP7qdizkdiMHjCsEK3fiQagz3x5UltMvAS4gjP3LtUknujV+Qq0uBVACUkn3b\nZUFeo6gF4JG5ffWQgq1ey5KXi09j2jDwEaq4s58kuWFqSzP64KCLfBeCSJ0O\n0ZdJbnS1CkIAyrC3pqwu+V4Gm/FuKdo2onVj3pVH+Y5/lh3JqgEk8GhRi67D\nl+p5w4QfA/kX8jFvostnDxX7XrZ8bbN/OepYyznwdfQBIdpLEuVFXt5HnpOT\nBA6L9CFroJ27V68ClmmSjpuK5JjyZvQibRc06VQRsQUliZPixJGIb3D3B0VI\nDTyK4L3EZSHrsbMrQH7Z/pLEuaoZjBKr8PkUmPY0fpCGQEUfeyZN7dBQH2OV\nRgxVdf5AVVN4frAx0JXb3XR7pezZ7OYtazyWNfPX9VDXvH6tHquWKKd4jJ8C\nZUCbIVbMRVUqO+Lntx/WwUZxBxre7qpabVYjqfRyaiZy+zgWL5bF7HPvetd3\n0nLxXsAW7BwCItWZbiQ9ixi2GJC0Pha6hULdElry/WqUM2foh2JJjaI5SSMd\nzDoLhf7dnMxsz91v+2xYTY71MdsQtarhxTrDePKNSihQVGIgJPn9yvCHEnDs\nGHpKmM0wcr0Z51oGpr9kYu9Kux3npsda71U+DyRySSLlG015art5hmGPvzf5\nA5vN\r\n=sdR+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/touch-target":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.e82ba2a26.0_1620316576266_0.9090654465371111","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/checkbox","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d982e66b5d4850324e8feb72761704aa6efbf6d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":43,"integrity":"sha512-CnsASOXVzXyX4zY42yuwaOeMrZKalJY6RT6m0rtGSwI9yA7tM/NAk6rgkLnsBNznwCeLnJQgsouRaJm3a74XsA==","signatures":[{"sig":"MEQCID3pGQwnDdRSlQW/dtoaZOsOkkqo7HO9wgj8PBmdTXxvAiB55X+A+1LLtReWUm65PlpXv6Xuy2GKFbLkmfSO51La4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":700493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdfCRA9TVsSAnZWagAAtAEQAKCWDhoU3M/rDe4wFX1p\n84PrXVbNW4pNe0pJwn+l5evnAUSQrmVC38An9ydOVbyCybxW7zKMLxhYcyAw\neO8EPkRt0N/YfLt60Sd/FmmhPzjlTNnenT75+O3+ZmKPjavxGMJCPwxxUtjU\n9/lgfjtABn0Bv2Hkixu+swrX0xKK+lvC7E4GyFGDwwG328V5t5go3/bRb5wA\nPjZj7NhRTvokH3wlDp7eaqD/oeSGO8aWJ8mbEXnUisl+eKJ74IM9w2gcQBYD\nqnjVS7PAvYCLdn2mdGsT4Jke61tyIJ7ecxxB7E1badEL4B1oZWb0VsMCr6+y\nKqQ2Wr1OreRQB3vbuJ/vDJ1nrmN9Efj0G/Pj7Arr6rj9FJnZPqkLwGtezhU5\nVQ2/3X6zgPwb6W/OW7KhwPxDtOWMDSQvKkA3DDn1bK1VEav4j+tmCz1oSv/9\nveDz/RGolR3NDJSM6d1krQwQ/qvOkPAFF1NaxlVbrY/EFs3qk7icdTZGXLMn\n4IZV72lNr0i6xxBt9BW5PzVj9LxJ2/B1+xvxsQW8DPIoAzE5OGv+7tLogTII\nC+6u3/+8OmExna1fWvBXL5x/yuXbYB03e/qmsOPgkZdA4uhnSPcPRMpy6f0I\nNmoMDifq/4XfNq7eUijqeXAiq1CF97x7lS/fzvMSo1b47PVvQGXXuHs8UcS+\n8rli\r\n=8pmr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/touch-target":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.fc7c4e5ce.0_1620322143390_0.6185502589225067","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/checkbox","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.65c04514d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a3e17805e17befa2c42bf565a338a1adc1d9f01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.65c04514d.0.tgz","fileCount":43,"integrity":"sha512-meO9sqCTeW07coHUQha+OM4uof7XVcPTdz6qfOFGos+g5kDn0Ne6nONwXPfHG4K8wzkzFad7oSwcHCyzRIcqIg==","signatures":[{"sig":"MEUCIQDL5Bc5iibmnEWSyZbXPUC7aJwCqw2KUMjS/F13a2OFswIgIJSJIIWyUoiAyms3j5eMRLn2Dxprc07LXDdyp/sEPTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjICRA9TVsSAnZWagAA/wUQAI8+qa4ogLt0ngCrbOgS\ngAzG2P+BtmPpmiQUOpcM38msFpSPMefafnZWaAllrSSMGx2L2OQrNtBq2Hcb\n1TTlihc3KskKV5nkiFRX/rHSfjBbdR+PbasrwequEcAscTji0nM0fGkk0sye\nwIB8Fz89rL+4OdVyxny6yGO0MOYojXdGzwaSLs/D5+MT4fx4PusJ6MbUpmzg\nEyniTunexmlX2fF2Q5Yg4d9LZsbx0YCbZlEyB9gMdsk7cdIyB3+7UepOksmF\nwBb4F4PdJoUPdVhbSTlwPi3ac9t0sP4FdN/Xw4hCQM8lzwNw5gCNAuUFEAGd\nCnCKDltDbCiEq1UCGKSP0ei6HfjbWHvsPS54xKXXrKuLVv2VFRoSAc4BqKBk\nTIdZdOZnMMElhdLX43Z7Lsjp2XEzTphAsfeljYLJMUuB+EYpLs1K1TwUnuh1\nJXqJYn/2waMBTQ74O+Ph+JfW4ZFrnDCdVsnDfDN6laQo5kCeNDEd9kKdishC\nWmZJNUrFdh8wfPNPng07vn3xclVPDaiD4vco6jppcJThUPC9g9bruQdMl9es\nR/6bA6fJ4/meYSkfDuf4qOgWNgWarwvACFrPEK1PssKfDzQ+3EcdDZcj/Cru\nPK7/JAOF5dETnA3z8bASTp/F9CxPQtvUP7WPhJY+7JC3/TnFs1iElK45T52+\ne8/a\r\n=SA9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/touch-target":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.65c04514d.0_1620326600410_0.6792398283943162","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/checkbox","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a5011aa35f9b11af7dd530ce5da71e745b9b530","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.c97779ca6.0.tgz","fileCount":43,"integrity":"sha512-PLNUr+7UMJU0IDmVX77CBDiYxtGQN22WwUKFDWaz/qVUkE4uPl7gy/Tc7eEtpV8WZO7KBTko7WBH3KKrX2PVWw==","signatures":[{"sig":"MEUCIQCj2+Fnffhy3dRpuKdtzLFdJ7fWII/9qwSOywdInraAwQIgXfCh3cxwJ9nb9JUYweI4OuXWn7OJpw6n5VDZEe2soU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLUCRA9TVsSAnZWagAA3rQP/3hHdR8Zbu5DMM5afZgg\ns/Jzaikq+qIcouSrnfns/Beo//xs/38GikeoHUtoP0h0ss88h16NEjsbTKD1\nqd5mq6LpbCXadIgbBLlph/tAstnSZIkl+OOjPDyGgZ/E+E1zbyZe6k6lkxi3\n+7xgBtZBbv2TjewsdjE9CyKDOgGeHfgrKGoT979p6/TbA4izt21ztOSV006Q\nsWryIaES7KYp/x08MuDdARY9sB6DHZzj6+qdTKiN7YkppBcxjDEvyM1r8ite\nrLSG+Vi4Fj0P1vqCvP/gpi9pYr8PIODykfXQNZ0Y43FFXrCqe2wOGQsI1qlK\nnGQJKBSl0Idpe15STnBthG4axjkwxrIJ7dDTCbuNhNHw/g76xdOCPIlr5k2J\n+F3TzUneUjneLMkIQV+F/u9gXSgLuvnOWJPOXa0XcEePTFvxZDdOFfKusU+1\nDj0HvUt8C3wzZPHZUrbGRlgvb3hpra/r/U3azeNYUk9gKySQUKfwEpghSSrY\n0Kn57Qjg8IStwKrozYpRKY3fNUJHwHfFHtL7NYQ4lT6sgztJgsWHhFMWgsrH\nFY0alcf4z7yWxMgc4sEUH3WKIc45fRy026dr7xednnceTlYW+jh5IZoFEW+F\nFDJg4Rt96MIaK4sqp+1vtCSSHZaI+sDWEhm2NFNF1SYGMYO6jDNtsjlJwyRZ\n0A6k\r\n=Thwr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/touch-target":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.c97779ca6.0_1620337363662_0.4555517086229226","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/checkbox","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.869d890d4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f00aafdb9c17b717b273804ec5d2d8764fab481","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.869d890d4.0.tgz","fileCount":43,"integrity":"sha512-dEA1AjmD/vekQGpn8Tyxqi3ln3OXIzLYXsLbGB3nzd6jY6VIPTvE7p4JRO2qsRfKSOmd9gg7aZNEpZxsrDxyTQ==","signatures":[{"sig":"MEQCIGQbYf19pO+Fa1xWdVw+/iYpayiFnmRrCeZwlL9Aj2yLAiA3Du0mlHMz9ZW+9NM8wToM+9W9CqdhiN+WUSOV0Jd4gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpQCRA9TVsSAnZWagAA0h8P/3sa4vmg72zknTMCOyEX\nD1HCo8zTkg/IWr2jijHcSIS1BolsiSd8I4fG251AZksLJ9AcngzEU0/xaZzv\ny8n0seeFpmUXcqZvx8+SQIbpU3d3o5WLl5vIdWRqBI6ZfJd1aXhYUjWsQib+\nYOhalTSkrSWzbtWJonajPB9gaR+lUyFdeZDwdZmrLGBjEtSGqz3yoDPs69jS\ndQMhQ/dykPDREcZbwzIj+uyMYPO+S09bJjYRpYSndoCcDLPCBBbqWLZw2lkd\ngiUNOXEUdOPpgW/nFEhfxWTxUW/tkOHS9ImCI3ftlDM864gdCPPgQevtVVWl\nLrSbH/Ofoik3DyGTdP9Nx2/FV9lXazaRs1nzfqaq+AhrsewzkmcW5Wrp0oRs\nJwGz7jOYeWSnw7p5fgZHPz7VdsXGB47+4CvW68KKpc+mxs3T47ersZtAcP0U\nGRvVqS/Klkt0nYZX5/kFVgLA/YYQkWh3ENoRokPIaR2nhRUeDZFEMe4ReQJ7\nzgk8wlfybD5MgUjOLuJXZT9b1ZuFj8P06xjIGHbeNYPpy8pY75u3aEvCGzpD\n11D4tq+RVsLLQ20uRAxwkZ9roUmX7PdC3RlhUQH/lOBDKZunkSSAtvQeTfqy\nHnalz5QqZlIlV9xEFv6AChSuw/f4Q6aaoXh+q8Ay1Hmi0EmAEN9nqSP6fvi2\n/Jph\r\n=kcuu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/touch-target":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.869d890d4.0_1620400719794_0.5919207964516946","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/checkbox","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b4e97400f26edbdc7902d6ebe3534edc1ddfbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ec22e1da9.0.tgz","fileCount":43,"integrity":"sha512-3jTfWTN+MYy/S0N+HuYrSFT79zi7cBUrItUp7yBEoIxZnowNnYHnOOpyVEYKMDKrhJpvtFj0r0NqB5n1X6VMNQ==","signatures":[{"sig":"MEYCIQCVcWg3CgEhmpQE9zyYsfZRio/RhASE2X/YexBr3kKSBgIhAKntYz4bQiLagZDhSmkfbXGmunzZmpvXurPRmmmFgLfO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoWCRA9TVsSAnZWagAAHOcP/0AJ5dlj4FVTEZ3qP4K3\njw0BTj574Ht912Iv5/ZW4xlWYobJnKph6z+jGPnVv+pBCBjobxUcTz87PKuq\ncgAStAO7UCc4OS5WerEfIHlJyB3oqf5BJfJ0Dlnq0Ktht5f9347K1onfiCT+\nFEJMpstUbkjNSfSr8fPpd1qKtu5ivFJDKYeU40siKbeK99gkklfSCxc68zPF\nPCgxGj7igFttJMUMZKM+9zNMtLKKORUiuBckr8BaeBM/y1JIU8spJI2/gpCR\nUekEMifYtJHhHCHoShLcMjVcKdMW4RgozUXJpO1qc7DIq+IX2l73pFIlYXgd\npc2lZt0TbnOCaU6mQfc7N9sctaaDDHHh3byBqAxZJNCs18WY2trGmgGZOSYr\n3E5z2peODyoSqkZ330VtZBFFcmZ8SGvEriz358Stm2MSDM0Zzw2JU8W1bTxZ\nG3f9rZmlkDT49kGYve4tzDP/K2IRghlaCMfmYeWzMmMzK480rkq3nSHR3p5L\nHgA/Nhxov5nL52AmfsBaA6G54BPxaORikEYNcJMvkrAGYtq8dnBI07YwtpDR\nBU5N4SIDNj/CBYkDyLod38zV73iVddzpzYi6cvUSC3dZOhKEKc3tckrNMKQn\nrmsTgqrtyuvmAf5yKC0VX4pvlSO0WdA20e5JlKYowiwm0N3VqWT32lB1iBN/\nEzxo\r\n=55VV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/touch-target":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ec22e1da9.0_1620670998266_0.6293480056232839","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/checkbox","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab232b8137bd52268083f67be2e9769e20908273","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-nightly.7427449f0.0.tgz","fileCount":43,"integrity":"sha512-RHiG+Z6hxXVEvCU0Df0WO2iE5eP4WEkhPKGdlYp19rg4LYEeeJl04bhSC6nUA4Alt+jHry9sIXZ0z+qm8pBS4A==","signatures":[{"sig":"MEQCIHEBOF5qU5OPZojgaA0QzUpwxKjKGLperNgOtNmArY55AiB9CJrlOvYkcXOQ7rhhocW79lVvkWBOYv6L5HbYS3l6eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8xCRA9TVsSAnZWagAAFT8P/3mHD9XqrnxzkITz2YXN\n7iW7r1UkYAjnyB2jX6Dg3cDueYG1/yfIQIAWglUw2CDw9fHA4UGwW/+0Z+lH\nbM9YprOa4FR9JD+6q6s1JKbS5GIGt7ulNNoIkedJwfBm49RrmnZVATVEVbDW\ntEZY4mZe2pgDpgADV+LblyW8Guf0H/tMpHM5CIE6XJ2RpoeamqG5vNoeG6Yo\nY5BrGFIoLiwqMbuE67ieX3Beo+rjZJmBJGhsAyXgVPal/EKYv1E80c3SSH8O\nrwMlY68Z3Qd+AqsAmt0JhPB7U1twhrmthqUHFPx1yzAmgxoVzGOgkDFAh6z4\n5HAOC7EbN/zHL8kQ3BCVso05GU6ukT0c3zGLuY1hGjvL3XWKRtU9zVzJXiEI\n9qEoI05weT+xkgLsjibS1NMcMa//pwan2CW7jt3Bx8EIrdWqnjiTASAPGGeu\n1z4QUXIaCTfsbWuxMLzMtKCwPqvStxSiL/nzjfxFyL4orsvnTAOLl4XSK7y2\nWUXN1Pr/RP/n6jEuk2mpov/RYDZwochB0DeeBRHlrdTiH0Fn6K6GSpRxBVSe\nz9lahKc02cFIbkLThjt+uwnskVcav0YAhNnOXB5qAv1jjV/bO8G5yuF/3IWo\nVhvi1UahXpILwXvjqXCb314hRTupLHEySIrOT+Xgb1Yy+aIhgBykhJ3C8AAU\n2TT5\r\n=B7DH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"anonymous","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/touch-target":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-nightly.7427449f0.0_1620672305174_0.8912225613502718","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/checkbox","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5afc9514175d5e9499b6ecc1e7b8ae04440ac0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.957cc3bf5.0.tgz","fileCount":43,"integrity":"sha512-NJ8e12p73uTceD0pfWX1voAgTmLihlWJohgpjPcSIpHlM/PmQG7nZ9sPaI4FqfbWjJPz7cm+LqgYhJRsHQBhVA==","signatures":[{"sig":"MEUCIQDMgJJhdme+id0vSnIk9cQ/FUaF083b+kP1xzNyi7Jj4AIgBS5CRcYkOlIUqgDzOAMZaauZLTXIdHqM3VSwcf0oqco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawTCRA9TVsSAnZWagAAnc8QAJ1f/2zlYEhkUoueH1RQ\nsxnNKqXtQBPH73gpsGYACe2DdReTTons6lrpqCM7Nudbkfizh1H47ZaBibE5\nJcl10oiQlIbe3MF7Nvs2RZ/IehRpmRxDLkzp6XCMpeFpAEl4rnIbExxZ7Cs7\n9rUkqDxb0CYseD4lvuJaSh7agKmRHOxhB2zyKxoBw6TTGZr9BD9TF39QdsjC\nlnG2OdQJTP0GSJl2MfbDKZRBne+RRq7BwnwL7Z54T5nZecF/ERAPGNd3RaFl\nNRaJDVcVYJByrpvhQZl4q5EayS/IQk/UnMz8DAVo128/TCLl7/GWmhEi/ijK\niotTN/MrhaJMksmm1TgoGx9CoBoYqPJYKTd23zznFJJCPn/nrVxdz8RqeVad\nyWdN4atLA86Ac09dBeriHlRUcEp5PqmzwgBjw9RXeapn90u9vRx9pyduT8A5\nIererfruSMUx3PW9rNQfKg6THb4tchvrDmlpaZ7W1/55rSE5Vr9roHNEewD8\nDeP9lT9nekVgxoJWqSJ7sXxXwfjL5+k3Mwbsl26+0AuckGYFNEuHPyzKzrOa\nIUJFsfs2ktKN6LfDSwT2nfHm/HU26Sk0bt6BpOLYGhYfcmCbSIgvxl5eZQOb\njfmmpSnTpCCJoYS0X38QOx5hzrwuMg2HZ1Ms83nmuh373rcmfD/Q5Ri5ghy0\niRrB\r\n=nG1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/touch-target":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.957cc3bf5.0_1620683794983_0.8844918516742104","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/checkbox","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0537b890131eea00aeae54d670312cb8ee3b94a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.88a33cd70.0.tgz","fileCount":43,"integrity":"sha512-+h56dKRRxWuBHSoVfGIEfiaM49GJN/yKtsCYAfd03zcI+HUcoclkFWP0tp09db1VKPcIQYKPwqb0Y2hS86g9Rg==","signatures":[{"sig":"MEUCIDP9uaBv29g/5BJvmb+7CxXU3OZeBkGeuoQiXeEvhgmwAiEAprodgbSALs5DDrid8I8/YI1dTUncjq9f47vqH4LaP5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsJCRA9TVsSAnZWagAAwSEP/2QPP/4KNPkFzZpqdA4P\nnEP1wr1l8Fo4QsETITMgrH+E3Ck/FCMEhkzxK9Z+t7xSEeJYucItt3xkryfk\nquKTEUWDPuT0s1Vbse+up72xfumZr6UCfGCaC0GFpimL7W4CuZ9310Ao5zgb\n50sgGR9Qq4LZvlJGZR7/V/6bWHh2ifA3URhQZFZXedhjzMzWLJPnMIaxWwQ6\n3uL05dlQVVavkvVDzZRTe8MieD6qgmp4gK3eKBbPOYD5nOKWZqfo5DZV8+Ht\ndCYkEdWiHDZwrQgN4meUwACXR+/vt7uDhf015Htp0i/OAj0P+yOnZcYkq7KP\nOtP9f7fkAqVyFDqAEVwiCK++h0IZVGEve4pS7m/UNmoBxDr0PEZLdQZAtpnI\niHVLeeIAZH5r36wyv7Smh3HXnUkroc3UJ/dvHiRDm5AsWeU/2ieaRuheH3Jy\nKur/0CnuP/oDWAhSPimVa5NJAAsNRjoYXSvZm1tIFvAy6x8jEJ/nHaj61LTe\nMZAAZV1N2pVM4U/vy5+gWy1HfkoPbPII3WtxCRHc6pwn/fOLB76YLdHygo2D\nuyvHZ84L661kWcpfyeyolMHflXWdEcaylb7kAJw1SotXTw97NBby5zsHS6AJ\nowLBpCXC8mmJGAterj8EbT0Pf9TcQ9y51OhR6uXXvtHCAvTE++mR1o7tQHgl\nOUt+\r\n=H065\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/touch-target":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.88a33cd70.0_1620691721186_0.41285715222890795","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/checkbox","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44300393becba190dd6c95e59266ddc1fbad6603","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d20dc6dba.0.tgz","fileCount":43,"integrity":"sha512-A8EAXpYYsN5YnV7V0p0vrr0OcIMmkldLWutXo8kSmGWsJ1oZVfoYE1+xypweoLkpDfsIp1LNR2K+Sp8Yqgn9Jg==","signatures":[{"sig":"MEUCIQDI2kfuA+hg2XJH98AuEoNKqm/PuuzlFc8GmHdtLWjw3gIgM5tD7SIS8AYpORBajl9zacR2auJxWhQKF4o6WueNn2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7FCRA9TVsSAnZWagAALykP/RJClbeIgLxO7+KEph0C\n1DArpcy3TAzpX7AvgQH6+i99O3kWq7JRRdjAXtQXW4sG6M5GLDKeOhN/q1NO\nhHsmSluvElhwQj3RzU3FAHobRxrLtJzrVCkXgOKlDmH1TkRpo95K5a0XqWv2\njlbqQyzKZOrYnb7KDxXiYXxy/KblRGxTxYbd5gSE61cGOiRp6JvznZavEGaC\n36I/d1LF+OwDyDiGQOb467qguWkDEFWAJgC5cOGh3l0/MBVLfEqt1AwScIRI\nCaSyWMH0mVNwAwijeTF8UFHuj/lehahMVmTqfFcNj+uHq2DtBBVru2T46Uly\nn7dp3gcUI+WL7UJ73zED4BJE/uN94rthMSwEJJSfnkFt3juz8jTg+E9MVcLb\nmwio9bJelZCE1rVcm84/Cw4bD78rjTDTumP14VCYiKCtMDHDkdh68cJTbwCN\n6oXbBWwrZ2bISxM6C9d2YnHDlvHPNue/x3tJXHo3R6+oT1Xa1Vvka4hSCg6U\nR0XOt4re7srNH/ZHy9Nl9itI4ko3P+zTdyU1+9ZbuvT2nO/b9W5HsFoVYsgA\nrn/8QfjSA9pdsXv3DqkgiOXmMJ5IJAZhNJ119d3hhPcXAH4zJ+ogPeKa4hgg\nOhz53a6haKmjnx70KxNIT04d2zymUVxTxKgB6k9jL2JqwyShl06bNb3hzo2a\nuu8W\r\n=q3HD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/touch-target":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d20dc6dba.0_1620692676884_0.2557031392895417","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/checkbox","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aafe7fb705103fdc3c803b3f8949ed6c3cdc092","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":43,"integrity":"sha512-g1gglIfgImIuVW+Gec2Bc2jF09ASnrFbfHJMLy6eUXftPmPZ75GQ1jY/W5XmIz0u5jBBpCmcYIfUFN+p4QWKTw==","signatures":[{"sig":"MEYCIQDF6lvZqv9PLglUqcvJsXSCuwkL3Lh53FCbdLfum0d2lAIhANfQK7UvU1ePChe4aOhFfE+ikWEuPGo+O2gQVcN8vle4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdauCRA9TVsSAnZWagAAgKcQAIbTU1/tOAtc++WHPiUt\nFqXSxnkIFtUiB6SFuhNTxnRb1opOG/LBRyD+//oQzCdbuiuqZ2MMKM4cr6si\nbtIZaU8ux4tCdpO/V54C6o/6Fcdd85vLtDmz1A1BxEZFaUaCFCEcJuNU66lN\nFBno7T6uOSgfF7uIxomzQZA0VpT+2FqzF4qSmrrTPbotRWYC6Xvy8ZQUEG6B\nybB6ffxXgnJQzCCsw14xmTRe12qCxwRe6nNgDKZUWMlC9TTKWM7XfRc3neB7\n8RH3yFjq6uI2914+0eA2D/+yRlC+LaQi40eMBaYnE/rNoUvLQFkXiSrVRAU3\n0V7d3+uzXRfzMGZG0IURlx4nUCy4uuFNQfPCISF+S+T8RP2moP7XMmBPvZ6a\nmZGDz7lBxX8cZbtMJdaEM+8hGIFZCcqruACoxltqCn1vbhTLrErBns8WFsef\nZl89RDNJLbhZrx1YDjrhpeH+w/FfDvcTJFvM1qBbdeAmzuMi/aDkqAqtXWzK\nYS0RnQpMXcXqCjW0v+PQzMAtGx8rCCoKKNpToNltSdBLcHJUPoaSV/Qwmu7U\nX7uWyCkM+rtIxNREtKwjVS26XCh6nnxAAMscP0NGLFhR/Kprkw22Axk/CrYP\npQ/W8BwiiInuYQ6xt49Nsu4nxd49xNnUTQjVeC06MImtMCcDuUj2sJNNY2Xh\nCSwa\r\n=pwrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/touch-target":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.0ce2fdb02.0_1620694702046_0.8802064774580884","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/checkbox","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.cb162da37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05f41008cf978b5f123dd1e331831e17935e1a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.cb162da37.0.tgz","fileCount":43,"integrity":"sha512-bDq2+dJ6t26oDCJqpAUTwQlJker7vvU4djltcQdSqKI6KZzMjuRFE8K8PcQV4LbjAqQ26adAiGw4nW/uRM+MGQ==","signatures":[{"sig":"MEUCIQCOL9BWCgItohzo59b/N42IMB7+b+FjZAi2P5FFpc15NgIgeSkxS2Tq9gA/gqGHuy8jwaQ6moTwzZ2RhErCssBwVSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeS1CRA9TVsSAnZWagAAtr8P/13zyWxihGmoC0fsT5Un\n/uGirZhII7NO3VJ3604TAf17p8wy2DWO34FUcj3RswUdRa1B45DrtwLelfzs\nX7/AVoJRtqNJ/0xWGnXquLAxOIAJiIOxrTxlfYJ7V66ui1qKn7uxDKuw1WAw\n/pL3U6zZ7C3upK38qNdAe6dLM8hIGtjL7YF4kIs59qHUftfQk+wakDfeVfF/\n7Nn88bGEcP73+3jGjcs8Z0tmrT7We5if1UQJGIUxGodWA1dJU4nrnmDTii32\nO3ViEHrwmiNII4eu0jl9V6Rry2/cof9Nzo0j3YKXtKl/YOtY4vP8TREz7Mcl\noXqFyzEvaEFN4BQA7fkNTkGSI2k3wGYSoNd04+D5YE/JGgCEJeGR4b+ILWW4\ne4aqDGLZsE06wMS5dArc5Cy5fXEm8t3NQ+DZcrCW7GxEGTmNX/7w3plPVqew\n8vT8kwQHsgfKvWgg/3Wjt2N9gbX4l3UGcv49rs27AFOamJlRD1Gn5lfMcqTz\nXdcHA/8wAlBZpmJS/G0RfUYtZcvLZZ1syhz/+W4bqF+f6pPeBE8jugUqhlcY\nFxwbvHhvSQkc2zXroFIjorPXOgCg8sAy5oYcYJJ/0npUk4X86lCMmLADDVj/\nZcILJy8UvkSSdXMiYDuqq8o8wpoMCOGCGwU+2PZR9JmHeeuLOdHRntkwbQ6z\nt9ed\r\n=T8PT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/touch-target":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.cb162da37.0_1620698293324_0.214156816641776","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/checkbox","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb1efad7594ef207c5c8963ad9fe0be71fcebf53","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.573dc7ffd.0.tgz","fileCount":43,"integrity":"sha512-d/TVVoen8ubEfi+fli3YeTJGkHeWG9roq5AbrQAqY3Rs5jQWkKSmgnbxe8ZJjlmfBA85xgjTStebH0MVg/sOwA==","signatures":[{"sig":"MEUCIBD5LSh4dMgSgSdqXy5Wou05gpvE5Q4LjlOGVStcV6gDAiEAyvRzOw+7o/v0Qe1TZF3FZIPSxbvPOQDP7HHWe7vwIgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekhCRA9TVsSAnZWagAAUUkP/ixaQNPaWpXrkWoh22Df\nj8Rv2v41coDe/VRFmJmoGtKbXNxKaZz2MzVIhVBCqKaazjhXUMSX3JTAvNjy\ni6ptTIZzyC7Pzn+hmfaZkU4Y0OQ4wz5Sg2O0rulY0bQi8EbSSd9f1dxb3HWj\nuRI3pUdnoRddJZ1QC+vwk4Lkdmu4JSW/J859MMGJQU8jz6vjBOoijS7oil5P\nNNyaMsFwTX7n/ovt4uhFxYil2FIit7o6ZvzJG6TweEebXElz8yCsxUp7yf0B\nLRl1+hgLmeNY/LuUz0e8riszcamvor6D/wbbXjpnk5cRch96dIb0yNJr/7j4\nDyXUiU6rKmX8CeMjzqDupgE8IEtM0YGqxIjuCaGQTUVWvbnhB5QVqznPvWJF\nBU03hAxwk3AEx8aM9QIxnUm5icmrQKR0HsMncRnoPr/jXmolqxzez8/rBREw\nC/zvgYtHb9v6CxOYgbToDVipBn5r6yXYEUpXCqMkZY3AKulLCE4p103nSc0r\nwA09FzHFYXDWO42tAMPOJdUS4SSM7UuNWr2QIZlf/XZ69NZRHXpwSce3+Z4F\nbAEd1l+aZaImPh5eByJys0o6pLcfGHcQeXFM3kAVItB+aJ6BuRXrFYd5y5IZ\nSM8H3ua5xtsVxTpkl8LfFc4OnSnaBWl1nDGyIlPPDW068tL7HfDsmVrPilod\n7cjg\r\n=Wihc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/touch-target":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.573dc7ffd.0_1620699424583_0.18242289456762117","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/checkbox","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"077de0e79b3ecdb229fc639cf0924cdf1d8c29c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":43,"integrity":"sha512-wlFOK7Trm14j0re5RJdqhZ7MdUMuqS+bolSEfRSfCLCwfEQkZzGuMLh5CNdTliFIDj7cJKMA+T5Hmbh0ksaQnQ==","signatures":[{"sig":"MEUCIFeTqlP4UcuFPNJ47RwxvwqwQSP9/bYnfbDvExCKUjWUAiEA01c7LfmSc/6Jgsjt34mk/xzmhTaYzijnnEtcw/ftGrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxGvCRA9TVsSAnZWagAA6IQP/3363TKK6PvIFYrVLMko\nNWN7nbkpU3KbeafH6aECky6/8dO/Tm4aoQYNne/PC0B0DRElqOf+5KtF9sec\nSOPO3BT7iJYhx00zRE9Fkg6VGdJlAgYIRswRvuXH3Uem8ceZ9oSwRyCaXFL0\nUOXi0rzQMcLSAWtjOwVY8FJDW5itCp+wxEMXseLmN6bDjRjWwNkmk4W4J/Ue\nbXwpmaULubHaT+FN+yRoYWo8LgAc5SNdG2QjPzh97FbRRJ9wj6BLZIPusqOL\n79vGwyAs7lfOVh+0hV8frn+TmEoerDkVwoYrPayqjobuOAa+R66rrezLjTi2\nsKNtiGYgJC72i66mLOoRyjMBJfUReRXrerDOKxl2+C/WGiCpk9jwZfo8QDXX\n6uiV3BEDT5tjHQrnjQx9Q0SmYAAIdscKyFD2nxesQzfHIv1tcf3rHWqRd30s\nSziEq9PmkxRjfJ2xlFNuNO7XKbilq0N7jCRaS02n3d+S35YunPFTvqpj2zKV\nFVUqx6KUU1mx5TEIgIAMeQPG/MexaC3rebk4qyUCYCvi0gdJve/0W/Zrw2A6\nKnmjY9hXIuV0kp59YDOlr1wwQ3YsPRy5gIYFLEAICAMPDIAVg6YVERTO04U4\nT9NN4kGLUCS1k11IPnPjdp2H1WHG93r6saT+jH0EcnOhd6rdMmN1LnfJ0Xnm\nbMJL\r\n=PAI+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/touch-target":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d5f6ad3fe.0_1620775342997_0.796884680641303","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/checkbox","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6883250f3f791c0ff75cd1586ef18c2b2820e82","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.25751d2ed.0.tgz","fileCount":43,"integrity":"sha512-PidGYFi3h4aZIHZbYpLCjVMnQjuDxqmXX3kdd6My9Dm9fJ1B5Y4PFGSVvhYexIcOIqoaLayTRoJ4KpZpcLTtmw==","signatures":[{"sig":"MEUCIGE0nN2IH8SfmgaeOC6ZZgBIjl3yEvN15/1HCkQktiVyAiEA1Hqpxq95MMiDZjmtCatBU6QwsUmkLMfATQ26egX0Gjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAZCRA9TVsSAnZWagAAoM0P/0RcpQWu0JmaZJoNY4rc\nP7aiA3t5z72/0sulGz9qetojUJY8OIg2dnLt+nxmFwafW1me6OfvYfnftUVw\nNUg0ELvtLQSG024NmD/L7BZnauNAhHoG+xs/CJZoACAQeLP/bCfzlf5OSRM8\nJMkNZ+9FP0d0MyVproQPLNy1TLI2atHOjtZh3Ykts83WwVLXeqHk8PTlh7a+\ntSz5709XBQtkk97yi5A16h7TApBdVwyzYzF3jYSbMDLrK7IcCvcvrmj5nPWS\nCu8N4l/JUS9XRaGv2d0yS+HjmNBHcde78UrgZAhnAFCN0VAr/HkOzE95MPgP\np2zN6SC3SOY5EC/2LawUEoV47NGmO1ewzBiBUsRTtfyP0iyJI/pFbw20iCIn\nqk+SwpfqXKtZPL2as5TGqjZqdJ8zQiB0Y2EcJx9dBfp1Drx7riKkShziVj+Y\nB0QufOvsE7hmgydLXOCgOjMxWmDxdSEoB8Ryhdn3tV9Kksh7XSwMpBkVHhS9\n3wqDKxO+p5Ik84TdoJcg13Ic+AO8QsI9iToAULrY/mO+0Pr9Atf2ubrd1gOo\nF7k8KSiXegSDVPAp5/qZEh7Qxz7f1851m271ztzGDK2U7R37qQUybsGO06X/\nNHfO839OrifLmpR7rV744YGIFzAxGuy5n4oZRy9VJMygM/a27Zx6wgnZDf2M\nJS4d\r\n=p2p1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/touch-target":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.25751d2ed.0_1620836376536_0.03477900599451744","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/checkbox","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e710fbbc1f511637dd648e32bbcc7c31cd884439","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.a23ecb682.0.tgz","fileCount":43,"integrity":"sha512-yDlttiZxeWVoEs66bJ6zl96olAAxhkeCLBCrZEJeb8kOtmE1pyEQJXiNev5LmNqkYeWHgxAYILdgFDg8whWESQ==","signatures":[{"sig":"MEQCIEFA/Ooksbfw3FaW2cxj82kTzErDs6BLdXX/cPj2V6TYAiACdGXslQspRCOHLQOXyKyvCE69tu8y+5yFx1C6yH3GXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0LCRA9TVsSAnZWagAAGDAP/151CLiTmPAa+7SkBTfm\n+l6P9pHZci37XoGANA3P2Lc5aRldsLYLjZiDeY44vqALCiNci+HA6Pxz4SGP\ncgI0/0Qtje7spiU+KFz9V4/7C5eRPCD4N/ss3kjgsW3sWJFYQY6q/8rNYKQJ\nRyhkBV8+Wqw5EgGU87t75uFalPhLYFeovXNLwAcbUXBW2/8kabTFDAqaPkdZ\nfR8BaC+P+OrGh38z2zG0JFp9oI1FuU9HQtiAle4+K1WhSoAbXEL16/V17tSw\nkTr2r81FpPsTz9BMAL6ICtE7VNSo1RRUPnnMK3G8lOEz8ZeDKRCrPrdDVG7M\nI107g3wcmhlho3qsNKVxomydYFA0JNXZpCD3GOkfLB/LC4TQTqboS+1MI9ww\ndlgPvbE9TnzDQzmDEoUiHqibO9mt8pcwfrjfyENmoxqDNB5iA4U8KdCmIDj4\nETzK6ZD0BALzERN4DaXjjdOMuxT4sL3PcnQz+2oLoLPxxTChGFMG3CapT8gV\nMhJHHj6Btebh9PxtEwQGeDBbiDQyVhZ9RUVc8wilz5o3EUwHUj3klZuDN1f/\nGbrRITwz/3zW17ttAkZFbv8+D8Q1gEWn03IKum+kQAf14jiRM2RME0RLuseG\n2TjvwOJHIcVkaX7NtrjhsEfITSvExE3tEmzFuFkwuO9Mh+A++AEuLYf4P/YK\nyH/8\r\n=BuhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/touch-target":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.a23ecb682.0_1620843786790_0.48053591821374764","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/checkbox","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.33a954852.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f208d3bcfd2e31edc1146598d9b7f16c9c0407","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.33a954852.0.tgz","fileCount":43,"integrity":"sha512-/ul/3OLf/8Qo/y/tlo9Zjcyxb02pw2mcDBeZgKnSdJ7MYLGqFKjst0e62zdGVwmxuearDo28/fEDx342UorqWg==","signatures":[{"sig":"MEUCIFu/JCgxJtDI3aQvefWzqxgSRTLMsQKriLuC7SSIwhhZAiEA1vVCwPGEN12NaVKN0+JAiixIzAKqkbjeNxswIr7aABQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":715062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUCyCRA9TVsSAnZWagAAGHEP/1jdwCCBRbi2gr9Fmaqx\ntZj9N0UqRcyJFNDpqNGeyZfGvgabA1ofdE7DdOgw/rFGrKszFEjfbzSe8TYU\ngBtpLtDf8B1vLeP2PFBONvknRFr5pAGUab4DUOHpN497x9JzyHUCrBQoIn/H\nMCB3+UhE1Zmrtwn5sMlHj2NvIUU+DV6aRO6VDI6l4TAKpEOF/SsrPisCypFe\nqKBDDRyuAEonshzx4UiAGqoBZw8LuQRJKxiUWKbE/oagSugomQ3B+I3bBpPh\ne9fMGx8riwWCTRlHucDCu6CBDuaohwB+ibux7RZ87K/Wb25ynEXpa7wbhWsp\nlt+YjO1gCDL4NSynBAA3HE2F5h3nV9QKxPrJxywDL40cBzXYJjVjzBPf1979\ndx5PfyDnqZ35cMP+O4mji4djbVZj8Yn7FHg5/9a/IiSRUqPh59fzApqKtqjQ\n1AiCBueUK9qC8/9G1kvbNo1x3YpbLgP+3N9LV0HS9vkNhiY2nSchryyngmTQ\nkysY6QihekjzB6QDIH5ZbGwm4dA/UKiho3EjhC8LCswKf9fWmBOE9WwofhTf\nwECJewwzwY17BaMyuxcvAEMz9sd6LHKO8w+8Dt4L8y/ia1/r7RuXXpASFVpI\nHZI/xuuyf0u774FsYgW0OWKmhIa0W0imLowZgO7dD1pt+9tif1c0RRuIsPy8\nhwEF\r\n=cvTZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/touch-target":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.33a954852.0_1620918449389_0.7684626670355716","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/checkbox","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.a4484849b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6e9015ca0ee468cb24fe5cf3b47a4ef52abc916","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.a4484849b.0.tgz","fileCount":43,"integrity":"sha512-FB80E7wQ69VbaKFEzyBV/3M4Ns0LuB1c3rBl92b+sjYuc/FK3HBQhhg4dhSbP8zpFaxs4VpVJ1oiR9MkxfmONg==","signatures":[{"sig":"MEYCIQCU5gSaxA1dSPkuh6zrvHorBmVe/xlVkjjJN0IhBQdfwgIhALDDB9/f81QjgkHOAuNa/S1IF0gU29T3J6Kbn/aehodZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":715062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYlCRA9TVsSAnZWagAA/7wP/iHaKUJdwYVBM+Med2aK\nEBVwS5iwegWS/KqlOARorBd678yVxKIHFANL5sfoW0Gr/9HKC82Tq2vxcCLn\nHeJ6SybLAHDba5cX9l2t/quvqagGdVnBu3sUEnpS2Vv+KvV08OD66C47uBYH\nJscFlxhrPXuJxmrV72l7xleSfOYiN+m6u4NpSa7LAAuAqfHT0Tu0mT6hhEPO\nnJzO/DX86Raj8LU0DEaD0s7f9I8NejKxTUFMJ3oPYjcDGGPDtU9YzVUfVVi2\nOVCWwnQ7QKjlHvGiplHbFSHIGwCjBWNtvxn4jBvyDU3nAGqxjR8oD4okOqq+\nf5dBhg10abML/Muu3UhSyNifHsfvW+YaqTONnVOhAmpJOn3jCPFHXfG0wubF\n+xnSsWJFa5elZT4W+t1xl39rFozb2RVPIe82PTMx2DNXaMkxzoRzq9HqXqjp\n6AEXBM0587usd/1YFGcllrtl3TrZtqsUJDrNZXqRDD2nQTMmdUHvX/mxKXf2\nfFYf79J81eR8ob4H20k68WVUQDOedsqZn+iGx/Xt40gHvh85AKVjCjzcEZL/\nkJbnvBW2nSjYC8JXTRPCzxCMSZ2O0+Rb38A84HHmo2vIbZ97k1HiXKVK7Q/h\nowZ91H9JIlFNTKz9qwzRkRfz+nz+XQZanO/60ElSkme/9SLS8jmD9G+YkLv6\npinS\r\n=nIhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/touch-target":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.a4484849b.0_1620919845003_0.33942083280144164","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/checkbox","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515f3bd8d6d93b813af9a31cca9bd8dbc304e75d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.b4c3f513e.0.tgz","fileCount":43,"integrity":"sha512-f6rTR+RavecbKfQQCJKRSOAOh/rox8Uka43I2Zh3DwG5RgKtZqVAxOj/MhMXInxXMBortSkVJZbU/eZe86a2pA==","signatures":[{"sig":"MEUCIQDODth6GmB/zyG46+XA6J2hXOoGP71Q07TBQmcM/ruYjQIgaqytUe6pw6T7dVQPEMIXjuq+aSAZOrWZ7+jhubpZWAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7eCRA9TVsSAnZWagAAVUUP/i/Ly3i4hT0l3wvaeqXY\ncuzl7GGKjLM/L9jW9tfBRCXaxaiEoSEgqURLCcosVDC2PzJmTFf+7te0kf8k\n4JxKWMEBHO9igEw7wpMPbmqdtjGGcrgtSdWhK7HF8SNuuPGpbETnk06pWqHy\nlcCRJcW2UHr4avgASn6TsPvQhpzhx2G6Hsh+kgajjAySStAgRCir9lGnz/br\nadEW3cmDFumcpNImswn6wz1ODYkggtpFbNaH2m3i3Cho3W0iKrgHe8l5j+Ng\nVhnt7I+ly1uHo3VZizOKSVQf57Vj/G9DX+k9SUXT9qZpc0ogWVHgfACK6wxP\nRd+c2MGsnp3FMoaWo9OrcwUYaw4X6F9+wuj/+6gnhNhy4HkFgUquBZ2R6B32\nxnCFELRssf4mx26CTuFF3Gzfl5VmypDY+eCpgwRe+dV73HokaTgiyY1iC9BS\nLH1n4SOEtCJx0L3BoU8FcbGjtta8ydmEupWvYmzvVlDYgW4TAElakztNKdH2\nMTQeoB9XF23jhKLpJ5FvyONAIldKksHRF42rmkQIjAy9GjYnNTdZYnU4zIv0\nqy21XKQQrawok3qM5xC8bFG06eyAw0n9WOMB4MCqjqRW93RwhTDXUejFXou5\nSitdfNwP3/MZRytZCOxBPYlR5BtU5eP6Q7naZIhYjEo9itlBI/JQSGll31Ou\nt68x\r\n=B6JP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/touch-target":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.b4c3f513e.0_1620922077998_0.23047456792671128","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/checkbox","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b5fbaa01743387fcbd135f2bd322324c0613bd7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.1a8d06483.0.tgz","fileCount":43,"integrity":"sha512-j6N1dsVIKqNuXliUuDM/06hdqVOF90Kc6W93nERM0gp5FP0Wx66IuOS6RZV4+RiITTy1AtmTR5HmKIYSq4uPhg==","signatures":[{"sig":"MEUCIQCepEoHCbC22Ekzv1rr9BlSnC4eqY3zFTHoVJ9AZB+8zgIgEhbzTgd9G3R3+6WUQCgaen6/r6DdnF+3wsp/TSSOzPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":701587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVApCRA9TVsSAnZWagAASfUQAKB86toRP1jlSh12smJp\nIFQHzuDIPlktOy4nLtPqAhFZvebrocfDtnWy+dz9/A1gin/IdUgQZil9sde8\n6Kt2FY+FhPk/Z2XB/48HnDeNPQUrIOQgUaBp8IGqPcTglkEBg9YCI22JpG1y\nIFSVFjFkFaByGGG8y9K5tgt1eJsNtL0C0cnlTfIH0Ybz3Oh75MkUV7PgQsqd\n45oQgg2dePXv/4kcrzGK1OJ1SW5HCWf3yarmVti9hwkq+qKjqJikFejqwpbW\nvl+u/4YDha662sUEByMsQfVTh6oEcOW7q65AcJrGOO9JiSzNctFBftqT6+HU\nS1Qk556lRACGM4C5p7J34vKhjxu821bwSracSaj2G/amkGBGtcCno1LmPOpE\n+S5tmjhVGEGTu2bqmi6p9F7W7n42Ar6QjbMSFHvJjTYpPJ0TFrKtFeuteH4Q\n2gxuu6g6bhaKQqu7SOEETZHinX/HN1bWLi3LLZB6zVYY8Zucl0A9Y6QDE4qF\nGfg6bOB95tfrZHQea9eMu8fbprBkuWPa8qxIHWqNUpQrYwzjCR37b+eaSq9o\nyQBDXSLFo7DwtWEKNK0UpkFYLuNTOLL0txcPcrFfxpp4bCXs9ktbTmVvGILw\n7raY37r0QQ1/74rH8rdzdIIXwWRf2EnzJVZw1RgCrAdMgTUjISVraKcMzBRx\n5M3c\r\n=L0Ot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/touch-target":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.1a8d06483.0_1620922408820_0.5816375280543438","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/checkbox","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8e6081836.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f7915e98d6a85ba9f698d30e5d4ab4a7babc039","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8e6081836.0.tgz","fileCount":43,"integrity":"sha512-LVF6ZEKV/8UPnrjE39dQpy0xGgreIsQbdOPL00G15EWIGxKpFb8kbLS5dYwHmyG6b3+ur7MewZe+7acxA5p8KQ==","signatures":[{"sig":"MEUCIEMMVtyPPyTcrtf6yf1GjiQ/REdZZHxQrgGXEe+9kRfdAiEAlgNIc1mYVZtRydJlv5dnWGnM4e5B+3QnsBwmQ7IPYLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":715050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5MCRA9TVsSAnZWagAAMFMP/36Ez+oETYSl/8Lp9Gqi\n3jvbhF9vtwH2uYdoV3J7QUxHNEf2TK8b94zR0F4VEYzqkJwgmpl51BrJG+r1\nbnh+DkaAugnB/0hzjiPT4gmdOQPuVm+PUlbnhzHQXfMCRFN20yCigIByYPT/\nI222y1WF/2k1rBI1A3my3EApxRdQM9jR+5bAWV6BfgLN0b3A2DE2rF5tyD1z\nOZ8+nLAUyZzXYbyuU+SpXLkGn8doDfUrQaOJ9Gu/qEqypqUEV27LwTd3Hp3M\ngXbNvHoz+SJGy3FChB20Q8Msnyad/o7zIDII2oCIahFECvn6nD8JmLzj750w\nSYQzPMixprF6uy4ADZ/4OtXJw6hYDpQqGgi/mpgRIWyMm3FIc1KIOSFG8jP1\nLGym5EYv4QJIiWJCOjEA/eRdWG531osryKXKVsBmbVFNCeBO2zl5YRlsFpr3\nr+oyl+PavCl/LvinjzqldiNt55hKmNMMARH1DFqXToEW8p/dgmnOrfapLTG1\nmi8ejdFfs6GMMK6msCWbh975ZJicFrIba52YzrlLW/58Ud5zQ9rdylBPN4jl\no9W/DmkwfFtZlnM5xr4EE4RBNMtrj3myCnsiCAOi6Nm8+HepKwSlzmTA65HN\nE8tkXCmvo/yE6u3JtND63zlTds9//ljWs4wkyej0Gwr0H9fS8aZ09w0GdRco\nISU+\r\n=h263\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/touch-target":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8e6081836.0_1621028427850_0.05416791827181355","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/checkbox","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"206c0228efee67256a1c253c7ded46f57baf1335","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":43,"integrity":"sha512-AB7ySPwHSGztcYt31P9Fm+j7AFbPdLsSRBLScnX6CtexRHQ4M+sRCW/0eDCQ9P2/kN4I5Tvtl9XQzWNwdkEjyA==","signatures":[{"sig":"MEYCIQC1qMwKgOWTWIrHvCyl+Pwi26dMvihCciUvBh1lua8pfAIhAIYMznmuUCoDCFkWTBmzDJUxGdLrxoYEpd/Ac7wuhYYC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFkCRA9TVsSAnZWagAA16wP/2rMQKfpV7czhDqSvI7Q\nZW04q2L4JparMG4ndBKoPCt0EchgBJIPQI7GHO5lRCvOV0ZAmwg244nLfP2f\nqV7Bf6Su2JM2zc0aGn9Vwkzjc0cbwLUasi7bD6azUSGo4VatFALDz2uWXyJt\n8uNqqajk/EJ1yE713cXYBUECTMHVjIz/kXG/15GTqo0zLdig5XdOlVroHsaU\nXzltPFAovFD4UjEuA5Sxy1qHQ+LZqNez45qDgpAvzRsBSJaoBzmqVwkMxhjh\nTOUVtHqdPi1crRic71f+UjqCWcR6fYEGIj4JOgYDuA6MZKeHVMp0vvptSETJ\nzDIpeC6E88rPvIZo2PjUHcBNW83/zoHExQyY6bCL0BsfBT3GDsYtuYcpgVeg\nPZErhefOfqxHmtSjD/aVyo+ZCYdyyVaxb0F9DxMvXfXbgMq5RmhQVbRbiJB8\nDjYPl9VOaNci+nBiOnCP2ldwCT1nG/7MmmmwOgdDU+wMAToxuEWJ3v7ESQGw\nKMNb3QmjImKzarfTd4seIPohrYEpsdN8Xk0KVdSsEGqhNM4+bfaKdNZSibZu\nQFLisPi1l98fSmNszcjxN3E58JvNtWnTdnyGjftBzWTvclHWJpmKD5RsmAa6\nl1I25CbRlJv2cnU98I5WiDKz4AkaBx8ibyaVf+xutDjcF9E2jC6d2VPPfKA7\n95z0\r\n=REBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/touch-target":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.a2b0f4cee.0_1621029220217_0.7539092670341159","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/checkbox","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e97926c7407e01ac0e4a71a47a9dbf7d291dac9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.e8e39ad19.0.tgz","fileCount":43,"integrity":"sha512-LUDmtfLadyq627uGOtcKtB3ix6u9gSAbaj9XCNKCyc0EsEg31fx1zMAigLqjqAyzuaKZRCKSOUKDzvC9tYoJeg==","signatures":[{"sig":"MEYCIQCkmGyZXe8KFJO8QwlVbHcuy7jqgqo5eWwrhfMbiV/CuAIhANZ4KYjubR81DwBhRZgH41IxcVa+mjv7bs7KBuhp+QBF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/KCRA9TVsSAnZWagAACLgQAIBTEv73D4fqXTPXE8Wb\nlSOACDsRCgcFj59KOMorLlAlnmV535S2dMxivhqgjf/Rx/Pmd8zfurEAwn00\nVMqxAxppPD5FWVCLHNCb06FPYjiw42d6mfQS/JzBuL/CFzzqiyXrEcH+0s4x\nOatISLPk3nft2nYx8UrYPDNz6OaB9Hf0R2XJnUHp3yhhIGDOVurdW2qystS3\nOdcLWvZWn3u5BnOvs18f4Iq2Sk+zWPigL3NISLdsBPW2WWTpMlE4X5Q2Z0zJ\nN0SSea6gIqBKhEnO3V1ELEgaLGHNQXPzRxZAKlL3IpW39oAfHRoV1myVzmkw\nR77Jg60MlqN4MtzmVpQWqjEjBAnXY78+cGB4EqHcHq8gsE9nD4GciittOmUO\nQIURIxb5tfXNvrMpNbj5wpT8Zp1QZvh2qtKIT9YZxQ1BZTfS77gI/pMVT/l6\nWTxp5YC2uXbenRNTEY5DdWdIRlEXIReVzQ8ojrKZSm+YMtleiDYFuSRkVyZM\nzITAAXblvtaIMHGVeyTViK106N2JhSFBmXJoEl8fILezcUDallkck5KEoGnu\nLqSVFpo1IicdhEDBz6mYzZT9oxk9u4NoeS4Icwnb5KPskKv5Etnrre7SK6Hx\nhyyK/90EiJOeHFcojOB2I4Okz9QPxoCMuFPAd5PMxYAlQMrado4NZtrvHIle\n4+ED\r\n=WjSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/touch-target":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.e8e39ad19.0_1621368777523_0.4053917551645916","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/checkbox","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee329819f3577726b8cc4422019c0137c4420d7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":43,"integrity":"sha512-93o2lUfY/FLSFhLp3nP1gMmcuygDlN74NEVHx+pQDc6vAtqmLJGH34jiq9RaUwj+GIekq7zzVYLI4QKKJwVDgw==","signatures":[{"sig":"MEQCICC6J2NgyK2u+P7e64wG5yRBfdRG1Yfl96YzieMfdUqAAiBw/0eX8SWbzVrzhj8UFsJEH4+LPDAkCtxhdQ5NRI0q0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6HCRA9TVsSAnZWagAAtjQP/iNKMyKJOH3VC7PYsavA\ntXCLBLzGzyNCe/PeEjizgZOLV1XJzRSXycpoCtj2v07F/vfl2VkwtqeXlihu\nW6GPRY1BLwmzBdSi88lXDwHpfAg3N4mLX2UG6fukXag/Ciqq9fIOYF+lRDO3\nz6JDBYMeF4/CjTz4gOg7rr3bu1QsEKv2FLBOO3FSFrRwlIVJ5guywXXOfeeJ\nAn/3LR9XNoS8mu5H6hNmHtEW30LfqkV0Wsab7IqCrrF1T3G3P+V6QxgZL6lh\nJ0xNV9T4Ie4qM98aY8wOrJ4ffj6xaxXqPK7Alpt7TJs4rtUC97VLJyrjm5uD\nnqOzFsP9WXWG4BiK2YI/zpedFHz3mwEDdz6s/4FXLiuDU25TV+FrrioaFlO6\naX3SiQ2AgKo96EojGpMnsy2F5X+WHPL7+NqnPTs7tVfCZRcpcG3SF7ShmUKG\n0iCWaaEH5Jr8AQAhSPrMgfpNss7G6WxuwHKZEKW4GE7CftcYEYQ0LBJbmbsm\nQ85Jfhdtal81b5py+ZCCu6gfelqjg2jqvIYk1F0aljgMwfeh7zdbgFEac02L\nE+oIcvmlFZy654YSihhY6L1MPQXRgUoiE4+h2T2xgIAb69IW97Y4mu2uFQcP\nRXZJzA2x99OdeyRoK5b2OIjhfoQfECZ2zDZ1k9ElTTVcCyDO2jRFaUy9xemw\nVsnw\r\n=cZRH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/touch-target":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4bb5eea2b.0_1621438086493_0.5413742745906958","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/checkbox","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"230e73f3d47e2160d477179dde55e80e8bc6e459","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ccce99cd6.0.tgz","fileCount":43,"integrity":"sha512-2T9wK01BGNsBXN7f85t+4gtYxprOGt/n+Led0u48tCBNd3EoUwfCe7uzYvH95wiWvchTCXjsaaqrj6zbbTY2wg==","signatures":[{"sig":"MEUCIDoIFncdhoshFTJKXLQc/GV7WGd1xD4bejDVjb3Q7h74AiEAw3bsAkBfQCJJFkWTs7sgyrO6fhGWW9ee6rKZg7K/eMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPHCRA9TVsSAnZWagAAdQMP/irpMz7+Jw1dip5y7tA+\nv/y/Pc2VKt2Z5NjPhryGqvwoCdAjYsWyvLE0kC3jlRvF0xqXCi6BzBbJz4Pr\nO22oSoF+cw12tws4ej1w/ZX8dTxqMIIUbG9COy6RP72goi8FcN4oCNCdIfx6\nDfdeponB/ZMtTEHnKLLg9nznNWQ49LvMBsnABpBk3co2JVzJFG5KKt3KaqIN\nOHkNNzukAfhnuw/A5/kjzvOAKf//7g02/0qlKG1Ni6nMdxtpkr3qreBg3MH5\nx9xBDcZ+EwMdU7XsWEAZw5jNJ5uobbj6AEsJfggwmB2F2aZVM7YVQLoT6ICe\nqBX9eF4dGRzBOJlrGoHJbMmGedwRt20nwX/Jl2ByiO/CJ7yCmlymG9dh2Rpo\nblNya7ko6Ihg6CzDKwRFoOLTnVncf7G70DFDSZhMna26gKhWgrY3SOtQCVxo\nAGxrK+dJ+VG7LHkiBzLIQBz6IgbOo4Uc2DgGvW+E1eF4lOMxyboVYiWua87J\nzMZVNNT3q3sLII4EyYloH7If17A+tPgR1NXEbuYkxR+YKAknrIUOCzsnz81B\nx1u5QEMOvoO8a85s6HXLALuCEyehV5fzhoaIClYnSiTwNYEIamyljg3n+lR/\nmuqrcypdsY8Gddei0AeeTs0GvTmLS2LhrWblI0x72Pi90C6dCw8hdh3YYyTO\nqN2q\r\n=XR4A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/touch-target":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ccce99cd6.0_1621472198548_0.397952038741745","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/checkbox","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.14767a8db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"711860f7374cef270de16aa2cd8023b9c15fc7a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.14767a8db.0.tgz","fileCount":43,"integrity":"sha512-Bj0GutGsb6qPYTG9M+t6vKzVQM0drK6YT1ztfRcGvh4z7cvfXNLlchIH06jYojaWdsB+UZIbVY82hv21zFgbUw==","signatures":[{"sig":"MEQCIEgA+pBzhV5L0PPW37s+mGf1FZaLjRD8bxC89nhoo9xZAiBpGvAbHAVrlo3EQkmx721O2OhqbxltStCZjmvzOjJl0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsuxCRA9TVsSAnZWagAAyNsP/1iUSc2k2ET3riEOZZ5x\nKdaaqJnRbx1FNzpMXx3Z1P3UVVfrH+xe3GhJRbuE3BRRJXEhGbAuWQLuJJhZ\nASpObx6O4m1MqdZvpLpFUe6jSfx2Z4TY8IMXbySNQLj0iSWkfq5U7iU+NN5M\nN9umU+TwTo7eTxfP1g65r1hhdGcykwSEBEkv1mzJ/X/IVzWCumjuO0LkPGks\nw0psWl5Qsm2u+k8uxI1gb/FHKv0BzO0O79fWy7r8QlCRSW1WAAwvzvq66tyG\nPF3y29z8vGkuQA+MJEc9dLMn3a1Z5RGBcVvcy9gYc1NVUwx9kKzZmj/mlKSJ\n85Urv9zOYt/GmekmLOgNrklQduaig/paYmmq4P2SAnrytRB42Jur4srA2Pus\nTgz2FUhYhT/HLwgBnxnXXHkdewQHbtN21DipRXPvOfu4hvn32+Qmy5KDF+1V\nmtDmlUDMPUuiDO2aiMj7/6BLjrVZjo8aqzU/wJW03AA+96zo1wDy4BeRpPAV\n2UlZzZcoh8Kj0l/ntyIZ9m+dKeKeLf5/bwBF0Lm/3KZhdzHF99whs+DIhdJm\ns5npoxXMQf3mHvX1291t6XBkMYk7JLEqy/TfTLpYu4wdkkfh5I3ARyTJxQ/5\nYOoyVlC2gnbNlw1NoC8xnEy3BWGyYcu2yoAsQ8n3qfnF7AB6YRx6cGDn87TI\na3m5\r\n=VCre\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/touch-target":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.14767a8db.0_1621543857371_0.03416407256212528","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/checkbox","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4ad67e067c7cc311c345e279ecc9785a4b74b3f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.22c6dcff9.0.tgz","fileCount":43,"integrity":"sha512-B1TWbihkjtUaR+EPVkfNRinqJJqSqG2UOXq0G6iKRjEOj5AYSsImGCP+OiUn/0VEgq7OX4TB3o/MJ02wUKjDog==","signatures":[{"sig":"MEUCIEeNamqiXJPVe9ey6tU4F9iQHxEGKT3wvTAcYRBMLcvPAiEAuaRa8fnRjnV+sOfNRBpR4uCLwjTrvohE2RDhmRk41iA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":717485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8O/CRA9TVsSAnZWagAAcjIP/2uQ2S4It8PVk9Bs6ENB\n0mKCAlsDrcC4lEpcPCZcCVCkU7oBnsvN/Q7O9GH01+ixvX3SoC+TRmOCu1yL\nJfWCeTTChuEvcsVhRkIXibpP0Hn4DdO7YAZfY5fHiHL22CHCQoj+QqXTOnIs\nQ0x8ebI72wc2SMeEvQeRTS/HaBQo68xFkrbf59rHY+jkGdYEx94RjYCOutz4\nq7HMGg/+6WohUgtniIyIzyezLhPgigcoxDs+LwQxAUrK3YcIijgPHJNFKJgR\nTisd/Sp2CM+qekmc6IwAXDm2k6iptt/v2S3Th2oMHJ7SY3ouC8Kal0LL2BmW\nILSeS8Ml0PfZs407Kh/IZ05uyuAZNSqnAzWRkAG8jH7tnQI0D54f40aeL5uJ\nW8zq0WzCzWGziK81AaGVgy0cSN6NX0NKeRT6Aw3sD9o4QOYjCn1RymGQ7lgd\ntzFDD/o3ka58KcTARB7gS4DfKGXMD5GONGw6FZlcyC+Gyz/PMCdHJ7tXYmxG\nOjR7DBrAtWwg+ADCavIRl2a1fnBnmu4UB0IogrSvaFizQ/HZCm8vsKU3oJ6w\nABr6oszx8xAQuiV1t2He7QwniTZU+dmyvZHBT/qNrAs9tsmww9dPkbP9oyLP\nSF7gwJOMVkNUkW8k2K5brkyTjvxUv5QCx0LFRolstDs5HAeEW/BO3DTwUjqv\nFtwL\r\n=bUT5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/touch-target":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.22c6dcff9.0_1621869502616_0.933763114597348","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/checkbox","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.fadab3372.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"764743fa15ecb56072c41dc5ced3713837c78c9d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.fadab3372.0.tgz","fileCount":43,"integrity":"sha512-kkSna7jIxjYTwA6zbGU6W7grneDGcGwvh3B69EsqoQ5ORz3ihn+hWF7XddWx/gic5ywZ0xhSuMTqPWMjDirZ/A==","signatures":[{"sig":"MEUCICUfqwGzwHL7kzCZkvrF24K7sSad/IPw0lKioG0UWRT7AiEAyWwg1NmkpGJD0zzm3IgJDouTRCUBdRA3ejDSoJdtWs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87PCRA9TVsSAnZWagAA03EP/0H3tMvk4f0wOab0JTMP\nTF/Q/y45Tg9Mc2iuRcSsGCdpBL6ZvYIWguem5U7YjCwwHJ5RANWP7ToL+7zg\n2agZJd0ABVwBkCjHmOt20a5HeQXroF4nguOxZLseYxDlzh2bsHXPVKu+Q8K+\nafzbq5w9y3KcM1BIeWicsKDlkde3B/iqzebM3VFf51Lvhixme1ANYlBr7Mk4\n2Qzvume9ZlRS7PYGIzMzSSjO2xvvFzaBPMiJ+TKKzfoaiofxyX/1e+gyNclc\nRZRqDKpp5zap/MeFmim6dJ7T9DG/VxNpXNhAM71BbSYckP50NM5P3tyUH+u7\n9hpS+XLHyD8ZQgIPI9LXsmykE9m3uxM0XQvHnwOsYXZpTYuUa+QtsKf7fp2U\nVx8Lt+IMx6zjmVdN45HnYUzS158b/oJtb2Wdsyu9JYzDpfX2h/+P8+HAstAQ\n7CFOELOaN8EpnPkrXNquZRqiYYQswu1LpFOCPpzlnS53xV2RSzqjGMPKuvcO\ne/jfiQm2rriH+HQpflJ3RxlEErtCuCBqPX5WL/qswBqiYGoFveo5CjD+Ndvv\nT3Ufj1nmtYJr2BObxBOlje5m0cXfB80zCfIzQRtBJSLaBbeM7AdmZEDv+l9/\nNfpgOFbzuPBf3rIJKhT16mDEiNOAcUiXI46S8g6NSJatBcg8BJgcQ7LBxO7d\nrm1t\r\n=XokT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/touch-target":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.fadab3372.0_1621872335151_0.06104935045316329","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/checkbox","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bac2d3cb3135893e609460e27e4c5bf600c2269a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.caa73aeee.0.tgz","fileCount":43,"integrity":"sha512-OG9yJr07UfYeyivinoSMPxXSSr6rMksZq/p83rvuuU35s1cMTRLFYkmm4dO3hgdqbxR0WZC+s4V6uG4kQgTubQ==","signatures":[{"sig":"MEUCIQDHoJry7dHzPDlQjXLFpDdf/UHeN8NuAooHHlzKu0uXPQIgZKefsZlUZfQh8NhrGM5lnA6OPImQttYnyZSy8C4gynw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQY3CRA9TVsSAnZWagAAjI4P/04Y9bZSq7/6pM58dsft\naVJQoaaPdcjyh3u4tVuo3xNwNYemF2McCFGLPp72f7I8rrK/aQUtwrSBo5+s\nZAp+zQa5MOSyzw5PgtiF2Q7kcfqpdbPb58VMZqYYVpKxGrMDf/uQDkvbc3FC\nogwGUX4Ca4+XY97eMARqlPQ0/cKcdEC5l7+Txa1mPvq6IykPUmy9XoviDf7v\nICt1Q0Eqg4u0wDANbpK9ZbHzpIWEU05hDya9hHVVB+FV2RTMYaEO2UxdX3OK\nog8A6JeaSnlNtXF2bSmbcUi/yl+jDoVliXu7ejHETN/fRZJMYjr58oENKjLP\nPCzaKAOhkts8w/dS8DZpmsxemT5LFcK+RfWPzYkn+eX/Xi8oykPnMZwSy4I3\n29j3QMen1/zWfN1V2dlYMCoTcmPvZ/GKbi9I26Pmd02Lj5g2XPfEhnAh+AQ3\nDYSXW/mOO1SKpzo7MAD9jBwmjxdOBD+U0rPYgMSS9BH3HbGJYrgHvrwBqEbK\nREP5495NPwr4s85sJb2Oe9zDFMthA5KNtVqabA7QIE+EiWCFJzOI4jPJW21o\n1IfQcFogkyLzxYu2tHSu8czWPVuX5bNIsCWfmbljMnnDW+XWR8RdY0KyC/kK\nXBWD52mc9BBjHmIMRpUa3q2D3I3y6ukj5kOE0R8taGQP5VuvXunycJyuJExS\neAis\r\n=jFYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/touch-target":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.caa73aeee.0_1621952054422_0.9685095588322379","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/checkbox","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3178754f470fcbf3faa669857fcb829793f7ae8d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":43,"integrity":"sha512-tzEIQ9OOAqevX6uT9FjXLOnuxhkEv92A4LOA5b0LIfST/87VPyxPB6+EOGEPm1dqwDmrA5uaIseJrUrQC4x0kQ==","signatures":[{"sig":"MEYCIQCSA0OKCWltmaYkh13pfs8KI0hOGeKOrtoQ313QaIsarQIhAOVpEyxR/MdImGXHNCZowARrkUa1gCVbSnvOOFfscqMd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+BCRA9TVsSAnZWagAAUOMP/32ABMFvVjVuJKiW5JNe\ny+hugRFA4/8vYcWX3rCRVYg8MSSdwFgLYNu3OC92Keyh2P/W2neV6wQLRTXb\naLVNf93+CLlYKqHeIoksTfKqeBarbCNEAm/KYEyUAr9L6NeEPEV/gHaKo8AQ\n9usYz/kr7jgTffAxsGEWGRYCwQQWUQjIDbLqtaZdmE/eLVr8qeUjxeQyTJvE\n+EQXbImIw9s+6+HOxK2MdtLGRBavBMYI7LNO5Y84c35mwyJkLEC0HjOlyvHD\nUQKt/3fs3dRn0c6OXQgUgXoBPl/LNljARZryyfp2vVnGQ0CLH8lykIAATnN3\nORAVbMMvodH8GZ3jgphJ53AkFlZ8/3srOel9zI5QJ5oldkeRwg4nSiz3+1XD\nmDreTHkDzXws2TfNW53WSNMXLDiBQSfQeTAwdVvi+agFEbMeemq5HZV6UhiL\n+ZLdCENA6Ty28y0qcCHlB3ic04Ms7XPirZypw3DemJCTT2X9cfaUl12bzLu+\nmboNPrOEV1+/kkKRiBRxWF2P+DVUZYlyCNauWxERKPIRHiI6r77cYnF6uZTB\nJ2jp+Ttph1SbIbqW4xtdgpEWYjGbfis0VB5MHf2mZ83U8hfVkFYigslEPFW3\nufgvd2PtqX1xiZcconV2FlfxLWPVqdi3wbcCJF0KsCpaEHZ9PoPq3D4hJg2u\n7GB5\r\n=i9SL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/touch-target":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ec31ae1ed.0_1621974912857_0.7405979055447818","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/checkbox","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8530d3514.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abeea2717814f4c600c18b009aafed40833cd7b4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8530d3514.0.tgz","fileCount":43,"integrity":"sha512-rp79J6Y1kUxh4GaZovopDkFmlSn60aQNkJjrOjLajso3ggUqEYnTmfKTGZaSWyCT1JxoQz31FpyEt5I5fKKEMg==","signatures":[{"sig":"MEQCIDmchH2lqR7l3L2+lcVP1qf0JzRV9CpwOVidqoSfpNX2AiBXfTvv1OcpC0Au/MfIlFU+9z+VwbMi66cgG+DI1rTUrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MXCRA9TVsSAnZWagAA0b4QAIF16xbzojiPeAW2dX2q\nwDtn1y4X47+yEW+iBn6a7pIBgPhnnqVOJEQ6mkvzs55IvXzvK9t4NSLSaNgR\nSPWOWLJzNgVFaq7ITNPZW6ThTcDsotup+7Ou4vjosv7J7Dzphp+wcZEz5maA\nX60kJSlHVS1JhjINYwsA47ahoDYHyBfHKRphQc6sDH9HXS21tug4fsyoJ8Nh\nUIfcrEOmzHQpE2l2CedtGq58/2M9cI4FPgjkYfzgvoIHBWlRt0wk1RafSQd+\nbvHi0OpGsd18jD/35RerWHzTa5CeIQBOXRFieYrzcyOVpSpqd0DSFhI7LYKR\nnunWIp0InL7z4EOmJtrv07/HOAm4aVYeAjBWBDudDycroJ7W2gaa6HxlVZDv\neL3a+8m/SJ2+RsupD2YBqN+pJtZhyuic5VzBaroZgSwAMzcZB4bKRXw/LprO\nZHiG1UjKUUdvOYWz8BRSth8/JMzeP+cSrSzko3oDwzNfy5pDmAfDPmEk70on\nku+2IY1DU1BFDFnftrdx2rEQGKV/SOJUqTvd4PLGqZph3fnJ4/sceZjOOQM2\nrlRs0Ns1o+g/OYl8j8MTjcOw99v3iUHI1aUGECSMHTXmEorx0ft/MUj+6LDT\nU5gt3O+cpgybtT+D2aFhW5Qb7C07DLTFMo1dSMJgsuCQl36MPpVubWfjZBdM\npHb3\r\n=WhlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/touch-target":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8530d3514.0_1622131479181_0.05513974293877477","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/checkbox","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49dde307f9da13a495c77c5b0d793d03fb20cfc6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.00b5899dc.0.tgz","fileCount":43,"integrity":"sha512-k5Mv+nuqrLTnE1ttJnz+gfJLf87Fr6pOy9vVgE7S5VPCsjDQdsVGMaUhwJcNu7EO4YDsHOmI5b0+FlaTxu/gVQ==","signatures":[{"sig":"MEUCIECNI9t+Urb1OCnsqAoIZqLub/4EL09fc5lxW9Xm8ctnAiEA+r58RYD/xhOnfKQUlpuJkagGv76jnxGx1lmL/ELle00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriFCRA9TVsSAnZWagAAb/AP/jyjRnq57Iar9sCzS31v\nG2kgyVwW9Sxe6joQZeQwK6nNlb+RIinYPQ5KIET4D12BnfWQ7Xau/GFoQLkv\nBArS6LpLFlmYKp477ny3SqjW9DDLJl5yFIrEaUElxn94L8l4uqvbjB+QZ/ed\nIGirPXYq8MI0vb+UOeXJ012OTHNdslDSOtGR18seJKsRBtFP+z1iYVJ/RwQ/\nhn0m4xCtRDv8xk4XWesOMfwM89vmvFuDPwpWZXgy2nANwEnWzyjpkTSYjKbU\noSGG3mEiOPEIEsT9P5N+O2qVBqFuRiObizPloYWYEDuCSINlWa6PWtadF5Ew\nvKt3um59grArG5+Ep8tBYkYWwqBixinYPYA596PEoxU6ybfrM781mE5xfBqS\nw5EHrZOb1cGDHI/8jSV3IUHdJpKUCFchxBnYda6xoEfodeeZGfZvJ2WhNEJZ\nSRg1Lb9ZulUPMvJgzurt58Y1HkkMiwivU2Bp3UrjB2fHeozvW5ZuTLkbcEdP\nGB+THqs6LkMjRzWSAcKEDjkZqr9g8vSwF6p7NzvJrc0A+LW+QWG2EAhjRA2F\nEkPqjuyPCB1e1hEvRE+COq3aW3JejaaxhHhGCvsA1LR+l3KmAQ3kwf2WdSQF\nUfYBMQhG2CF77NxyUz+nj8HzBllk3QwuGhI54j/kgOFlUfV8SzghWWjtGgij\nb1v4\r\n=YCRZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/touch-target":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.00b5899dc.0_1622587524817_0.21534419406115157","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/checkbox","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"162722c1af0a51037a5d3792157f9d5fc1f40437","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f1525ea3e.0.tgz","fileCount":43,"integrity":"sha512-Pv10u4LZLAO8h2ay3gVhT20mqXLqGx43h1fbUf9jOAZenwKfkccr519v/hjkWjxNBZcxwnZP4IOw71EvhW8sfw==","signatures":[{"sig":"MEUCIQDR++hOoMkI0prxfjYOACUJH8KpxHiGjm6jH7RK3ro+pAIgav/dIq2VO5btRZo3WSyELIWY41cEzNBjKd5xw6q5TKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8GCRA9TVsSAnZWagAAF1gP/1ODF2iFYzQhNTTZcQJZ\ni99CQbN2RzgkwsP0WoAxKBTzUrpQwdil04bx2mKHbA0K+Y9jEsnG6+y83On9\n+fudSF125gectIY2He+m/pnupgx0Q8PwCJ5oKNTshE10CzOxBjVTSBBuDdq8\nHPaokcWOK1OvovCqSqjyRaVCogtIL5QYcUqkEVm574drk4y1d+6chydysUZB\noX7oYaPl19M1gpAoQAkGOfQ2lB7mmhz4RwpgcJ/OIgAg4uLVL7HqoYASWN04\n4HhVdyKVXPKcep7HI/bJXD/s87O9I4IBMYjWL23Y1+mmhAp1S6qnT9cRZBau\nLHYNSscM5NrCo43OUGy5q/yOL2d+qcSy/X2URUoUVV8MANOGFbrCE3XJ4SmD\nPkAHb5EW9yfyBnzfCJX9sKDgdY49Qy7sIcKaoVGjdP+/H8GAt9dFEF9SrPxS\nmx09YDUGROGc1NMWHPLqjgOBZR2IxIQYHsAqNCN8MRC6SjpSC9HGNKFT/tmj\nDSAAgLYaDqqw+FA7H/QP4XBpsZEuyAtvxAoxtb8qjlIXvlSjWOgSC4y+/2dH\nCdiN3R0RI7VFPdSYszBH+WcMzLI7d28QuBMT38ogTvnOWS99shL67aeU/tiV\nTXgJUcVOHx5m9+l0SXyJCKcvsKji+3ok4EIp2VGRYOYLxzHew9e9A1hjwAie\nDQyf\r\n=mCil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/touch-target":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f1525ea3e.0_1622728453849_0.5194716303129796","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/checkbox","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.464a00286.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0500b6c98f49e206209446ebad928f4b17a75779","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.464a00286.0.tgz","fileCount":43,"integrity":"sha512-R0gt0C1esgQXrV6d3lDt1hYqwIDpV61ab0IFBLgIWCggPHaC0BSNc7GiR30m6x+QDfZ88X2sYB3X5FTf6URI3g==","signatures":[{"sig":"MEYCIQCv8vM4Hpghupuh2tH1HuZ90kvCCb1CWEXK3fWBQF7MRgIhAMh01OUpgNKYg+Fmn2XvyvLjkUoaAHVMhnfold3aKfBY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOsWCRA9TVsSAnZWagAAlaQQAKAbDhlZRPIwTryPDUEc\nH1g8/AHd5L0BVavIDbWrHEd4MhDnx40PJKVAL8brCE61eyJ2HuJYyAyzFY7T\nk23L2o5tGJObg+P87k39vVih8zmVWL5dFnXGNJ60+nk4+SEgDqMvUUd9ESlJ\n1piZlNkZjBC9Uhsl7Qk41ao/qmOBg3lDKzi8LxLZptPByYbj9iXzhH8/2Rag\n2h1j2ZJkQQdu9sKG7uNKALqlPvGiFWHIiH4820VNThH7tVWILScguSqTBGe7\nOiyoh0L/nstkbkcEDxOVYXKG6lEv0RaWlMwM8PX3ZnfZgz3B+Z46SvO0/rJz\n3Bx3GLAbenjBaRfiFrKxwTQQIhzVD51Iy+UHhy/cRHyB0k8cYlLKKYXvjIN5\n5uVUpDNyASuLJ7+Tb6I7cqc1iZe/Tht63nZ9OcA+i6E/uXGUeWGUhmGs8ET3\n5ZOOgZWj6n4R9h3n4RW0VDHqSUIZzN1yz29uE1Ak35wtb5bTh5xi5SaAf6hk\nSaaDKfhfujpfQLAkmxH55mZ90UdEXfgiYXgc57N4bf96KiaLdVtlY8/VPWRV\ntZgoA7odW+BShp/WYvt+oejTOVcPEkEIAvB9+AWM8WOBY1e7F4a+RK32yZas\na0JkovMluKqoQ/Rpv3JnoAOSIgs75/U1fZ7c3uj0mi6ggV6JAlV0SuYbCp7l\nzXqY\r\n=JsaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/touch-target":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.464a00286.0_1622731542344_0.7203484343195374","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/checkbox","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.474de7878.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ee7db7fe32458e59873f22c291fde81731e5f1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.474de7878.0.tgz","fileCount":43,"integrity":"sha512-pgk1M+nuW3U7PnM8uyMzU0SJpMuj7nUr5koUJl3yjT445qu/pcKfTBv1/YW/lvKnBdhJJ/+zeTodHDBCIuDyHQ==","signatures":[{"sig":"MEQCIEo8S4cNQcmO7oMQ7hTPIKEjco/dLLlVhu0xmm5VOXTPAiBd4zqbb6toxPff0ltZMtq5h+iWpEMSqwHbFk8AuAWxSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPG8CRA9TVsSAnZWagAAsZsP/AoBbD8hdqg9DKC4shZk\nppJipZzhO241GE0WF8ZSmqDK0Y7wxa2Zn45IGIvu3dFV0l60njmxEKB06W0c\ngoiuXkJRQ1fPPPqgxJMw8NboRUzt7+hQbN3RltMh8T5gCdMkc+G82RlKHRSe\nvEarAFi/3B+5lIHgG0psofoLjE6g04t6HggBfIigl5hPRhbflQe3oBW6Noxo\naj49WWpFmt2/r1glSYtc+7Bw8oJs1103+ipViu0q+qUeph4S+olQ+M64WYlS\nJ/htYJHwk8fJZW5DGH5s33k2u3Xy/sNRSCqn5PZBZxx731aecbQ3rlLqSWXC\ntbX4YdhU9oHrIJehssxMZcGc+JX9m+y50YL+pol1CuuJ69eZLhvSTh94ZdeI\nwIozt42k1StcnfqkyEbzW1Fk22Tt7AwxYLtOOjNV1562fZWiNHzXVIfjyNJ+\nymK6dvPC1kAGPAvtLfmFukKHBhm1FLQOPy4jXC7zFUhEkFaiU2u56Bpgw+82\nrrwdoO5rFMcJhAzQonENO0+zpTBRGt4UvFFQ3CHq1Fkig//zTOUyX1MZk2Ae\nimPvMXRAnTXNIkSqmERtBe3BvnqthKozIpDyhgVEhFzbv/EbSMpomgDWu7nq\nfZer/D/q0VT8QTs+2f4CmXy2k0nZmSdQqaeFtXqhCTO9pVQLl/ynuPm7diHo\ngj75\r\n=LnmF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/touch-target":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.474de7878.0_1622733244005_0.6990572897516723","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/checkbox","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"168be13de816786ca2292098241cef2e53698167","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.b87ebf74d.0.tgz","fileCount":43,"integrity":"sha512-JaII+c2ydD55FZvqNHpPShjdJUAb8Te8pipn0Gd8H4tfg24cObbgwuoNnGflMwzzYrX3Hgpy39lrF4gg9g4nvg==","signatures":[{"sig":"MEYCIQDnDHMsEd7oxjW0bSPUaP8HWlalNqinVtptPwHHu0ld5gIhALxDi2gkQE3VQya79jdz8Enf0lGseUXv959kn3jwAR0E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVgCRA9TVsSAnZWagAAayIQAKHfpFCIeKdRit+JTAoM\n/nBkPmU3vqvMkWOoBlQxBga4miNqD/ddgY12jHwlKchhd/dx5gqpEozFNL16\nDbroqslqazt2xaa9BR59uIBSOEyEmsra0pQr9jwCHF7UdLNIc1GMIU3sS9S+\n1CjYeDpvTZS2xV6CF0lp5kYZqaigdeDrDnUokX8zsmPgfL5Eav7291YxsSyK\n8O6p6IwCr1NP0xe8BAeEmjwpfTkAg8AjKkSxMiAtwRrC5h5g3AFid29xBwpU\nVZnlEISi54xp+JUE1ewT168xngYVuwhK9GDvY0uo7fJnV4miStqTv+vUsxDc\n9rssQnSW9tTJ2dRM1iH1MNKz6qeS7lvTUCVnlV1NFm3XvnXTWUujj/F7pNDZ\nLUrMQkmZ+1wTzfUA3B7YHF3TkjqfOgk7Dq4e3RXvy7G4G1NN01fKIRdP5KR7\nG4dy3P7iJkUtb1qs4QkySsnMZMGsaAJY5jtg+e3ekmHy0q/kzegrVWh0kkUj\nTZVegRNhmftFnDo/p69D7ALH2yZHOD40K+PKqTwrUtDcdHakCbtnWcv7BuJO\naByuwHRS+g+MdiwUTRW86V1ismW1HXMP0V4YzwfObvD7a32+ms6B+cggjrxz\nyHU2L85UYdaW7i+xoaG7LSV3cR3brlVQNDqGm37K/RoQMmJ/C9yd0GGduqe/\nuNxl\r\n=azou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/touch-target":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.b87ebf74d.0_1622742368176_0.6755270449127384","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/checkbox","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50199d0e1756eaa397a50afe9c344dbf6acbaf6d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.2daa49b35.0.tgz","fileCount":43,"integrity":"sha512-TIikEZ0yVLD3aTsFSnLBiysmkOfXMNTyOgIclMOeElWqitXcooou2WubsSvA2O0EFoOCcdHtcZisUZsRsnixmA==","signatures":[{"sig":"MEQCIHZ7yYIJ/6UILhHFDWymXkWG0pUK+AYFbWBSAaQDWoR3AiB5KS1DMeoDz52/T3dMbUxtNt/Jy9X4hnFur/xPATQAlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFFCRA9TVsSAnZWagAA3kcP/i482CmK/2/NEN2htVX7\n4eAExCQeesgN9d8yoWFA7Quj/hVGPFIMRKmO3IPzzQTTmo+cx3E03xXIMl+p\nxiQrdb22pD7pMYYd7caytTFqihxmlCrAX1fw4bUNDClr5QTAWeLXZesHMorI\nsQBP/UJbeEHhFOIAxexm96uErE7MiOyjP8lpi6NMjUXnyklLHAJ2IeFvnHeX\nbbx9VFNxshj6LGJRz2HL3wMmaftbHiQJtnA93xQQnzFTtpqQSTnW9eszWRov\npkeK+jrEWWPw85x4xyaljFYYTdhmAVYXMFebq/rPZnwnG72nxuc16+x4gYua\nzYoC7gxh/ndcG5lOuFs2t+74CiOOqQ5S0JHXMQc87oxbw3lA4Csiiq2U/n1v\nBt4Ktx9nYR4x8zQEQm6bBlsxSOM0ZDGfQZj1nlqbLzEzp33haYzvsCjm6GLG\n22kCuQ5gfD34nWIRPbRC+P7cR2EY6qr1SFakt3azmyaM0NyoJOm4NlyHpDdB\ncE6EunTms1ajDxuaytI1PTq3IoFTTavWdtnjdn0psTypz1HlX9Xe0mtZA6Pk\naRaDbsq/JGDs33WM6V56T1mn/i/onJwM5Hy81tURHdQi/Fk0lvES28mAxd3Z\nbGq7z7dFn7a9blCxcQKbYH0YFFGFqI2pR69CV8mOiuHTQdltsIyvmYLpSX25\nRaRF\r\n=JAQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/touch-target":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.2daa49b35.0_1622823237057_0.833905590402249","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/checkbox","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.08db3d737.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee743b7587a64bc5e2a31287e1ca92c684985b8a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.08db3d737.0.tgz","fileCount":43,"integrity":"sha512-fGb8fFnT7rtT9QiVa9AEGzrjm0VbH/1pQqJDAU/pZEQlthG1FB/nHkMrKnspYoaNOPE28EZN9vsiOiPfIGc1ig==","signatures":[{"sig":"MEUCIHcmeclCj7jvgwHy5KPWCLZ6oYV6bAyt7QG8DmSUM6JrAiEAspa96csDYlUR7wM5eV4rkv78WFmWnGOw8fMn9CecLTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHyCRA9TVsSAnZWagAACLIQAJwlgwfKGIY1Dr+oApxG\n0d/k7q8S1YvEouw9hH5+SPrrMoMfjWbtDEDpYtOF5iN0++GUlfvUIisFYtY0\nRg3fnSEKlg1y/KiNsKgwmmTIGCKmLV+A9ufmodDHwwZY97JQEg9UIs7r/wV9\nYycMBxAc40MZ3qytMS1Zmp9K+PNtCEC81M+kYouBNEV+BAgm+dbuhcuQ2I2g\nRJm7XropLbnBlulanYAl8DCX3MSMQEI7IBLSLXSO9fGL3ZCNsArXbhUtXf89\nwJOCtJMEOAa8BaKAJdbCiQgVDPyH8dpETY/DqMsDOWczujlItF6egtlsRteb\nnWA7N+insIZy103rotr5VmGMJ7GudUxaJ1P3NzJK3opzYWsdzYzatLwIxEW8\nuEdGH4p5t5EruPbZp/suAUCOYS+6srIsVW70T7594b8ufpE3KkNd1PK8iai8\nd5urpt81bYPhJUoJc9yU+eI+k3oRYTuRIs0E5LNm846288seHdt9lQzDtzL2\n8qPxonUuz2zKJCrzi++8VfF5IQy+tYfiEqfQa8iuwK3KUcS70o0izlQ/oZz4\n+gdHKzSXHc7gWzvWqpKcOHim9aWkBfvwzp0eZOauvSta7GlkpLdhgxksRz0w\nliq6XZxK56ganNW95Zye9b8v2eNQL0QjIgo7nFsnp+fisSVmrQgaqdjfVw+x\nfaOz\r\n=tcrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/touch-target":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.08db3d737.0_1622835697930_0.4948842136088403","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/checkbox","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.5823407a7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"659db25c2ff9b834bb5b52a8d2d4b33ef12577c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.5823407a7.0.tgz","fileCount":43,"integrity":"sha512-5nHfU7/4LPJHn15lWP4NQBTcyj7heXToGF7v2ZWSSVlRAifXHjihWW07t4aFX6kc+UX3E0dC0hyflivKYKO8Qw==","signatures":[{"sig":"MEUCIQDmlW4dAMC4yMDVh0OEJKkbHNNqs2z+fGx8/Eyl6z1H6AIgW/BIJbtrvGZHoJN5jstjAift+N4POT75zFwN3CClCHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5GCRA9TVsSAnZWagAAOpYP/03U/NOa63tcKnJEY2FP\niZVZEFj4aD1NGyJ/gjSpX3OmZrtxJPb/AS5ZYEA+wOHA6jRT6lHNBCkgmAjG\nJ7YO9lwhjsdobhG568xWiuvT52gBxbNPM1WTjJIuYVf0/vMKlEWCS5qBvHwy\nWSpoazTQLerbsohdUjh+JfsrnpiRARV/UqZ+/02J4AnuYsIQDvLk8M7HWOAw\n8RcwrtzU7x06P8GC280+y6HcZxzWEaZnnZWcf2FPezy5dijCrZUWjJdsmZrP\nxl6dqt738BdqpShSurGVNM50zXfkWXACVQfBsnjSHN0qge4z7eEkEk85qz0d\n6gzQtluUF8aq9uvRm3LF4sWWBYaOU/URyrEf2UF3Ea97qlG3JZ+EoSt5W8YY\n6MzWrwUDVyLA/vgIp8yvQvROZ0lqNk+vJni3cGT9q4y4KvNyfH0Mgupe5hK8\nnlNQNtVmgjPlK+7hjfFJVam1CW1qxsFgyw3ZXD90rhB+bsc5TqNk91rh2LqX\nToYAF8UfARQ41013rqQ1ao7IhstB5UtW/Ny5LDCy0FUp0yFz4bvsPzn45CeU\nLme3ogMXFG2NDAyFLEk32MQhYmzrrwMn9K/endT1gHMzagvuWMuxuybArTVx\nhMGxrOJdFY1cnXqX+FNT6TvYZ9ljiPa5+/NWnMD9r8XezVS8K0P5aUngwIrD\nsA3m\r\n=xe37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/touch-target":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.5823407a7.0_1623113286718_0.730417539561333","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/checkbox","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c3deb908f7d655b22b9eccba2344e617620020f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.23b0c5e22.0.tgz","fileCount":43,"integrity":"sha512-ILO3Hnpuz9x5lSYM2i4H+r9IZevgG+775Ngv2LZof3z3h1rD/rC7J6rNOPdThlj+7WVr8iBjhv+d2URgG7+nNA==","signatures":[{"sig":"MEUCIQDJ5rO64ujirGMSe4rKN5Oz3HgJiLqIxCkAaKmVjaIuzQIgOyyq3jFBmlQpSUrNH3KIbZQABohQ6gYXt6vI0iVjFRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5koCRA9TVsSAnZWagAA4QwP+wXkOr5laHQ1ogMu2Inl\n5IDN0a080FVFUImtqvyVdOz2WVIXsRV++5U+aDCj7kEK7VAnFv0ZX3VxtqkE\nyMrsvEMBiQg/frjW0tfBdA8IcLfOTLIfHTDKOmQCQV6PsoKjJrTAMA1X0rnv\nYKYzvPcc61hzZ4ePegMcwWysW71D4ySo47qGhvy49jbDRlCG9Qnvc28zP7Wa\n3RzkZV2xaHfR9n/wO/FjmKdoHP58lRx3KYR3UWWKl/0wz8KLOKeQSVxz3nBZ\ntstE+Az2UUAM1iLgZLH1v0fhs9KQL/Ucl8QX79BPl3jd16nTLV5BtYybp2eu\n8YaqExzyGRdZ4gXTPo3GHtDGB5W1ya8o0J4N+jufAGNg3NrnPtyGWJC7Sm+s\n6DOjgjWFNp3UMbFMRa3d/hIPe7yVMeILXaMTSG/qCFUzFj450xeFw6hJvZSO\n7kNR7RYRNekSlfTqI8FGtbqfFTJlDqm/tDmwDz9incZ8NgAJJXziODbjFKpm\nMVO4QA1YxROESryUn+wTDGw8CfLsHi7NPZ/+yN4NOlEmho+8u9ErJrpLAoQI\n2o4+bQouQdAhC/r2QyqOTU2yDGTpAK/Juzo/VmPYExYKKGZ6Co/pw/m/+cz1\nfAj7w5EZZXMqVAGf4cCRlj3q9jUPcy/GGwXzh7PAORoVFk4NZ6vhxlh1VJco\nJ5cH\r\n=p0Uo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/touch-target":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.23b0c5e22.0_1623169320776_0.24168212427599167","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/checkbox","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"533fb3c4d8bf29f8faaa2e390eb788f0f1bc987e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.2952c6a76.0.tgz","fileCount":43,"integrity":"sha512-mxo6CbK7UD6hrOJnji0GiV4ZWTQE5UNYJk+ws0YnCOz1ZxrdtdGBf5IVqNOOwHqipE/wCve9sscTsQqmHc6x5Q==","signatures":[{"sig":"MEYCIQDDFpuYHXEuktvQiTLuKz0rdWtbEKYcj6JjCEBR6LJRqgIhANTLIOHSCQNUwI188JqCOo4vgTkgXMtqnJYvANn29T3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uUCRA9TVsSAnZWagAA93oP/jTcKow6IzYjYpvQXdNB\n1qn2gBnuA786rsSclC7KGt8ZXbshgSbzluc7osHhFCqGvVjiuhSzfB6B3hU6\nD1//mnRCwns3yAFfdhizHObgsM+XXrxlh0FzQ/+v3xzxRxM8t7fkkV/Scup9\nsh/okbQy/DIPZ+7Dd0OZSq9qG3/TTrdV3ebs+0jSQJWvmY5xjY+LxT4C/6Ii\nBaR4jAPUf7D9eswAlI76XHooVy0RR1gCUPR3IjT0onVPKS0Na2PmIaCozhqx\nYQkucdy5Q7p+Hfb0P8juwTscimUGN8gOI97c9okhoBhy2Q0kQVOGE4OYfjyq\nMCXbwzTeqg6fUNbGuw8+6calyrJ3ihAwB2o3XVhUboIadEsb8f8iqyz4U7Jm\n5eFieTL5O9MSSirckPhgbtreFocIiLKHwlETlX/TxGkqRDslPyFL1FDb6uyk\npPjuVt+zEHkiUQ4us2Tl66CFoyzty03CkTB7D0rZLV+uNKr/nXNuCuEIVY6n\ndzquWOj8y1zIwTRstB01nQExanTWSL6FFsUKstLFO0bhjAiOqHFkW2k5+cR7\nyEf5qA/Xk1FejyrC6xIBvGi4urTgZh0We7H97wWTY031iuptC0BH8Rol/1Sa\nZrpFkFB+IOthYT7q1SHAQ1eIZ4iuqP6cRNb8GSfh0O8PjFQv6CYgU9osSwoQ\nwAnA\r\n=vXmx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/touch-target":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.2952c6a76.0_1623174036579_0.6294299221124835","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/checkbox","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f12425f88.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d82e33ebe2da1d448ad35acdce8297d0c808d89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f12425f88.0.tgz","fileCount":43,"integrity":"sha512-R2yrwS7Dl4oWw+uSPB+E2cuareVsef4XgVMWFixa4Lx/WyzPPyWbHqBHjAGSOTSOLCCcjj0xQoZpWWCP15BVyQ==","signatures":[{"sig":"MEUCIQCUCYB/3e9niWzXlJ5BGzJbK1zM65JfBaPXI81jQfRTLAIgcL9WQQMa5DRMlhqYPLxGVqaSB573br9RrtxIel/r2MQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVtCRA9TVsSAnZWagAAKOcQAIlS7T35VCEH2MpjVQps\nHGeT0VOwEkHUwzuiQAO6qCwZIpW1Di5xZ1mJ/uORp2EXH1Uz/PCfXnM7OWGY\nXXVWpyaOsT7PJLvt317IyEc3xugf29tK6w9DL/m5TcNPEeOy+j1t2c42V3gs\no78FCpq9BKClDubqIv5hCVq9dsFDIPc0DON8HnyxRC2vu3tqWR0YdK8FtYPH\nxYYlN9cEUS6kbetWBUzmgxnXcT/DUOj+fhekQFkWrY29K8W1XXAeNM+Rh1Cy\npCBETDfs0xlQid/gdPX8e7b7ClihFJdR4sn8M5rbZLg7VqD1I86N2pDLBBEs\nthe9bCIBioPoCKXf8RP5dathIjXe8ZDusokMHsS9kYFYXW6r43y0QynrGVKe\n70fpiVP4JzKR2AUraVBwsH8RF2/oo2iAVSVklY1QzMAdzD81bBmVqOR75n9z\nVmlaaD39ZmED5/kVXL8M31/Iu3tlv26TRyK2R3IOt5F57FKuoRrjKTmmcn7n\n3/t+VdL+tWBWBu2lduhNv2uGjPtrGcxOGYqN/DvrB1y7hHf6jI/pHnDbnaGG\nVktTWWq1q0VEod/pp65XRFC/hQn95gERr/W5HLGstEVmhFqg/fPLAM25z4Nb\nP9SvrWHs4MLXChnjT4ac1daWZvsbCoF6pI9QJrbk7lMXnARVwMErBxZykji3\n1/Lc\r\n=k68x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/touch-target":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f12425f88.0_1623287149579_0.6072616283101344","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/checkbox","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.e543628c3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcff6cbb05039dcd5f04c5e197c0f1d4271bd2a9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.e543628c3.0.tgz","fileCount":43,"integrity":"sha512-pS1j0jW2sTCJ7ehm0AhhH4NfEGkfefDZ5/Z3yfMbT3E7RCsRZLx0HzbRjYw649iOOnjR9ZkWByllsSt0zmnXwg==","signatures":[{"sig":"MEYCIQD5qHzeC63cW9Rxne9jkSCoQl/Yvhqruj2pY/tREQqY3QIhAIxGJjq4GqdAN0ydxxV+z8q00WyELj7z6UTnGmJpyn+c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWuCRA9TVsSAnZWagAAOKgP/2Qtwd0PRcoZMlgTzwgS\nvV8nX4BTtb/EnZ5mZZD/7YZniOLraLDfGAq/zdHKnBmOn2r0ivyMpjvmkWqG\nPpM0NPdsrESESHNq1K2Qb4w6PwySauzvvYLsnacfWuD5dnJ4AnrxKinls5b3\n/mzrRfcpivw/D+3Z6CrJllQ/CE/353Rf8YwTJ+bRKGw1gJAp/SzG8WpITc0V\nx9Q867t/FyQ47z1CqK91T0/OeMYn7EBj14s6bJsQ5mIgusThWSNUXRL0M3fx\npImQPE+QzbwlGkS46hH26XwB/G3rQ5X3PJSwV1mmb9ZpnR9E6Yk9HF+CCK6k\nEcjpgAmkvzM0PUoc+Dxbv6M8836hSo1sctWSzwWv/WErvsQy1cFbOeu28MD1\n+TURe3RNiYCHj+T4AO0UqiISayNkJISh6oaTSc/4mvsWoChnxUQ40uq8eE2g\n8R13Fxt+E+fsInC+WA1OCwnsYu82+Ey9QQxAyCBkNhHnzNMY25rOuOF9fi1p\novwMRgJgel/TXs3ooPzx27+VJzUSTfC9ubOuUoJZWxM3JVhiCyxjJEzuQlik\nJnb+BwdORku0jNiVV8s1cDU0Ksl6wyxX0RPpfoQmp8kVcQ0HLY91aJMdw+KY\nVVM2vqayXggPy7MuAYWjamgc5WzPWxA8jOb3FxY7FTYdHzD3a91UbBIkubHV\n1MlS\r\n=Wkyq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/touch-target":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.e543628c3.0_1623287214354_0.2811155240251373","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/checkbox","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.e0c346286.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd4af8d8472186dfe4679065b69526059f815ac9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.e0c346286.0.tgz","fileCount":43,"integrity":"sha512-99bOZMq4rJ+m/s0fTmZUVxWcQKFGeBpUK+uSpuaAsrL4L6XhrkBOAr3Sw8Eu1Y6K0EfbeKeD/+6LHnNDk2XYLA==","signatures":[{"sig":"MEUCIAoFkgy8vOQkg1x/P6GeeMPo5k+OWp3biv+DPoyOBstnAiEAjHIMWwnOEoJizOD6eRRIG9th02Cgk1KDAZnAIuAKT3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9jCRA9TVsSAnZWagAAci0QAKDSXUns5+tGiDmb3Yr4\nqHW1cieaP0d18I6/I7xh9CHbZCC/wO1E6HEuhOy3yXtB32Pccf5LvZsYHxi6\nxMhMiTjAWFfm2s6IixERcTNKWgX6t+AXYcp4LwPSuSe/CidMV0DTW5pEWisp\n8qFGU9r0JxtZ1DjKvYimrpWwagDe3YD1DFtVRfZsObo0nEJSUElEe6PGGCuh\nhVuwZgjvFbzXkQsEaAPLbg7E4vvaNc6TN5ecKyPvq69s4lS7roz3ik656AqX\n1B8Mn/EH+IVsUFgOHWxx7gRL3L6BGXKgrlqYxdEpwu523zubFNG0TQvJPwcu\naDwsFdpQT1ON07LGEbQRcdgX4fxf4fzNnFrzBcgsag5dbhTIq4+euZNMrkgo\neId1T4XdDGIH21plWHTo6RncQYzJJ7zG0pqj+dhzKtMsc3g/je15EDPWC2Fm\nVowfI4O4w/YzBlEDkzclPWwAJzdHrrDaQdbgHyZRnZT9kmlQnH1ukslAXFzb\nGYjX/edi2XB8tjyDyusygUlnNzHApSQn3Pke4X9paobGll7qvCiMGcQNR46L\nIhVYrWzo4MF9sjcdqxasZyFXmYk9tD1t50fq7hgGNozE9TWFB0NvURZl4nPh\n6R0ckfECFC/ln/hOCopgm4bUQVh+wPYfzjFRprqoZpIBqCJ7BCHaER8gzbN7\nOzqA\r\n=p87u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/touch-target":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.e0c346286.0_1623342946804_0.22179768410635048","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/checkbox","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f43af5633.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908378b29b587a81d852e7140958bdc676c06a65","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f43af5633.0.tgz","fileCount":43,"integrity":"sha512-oLO3lUJQEpvmqvUuUnkCQycVTtq0x++L2l97cdCL5pgxwet6WdtjM1GhGc5ILZnpEX0Wzde2jakQd9zAOMhHpw==","signatures":[{"sig":"MEQCIGT9WoW8JDH2P6miqUIwkPUjzq5EC8kdLKYyxRBO3HxLAiB68uIseNaNC/6niS0qEeBrWZGb6oxMT5+wTwHQEs9ywg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwneZCRA9TVsSAnZWagAAKgUP/0SXQO3GOrptsFoSrbIk\nRoLe0d9gHSre2JKfP169A4xfKgpvGaZTTO0ctdPZr9Aqu81EAyhMeXaEioLs\nfbOC3m0ACZQd80BqBXYSZ54rKXydEgyNWMOVZKUaZAHoBTUFr4E2/OBUjcM0\nATPznTAMJZ1Ec9CzWL5CdCXFOxMFMHuTOpZ7+yMpKjfFSG1BAocKEwGzL226\n2mAsd5Ama5xNiJkO+jz1reXIgMxJnInD4GMjl9JOX+EMS3dmACpy6kp2dN2/\nJcD+20SzLcB92h87pqUyK/eG3uT9JS1ttwRkkzHceiFkYg7vFbTUbEBBSOiI\n+JNBpD4eHot6wSe75SeG2rQCOukZe2PtSLOgO4FfDXezdMZhp+KyDXI4+B57\nEVesET7oKAbiOVf6jy2ZfYS28rwXVMObJ6T01XYUwDe+bHtem9hzmvIwo3VJ\nCFlenjCerINvy1IjUFyH0jpjD52PYUZ9qzopavyePzpv61yakjrKGg+gOHmX\n21t89GBCilCoWRdZaEqEoERdRMweZO9uK2+BT031E3Mbl1CffZTVlaOV9Mgv\nJcG1y0Leznhf7RCJYSqCyHujcSvdPdjfv4vvsExPIA9nDoyIXMl1kNs7BX+Z\npyE30u9YI46EbkA6VDjQTUONpoac7NjEBPNDSRfCgPehWampwsypLaCxieif\nY19p\r\n=d2Tn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/touch-target":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f43af5633.0_1623357336716_0.9408270415187985","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/checkbox","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8415ae585.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31d559f72ce01347473b6129e8c63e3a33921a2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8415ae585.0.tgz","fileCount":43,"integrity":"sha512-qOceYY+7CJxmTlNeEUwNfBITiLImKLykGOzNHLx7JHf1ikKyWquvG0XiEDVxw/DPtN4hfKuLt/jEh6fmp4P8dg==","signatures":[{"sig":"MEUCIQD7exOuSr+Ot2VoYNKb4e+8zY/UViXTOQ9CyLiqRO4MqgIgB8jkJkdTRrcHWLo99X+4I6n68aZWLnJobplzgtdxZTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nRCRA9TVsSAnZWagAAqmgQAJhDcf2ebp3UixMHAzIR\nsbsWJ760fXlEjWH4tFbmrvnqinyT25NZaRLvRsA4utFahZFuXvuN+bA6csI/\n5p5YsiBSwOFHLZlWoKS2M+BReb2+t10LuhQELp1BjOhB/2hD8Vk6Sl0nS8zp\nfB9g9qLXEUD4J0GTcmszvLt5QZhMdaLjCG/juGlU+M+d829AHfR5pMXGQ+/z\nYWVt/oiwNmAQVwZQc8HjpRrRqh1HNyzi8nULaGvfVlPHZdsQ7d5om50gipRR\n/0g0Ao61DFMrqT064c/uNFGGKu3fzS70mQch02yHivgrXpJ61LcN9ntW8m7s\nyVXxtOh72d6mXYVPN1bKy7o/NdhVWvsxV8kT6Vfms/+rmSBeycdNaat42i5R\nn1D9aBX6z5jMkkbqzyjFqVihW0tGy0aGEVFn4ISmKMC6FtF5MlE6jCPzgH12\nXlkjqlF9gwpabP/YCGbP3mqM4o8diDgYRdwV8vrePSN8hoFBTBmsYdQmQL9j\n2u+kBf4A8c5FmbySoQ4CkUbYMOHZsJmw7WnO8Ljp+aYogOPoS9lssbGcx0R4\n/NzHBvvVqt4VSWQA+tiXBI37dqIsmHmJTSE4hkROhbxzIElm8p600P9lOdeH\njZwwwHN05wco7nIPWWk/Iul4K86sJG4WoLXJojjTsXP8gb2BNl8WPN2iVoKm\nVYp9\r\n=HgEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/touch-target":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8415ae585.0_1623427537156_0.2595266692678482","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/checkbox","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15fb1a0a1a9c399f4a463a7459d66801c3266abc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.598fcccc8.0.tgz","fileCount":43,"integrity":"sha512-dNHLAqDz5xpgq0NhGn/hpSLEamGYG5Bia7RStBX8E7Ebh5roXigTO0tnIorK0edd1k625rDaem8Ax+HgDpG4nA==","signatures":[{"sig":"MEYCIQCvT3Cej8HYO2Kwz0ChCdaqztIVjKGk+LXgwTfmNZdsMQIhAO3av67R/PjD4Bk1tfYb3JlH9p4Rw/GtT4mUyI12zpYu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9msCRA9TVsSAnZWagAA3R4P+wcsABsw2bRnGqLsayY4\nwjo7hVcLuYpKHSltm2mGiv3ydhf5pbTLxo6/RCl7zNRA/xM+u/ZxnWYCFtQd\noJDCirSkIW+kxFs6qWRpqOPpQ5OyG+r0SPCJgs21yWR4s+Rb5j2Rvt24UPCL\njYvvcvboy4vPIVglST+gP0m05nlMnMvaRd9k6zCPq6UOmAa3QHkm67t6vnho\nmJ0sTOZygVgiQhOiN3nXy10HGgzS5sSd9IYPheAUa9XazkJqTt5NqMQdgNu4\nkD5xAkBmtirKJCYrBHG9gUTIMiwrrFIKJIOzA01n7Vm9dEpHj1GdvnkI8E5U\n0ZA3435TGIkhJc0wdP7UZEU1kGoZpt+UrmXiEuwF4t7MCbgaO5E5HaOru/ty\n4VCmpNwQQZaWu4m/JnsRedud0zVTuSP9HWI5lKEOT0NqKl7YLmKQclp81Fam\ntpYJtmLScabRqRPh6V3LdFp+vJkjmPNzGJ5YEik+h2lmpXsD3Hr7yYv2TynF\nohPMzekD92/GaQmB9KJrwb8SCPRN8lsmjOW+zUZffA4hdJwGbNp6BWKahNbo\nYFNc6LiC1IT/QSMKbzX5y5pPmeEa3pRzJlUfVWO+gzjXFgyHXywfI96rVyzn\nykylr8CXiry9WY7iAQzg1nSVAOAcRcR7uJBIxK9mXzrseDqMbpNognBFn6BY\nwQOf\r\n=m4dz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/touch-target":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.598fcccc8.0_1623447980716_0.8013292008457447","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/checkbox","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.5d0605188.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83b9610354fadd870293ebdfc58700df1455941d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.5d0605188.0.tgz","fileCount":43,"integrity":"sha512-RlqgiDWbeNpTrkVptVE3HkuLet2+lCFoPvD+XkoeFs2msFogvL6tEnag660Bq0DBYcaOfcbXgAeyXY8QOpuikA==","signatures":[{"sig":"MEUCIQCK74+g248wAsDi6O9zbcTs353Njlnux48jgwVUQw6m/wIgMELuCQzKdtUXewOU5gIYXhR5RiuM9v0V4W2+ItHKRFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5QxCRA9TVsSAnZWagAApZgP/1EKT2oPZ6QMgMrW4B5P\nHFeXuXwEAxWkK1FpLdbcfzL4k3nIsqWozzumsurJlNR01dXpHN2niweKV+VO\nnbfBorhGXWGhc6GU6Bc56powDibemk12jj/oHxyMPGdWL7+BGrutaypaGUTB\nNv33vJH6IutiWQYRYDbiCK93unwGSSquRo/an0/SP5JJCBwf+pHbZGEazhwN\nEaaazzqsrqA2r92d2T0xgHY85cn213WPHVvlm/q1YjKIM7DdE3b2/ruxAAhz\n4UHQ6KrK6x8sP3GrnpLw5kcpV2/tZII6DyWHGnHj3vRN1YFlP6i77nvTaew2\nH5uToxRlqgsW92yU59MiqP+JR+EV9uVHzt7fWbwzMNYbAjWeSizhJUjmCfyu\nrUsUXWQN5o87tlwZ8B/LYwtgAnSe5gpeRkKUcWhrlqUvgfBUNW6KVUbs0trb\ngyTNF47TnmuYAJGn+zGRAe+fTPWJDzIlzeotCGwBKIZuuiTXw3Hw0sCtXUEF\nljFMI0Yufp/R9bhPcCgIMferl05sDoV61ZBf29dgvMhExefdWUbXZnDIFnRr\n2TfACDlGIUIuMKCWRTADjKpszlyP/UmkS/VNWfSdJVlu9ACsJuex0qzQOcNJ\nioCQ3s1PvA3BfoH4swLQxsIx/qKxManXxkaXy3mkRs8MX7VQJvaXakbVpvxX\nry6x\r\n=zhMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/touch-target":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.5d0605188.0_1623692336987_0.9640798227454852","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/checkbox","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f147a2271.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1859228adf1d77d0696b41b140f7e428e5547b89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f147a2271.0.tgz","fileCount":43,"integrity":"sha512-SFIyQnQx0/COU9gQK0Qk0v+80eggv5xtLUzWuUP7juZFxGr9MHb1gRnJfBPVWgaL+EL773gDDQPv1YoD5pTYIQ==","signatures":[{"sig":"MEUCICT/HexiqX/mPn2EE8KKugvWvbYWvn0yYbc8u1BE6ak8AiEAppv+D6wgi26YRKKClnDR9sKxzVMHAu7wydVnu7Mj/MY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6thCRA9TVsSAnZWagAAQjUP/i4rRpspSWQlOZk522xM\n1kTGeZtzehzYhgROq0DZsdkSe9UL/IKDnfsJouNbwtYMasug5AiFy1fsM1Jt\n9sqJ32ICHhb9Qg5InRBRqQAgAmF3puxCaOBPaq6i86dL7juBH0jTg68SLBKx\nZdtg62rIuxfFlaYc0lPgh61R+VCwjzSAzQT0GttRvlz1x0sNi2S1eyCpXYWb\nJHHJJ30L/M40XcqPw76Hly/rcmMxjS5vCd9NbH5U0Yo3sOkLuJLwPkMPDb0f\ny7fmPCPGBquFgt3jOppJd1WMSvrxIBdM9JCaFntukEixvjOfxWxaH9JjNMEG\n/94Q6OJ5vM06y7wDIfx2gUFpVDunZoWqTSrNULP3fycp9/Kn+pMX33QPwybr\nKTteo32d5//t9mk8xb2+ngQDlaTeECNe4OBKU3g4xXDCh2yFnOZNU+lxrGOu\nkixeaPGjpxU5xclYZYUpbSMvMzODZ8gl3vuwFnqLeallmXRdDuWIOVWdH6zo\nXWFC9gRdaRFsqIJ97g99svGbN48IG4nKYaOyQzRuPrrsuT8v6ZXIMqHLI2DD\nnUBysVrPFX59p7VbYSbfr1AFt7Yzu8iWwwvVH0lr3GYIos9mskjVj0piTa4S\n3lpRlbGXDFoRp0P868w3R37nY/hQEMsYjafHSWBSCMp3gvhFWzekR9h+lHRm\n6UPU\r\n=dPpt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/touch-target":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f147a2271.0_1623698273246_0.22367295464304293","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/checkbox","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.33579e00b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edfcf68782450775b8e346f225aa10792f320fcc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.33579e00b.0.tgz","fileCount":43,"integrity":"sha512-JEqRRy0XlgTg8//M74C+SePXruNEkptYeekBF3NlO2Ty1DFKeFb9MGfxCXmL1hKYPlEFEiN/5wGqxD0GObAoVA==","signatures":[{"sig":"MEYCIQCrKHNnc2Mu2vmzWxRToLBLtBuuqlSodF+XBvT4eiBqMwIhAN7w+jGxjlPugxtAa8AGqDXViZhO6JVSckrQpegOwwUu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KZCRA9TVsSAnZWagAAasMP/24/LtSA74884EB+xoDN\nAWai3RCVEDQR1zVWGU6VFyfT2bKjCsW4gx76K4FtwV5ON+tK1+Kc3Eys8JFU\n2nP4ft6+MACsMLgxwx4aGLBaYlqHEuFz+GBS8XIYeozikClsWXUzGWbVEBy8\nW2Ndayj5n7C3X8dwuOn2nsubOC4mSkSCf5uCFpOlMmdak4FThn9pEhuYwKmx\n24NnVnwfYWfRCCq3+TgleeIx9XAuhB8D7ggb/Jy1QEEW4+d7ocM3ffrV+6Gw\nJMKalHnw1rlIEhHsijbdlSb+Ivef6+aBPrg5EKGUhPsn8yI5bA3cMbFZMYrp\nI+dvkg4c5wYJC81kbaECIe/GrPVjT3UPVLCzVYJkFa76xsQAqKX3cH52Wf/v\nF1Dj+SkfndRy/BSeG7DNUxJXi1bgE7urDMSA2eQQ+kZlMLeqK4qfttTPeOV9\nHRfOVUcuHOocgsx2bk9bFu+yP/1ReUQEQHfGETPxUy4S016KLV7DXLxoMZQ1\nmfMEqCJ3XdTae0whHDLdL3EifJaRG61p+6zx6CO2cAda2Qp4f6yQj6mnncR1\nmTZvbEGH5i8ovwV+rWvbcvljuOVWzEO9QXOSdDAAgPQLKjkjzQRkF96xfy7s\nPztu50m5+12ezwwDQKUg8upmRR/3gRZRbuioAb4+pmIeCyr6ORkKPk6+oKac\n28s6\r\n=ve01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/touch-target":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.33579e00b.0_1623716505344_0.22026044487669805","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/checkbox","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55cbd5ae1ac7adf879ceb055dc1f5eee8d137956","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.a6909c0e6.0.tgz","fileCount":43,"integrity":"sha512-v3Tu8XhxoFnGq7DLnlRa9qjrfA+DYaNM1GoEeS1PX1t4jyh2HKrBeMN74Intt1HKBLr9cVzzZ9AUokTq3qLQ0Q==","signatures":[{"sig":"MEQCIGez/fniponRlIQngCJSqpwA4CRn9Zpe07dXUiD3HUEcAiBtZFdlkKQsQlhF0Up4MBJIbVEga2hYyAFZwZyhQ9Uycg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGrCRA9TVsSAnZWagAA+8UP/RFgDOcAMX4wJeXVRYTV\nFTeH6frazKHeLiG2/inVXS2Mn+x1+/qpnbBWCWm+5AJxVBiiIADsZ1fqPVXJ\npp6QQahFmcOs7T947kAH1tfIDGM4Vt/FeCiPDhqnxYgmHzJxd4YMj7Emzqed\n3vUaV67rJhNclSYVDUVzhSanJ6OjC4tm2zoVnX1KJs9kO4g828DhDpar2MgY\n0KTh18MQyQTNReDgvKWirFpdtTmxyGSqr9jKYOCG6mZhoqWz3aZDcMgPq98i\nvgJZZn9j6mu83/p379mdfkna1a9KCGB+veC6dqPIAKIZQJSKd7ecME4lstI9\n8r0isR90RvH8H3Nx7ILV1ka9bPA7VGUs52Sg8f5BHNwJ13uZHsHbJYnetMIL\nC0kGV+k6rXxw36tdAESCPfNMhQTH/enMlbnpX87OHCUneNk3vMo8pYRXbkRU\nX1uGdayl40JKkxfGg9Iquxrd8m4DXiozZDktVlQW7hwH4x8ueRYPx5Yumbrz\npe9upvNDct+Grmq06ZhiC8kLtiBwBF/8jFziz9w8cJjAxB2bcNTe8EE/H2HF\ngAgQnr3fNEI8ULUgbRvjTcB0heHBWL6DrsftS5X+KGH12meVldYIwur7QD/l\nHW5bndQ1OpEXlSszOtQe6KI4xQVLWrSU2pxzs3EzrjAxha5rpLw7hyevTP0z\nq5sU\r\n=8zjq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/touch-target":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.a6909c0e6.0_1623781803512_0.4171967525280871","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/checkbox","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"909339f231ca7841da4907c6272e5fe40f89042d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.c18b5925b.0.tgz","fileCount":43,"integrity":"sha512-ZDU8dr2xaK4iQ3cs3H6G7i1kCrevw3Svk8h7S49h9cuHiaS2gglIItFAyfU8jxaxeBxnt0LCi2MjmrDborqB0w==","signatures":[{"sig":"MEYCIQC12Cg5BXkPqUBHrRmZJ8YM48QkEowQCvE22qXPWngieAIhANDQ9N9z1+8Xuf4UTaQ0P2YJvnD1QsRWKFqkD9v1B0Z7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWZCRA9TVsSAnZWagAAk0MQAIWukmue9ZYzUVQ8gYeF\nZjIEiWbflpVoetocOaCB4d1ik9YnmDDRUPqT2PcozpbJI8BNiZn929FwNMhP\nxa862IiPbHYIl1mzEOgWikhGNNMalcTkSY3o6i2RJ8fw3WYsWyWLuvzpS+so\nsIST2gEVUGAXxTL2g2nI2TfyH1GFaxDd6Fk5TuXU0r3Cr2+HplGyJkkdqcgB\nzDBl/yFa0AsUH1w8Xq5XtLvKZt7w9ec8nWwUMS03bl4JTNE8yXgb2zt2TGdJ\nw+AU4QiOcRvOL389Y7+h8e3bw8ZlhmxxGflklsJeX9+DCCA+CITMq6ZDNlo7\nl21WX6sWAxK17q/1B8DRulRVCEsMvbEwTzie56/W0ubMqRiPUT0qJvW8baEH\nceDOdzu+WI+I8CTQb12CR4JxQDbbaZ07djDiLw3IkTFCTlUR+GkXIjaaWZLT\ntbk+ecYzXCBEjzxOHJDxLYLYtemnRqsHC9dNFGqSJ+hVq78ArxCmTmpAsGi/\ny2uPDEOSW9reBXTT0SM/lZLade4dnlqf/0MGNB1BJJDSUxB9PthfqBHFaqMM\nOVC4zSncuVIg46YbH8U76+yhScb7+rLopR5lbCGa5gJqAFBQC0gRwEAFRLXz\n1KLaKyqJTUM7EHJ7h1kBQOYEK9BazT0js61pOziY36s6/sCxmL+C5wJQ8c1L\nWZ0i\r\n=EekV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/touch-target":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.c18b5925b.0_1623791001502_0.26528532424125406","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/checkbox","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57e65dbf68ad0c66a5b0ade17cd4f9770e4c74b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.7ea2e830d.0.tgz","fileCount":43,"integrity":"sha512-m3MKR5dE9tZN8zde3VzMhxor2+4I/44t5NRnz/0NtqzX0dAU9mlyHaNAo2+2wg/nEZdJHh1FU6qBOtSOUrj/+A==","signatures":[{"sig":"MEUCIBzwFoqgWlRI9kAkozh8w8dF3JLRlUzF24ToCubHm1sCAiEAtlPKrpmmtpeK/iLf5B2JYfyw6lcDOdsABBDqaJsj8dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS62CRA9TVsSAnZWagAA3ZAP/0b+nh8RjN8nOfsk9m+F\nYX5qRRDqKdbWxu+qHs332XzEPE/HFBrZUuptv0bDiJXtOyXwhx0rMGTDLijL\nocAyuEaGuhtjB589h5UeZ2vQonhdyCMvK8NzqM8n8PtyGDr84z03Ql0J+bVj\nD7xJtGzknhwg76Igkx3GYSpoZGQgOrEm8te2JTqBs//pg4Lb7PHKu446qKle\nkIq4DBKAxfW0Df0hqsVCe3WEfCk1EA2h/nZIhufsm59RjNHnlhnVkSVLt/e8\nKMDLLEpli30eTBYg1Bo0Iph+eH4IqxQlpghKNsJhurdtbvyDIiaB5RnTueF3\n0lBQsD4uhIQN9EgKnmmrSeCahFCo4mRf43qC8UkItgwKJVYBochmJlxphvWa\nEK3A+Fae/K+dCgeVCuJjwmmpr6fGnmvX90hmIuA3qlD3zuLeWU06Vh8yVRan\nWfraTCjARKHUmk9O3dM7CrEBQCK72vqvXwJ9R19AYzhNbp3tIpQ0J2/E5k/Q\nusSCMjTTXcOPxpDnWXI/2Pbqle9SYLfqLJp/VEJAJZhHf2PsdhNVJM+nLIKw\n+XbMauUc56lmromMC0z9Mku/oEbcjwL22mT3xRhS87CdcGwo4msn2H9OpaIp\nglbca/TBs9WZmb3l7gp/F3Kyc4Hb1faT+Glm6m4MnN7qT/X7apN47riTVEXH\nJmEg\r\n=8F32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/touch-target":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.7ea2e830d.0_1623797430468_0.49506895555558206","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/checkbox","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.271fff902.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3925a7acea626680ba2e024b70742f2118938da9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.271fff902.0.tgz","fileCount":43,"integrity":"sha512-sOGxy9Uo4zJOsTo6cBu699CDKvlHBG8ttFKkKIzLZu84SwQgfcD80ZvTA+VltL+kf3q8NhN2KBQ73o1yekgRoA==","signatures":[{"sig":"MEUCIQCj8WaUjJBZmbgFwg3l3Oocxzf3KYeQQaTKZBRyJt9q0QIgKFio3RPqPC1dy7H6MuUcG0s78R+OCt+uvti7GgZ0FBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7NCRA9TVsSAnZWagAARXMP/1IVNejYGllG3ju0iege\ninh9lI1b5hX3OU1WlgiKOBxeaxKS8C5m4ZJ/u8IrKFB1Md/e3nUOmB79twZb\n/Ghr4QC+qpny2SBCjw0WpVF+dX1zhiIYOn0gXCEAVkD6xEHtP1kAg65w8s/v\nIyx8tciqkNhn7M+s3yp3iKOoLtfRpCsYYqETxvL3TajmRlAXylcRG9zUeVzg\n78FMGS3/lrdYXc57PyaTRGKUvxQ5bdXSH0ZeWEBHVq6XsLHLaP1cE6W7G9gT\ncR+vms62z3UH+xhy70FRCYg+9BBLFBPojU2Uupt/OuWcJSiELprYKTuxRgP7\nbQItdiVYx594tN5g8XWIxM0CP8WqbajdnM7Dvk5ShTbmt8Xj11oIOgZNI5aH\nWjlamiIUa608vyGh3zzQjh8pqyoUZyzMEITaUGutEJ67hNjH4lRooTFQ40K4\nlVsE3G+Mu4ZquTBKEl45Ve7oS3tcly/8gRbFsPY7A/ggm4R2YTnk7yHXmRm/\nFPgP+WHOkXfGvDeK+kjdoaVv2DFxNQoawYqbmE2siG8L2z7Gk1lbzed9Q+0m\nFR/gwI8bL7lcWiZQBkwCspI7wqqXQ7gDIBasNzrjJy1LjSZX2uVjPz9EIeU9\nA/lIaZcNI4hePKUREtdQoW+wSrO5XckRIfi1juvMMZLlHkX6sf5CuuJauH9t\niqCa\r\n=20fc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/touch-target":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.271fff902.0_1623797452968_0.9499151353169797","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/checkbox","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1cc1e745908b1256ec1614aa44305be4f380cbc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":43,"integrity":"sha512-3A1JY9Qg3IGBHaNhCQMKekN23DAXySBnyJxVgR1tdCcunUrnOL926RWQNhZEcrEIEC05+8s6q4lNMKW6ZIl8sA==","signatures":[{"sig":"MEYCIQCKi9QdGrZWfmQ5FFwBXVjnPR22aQMfPb3ONR8zLkASowIhAPkiAu+gGNcCg4eVBwKIKBxn+rvIh1DvhTOpI90/OQG1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyme4CRA9TVsSAnZWagAAx6QQAJMtDprASr4p+mVVj4oO\n7CgCfO5H76dw0VbR0xYikG/ikVlYNWKvk+o61cBcBRd08sq0Yj9kEBhF3gfv\nrkfqkg+Cah14gmEZjleeM9jbofGpdc7BOVGUO9LVvUAyOysnUM4OMiV0qgKh\n4+wvTbLFebRWR1zjDqB/+jh/R2SwdWFvADgRx3rgcbRu8lnZ5KMc8Vy/8lGU\nS0FVQfoqbieOMmv609Jkbb8PkA1M4PEiJYQW/f0cB8GpUz4fwUD+A0yC35cY\nRIopn6FM5BiaqxjXaa4lCxAMQLPaYMSKWGNa/iKkmk3FKWor3ShUDvG1o8Lp\nRunvp7KgGthQhGsa9vjX4sq4682RnSGBixr+olaJDh1asuoFb1Znpt7j0ZN0\n2603lxZ+YWIqnSNhtm7U5qfaZIR2zcpIoLcIEzx62aw1WomscWLHdm2PRQ2E\n6h7LpQKnWG4jWAjNNWthRQQNgbfsK/loMuU5nNAtk65eBY6mTO7jPETlYGtw\nrgdggKmRulfq1XfNUvV2izOrxjyRV5cd1vN+kkoPyLjuUsbg7U1+ozvQUgTd\ngXn4pDtlmytWY1H0QSHvR90XX9hGHyZVQEbrGdxhVZYNxVMCjjEuum93fHqA\nlnPUEVVRM6GZuyAk1r+tY3zm7JIh0L772N5mLOnX5WNOFmYBafEkT1FhEI2E\nJwVQ\r\n=0kCi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/touch-target":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d96f0a1e0.0_1623877560232_0.12299953532086838","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/checkbox","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.a6183801a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebdc5a722b0375da234b8763f901cdfc60e2cff3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.a6183801a.0.tgz","fileCount":43,"integrity":"sha512-P3oGTUdalmTyE3htSlbp4JPvCbaxivWXzeT2rma46IcJxZyG278kWhxMcBBj9ONVh1JqvIYrTYe74jw6ycK2Bw==","signatures":[{"sig":"MEYCIQCZ3nDxkvcXo+ePTQZfqXD7FG0LQ2ro5ljgKThAheoVfAIhAO+vSGxBK6qdqwoKccH2v1p1eCTji79kcDm8zAA0Jedl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWYCRA9TVsSAnZWagAASHAP/1AehsoGQzuZpvhUzrVZ\ninJAGH37cOTzFfeKhr1UpMUrvRjX4FGTjX0pACHfCT3DGv0KTQofSz+OnK8+\nxYKVHTbx3t//HunLGQ9hYGFEHzzyZGfHz0p7Y+LyaYXEZkNKQxJOcxIrdp3P\nuyH5Yk8DNKtETCg2D5NZRc3DvWQ1QeDdVh1I7qJq0s1aGWIuD5Vr1LStye0z\nrBBdxP4KE3YddfEixzIe2j9rvkGwqV/btmpG2sr37XwVUi1gCB67WMPK5HPc\nBq55IL1tRFitXQ5kZzGfo43qQ84guiRAqQOVQLle0VR3Y3PpLDQ+99h6IBlF\nP/LoXvz/4Nd4c5iQuaHi9x8dkyTLV+cJz/SLPBw5O3IqilN7HBjlglpKmyPp\n2JMkwdyn7PiSjnWUBLZVoOtR3xfXFjiqIVWKTqCY5TTvXxKP2USYe/G1dvQx\nkDjhLUWeAn5vOKc5MDp6MATdX83TXaX/v1EudfFT7Qk0AOcDksBN8fNLJpkO\ngdwzn08uPF5grr8Vv4PBeXmTjnoxCOf+q4UmaU1ftPiiWvN1c9OMxj9u5v6w\nVvtjwdcadXd5jKzh3ODtRuugKcLJGzk1VfrCYtP5CtX4+85bX5yoXvJR58d/\n9+PAThbi0IoTLDPq+OjfZr1uMBwKwfma+vKrd4N4RMJ+1CHl6Mqj2LjBjBEI\nhRg1\r\n=3UeL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/touch-target":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.a6183801a.0_1623881112360_0.3706687092541068","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/checkbox","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.940550232.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24262e3fde5f60b01b12bb650c34b71e667f74d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.940550232.0.tgz","fileCount":43,"integrity":"sha512-XGQOgT8VChKpT7vd/ncGR5TjHOtebn9sIMrdrUbfTSPXZUYa8OGDgSbA5R2pif1n2ViRtdLfS7oqHw96RpNH4g==","signatures":[{"sig":"MEUCID3T5cS++adIuDvdtSaTJUsNvL30ZHe3tFC8SW1kGaW8AiEA+Ap0RPyCNZipffckw1N7stg1imVaD/rqqDNCCLHIpcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UPCRA9TVsSAnZWagAAMD8P/A/moehKWTjTXVfheBs3\nvOIx9HkxAB70JBUdrAuMjBs+8TprCk31eoNDicle15NqdqIO4Cb8MqGt4Bqq\n/+FlIHKhJFhXpvb2iXFl53sajApsXxnZ4PlSO9CxHvfibr/KDGG10Yqu4a3L\nSml74HZPAxNmdCbP7nlxobW5Lwfh3mBKFMByPkMJlWoYE6IhIkQWjqw1ZJs4\nZSEGLG/CyKsqK9GjKv6o9JlXXtY3yT2xrKIdz7MvCOSN/9PLZyV8b4gUFsmo\n525JWBgRe8xeHhpKcCh5dZcnfD7zH/UH488ZgdTSuQ/9sHPUUMbqnvHhbWwM\n7uVmLEYxRHzEuEPwnMdHbmHuCijiHjBCtrskbdfA5QkpUjUMfDnyoO0Jm5en\n9s9+huUb5xnbgjuMULrBds0GZQqbJH5HlXEXwjMGarcFu6q6o3/rPsQMNW2U\nG6CI39Bz+VFRuYu75faArSyQpE9juIOgHg78l0amMo1HNmKrfAqVPmcMMOd+\nmM3YInXXKi8rB3qZlrTxK5Q8/wdAyQ5QzPPSs5+dRncMU58f4yQTHG0iXXPX\na8P9Fm+mmXd+ZfbRnCPsu7Uodl7Jjiz7JEjuK6pisbSFAxRE5wkTWOtUGgel\nnojnxlGxcCGtEVrfr4z0HuXkvZY7medp/psK7jtky5EYFQsZZFne+7vldEeV\n1HR9\r\n=VC1O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/touch-target":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.940550232.0_1623958799350_0.8060694984168801","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/checkbox","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.f705e8048.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab41f030897442646d54b14ced97e301708c707d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.f705e8048.0.tgz","fileCount":43,"integrity":"sha512-D8I+Ol+7JYotKUK9cE/tpxLjVIqsbdEp5YiYqHwbdxoB0VkDcINzE6nH1PPVVlklviz40bwZ3BmC8d4fUaA9UQ==","signatures":[{"sig":"MEYCIQCoXRXIVa4zACozx0bU3H0MZrkdZd1vTuOJRuaiXG8mnwIhAPV1Z2KLK5Uf88Gr5ufs25lF+jYVZu/HD652Dx2h9YLT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqgCRA9TVsSAnZWagAAVNIP/j0LeEy50xa+LyYfalOZ\nZ5UIKPAVf2nVoOmU4CRq8jGsUnOr3IwGpLW/bNAi7Ry1OmAzr4rfFkz5wVRQ\ny81f9IHnHtpGaczqp5leT+HWbnAZhgZFSgBqHXppam/BTRIdYEdDcJtSt9kk\nHbOyFBohfyBJfC8//Z0ItyTsqFSZC/SQ3byN4Gf3k77mYxvmkoeMUD/NfVGy\n3DZJcnZLTYbxp7IQbEul7agL98P4kTkSodbcwNxHFEsBjEraGV1/lWtEwekI\nIu2INNaD+TZxfHvXXNzm8ntArp45nT2zkB4f9btaUVMYeKy+/i/X1ZFON7VS\nCbkNeNZLXgtuuBX4Q182Wts+OskaQrlGL4rIDfbQQh4qZWzAGOhE/8DazO8T\nOyM78qyR9XsvXHEptqbzvHYVHfeGAjedeNspI7eucr0OXxTDpgu+7oRtZiT3\nZ4+xaYMcQJ6cZgRaGeFbhpot15IqHn4H0bo1Q8ZGuNAm+AA/fAIdaoHmeIk/\nOCDvgb5yK4BVVYKxW8tgXAZrwLCmzlaNw4P1B6x6KqgD6rkWRcpPuaa5DRFy\nLrBPpiIel5kBHx/KExZlV/dj/sfR0iENzTltxajUvI+tuP0Ypqek8gYhM7Xi\nVO26a4CA3ZhyW5pKjDZ1qWTso67XszRjff7puZpTbOX0yPFbKYtvjwGA6FJ3\nSDeN\r\n=5ZT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/touch-target":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.f705e8048.0_1624029856391_0.4441469068523838","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/checkbox","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.08d791f37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fff6996a52c5baac99cf460fa583230b21f766f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.08d791f37.0.tgz","fileCount":43,"integrity":"sha512-J2tkGmtvwSbeGgfQL1xHWg0FSP1KWvY/IloBIzMB1QFuzcI7y0nxSB4RoSVcXL8UtJfRTOAdKpMbBtDF644GxA==","signatures":[{"sig":"MEUCIDe6Hn8I8m5QLxUYS6a+ekr5lM8w0KoW6sn9574PV0/yAiEA1jEs/PdE0/YD1BPTSO/GemnIj9s8EN041mEYaWxZngM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwBCRA9TVsSAnZWagAAVmYP/2LrjunmX9uy/7dNZ55F\n4Z2bawwxTMqn4DPJWV/IaBO9fYEj9GBb2LNJnn1MXxo07Vx6SwwYVccQqoT/\nwPFyNjIfm+ZiefYuxTSkoi6fTx+2XP5ZLEZSiW602vN5/PACGU/YNW+sDrk5\nd0sBOG/lXOb1rPcoqITNwbZpfJSeGO6UJne7bYypT/JwyLUvxlEdyxNun+YZ\no4XNxFWM+1z/fsS9gljFQzaODYUATWQxrVhdsYMUZI5JC4ccY3JsLfzAaRlm\nEcCMvRJvyAl3pcKLO6eHZLFtOvOUueTBei9n4XOUonUVbV0bpggD/BH41RJO\ndaDaTRuM9pQ9T/rNNWGN+Wcu7IrzhWqBGTKa97K8ZG6Xhv3FbCJv+iWYRLMY\nmAW8PAUT4epbImvuo16gjV35ky2NzrgRgIpz5JrfTWLCuV/ZsbYKPFkvYmrT\nVRVc5K6gHlau9G3b43i2Br+c2eyCsPLxA14AvHzjCldxBaxEgCKgYLvukd0D\n3ywCylT/OA9LEu4OawTUxTBPPqv/5zL/xxLVinOuAnOJ6QGOclMySJWe5zJM\n5ic6IBAXAAxBGfI1xU8XDvfIiWhvc83pM3EYxWj82NAKdxg8WTjHFzFQTNjJ\n9e3sJ9RvXVn8iGz4FMqMvO/seX4BohLEkkiUVKhQx9IKi38IRr7WDzJENLh2\n8+ZG\r\n=499n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/touch-target":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.08d791f37.0_1624050689457_0.05574793434853942","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/checkbox","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b666098654a916721b0a681c036d16ee8bba6dc9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.e38d7440f.0.tgz","fileCount":43,"integrity":"sha512-BlO0V1NMBs9hV83+MBDubkFR8/cJ+UmUfES9DCBLX7pffJIY4uQMnPLuvJ57iY38Q36unPOnky5ld84CgJQVgQ==","signatures":[{"sig":"MEUCIQDlzRFa5mU0w018ERH/H07NFqEOLnGU9i778nlwh/1HdwIgJFNRIJJXqCMhpEcT3w7YvcAn9p7DVLoYpkLhhF/5U9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M7+CRA9TVsSAnZWagAA/wQP/1quWQb/WoO0Y1WPrcYv\niRFKMGgrEQr0vPLnQO34OxkRN9icP8usGkiN1qDPkqSr7JJ+LXgZ8OWsc91V\nOuNau5iAP2fPWZciAyJTUOrA6pAwS5G8Tndxnlsl7Iuf1qyxvTCMu0Y0Vyoi\nnELMN0c0mPlaMesTMb29gPrGeMmJoPAOzB3276hm3ByGIaAdiHKMbd8NzMFZ\nVHim0YJ8tQT36Xagqu5bmwecMbZ6kPa/sdjvsaRhmFFepgs0LddA3dZV08MZ\nT/ZTAR1alst5Raxw1/FgRka+PFymCD1C1PICFSwFC7hzIdu16dl5u6lYoGhH\nHaTuW/5Z38+mOnBg0U0+6ZvmCfM9bjW8vgtXmOUcwpnK7rRH2R7BrdHNjRHQ\nc0hMozv93Ga2bvbcyEPW56p+Ck60YTe7EQIOIWbjWQhVX9VH3KeVh1hknULq\nlq0Mfp+xtbBhDKYiP4gV1K5Xg/TybZgtibo+xHJQFyqVx6IBS+apZ5+FfTxu\nmPkGrZeLdgv+woUbEdcPB32ZI0dJZ06BefwU7yVR9VAHg2y1LQHdWdC4vI4Y\nlonxN40qBNTiD9mM1QFfeypoaBD5/ybsQYYLY3Lo8bVv6Ve3321dflDFJAMr\naUDnZdSSg5Dxcndrc/yHJmNvA/S8Ys5sV7rQPMKVqGmDkkOGSTW2+Vm/wsZP\n3yA4\r\n=k06q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/touch-target":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.e38d7440f.0_1624297214342_0.5860581544986359","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/checkbox","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b2b994ac8d4500b23941839fded830caf35c834","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.75900a5a9.0.tgz","fileCount":43,"integrity":"sha512-8M2ZFVmppGxoHY5g6sI+/FRVqzCHOoUj7+JFD8shNn5vrb42NyW36MWyft05oyhS8ugIzTJXSgDirhH4sBDnnQ==","signatures":[{"sig":"MEUCIBnG2JlVqADccmY8RcLBq6UrdzqGZPzl8NI4KyYJ3SQyAiEAoPBpMtLeLWcOBCBRNydsZfm9/UU1RadrQb7BsqVRIrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Nw6CRA9TVsSAnZWagAA9XoQAJhezmLJqRJS1PSMp4l8\nzxTHWQmyZSrVg+YkSDDNgs/wPuDkqmr+CAkOvkTmYzRfUiG62e+O/J1qVz1c\nnWXYI8wWwWk3sF+ss7pPDFeqT6q3NLnPR2GK4AUOLmGMYo/+3XoWXCYV5ldY\nyrrhCRXSyhmw7WsxiiAXNZ6s8sbZHBfa8hJf+oHGUqWDUhFBl2EkVNz0Q5bV\n1RZQgTEXCtmmYz9pa7G8F225otnET6WUwkt3DLKB4PQc5ahKaOnOWzRxCzBc\nRoLYCi+odEPnOh4AvxIuNEepwA6YlLQonXnTieArNock73K1iIHlT0UL070y\nZPU7zaJOraaFFAQwFeHbUoFo2oxVvW2mPbyrnBnxtx9MVAGOUzHBIa3FsJ1/\n7hKHCpbNU/zp2hx16V7SUN1kyo7TrKQ2Z1fweneyUx/lFHa7NlmkiQVeQQDX\ncoAkDv/MMmqBL5ZzBxA6q1ik4a2E71xt7WZjzsrflSfMxWYw1rzi/t4OGtul\nd1rYMbotUIzOFbvRwHgd8Giho5OiA32+k/pV/hAbTa8NR6jiTmPdeybZP+wZ\n8MLVJ/0kMEq+7OWEiuEjLYDVUmWCxwAaIMh7IZEe0MHkEJ9aKHq8CCB85sQK\n1OSaoYxL3y3nLjc527y7XlZuaNFKgxiMSZLx5OLg5WOS7ZIEdRZhj6QEruE8\niHM8\r\n=cEre\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/touch-target":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.75900a5a9.0_1624300601660_0.770242162931549","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/checkbox","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7555c71b64f6922568ad4557cdcb65f8c796a4d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.33e6f50e9.0.tgz","fileCount":43,"integrity":"sha512-wr9A0mbghuWVAKcC7UCPksf3kXUpn5ayh/H9q7+ZZf9pHUXmp1v/cfMk+7AZqh7INf9KtNC7QWUcpLDvut6u4Q==","signatures":[{"sig":"MEYCIQCpaBvb+Oy5yuEB909Jg+KTPoYc7UB48VYTxdgfWkZ8QQIhAJcgTtX48/w3WWGAD4QSfQe8sGrBAhokeBCP5vTO16EC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxICRA9TVsSAnZWagAAla4P/0sPIJsoWl1bxFpgeM2s\ni0BSzT4go2bChJsff4Js0tT3bIV7gZdKzjwwTRETimza6cS2vLhiGpdHqCqN\nmrqUKs29oyJ/f36zbJ64MXkyQ4mLqNOPkCMKsUzjDUTxoh3jP8qw25VGJex9\nwgoF3q5E61dQlJWLgXX2XrjU+9NCMti8dY/0aasAW/RUti7oMoR8s6FcqAAB\n87bI9uDBZTsba/kohfMpb56MPXEZID+vQa0eXyBUrfPUdpMaYBQD8yvRK2bQ\nfjLJTNmpI3f8l0veOaYamRg+QdeZKWyrSgKCy9sSX+Z687vpLhUR8ZvIBMZB\nFKFvVYY+p/BI0PBOUX3cMZwJInvgM9AcWPUDp0A25wnNdrqW0LEglFPjXNab\nHs9hanfZjPgzuzWU38Urp5NG4EZE7Dh+pU5McYhOqyBb4qumA+gqc4xtDzGM\nLlGaOSuasY6ckRukdkYft3rS6v0isLOaFLIFhrbuT7DPSTO7mk7nJ6ee+04y\ntFQnoG2BHBkH6klK96GQ8GLARMF2JH8OOyguqbg7tVfDnQC9QI8sw+bntN34\nBe9ghbQBstCm493/ILoe5/pD9Ul5M/EE87a5a3vY+9nwdPd3PQC5XCoC8Pa6\nzXxvkkYuY/LY+V15cz1hKRaPCA2ArjB4MEw7SGQu9HzMpa27XKWAtvdCcO4e\nxC0Y\r\n=hqGx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/touch-target":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.33e6f50e9.0_1624407112162_0.32100073090320036","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/checkbox","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8c685301d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cd033786d49bfba46e1b67b389f9e8bcc398ef1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8c685301d.0.tgz","fileCount":43,"integrity":"sha512-B5KW/6DAt1CbUSXJay3aQn2rJ43MRi1AyKe+/ynHV54ioAulsdKctCj1wKY4FIDOaPmNygAj/Koe+BwEkmGqTg==","signatures":[{"sig":"MEYCIQDO024p9RQmIAChVBxRHdFzQbps09MTNsb4hZ1IcE911AIhANJtdajxFm/FHQCF51jCiFCf7d13PY2ZUfFyWQ6fXVNM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xXCRA9TVsSAnZWagAA6GcP/2ehNatzAR9QP8YdbG9k\nMdmUKG998WC+W/XGbXzQyW2KNBfLOj5f5Nlb45Tfg/3GQdPP4+xjB2v3iSkY\nH6WUDCBCg6k8i6atrQ+Y1YhR6YKHzFyRlqK5AN//Ez7S5QDLN+FsM2KxGbxp\n1877y3jUsNIjDniQUMg93GlQCuCxz/J6ENot5RaVJfttG9LwU3M698fVw+P6\nIlQqLSTKGYEpf4m7QYgfpIJvViukQSFvq0GaWYIk8ro6hgJar6riitHMlK5Q\n5yoH5xs6gA8FG+hmvjJcb/3FkAAViSTm9cG5mFXZK+xlgqnmaBrBmTptVClE\nvnm1p/8XiIcoz05AAQtk5yKNO3/Oem1oEk5jLvqATtn0zvJAZKt7cqoHGyiF\nrzS6DkWoJObFhw8zZ0iCA/HSUltk4qZJ5Rc9OVm15idRvrHcRLxEksogEEfS\nBv8O1v2oItIhD0UdDxuYJV/KIQ3u9fOQOQRHOrQNOAdhoQgywrRWAppEl0hF\n7E5hwUhPZTCAo2+LVHETb/Zmprv2Zn9bWDxZ9imGhUHpYbM5Yin+4e1sEuZJ\n1jvsWNffye9QrZPOoxPeB2rA3FDmuoRkECbkuP9kEXFIYTYEXY4Z/z9fLLtc\n//xqHwPv0j0RtpFNSrtbv4bWMuaOEgBe49RU0xYSVRl5+mCbZ1do2b2IgIVc\nEK/j\r\n=r7XU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/touch-target":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8c685301d.0_1624472663504_0.11985757317891488","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/checkbox","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65a71d626a5325ac7057c895695994bf60ea4602","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.8c7d994ae.0.tgz","fileCount":43,"integrity":"sha512-Torh78lKJryZ6KbV2CNS/LCwyxqm77gtXAgflbNWZueTETFpVSqGFhKE/2k3ETMy25PYUfkCIIX9S20D0EW4Xw==","signatures":[{"sig":"MEQCIDtPn9x2ZrrI970Wj577GnTye3RAN+P1mJPmPgFioHcwAiBM5adg5x/F+Tl0ReSA9GnFdGO3xi5snmboFpAiRaZGLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04sRCRA9TVsSAnZWagAABnsP/12DH7a1c5T9pqqYODMp\nTXfZc0FlipdCpXyVrc+Ffmdq+47ESt8jwHibzlrOamWCOdCaiaTxa9pnJbOk\njXC9iOiy+QTawjlGElCatdWlAIBHeaFT8Vzh7+CY6assFjMcQy7+0tCPysUb\nVOBgi35sD6Ex+mRUdwC3jQJf2yHQSfM5sYLJfcu53Cy1zhXON/6myiA8i+H0\nCwQNZzVinv31orh62ouj0k75SQOE7wDoTbrKYOf2FCkJPKoAYUeHcuRFQ0Ib\nW9KAQw+yva8btpy5gWETmFVjBHw+rz5dW5vhCqbHMMq4QRFMhRok0DeNB7dq\no+kBMwJdutFzOC0O2dhEuqhWMfFUUB1Wz44KtfC24iN8NBsC/0r+a36fye2D\nVOFg3eYj+gMMexypu2vtqimywVMCdk9f0d0WKKeqTB0oenaDCQFJQHEacLIL\nJebUT29JOdakEQSwo43+/EsTO54W6WflHRqkdHBA1QFh5mb6htuwcPS75tHp\nR2hLMhC4Th710XHdvD/IK9h2K5mrpGQBirl5bF5g0ypV0tiYCeouEXwCOlA7\njzcglJemEb679mgqImX5UeP38U7WzlvZGI0/6T5n0GLfcfJ7i9P4g6Pm/WXc\nmeDgI8ISpRstK0j5pvLVp1thEtsj4N3JAfbeWaPGSqsYoj707OLAAEfM8ZSP\nCjkr\r\n=A7Eb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/touch-target":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.8c7d994ae.0_1624476433020_0.19530126429004246","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/checkbox","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19ed9d500ab69b3ab288c9bfcad7bbf414d1c420","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":43,"integrity":"sha512-CMGvSBt2ZtSfbUlLM9QvV6iTOweVLYjhPDJj7/MH7Et6msGE6/N1097/FNe9QHjmbFiyviWjlUwgpCa63HuMUQ==","signatures":[{"sig":"MEUCIQD/uxImJvUa/1Za4imGQj1sLAUzoNA6yTnGg3cK/fqb2QIgDSJnKrF3a7/kGBQA9KeOiciMQHrqZRegI2MKx16ozII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K9xCRA9TVsSAnZWagAAZdEP/jKLxyfzsnelYfSykjL/\nQ5Cocbewui5cVTvckpBfZIcb9rEO8Jkniw9Pqd5wPKJBYZdcVhJiR9uFXpK7\n18DLVNQOeW4hEBYv4GOCQ7WieRvrLB4nn4ijX62JCK6bC9nqIweNdVrr2ej9\nH81Wlee+K+AgNBmBgbPw4WveyiYMBXZKbqT3Q9l2Dg0owpYcVIEhKfE/JfBS\nx7Nh8eJ7vjcvXxfiPpfkbK3xEVH3Rxyu40UDE1qZ4A3h81CLDxuLkSoOuMA/\nZoQagILzv9mgLW//sG/waD21HgkmXYN+XizlMUo9GoHDXm8bYm2Prg6m7wGY\nxNJDTLUh14F8/0nSUySXF1R7kNxAxuxJ9NFD88FMHhXyaCsVlBkuXBFrbEtU\np0Wy6fiAPaFEsy7LW0VpoIF9NkB6+2yQhPgt47SC0qB1UtIJ19A5bA4e4TRz\nP4PI8cLuBDIEI8fwnTonmmaPh5wMyM8bnknspOIX20th55AAft6cJ6h5chAN\nb91SAehQW2GejemT+yqcjr4okEOWKWRLXhd3g5A0W6NYfIkx1hOe65rVjE9X\n+Urcqk81Dc7spgXhiJaCPC8UM86P+pAFGDm8jQRZEFo0dMLZtUUi+SG/r6ny\nPZES3UBp4WE/ugFyPECyUOZ+hinqRWPzX5vE32snt8jMF5pEDu1D90aZlsy3\nOERk\r\n=1Lpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/touch-target":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4ccd39bdd.0_1624551281346_0.16306859462803502","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/checkbox","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef7ba31a91ffaf7c35bd17b83061f755b5d5fa3b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.17553e9f8.0.tgz","fileCount":43,"integrity":"sha512-K5gQhqiWrurY9BfojsdP3s4b75l0dp8IKAMDcX2GtqNL6vgVrBRY8OCCZxxRZaZRFsLE5TdnyWCnVa0DBRLhrQ==","signatures":[{"sig":"MEUCIQD0BDMd+EPbGtp14c+ejWUJKhRtZ8qXgmNY36xC+WnewwIgJZtoGmGcmK3PHDLLeeMVmF9S/pr9Y4VHXs7pSswKBio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKiCRA9TVsSAnZWagAA78EP/3KbgFB9Ix2iX3A04bNj\nI+24M6y0A23Wp4z4PzEXfwI0muZKTfy0frseA8juROIW/D0R3T7nmG0y2q7X\nysVdlJxIBLFmtal3nmAYVN//jq//ACsmPdMHuSnLaQ/Q78tVMcnFouFnYSNw\nFxhUPVGRjp3G3WJo92R+tsGBCitL6qpIbolER0Mv3O1zrWDZakuF/Iiu7pmY\nuSBbaFTfosDKVKGEWfwSvHJRc/sOcI+Jf6Umz6yiZFBoEgqX5mLZ0SElOM0W\nfnoXtAX13HFCARNlazJ66Hs/xKkylK0lGTkoggtM5TBOx76VuZIW03sfwsLb\nmj0fiZRUsc/tXWmDNwSKSnAwdPvYQAOu0eXFaTPCreI8tfDMQ3bozsHokMXm\nEyve+AXxK5WqhW5rTlYC7KJg1uB2XYLwcHKjADel5kwTe5DXH0XJMrqUZVWb\nX7YMwmqfSkyJZ+IcZ53I5seP11M1hns2IrMEJxjOYLkHMwF1oZTPbcuaheRd\nnQ2qXXYKLAO+XY1w2fOZIieZpChO70P1ejLiYDOmDc/oxxK0Ic98DGOqdVmV\nnf6Nq2f8RpqxKLES8VKyHNTmhRHNRtUS+ZK6MU6W1ls+opfYsuoas13lhSyn\nPVWuFqs/I2PMy+QzevbrLrCn9pPN9XW4i6AUXx7kVfTsgJ5mPdFb6FpcZHAs\nHCcj\r\n=BOJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/touch-target":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.17553e9f8.0_1624920737674_0.1764186948673061","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/checkbox","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e5dbd7e3ecfa019c7cf3aeab3ddf2d46a0f5231","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4c80072fd.0.tgz","fileCount":43,"integrity":"sha512-ptj0ULaijLhbpiYEITVCXv49UXVUdgjGYUO0Oixt3vKrg+MAp5bhwLGP6DnQkt80FuWsW/2PzxR6R2pxatAiAg==","signatures":[{"sig":"MEUCIQCduqFiHoBpjHaYPxYaAqacXP0v7CLOmenOtvUckpqc6AIgcpVnzH9ZN+w8l24xklDqHjvSfwuC9bMHtiWe3kFmAfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22kpCRA9TVsSAnZWagAAWWsP/jG2Ie8OPEStWkn3tpjW\n4WQu/wce2u5+rNiseRtKdQBqOeKPeW0UxHPD48JdGAXy4oRZ8GnyspnIcgx/\np5E2LKe6hbhlfDy/7XSzZlXt1Ffve6t4O/Q4WbRVjsu4bkgmUduzREWhvu8K\nkRbvaPphw75YQ/CdZnsLd5g3/cuiY9Vwp+ZXvuNApAKHbmgweatDOhdU6ecJ\n/he9imNZ7IIfSSyL5a9n+ZnTCWZJ9L0rUj/wSTMya+GAWvYsGI3XPi9Z2xbm\n4t9XIRZIhWCo1QY10pD5qliTm5uGGw2SOnkvhyheYmeTO80eK0XV+j7IdKMo\naVsq//GWazb13kn6J7xZ+a8y0oyZ3NjBemzrmJBddE+Znoqyde6SQmHk2dGC\nuwV1qvziVmfHlpm1iad+v4H2NJgbifgtOJvHOXZu8Elx3b4PlBFylDR/nm8a\nX/J/uyMSt2RlL4K8GaSO9wLWYzl2dDUGeM+CNsYFs5D599cCg5EwV99tqQIa\no+uPL0sYDCz87jLX3vSp0dl37+Z818mKR7oqfm9k328mW5Bh72D2/+ra/hX8\nbG5OKhP8jRgdNwZ/zbMosgyAv2PiEBQLm1eJj9RHnrcLoxuwJHul2wfpwRu6\n0B/RreI5RTKrOf/IIh7wd1OTNobxGT2adv/5p4jVIjiOkLp0dtoxCVWxXEYp\nkNtu\r\n=j03m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/touch-target":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4c80072fd.0_1624992040849_0.5259449123483102","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/checkbox","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.796811db7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd39be85c27b76fdb29e467a145ea0e67132ff9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.796811db7.0.tgz","fileCount":43,"integrity":"sha512-8yKIN59crT64oHFqIs9x14p865EeHtgLNtu4deFrqoEvDJMGhXrbUyhd9C8u0TG0LRqAaBkIKqvA6O4A/8hGFg==","signatures":[{"sig":"MEUCIB1JBs+SkHPu2tMwjOXzYbnBOtkVbgP6X0dL93SKQE8wAiEAntqlx72HE6yZO1bC0S0MK3oM26vO7D+3yo6mPKle0RU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZICRA9TVsSAnZWagAAyEEP/jJr1ixzT2QJd5igx0mZ\n4YlIxF9mf9zD3tNmjg/qAQNhiI2PvxUZuS904fh8Bu3k8DXsinXTJwrYrtC7\nZM1FOnT9DKFEo7YdDhDaWvmCrdAEn14UrKDCQVeVu0/RlRcVeL+O/q1FyS6+\nfNRh8fWMs/rhD5AILQtD9Pa3IxgsQQ/volCxNprHdmyEKkkhDDOurSbUw/+q\nPrh2XBf3BB4PoO/ekhkBO+NKbniPwOoET2FPHZjKl4M6hhT14YH3QHAUJz3u\nf0JSnNyR2CzlP9+rjwfn9DVi07iTKobduXCn+1mazy6UDkfjhz++fPDYTLeY\nbXpmmA1dOXfcm3TlUDcAEPZP9Ji20Isyf0rL8Xn48AR1eFXkjNFGAe6rR9KS\n+y6kUOKLIX4eUrC9GbEj+X/rV0fWEKrWVy2S+XnucsrKqoqETBvL2xcrVh1Q\nqaKZJZK4cWxMa+7bJz2E34ej0Wg6Nc2jUoaJwYGRnnFLm8hPZcrGkPUtb3OO\ndM4kJ4m4PCf8FaatP22GuYs+y81KbKWBbry2B+Llb3whmh5oiL4ZZsHzprFc\nNwjd66Ps8Xo0vKwasN497p5ct3wOxm8Ma4Y9bcVHQp7zhXIX/OiPGTQnJOP6\nKMTLG+m+nFR/iWVzs2MRZgLas5rV/Pwo2NaEOYTLlWBFJjoDLDlpU/yuzEkC\nvE92\r\n=wYEC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/touch-target":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.796811db7.0_1625097799380_0.8635359147223363","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/checkbox","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b6d87bc642580610ed6d022895f5375aa76a25c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.70e1efdca.0.tgz","fileCount":43,"integrity":"sha512-tH0cpu8LM89EpRyA/gJqX7AdmTnnhgcn69st92fNUOendz3E5iXU9m/iUMIaQfpT6IBlHPW0bOSgQECgNVyuFQ==","signatures":[{"sig":"MEYCIQDdST4qKK2mDJ4GYBMEl168Up20XRcQ5IxAKT1d0jPvXQIhANbutSonNdL0RnkGWQL8VSHM9sFk1dVDLFgSgSbE0uSM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYLCRA9TVsSAnZWagAAAV8QAJe8IEaOBx8dIpZhmjju\nJNk2NXf+GqyfJo+f9X+D/zEkfFOMqYj6Y0B5UBJKCzKKntzN2OM05dVUxTqO\nDAG5ce8dBY6VOqFaw44y9WINCc77IH3EcgOOScL7G0KmoKBzZ5U63cbhY32s\nKo/p1g8dbCt6yGiXADLIuJCeXJzmAGXywcb7BUhXjAzw50p3clQ1KOOKVYZQ\n4Mm+Vy9sbizpHZ7ndKphk3lbXMuL7V6DU8VSXsWJxjUP2FHinyZkfiKwawQz\nNzZfakF5PLlNirDK89W58gn9DzyFUCirKQk9EuHM7qEbubAuQPtNDRgayia4\nK5qeGLioeTpvaDNu1M/J+8tOIlIrNYLwEzVbDON4jL8mnzdLdfoZjMeV9Ae0\nOOYyc3NIAne77ZABLgqwSIqdyJrJL7v0d59DPAf5x+p7AEuwPPWDnuqqyBCO\nO8liDWZ8zhNLOu7xBTBnxEzqqHtXFS7ykD0oKgWtOS09a3JKR0z7jWVZ4hMm\nEBZSwy2DZ0AESwFd6w5EyBhFb45ikVxEKeB1WKoM1SeNJXmlI9Ko6lDS91Xy\nX2dPAcGCQiRJOST0Rs08+aE4e7UlmrumFssVNwNJmOaLo3J0gf9w+O1Nw6t5\nkRA068Q/p0iG3iRSyd5bNj/vHrgy/MWlFpyOHemgjD0spliusqwTiDAf2lME\nrfUr\r\n=XyqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/touch-target":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.70e1efdca.0_1625159179161_0.8020410459768981","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/checkbox","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.435866d32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded900398f3d1ee2b932896c8d98e6009e0bfb27","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.435866d32.0.tgz","fileCount":43,"integrity":"sha512-EHCunpT4A5PMKGFUYNUG6kRozR3evuSqqkea0NgeIufqYd6CjpElXrd2jNe3HGzftlDOcVuQz+i/viciZP8sGw==","signatures":[{"sig":"MEUCIAIsr7Mxz9tWimV+b27WQXwD/FNaomL9h7IuHc/Ecy3BAiEAqZKCTUd2Zaj4juuxDELk5AUpNr6Qws4NFQdbUY6O/cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kOCRA9TVsSAnZWagAAo/cQAJtfecodKhV5b/8nSc06\n7JHHAqRh5DuBAHG7E5IWLpolfT8o4zsGT/du4E+2ERlggc5uomKZvzAq69RH\nhcGmfhJCDxmgRFPNgMd7TP2/8iLOx2wYF972Vw/pwkt6QjpP7PLE0KTZQRaN\n/APGz+5JNWVb9EGc0G53wZlCO+LyAUvNaPjHyaYJeB8pCBCQrjINFDEt2KWG\neHeRNi4Ddi/LPzUP+JN26cB6iSVe0Up4zyp88vErujDfHf81jSf8CT9xqOUD\nqULQsuABJyO+X2WHRVBbip6eSSVd2n+/95nrN8qzFdXtvq9dw/clXUEbhUAt\nxS59KMPWw2U4fXOC0o2Cc2zLy/LRwksmhEI6SHR+xxsQrp2E/0+6DwftPmJc\n5bQ6JEaGCFXGYp4kupHdrq64c/zOrsNAjL8WPa70nNMzyYkvsNo//3kryqyF\n08dnHhnxIVgoyCqhNP3n7NqbMo7+1EGSv25iAt8HYqroJw4uOaaL7WTIPXfA\nS8SCJPR5MJKojPulAmxB4rKp4jidTJqg3EX4egyXlxyLaSpaNPpm+Nnt5rBX\nwjEzLfQoJbLWq7xdiV62bJjkbMB0IyPMhgpaDyvG/6RdTyIUcRbC5wqnJxj+\nWufpzuKFaR6qXN0hDW0OSdTkAGRRhXpt+FG6mo6SH9KXmLAGS2tHwZJWU1x6\nmzKx\r\n=1EvY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/touch-target":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.435866d32.0_1625250062432_0.26930960862499","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/checkbox","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2467c2a677b7e3a5e1e84e3e929e26ce85c2efd5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":43,"integrity":"sha512-Jm0RkyBaW6mIcWwOACVUkjQHBSLnMbdlBAGlKAIY5VgFTTYXm0Pbre/F6618OYpN6Z5oo5kich++1gBaYciNgQ==","signatures":[{"sig":"MEYCIQCKsd/rS8/b9+TZVcnQS2dl6qFlG8v80+Y4/++TbPqrzgIhAJY1syXvQXpTwCvNkcqYblHGIlb3iJhFHEC0MukJFc0Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36h2CRA9TVsSAnZWagAAbjMQAI+hXnjAEExFgPK09w46\ngk+kJH2bCJstAWz3MmQqSMknMUGjo1dzjE//4ngeaV8qUvS104oW+OkPt+To\nDuGhUd35J/Zq5JqTdoLJogs2SLRToVyI/myYbeRzkVUS67pQnL1NeeYOIqB8\nHAp0X/9W49OP4AZEd+ascABlrmClxeiEWbQwDC+NV73R8JB8ZZPkZDrsaasX\nk+PzUBxfhS2CX6kr5fRiQhQNKqXM7qclqg7brXNqF9fi55dtjbH031h1WmPc\nYkdKcu12EoMOhUwZ8xpQfYWS+q/WM/pEvEiMkoLp+apIVZCy1KYx4BqwS54j\nTW7/tIi1OsQxNgFDSolcZA/79WZV88MRS4B0H38mG/uh2pDWR1Khfk/MwRR2\nf4pUIs6cQHmQhpEeVk+0hCLD3ydpExS24SgsiRNBHSdOXYUmXY+zfXu3mq1K\nIo3qJ1IsqSXPGbpyKsp7kzrY3m/1Tjm4kiWm74GVeDbfxPBkQD1WK9wWCp7G\nMfyU3ZFMygj9Bbvk8vwdu5Eng9ZAOS95Ej8bPQSZ17Qq6ud6uQuOTAKlGy2G\njKQLJV87y1zmzss5UqXTcsMFyO3u5CeD8c887oSbZx+qr/nAogHlW35giEvc\nydlWnxwLT3NGfjoH9GoSuqSvcPlUiwY5EFbkfVkWtNi5/dcbu6g4WaiUNNkU\nkSHt\r\n=xxVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d0f9f3f2e.0_1625270389667_0.8576933308405872","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/checkbox","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.adeac0549.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1496b42f558de2df8c72ff4dcf536f842d7247d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.adeac0549.0.tgz","fileCount":43,"integrity":"sha512-szaDJOzMloEbbZfDZ6W2tGbQ6INDDTs3NC5PVjYeY8NrOzO5yewMSNkpnLGboTKmjOi4ieezixQDZoHfYmW4Mg==","signatures":[{"sig":"MEUCIQCP+t80VKqvTGhpbIVxVladaTPwTh+rH5DUzmChxCAyLQIgMKSn3iEx0y2/z85Lqye3Yr+7Of7TmTOLtv7GjDhueFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUQCRA9TVsSAnZWagAA2nMP/0DqE7CfgOt+vhqO37Mb\ngnJ+zwR0pU2oW3e3J0YyfpNoOwL4DjLNvc6XD+NhtEaQLnOzmi1Ogbx9wflr\nb1rdJ7yKmyGQa41z19jmqrvOOjRUBKVqul1dFc5VUP+VydWM497jo/tC50Le\nYGvboZcemR2V2JG9Uuz7aKKNIW+qp6quoxehv7U3YQbxuaVYEZtaz+pRzdLk\npqHbiwIWJu1ETc54rTIxhS3wX56FbpKlRtg0pipsuu6bN5ElmpdpGqziuqXV\nEvwcglD/II4xE40kGe2YHmwNsxu7X1/jMNsgc5wie2jRV5Zc+EolvrfPo9+4\nH7zKkDg+R/aHajmSxfmqpYRwHdbTcPblNBXgITmoYdUQX621HazGT9pRdWIO\nWvW/DFM3cO1faCXPwFDPuFejhrrPjvOXMa+Zagtvmtc0vNbaxdp/KXeAy4+j\nad0PYYnVg9HoULUpnBE7T0yfXOUQWRoVjhoBpSHf5fv8FZcKQx3KwzX85esN\noGoRQKo5zbd/eVFU7c7N1RfU17cpXkJ6AflRyZpZ6GjscTAHdlCy021UqLen\n0Fk9INJJnrryzNCQr9DyJKGZKF5YvRu6Hae+9RvXIFZyybdt/DfxLzNsn0qL\nnDav8gpdsjAuRHV9AmJhUlqc+88orW+h2bHiiCLjQqs3UQwN9ZuDbzC5OcmL\nWASX\r\n=1jyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/touch-target":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.adeac0549.0_1625756943567_0.4720370325370489","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/checkbox","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.068fd5028.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ea886fd854147d615f5a93eeb63a551d0c1eeef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.068fd5028.0.tgz","fileCount":43,"integrity":"sha512-UDBiazoYQSiHcrvn8i80enq9qZqF3lfYcFXIedmhR1jjOj2CYIr1GLt8bExU6HuUN123YWFhSI5WHpPr1ecY/Q==","signatures":[{"sig":"MEUCIQCwdoBDoAZNd7ChfT2J77DKawvBCIWpYvbg6joNxnYMwQIgIA9X4E2ylUMhYOdzUZ7tpIlW00LXKb70jfuLLU4CX6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50v+CRA9TVsSAnZWagAABG0QAJGrtSgVwSGa3CyViwFc\njtrwaTDE1L53V52uASzsAthvl7hDzc7mnLjJcyXQ0BY6QocKZL/c7K/aPMjE\n4Dj3nvj/JvNL9GXw5nHMloRyHZ8Ii8jNy+hCl1ZVN6fSEP2mLOVVJUj3VyYF\nrg6mS5xgroFGj83ydqyh/mxhKFAZuLCcsDbPSoGlgFaJeBu2Ja8a8aZ39ZZ6\n5FnuTtClw+hx1xqMX/BBqcH6NG/0+yLXmxAQdWRqLcEjEUBL1Onw3n6gJqtq\nVaQXPbSXxYDpa3vek9qRlU/w1DnKzFG4tPjYHdd7VGCwqPSuCZ7Jwq4tE+ER\ne19bRshTi7YzQ1bNmii78cJR8YWUnx6dM3qvKvQz5A/Tu/zBFaYwWA5Q3wRi\na7dRJr9DE0xvv3t+6Hmw559de/jhuDsrZtRfWZp/cMGj8ZX7fktnWvDgp60G\n0SR3oeO9ZTx3nc9QIRXHT6RZ3F0HH4MAOtX+BzWIfOHfbVpHoh7J/z+8Z9Bs\ns/oyb/Zk+zxKQAUQzfMF4Ou9KgZwDFWlyPwiorZk3G40RZOL0DWdCgchCw0/\nAGUv7AJ0UVE5+XOqmXChhh2vXYIyZ3nJHef3qMaC/6Bnmq9Bv8DrkBnQTFP0\nsPXfOKwyhNKVuY1Kh9ivEVB33+mcw1hgVBt9O3ftW+FScndQABj2vb/Ri4Jp\nDcD/\r\n=JGVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/touch-target":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.068fd5028.0_1625771005525_0.21068472702020524","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/checkbox","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c39968d9c9911bf09b24ad5780748b700139429","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.5dfec7a14.0.tgz","fileCount":43,"integrity":"sha512-3p4rJ4xLvBBFF69t3U7AEFWN8NOKzL1fdj1IfcMXZFivFY4tAeL4wmJPpVriC/DvT4nGu/Kupvd0rsNq6NCI4g==","signatures":[{"sig":"MEQCIB4UamVu2L5ccvMAK9B26vSml5dbXIFxjihObJdjQSFbAiA9rjdfQeepMNpFFQNadu0gSYx28rRlF8KPv3YWAeFD0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KA4CRA9TVsSAnZWagAAzFkP/2IXkWPN/DICz+OcZZFg\n68H+2VAPVeBl4weOme3HcexPLSzzjCvkxOcbRb/a8lxPnHO91tEGGXbazagf\nJMU7FZB66PZIpFREJB1eXITR1ZYNd6jtEfCrNw+iYg2WBuSRwPDirBUtDcKQ\nr8QbQvuJDpZSb187hl/nuL1WLChpuHH8lMY1afq+fr1vKdQkI6VcR8zh9sTn\nIkY+0tZmfCU+FxghwGVcPetvbXOjA4Df2QkINAmd2qHFUCAhsLFSiqNeKp8l\n53+kKmGUdEpHJZ/b9D99yirSBDrnwQEQW4gAWh3FkqpFbd3NMacvSURD9wQo\nLQpMBNcksVt5IlxdkvYincbm3vcA3EXNEjd0peyAprQbDuh5dB7A+HvbT68z\nucaqX3M8HifaiDRC3bkNYfeEUiuFaGOcAqulBjKlRdfDV8+3SVuBg8C3FBdr\nk3OdZlXUhN1uqyohdT83CvvuozfS7p1ug6ebJwnxKXMTvX/Uu6JSRzlSskjD\nHgE0yq3yZMSzllivJPSaoEM4U5tXxd28LFTV71QoxYuJ4m1avnuO1u6fFJLM\nAD3xPCPpZN31IQfScb978Mun0VR+5sYNlQhDOAAiVcbNY++ckgLReJAvOyGX\nfHY0olsSQ3+ySJijocekc9R4WcoqE/9QExIi1w/Pz+34fbYR/6hsSrypuHiX\nQTf9\r\n=lsgS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/touch-target":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.5dfec7a14.0_1626120248066_0.8871878024990687","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/checkbox","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.07a73750c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b445038313e6a059ec7491b696069bb6bfa74f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.07a73750c.0.tgz","fileCount":43,"integrity":"sha512-uQFEN89QwDOVx6hweGNy9axAXFhNTdjmt96ZrPwdmBmKG/rpQIEccdRTTfuUFxtl0+1eoYwfyHFbPreP6tvHnA==","signatures":[{"sig":"MEQCIGYMdi5Caeeq3GO9BGq4nuMZrwUzPJR/SXJ6VjKiWV/fAiA7kYZx9yD/i/MnTTJLNR3mc+VsAi9McN5XGNjHLu8KvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KUsCRA9TVsSAnZWagAAaKgP/12Q4D+xmpsWALYStiUb\n7umsJHNycTOwWcLO/L86MI9SiGGbBbvoi9nufSJmxfYFwBOvcrw3JQ7jfU42\nITe1dd/tvui+dI86MYb1sDCiFOwTsvyDv2dQx0NBbhYCLpjSgwMqQ/xZSTdP\nMmVGuvmZLV+ozXLV5IOd9fFH9Q9uVLDrPjK8x47ph2SbAry28Grf7QDx17D2\nBb/X+IcEeJa2Vl0x4MBaa8NcHruFd+dhbssob2IY+Ilflo2cFkaRn8w4/oZX\nu5voTggJ+L/6bleMycfZvOf3upS49Y9DWpDsp/pagLCPYSWB322QVFAgTN93\neo1ZDPkn8ijTvcmQeLhv8IAkST0ovu7j1cncgQYhMIqlspKRI/Y7Imk1GWCi\nx2lkcHr3Hg2NoqRYZthk89ujtxcfNKYdxZXs1TxKR1Tn0UBlEFwfdXG4lDqS\ng5qbE2gexPdZMgwh+5VO6V2gVbWVYjGxwWgGoibU/qDHcIq1eHRUC4EqsILn\noKEnw0AbLYhl1pRNg4aMw7+NhNJ4C9d4xlthrU+R7aei7nISOJonQFJo27OQ\nCCzrlVnJxwqn0o62c0lG8Mm2KJd3P0p8VwcBZLWuWPuVdAvyE9dSWWNLV3Hm\nMDbcczXX2iAWC2q45/IIRQSw720e13sPng6K5jaDlC95nEFcgPaeXtR3RNRw\nfHJV\r\n=xknM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/touch-target":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.07a73750c.0_1626121516397_0.4018896115123012","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/checkbox","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745f91dd2e088da9883817dd63b2eeeef1986c62","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":43,"integrity":"sha512-D3+1pszlEEWLNXgRDc8p8Mv2kL9VU8QohdNbd1pSjkdRkRohKJUCgjNEZbIUanPuKok/UbkWCqb4jZAuKrj0pQ==","signatures":[{"sig":"MEUCIQClQ3RVzsVH+3zkDhCaZKKkz4JPqFu38uN3dU53PFCvuwIgTnt9QDAgfR8U0GD0zRAbu1LCuVWwjrJZdRzOVFd9I8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGICRA9TVsSAnZWagAA/qEP/RBBDfqnD2mNUiseybUu\nQtkNIcs2Mln+Qo46/vNuU8GmerA72h1V4JhYj1lCWF64ProWA1ftR44EWrXE\nuGdQPgyexThfTfSs+CUTrS3n1FhfReqeuO/3bQUT+pBo9XXdhtxOvQ8yZauW\nUFFjOl2jCK5QRlebnVZnCjUpEaX8ig6jwFxCiDv3CS5agWSdpLH77ntN4KK2\nu2863TtR3CFxR6Gk58lbleaw3KeqtyyfyVxo6XDY5Ef13+H4gKFQKWmIxjVW\nqHgqo2H3rbIqAemM9RxshmzQwlVYx4GZyAiyhMv3lknWLMWyrTlr18RngiJ8\njgvEJrVatNYc1xPOU8d5IPfS7GIcSWRw/ExpqhDeJZ+DFdAiToXZcWKl2py5\nveYEL313n/WYyPA9nBaJ94a8iBv6AJ0trM3VSkx5/DTYBB2zAONhPTUga+1t\nez+vaBah//64Rgku14TAsS/Wy1o7wbt8eKuvCpUJrsYGI34TYqKPgewRQJji\nOSkT+uLLIK7MASNL6oWgHDOtN/e4fEGoXUt0HHyyyddjdqVR9mwt1WbvXxvm\nBB/njFPUUK5TZRwBlwB3UoTP2jkoiDAnnn9ajsmjrQ4ttEWKekx5GPG7sI/x\neG+5659loi5dpfoHuGB6ZXYp+z9MwJxV7UbmdOKiWmGFdd7svmKy3G8onkGo\niI7v\r\n=wAIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/touch-target":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.3e4c6dca1.0_1626141064012_0.7228347267823265","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/checkbox","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a0f26108e4460645f67067c17342f6d49afa78b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ea77795b1.0.tgz","fileCount":43,"integrity":"sha512-aNV7DwJw5Oqx0oqxZO9o2VU5gNsd/BrBAFKt71tJCLvBtHba6k1acX6kzkqy34r2qzgafIE4AYAdgabnvOSVQw==","signatures":[{"sig":"MEUCIQCdbGhiy1h24pUTOr9uOn+FXcAQufhLcRuaF4QbP+J2+AIgd2/fTGP35axa8eaeiP0p5AQPFewevGemoAOyLfBoBWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bX2CRA9TVsSAnZWagAAbY0P/R5DuCJLsGIHnd+vUrqs\nXAUfm0huqdmiBmjaugdmJmfewaBTDV3iimC8SkYxxiRVtHI7lWQiyimJ0StO\nLg77841JC4JquC6dBCYbShotU72dQxYbiz5F3ZPEvVcfB1/aDv1Ircgm1ilA\nymwbEoF4Atu789I5z41Kw0F+v2Jdq+VwaWzK2x//ZCkN/qgHLkAanEBbvMxq\ntEgjeebaWD+rKwUPZBV+i3/e6dVfEX7thvvHyMmAHt0HnJKO40aUQCAfsvIA\nc4B983RKbEECo0SmQWluBfX4l8RVwodgrCWcdgnmxv5kTHgnKE0Eiku9KYig\n+CCCyRuuYhnTsEKfAdn0wBgcD8Eojt89oBOjXOboVXYQRRonN14JES3eQ+Bi\nsFHzTORlrMQZXEahkQmgsUfcgJJ+xsLkqztOMjo89wtUk1YEkVthlCZb1N6F\nmRJQMzOwcoUCo3IE3pNjMOafm+4j4mlf0wkPzHMnPGw/XbfujmGhp+kVDzia\nAX6EfKPun0afVyNABgQS5s8lxZTn2u/FT10YEJxm2A6UsoXHgqDd6gOibUDL\nPgxy2tlOvagjeFnkGKhGZaDVgRR2l1wv6esShSuqgWUUf5KSFvioKg46WafT\nqkBhqUIi2JinDT1U98MWkfiA/ACD6wflq0gDMwet/GFK1JuDZcerPCmg42cs\nnH1+\r\n=a0rv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/touch-target":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ea77795b1.0_1626191349866_0.15620802152875002","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/checkbox","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.15a179fad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb5c20b301bb096e2de4d8774d1b7dce3cdb0e89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.15a179fad.0.tgz","fileCount":43,"integrity":"sha512-7yNgT7mpk2hH9j9WbyZfsEyjz57gi2Er/rzlgChXJ3icZvux6l0Qs5wE9JQuAyWeYJweAJpofDimGaKgUxdX6g==","signatures":[{"sig":"MEYCIQDWxIX0r0kcRx+92RM6Phv5+t2YUuIPUNjlhoPS2X57eAIhAIHyh60VgsaVGLQ+VcH6s6yr2mnicNsrBP31SvBm1N/y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbBCRA9TVsSAnZWagAAlOwP/RNiC7qObMwYutD4W6m/\nqhmVqVXOmbU4dAN6ttosgyXScjeucRDCkh4KSMrqCxKASKj0wc5nKgvejbZ/\nUist3MQndtZZJQPfBMNM+0gvg+X8ocxZ+BrXqqxyxOFDKM+9swibEvycfcpq\nxKLqLHNgWsyhEWsxMIilK7TNOU75y+6je1uTtUwVe9WSSURf9QmsJhJjWMXb\nZByvqspCAZT3/Yz4HU7v91185hLx2ZpfiSj7HVWJtRtVKMj689uMpXaxRcNm\n4mRRxIuM63kFYMA23ErOk/eLZDa9fBURUsldaKyiamnrtcqJqIhfpj+ywKAR\nBZZNfdzMKdZZofrS/HmcWYK5T8uBz6JMKseJ9/DjrKtnlpE1bU2JbGh2fZkC\nMe5c5zwPW+4QbnLqoXO6FrJfnv1Gzcrtd56PUuXbLkXzHGB9mUFnWaTgHO7x\nlcJ9Q6yFP0KsWAXCYekokmHAaPUQeOZ8GNwxNI2q+n2fRERJcN+mO5knV/tr\nreuMwJHLBG7HqohrA0hBu22YLlbmeHvD7qn8LzfU/nV237we7UmLn7ObleSo\n1KbYU+ohjvFOtqhJD+RkuMeXV+ju3NGRBjA/DKHXwHjjvrRvDVxHeJEsN7fi\nbfeVZexCt7KYmeJZhiJ2HFwDzEMmqM2jsnccdIFl17YmZHAZRiIFie5Dr0pd\n+dxh\r\n=r5+8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/touch-target":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.15a179fad.0_1626199745205_0.5829881826119268","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/checkbox","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8987d2579ba60088bb92a3e5c27a7cf9e1887c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.c73142a1b.0.tgz","fileCount":43,"integrity":"sha512-hzjZ9GFNecGOb8dU5npQd8BWc5MlWiab/kwCw6nVmtkLN/2BLE9DfaZyzCmLMooQKHhBt0eyEBB96AR4RUZOpg==","signatures":[{"sig":"MEYCIQDfCeFEe3qltK60u57QhPF54CIQtD+BgXQiU4uCg4gYYQIhANu0V1Lt6n0+Q/L+bRxh8ObNExh2ILecihQ6hj+oazEp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d7zCRA9TVsSAnZWagAAKXYP/3TFzVZcoo693Lg+6nbn\nIhooDObEcv/wmsL45JQh0aJO35c4PMu9p5ZDp9DQzgUUW20GCNlky5jurBIu\nh+OBI2Dbf1GcU3/JH1LwfHGLtKgQOqU0KbP5L6iPglPI/G5deQGwuGeU3NYD\nlp1Gg9aC1ofW3vMBIz5smH+1viMF16pU6I8aSLWtv4BDOlDcqV4cWrOOoa5u\nNCH/yBQUVUieLSyyprZUAohwrI9vWpSl4i02pj+EumZfmQv+H63OumxGEg8K\nI6lXuqkHrccSs4NfBLZWV+FVbOhRQvv5vEXCGxx3ERg3wdc0naL10A3Yc9w5\n3Q+HqH5fj1hwZFg+nANvSqyNkLbgBFPjHRGVpA5RRg9rZzJhzX0hDaeus0xr\n/jnu3C/LwKRAfidQJTxe3vpch5HwjsAUK/8NPpRte7017fXd430mbeulKJYb\n1HMnn4Syv8ViEoowDos/j1b14Ry3Ww6GQCAipvW7Rf/zcf/XMmXJZh+ibV2j\nzYH73NtNP+w3pBYrnHimkX3sF6WJvvEMZlEkFfbS+Y36Y9i4Mxw4D29ID1bi\nHPqzQyUwXb39cBBYZr2+zLmnmRPm6QiXTRC80DHobSyk8ND+KtQYSFXu6mSc\nFhlw47FM5JjrwMDedLFx/VOoNpzngMJNQLPr7ZMS0B8+0nPMR1ZV43eaxtFP\nRg7p\r\n=GCWk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/touch-target":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.c73142a1b.0_1626201842808_0.10885418904638144","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/checkbox","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d923db73a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37afc64f348f70d1649c999327301cb26e549e3e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d923db73a.0.tgz","fileCount":43,"integrity":"sha512-1CrPLVQDuLgh5Eb93XHGnN1aPDMoc7JN2qAgVcejp7Ob9RvRfPcz2dYoeYnyK/qMRETYc+LkGsTEX/oTWi59bg==","signatures":[{"sig":"MEQCIG+Tgaqr92BR/KCWL3AQN1piWYvwK/Q/zx82fephqHEUAiAyTihY4TKEUjBk/0CpumZUHn8Y8Yo4Gwb0o9wJ3FSiiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1aCRA9TVsSAnZWagAAgQIP/0yJo7uY971Y1hnfdSsK\nlaE7twydwHoDiTHylNj8EWsouEI9F1loK1OWZOKcMjztIhslSIUt4Heyz7h/\nqYw46xHXi/HjwRQoK2L8dG7x6dT+Y5/2qoA3BsNCGhNZBv6eje+pPfPl0BkU\nNwr7tBCUWpvVx3QpQViI6s6hhE/bQSqYDd6KXwnq8o5IixLu38bt7DPCAt72\n2s3I96taU1b+3aM0dZeJcROuhxb22+f7tA0MKWzwX43IiLxzlhf4qP0Y4BZN\n+GL6kq5UNRmbM7XghHtPAj2DRnPaxDBRHBMGzXIIBNHyz1i515U7L2Of8av/\n4CKk0ciU0ynXO6lOk+1kwZuJIN1j6mcTJRvH6x2phLU3KjOHgFT29uv7BwVB\nN/qeRfTMc0IUE/WaJR656odriNK4evYosvCGMVWo2XhsnUDbbKyngNaJUEr9\nDnZ5eJTuir6unLp+0OOD+KX3GGVZS5F31Wi9I5QB1nbBJxlZM3dCVychr3BX\nmCfmgg03MuXkVcc2WbBEZQIt7KvkXIO8eVLVks7TzHoEtZ0wETE1sqVLWHsS\nrnV6xUUwAs9VvxHH2A9xawKoW1sI3M84XgjrTpoo9QcEX8XbMSK0BHjNFV/2\ne/+HkZvSsKxn+8WCuCjc7JOYsyIYZjTr5uR6Q7A1X/HmMuLY9ltpO+lQbtQ3\nVtjL\r\n=Ne6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/touch-target":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d923db73a.0_1626209626274_0.6245375324340194","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/checkbox","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12f1af7e0b8095bcb5a77a8a6728e42233025911","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.22d29cbb4.0.tgz","fileCount":43,"integrity":"sha512-YBm2LvDejybSBPvaLKGPgXG47kxBawMo1J3THyBP6DtCyBOhamTuoRpAW7im/2r9zjaK9X25AvFBqrzcB0bcbw==","signatures":[{"sig":"MEQCIAnCScyu4lUgHHDnVWzM1LZhcPI3hw5f0W/d8UzkW/GZAiA2L6f+nnah6niF9Hrjkm/93qETOnH/norTXT72pwOaFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hiqCRA9TVsSAnZWagAAM3sQAJB3w2aGfPvLVTeqFsSO\nuye65ubWJlspywfH8rkQvAi3EGTPAGFtfeWbEjtlErIJrCZqo8muKtWpfRgY\n1Onz3oDQDrlP6dNIQ+J7jW5gCV6RSGE1XdZ2SAVVgOQFvojc64SMWwvv/L8F\nWx15dwP1UB16PlqHzxxRqj+ETU7fZYu2WcOLRZiZltJWA0zFtf11INH+tone\nAD1elYGdoopGgqmiZqSueFITJJwRutINfmpk+XGHtGWbjBebWpZD/bapEma/\nZDg5X0tkspNxT2Txswnn8W0/WocwhcQ/PbNQguTz23g+wSFErtZM1wVwHNCt\nKp7dQUgpo2HsSOb5YwJApazkEAflo32WFbrcobi/bZV40Xwybd3QSjmtejxK\n0am5LygZcP1L0Fl39CxxrrtodGVqi+sEnWyTh2xP05mbnfsb+0Ipx3B47/gk\npDd7rq9S1ClHWpjiAUbwFaSxM9oU10y/zXCvqFiP6n+ujLL5VGNhOwRBxM1E\nb4Ct0pFgMYS/vWzMWIcYZ+xid7TN2itOtJzymhx9EbJhkoXXcXnezAE15g5s\n3MKQwUmy0kiq3y5IAl0EzUn/GEPmHySlHwN6+b+Rkto2jH/8mq6GtIEwQ5Pp\nQhg+GL9ElhWDMO82q5V/ZmpQL5VcyNz3aUyQ8UUHNZNoF3hq/CSy1qL7MTRW\nAwYN\r\n=VEOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/touch-target":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.22d29cbb4.0_1626216617761_0.8743987499730639","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/checkbox","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.2749604bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d00294e0afa3378d1f4d36cef2f6c3707045d48","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.2749604bc.0.tgz","fileCount":43,"integrity":"sha512-aBu0efrYpxwQsQKx4zRqTTkweQnD6tjS9/qsm6if1bOgY0BIhYsVGQMpKta+RX80snWzXG54uh4FCa4uOm8ffA==","signatures":[{"sig":"MEUCIQDo6p4CbhbiVzqdJbPSOXRNLIBgSARVNEYdQyvNzWnawgIgI37KBoO2FeUlGPTeQVWlPXDMkCOfo2Gm8cfJH9zbfOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w80CRA9TVsSAnZWagAAGCwP/R4doyt9vBbeuw+Y7/sk\nLEuXR3buit9Moy1kcfN9E5yykNLCiZROqL7xK9+PfsW8xJY5VnDYTlFYw568\n9VZyxnpke5qIxg2dwEfBKoPh5px1JebclFhr1Lxr72hqplGo3XaeoF++5nmR\nWptsjwSFj/Bre06w4OwPn4Zfxh3E+nzkN7mDfaFga+fy4BqpSf7vB2zxIkvx\n8Y9tspSnVgnCW9KRffyZUVFfTslD3EOmcT5SBVUO//c2BKifQlrdhALMLpXB\n8faw2ono3TTivhM69/nylC4W7CVps3wh70PBsYxFxJHqGC0w3o+C5R3MRi+l\nvxS1eeHMZbqfNlnBTDLRvr2V5lum1VO3ZOTHV3hTBVzZjvowaKrKa57mXbqo\nSxPtK8FtKJOzu7cKLM1uQ4zSsPJTd2T/NGiTi6ntqEl/pzwqjE8s2XVvdEoY\nmFZuQ72fgzgufOFsV/WR2zPgDQkSvqSvZj9Igh02YDJih24JDHogwS1jMQWy\nqnBF/DmDi8Q82nXnoYxI2/zDGcRaNei7As3i4JzaVdT6itrv4qbPaxtU6UtP\nO+7+HH3OdPlig7lVkG5RNvIVnxw8hMtgGrqq28RM972ic9/t2AnBAGJi6RV3\n8Usat6dpqJigLU3qdbHD2nYTrGlnb/bhJR9/X9HhaOmamOy+saUw0XASy8X6\nF9xi\r\n=h7sw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/touch-target":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.2749604bc.0_1626279731714_0.7833197811640227","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/checkbox","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97956408491070c2ffdf1bb718af23a35b5370c0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.e1703bed9.0.tgz","fileCount":43,"integrity":"sha512-Wr/DR/cppcb6k6PfzlRjihJBvVhFs5NFxPY+R9dwbaoz09TWf8/pjXUVCbBU5biA4piTp60MM+zTOeSt4wnqqg==","signatures":[{"sig":"MEUCIESMRHYgtsJT6Wcman4UxqGKw6eOKnZuJuoGp7tHurQrAiEAhwC8aqYGx71Hl14aQLxatUFhlMYVRIkg7QeK5uw0d84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uKCRA9TVsSAnZWagAAiVcQAJk6173/BdOE9wbruBFY\nU0M9WcfUrXrtmJuCyjeN0jzI5KEkzuwMtWF9gqp8NT7Eb/E3dOLiHHU3Z/vs\nA2Dc4C2ais5nMsWPEPZ/aktxo/klmL4LeQ1irKs6xTomRrAAoXp/Z+U+2HKJ\nwbFinW73RALVs/uztf/qLg3a1oHk3EgFwBGmxHoiW4qtCWKo+mYefNGGXr+m\nv+lS3gw2PeVm8y6FHim+RwiCCjkxLflXJSJNhwB0W9apanl5EEQgOvkexqTa\n3md85kef2Yzu8uVPu0lHfRqTYfNBEHPMj6qIF7EzaAaQLnetTAF1leMv6Z4v\n8n1hS9l9pBvrrfFZn65UhrTR3vXbYoE4RIZHORP5xLLtrd4m/fREsxvO69gW\nX1d1MF73995ehAGmezePcm3GdBGYlG5S1ViHxuIm8BldX/P0fC+DoDCYMVPb\nRVIaq4+ngc1kZqyHRSuwtDzdRQKg77B3zqDoDFhhJhK9thHjPNJlpwgfivWE\nR9Y03ymBdOwu0LGTZBrBviNRCZAVO5TPIPzntbtBO2ZfyY7biZ2hywaZ7bIv\nbQXIWNiEmDNIL/rReMzbO27JPuTwJFWsxzdrUVQd9cs6avvdxwwIdnLW5Q3I\nb/wKX+gDBy69AK3kxAxKQB/SLNzi84SppE6hHJ8fea1oRWanJts2JhA7acwX\nvr1L\r\n=PiMo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/touch-target":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.e1703bed9.0_1626299273862_0.1201917837310662","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/checkbox","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d9b84b85d576fa8549413148302728abe06ca7e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.de48eff0d.0.tgz","fileCount":43,"integrity":"sha512-0j9BG01I65SMmLNiuEXU6MfKyh2FnFVTSoCYU3gPM4Bf3izXDfMb0czzYVNCfL+4j/Y+/igwi5PGAx0ILle9CQ==","signatures":[{"sig":"MEUCIQDG2hhiKYsz6VXog5DYQzxQUnu0IYCXSOsVUKwXMhXR1wIgAyJ5KIWJ90hq+WCMw+GKPZfrX3ggxUe4dxC4GMgETMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GtuCRA9TVsSAnZWagAAiQYP/jjvzwVGuqOR4PQwxR/I\nmwWpc5+TYDdOIZWIbsW9H0zlNpr9hquRXQ4hjjrVTRKmzKeC7FdObGiVtI6B\nGsxRc6S+nTDAAb6xyw7jgcktCxTga/K2h0K12Z53R31Gf0IELwBrR9qsyuTm\na6UfENJN59eN5nmZDyras19cKgfaqGFfIAtqiSPDehGafouZmugGBeWUHrev\nHWMKwJQjO/xFiKS3Bad5ft5OEGxM0nem/h0Xq4xZSkNU/sDqeEjIgpTxra2a\nvKBY0mhIaXwjss7AvMb9yuuhw2As3gFWyBGKqnDgbUQRMYFSIQpR1y6ioQXo\ndaKVP4vjCKwpA97WIqyndovx3+ozH6L7zyUGB3KAu5kWnfev6IeHllRVM5eE\nPBSVmqdSReixmCuOWf1ANPIWkIZe5PfU7PfHZHu7vWXnVhoI/zAF7rDQTn38\n9iDaHPEMmnHxIId4p45JsViLyCBJ1GIdm57vEX+t63/amIYz6y8ECnPVQPSD\nxo/EsH7B02fwjfJjKgkSrzTG85rCjQbdQQwoysU+LAuumZ7eEbjc80hcjN03\nOom82P/2486WbtrnPOzbXukagb/Q7zKWCfhk8Fl89CHQw4af3lej5GRq7TaQ\nSibsIi/ibH7CmCLbtxQZlL6gGQiPiK6ek3DScsRNc96PDsEQa6p3JNRL/VtB\nFGUv\r\n=e7f8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/touch-target":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.de48eff0d.0_1626368877866_0.20602597924293775","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/checkbox","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"932b41c0f7b454dc3f90d1c79620ec20a94ae212","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4f060adc5.0.tgz","fileCount":43,"integrity":"sha512-7JphUZerr6nQNkjEYLXAbMopYfrhGOLL9UMFa5OAWd2XR6+PEVrjAj8EJpKymkYS7BuJtCOCpk3IbrOzv+ZhYw==","signatures":[{"sig":"MEQCIDFg2Jitak3CP9xDCnfS2zw7j/+fdFyDyw87u1xNcrQ0AiALEMjTbUV8cf+/Iu6o8Dd97M+mfkL33SZ0QsF56CB0Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrICRA9TVsSAnZWagAA+bwP/iFLRoLhMNhRF8mj9207\nFM5h63HftBE+scPXuma+GlnUA/pDK2KEYJOyt4eAO0qzPlnPNDkGsDGNqFIU\nI5SJISn4zntOH4w9KP7D/WKu676wVc+k9jq8V6Jms5yGIqOj+btkNnmcE5a2\n/jpV0bQInqVZB6tmmgtcLzWtV8OjxCB4ZORYuBDbvTzpbR4OZs06H0vjVj4q\nEI9Ru/rvBbo7b4rS9OrW9XphqsOOEbWGPyBjW3+CAKxPa1h8RtStIh3Z7DPp\nfkaJ0bZjj+QiuiivsSmZQjkPMixDTDyQgQ0gc4k7nVOUk0VjI+WDVKPMBwQ9\nxQY6kdmKkymbRKbT42xIQCPbjLk8TOLGOuryMnyHuM7Epo+vc/itV0aOSWvP\nIWL5mUhxvurHwK/s4JiWgRzqlttKxfz2KMUAd3q+ISj4jEC3VEGfNoFQ3QOW\nVleC6blkHQAUhPYcWd9g/LraumjZNHdF8SAjugHMxqk8HZaBwMRDWAP6Xrnp\nQ83U1y2/GJ8UpPtxeQ2TofbhpweAR4VQNMxNTWmuRX9BQgEhdvzy70WrqJ3p\n7JasA4y/uTlGkzzdw/DxHa0d+FhjXKFalUCGqVsX8W2uiEUa5sJaC9iTR7Cb\n1CA+6Zp7g/XJ23tw4AjwMcmtm0+8smclh82xSVFvIULhfZrCQodnoOVXsD32\nIvMx\r\n=Ogcb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/touch-target":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4f060adc5.0_1626376904689_0.913787116981623","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/checkbox","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d1155c9988f0c1fd52c270bd36b7ced07fbe928","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.bd25779b2.0.tgz","fileCount":43,"integrity":"sha512-3PQk/KBodkF21djyGEUJyLDp0a+NITmApjEMfY13eitxKORCkI8QMzI/jyO9CgrNJuaUwZWRvEvyTaFuPxptNQ==","signatures":[{"sig":"MEQCIDQ2bb8jEMCi3wHg5zh73CHlIuf5g/kgU0uMm7U2XKvpAiBqD8HK5Iu3XxFRpx7YO/OVYOM678VAxu3/45XNNLnu/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2hCRA9TVsSAnZWagAA/B4P/33GAj9YooR86MAQmbLw\n+ucN4z0xEetQbT9yQ4AcGOPurhkxDScYyiMgKqPTD6YlGCtIVeY/SR5OvJse\nbTkNYHdjTHkKZavX/0T7mk2OPgKo5z8ga2J4+coIpO0RaRkH2mPxLJblnY2G\nlBuhQmbb8ZMZTv3ZQqQtpvBqIzSFiv07FVHowsbTuEHNgKMoa1KQE/M116CU\n2dk9ui/wCgJ4R2YgUMnIwqCSrb479IMP/nOu6/K8c8xWUP1XZTJE0gp+odBA\nGDUJvrmqTrEqz7nfFHRousYMtkXQ6J7DRk2/bqnEyYvwcHnn8A9+lPOGL+Hu\n2qA+0N1mN/KT1MS0IJZcXSnVhDo+ckHjzZGb1s9XuyacC2KaYCN6vX+rFCQm\n6ymqTaDgU37tWEK3xtd/W2GmGIMEiGE2LaS9pSA33mwTlpRPKc993V1bbUgk\n6kd5cyNDLRU8OZceRadxtnqyDSk+JFpNRJUOEhxxSA2kY+5TYQdCDZTEZtYb\nw2iDT731HtwFUSbOsYWIBhKo92SplBZ6JrX+hAyMYxVWL+gROY+tAnFjhnf/\nPOvVBdDc08V8ssTVZz8ECjxErrZyZUCeFycy5yCL0Z5W4LmXgpSgx9v6gbGV\nSIEtCRVWcU7HxMIJZicoQfcy78M3mn/iGQ0DqT6Gv5IWQPTjHD/d0nfarNtW\nD+op\r\n=0MV1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/touch-target":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.bd25779b2.0_1626381728985_0.3645154576296534","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/checkbox","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa1a1ca5507dd86365198dbc2e2bd9ad089dd92","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.9f68a932e.0.tgz","fileCount":43,"integrity":"sha512-3P7YqNDGz6ZerDgVWM8nvcTI11DkcBy6mu9Oxcdh7vuOEVX8UsQv2EDdXHJY2knOW1wZLCHRFadkaamXLtnEag==","signatures":[{"sig":"MEUCIQCSi64bIkoi7e2VBdhZ737VmMqsAEnf026FYfLFhJ+d/wIgKQ6gWc+P3557yo2VdaEmt1RhNYz+L9DE35IOexNQWCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGKCRA9TVsSAnZWagAAEAoP/2i4PHDEaCTTD+9Vxw1A\nTtHNSRFW1ocL/qvmXeBOpeOL8JtVRCNRsbbmXRJNULCfN9M66aoJHYJM3Enz\nXKeeOgujUTQE8EBQIM5yBT/UI00i9TA1QQT4FAEXw51Kk8WUbUxNrbKtIuaj\nk4/YDfYOZR0/ZwRk60FxFG0N5BVFPloDpPfwnx7+anmc6QePRXPbQbDQRI/a\n3CCh1jXre+Qd/ooesdlDWrysCoDlIZ6sKVbun/9y8uTbcmg/IqdpzRdGXrvY\noCDu0rZaAhxgUlK+WEsb3eo4O41a7Ca/iWwOQAi3V/EWkv7EkEAqykwjnyt0\ndl6aIPk0daa+9+mmFtHxL8urtqOL4Wtleak26m0rHadYIfPuTLiBf4d0h45p\naybZS0MP6AznLEPEUrUBPcaZtNEAGOwEJqF3vdf5Odta+zfN0p/hAHUkNqf0\nMWebDM2J8PhH+Eamt4rgcxoaSMUlIHcW4oQKKJC81flvgpgnD9W+tez9SIDW\n+/lQVsZT6F5iK0MHQT3iF8FGpnetIzty3HNr5YR/nWv+wJnpF4v9W6e31S1+\nspsR75K/wRfIWfMUIOM3pfBGKJIb0gcYlG7e16AXrx5KMswYygW82mo6p5+b\ngtJipQ2UJfZDlezTJLP4Hr+RzKfeeg1hHYKaG3LVKd0K2OekYMOICEPtyPrf\nl3o2\r\n=1Np4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/touch-target":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.9f68a932e.0_1626386826366_0.35531514134922193","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/checkbox","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d58f3a5e8c0ba32ad3c24763ff8305c188c7ee17","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":43,"integrity":"sha512-Sm0FMqvsaZzg1tDDxMK25H2P/mmyrGXQFKwlLp0OWCwMI8ztGvwx2eQeoxczimc/5ugIkcNaJu3sJC4pAYwo0A==","signatures":[{"sig":"MEYCIQDjJxQMtLvhIwp6aA2mVFyyn6V4G11tsSCSaOlVq28mPwIhAJNc29hBhXdlS4NatjjutnDyXjP8xm0PzF25zcagjpY0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5qCRA9TVsSAnZWagAAircP/jek7gvxscda38BfFffx\nQn9+Oejz613v9foRPAzEZl7c3BPXaTkzEbP/232ql3VEviGaYcWCnHWGFwQf\nN284hU1eUzX8b8nZxYL/IaDb+j06VhdQ3azafmgkCw2iXN2HMcw5Vk+BxSyj\nFAQ/YXQHf0nGyaZdIzjg5lXRB6aCpxavRWh8ARnz/rYfZO5Ko7iYOhs1cD7K\n5f5ahx26/f+FJEyHWqrtC9UHxt8N7KLQFwciuqdXBCJ26JGK/bfcdnrte3ZT\n4kjmAi0fOgoS+buTUQm2t6+RjE5IxjYVYbcJFFlacPLN1EgUqBmGp10tTv2U\nyiTyAxlXvz3VbxK0bP0uV0XekMAVsaX7tZhvC1wKfuEeGcz1ux4L2wHz3wTX\n6x3qYI5SODHZTeGjqlxsU/hzzceGV2tf86eLE96y6q4yCXRJneghNotJ3jh2\nZkwsUCvI0vESjzr/xEmUhv6P/70zO2Ld4alPgswLVv/5opVREy+hFIF+hDp2\n5/FhTiulq7Ga/754bDlUHeyI9JeqJwO0C/NLp0qlVWWjKdIV4n6BXHP6mwdg\n3+RK4TNX1CoApa98eTW1+VI4EkpjDO4pG8jcBPl4jjVyTbOo8RvlobzEC/Mt\nx1YkJR10pZkC0yrcWJngMgSnXOpCTvDc8ZPyhfRnQDS/bbkRK0vn1ISUFXgk\nDb5I\r\n=2j9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/touch-target":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4eecdeaf0.0_1626447466010_0.11161377494723901","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/checkbox","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.7239684d4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ccc7766f5058b9077c72110e121de33fe35bc4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.7239684d4.0.tgz","fileCount":43,"integrity":"sha512-HhQdphv2GEqFrYHPgjgwXl/sMVgzUAAdnl3hI3LgLUlxhGxH6BCdVC0u1B/LZ1aNiy4XQyc1UD1vMK83DPIBCQ==","signatures":[{"sig":"MEQCHxUNzZGpaK6lxHON0OxmW83XbpuREPVz/SaiGoJ2E+0CIQDJg5NO4xyrv/TYKVrbYvNcV+c0PZUhc6Ig9jq5tpx/Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azACRA9TVsSAnZWagAA7/gP/2Xl4ZTKmuVfSG2zj/Gn\ncCFcbJvCaEl1ZnWm6q+H87HiQLF3OyHpWRO92mBJwI7GkUmzK6reOeXbLTXW\nk8JgCpak/1YdLyD+TiAn+mlZNescVjYiJ3+TBnFOROJmlLWSyGiBno3iSwvL\nqZvT6urSFmGNFs2IE7L5xozkOkT/NG4hlWjT9vzy44CGTnK7aTpf3I1n2zwi\nalYMhESqrqtqsC86GjbO/rBHYDmDIEVLv/EnAyeRISQcFH1Bzaw/kCHqSbwg\n2SP/thZBFwL6MqF44w6546iSkzibVSNXLFErvDs0KBVi/JAB/KdjBBIA3Nao\nfylMUxbb7rMDBDS0BHZHoh7bH/pqYGfGWU9b5Ts/PKX+VBiAPlNDLUiASlpl\nSuo1+GWU12hogjuEJmCS9wkRH+YaHtKHhFjajjPRPh+Ujc4qT+/fNHQkvZLw\ntsz5LAz3Mtj2Vp5l2Oa1k1/aHHyGt68oK4vT1UtGF2dtyQYNrG23VKUl882I\nKxtTuuknUa0woiScK/AJtD7fEudplvLrWCdey1rFO+wkFDmIwdugV8e+eCw/\nFEU/ze2KSTRLMCTuBnCicqws0xq/NBu87Y7WaQ8XFYXficOmkeYGqc2UQ2AI\nQy3KlMRhS5eEBOEJTbfK/l1oS/4kYuPBPuUXiKW0dyogSCkgJaLAQc5jHhFb\ntRLJ\r\n=HIZG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/touch-target":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.7239684d4.0_1626451136007_0.7301097630218947","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/checkbox","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b860177747fdabf38129fb0625596b0d0ecee987","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":43,"integrity":"sha512-MgPZiCGhA4b8A7MbdyO228OdgtyUP8MoCJJar3MUlmtb2BvXV0KOOLrOCdzauEvaQMchO4YwnIoRl4+hnfFRyg==","signatures":[{"sig":"MEYCIQDOpXKQoxm5zSOyMDbzdOkBBkunoSiW/asF5c7bG967igIhAN/GdypWrBg3wPt21TKxVKerpvicMh2WNhB7IsHslbBO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBHCRA9TVsSAnZWagAAWYIP/2Cv5GD0x2EovglXu8N8\nw3YjoVTfQPN76zSxwFfZh6tjsZYoMVs5UAQjA5vNC5NueJW4VgxNmzWvn6X2\nzgLfhW3lBdp/vMu3wcVJwsAZi2b4+HKpRkMiPd9ddRhabEDEiRwUSlyAddIS\nkMKLBuAC+ecjxkqWQJHTRf2s1zuZ/LLaPpMms80lrEER4M6NYxJaguOuLZPI\nvrJdGWRupUhq6ux9Z8z+uNUholWbImt1Gn6WCkyXKmvYhExS75DyRKQrrowm\n36exRpQkiVjMfOvVOV76oWrGYzWwHA7fLHtD8y9Wb2HoyB8fGdB5LWT+D9MQ\nuapGaH0GtaKI7Bb39pp3lm57/AEwToeZH9L1Pad7tzL8cQK2Wg53Pv8BCJM9\ntj7IlIz7EPg2rLMs0tg/5odMUUgr5XJY0QRCGh3z/UrxplxDTqk6q3FDvmFs\nXYU2pCQDcz+uVbDtQ2pA1IVO4qucIRa2rpJ72OiIN4keUyB8ZqiBOb9fJfKE\nVDIyFFuA0j+EUGptwZibmAINdrrQWeineibUNgBmNxSAQXkVajuy+WBLkVoj\n0ZiB5jeViM468dw0PMo4UKFcujU2ZvKLaLSxvy81jvz4aCPvNgrBAYcoJK6C\naxQ/dL0Dhf170mlLybek3T4qEFMHaWqgRCuD6mHt3JxmX6FNMgrCahmf4Js+\ngch6\r\n=QkCM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/touch-target":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.d5f1f7c72.0_1626452039189_0.16351296156380735","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/checkbox","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95c374fe0dc19ffbc8428c3207dbf5ae03fcde83","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.4d95812f9.0.tgz","fileCount":43,"integrity":"sha512-7vND+Jw+vCAJx65K9rPQ2ombxWAoJJ9S9WU+zCZ1yOZpbDDNRp3oRI3VNN0znXTtUKqfDlF/rKnPm+m/59TyKg==","signatures":[{"sig":"MEUCIBSYb6TRq+hoNRcx0O7j3CVwe/NBNlJFUTao7CaP3xafAiEA4mJCtN3LTqEqvITS73zQ31rS1YjX8QoAU5jclaZYqo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFKCRA9TVsSAnZWagAAPzQP/32Os4Tg8qfcXm0sLRiT\n6ziX6lnSjuIXYs9nv6i6/HTtvIIJHMIy32TGGte36MHmNlZRFo9HMbjMch/A\n17TxrecsndFsSKlBDzu+RPPKOqeW4NPSO0Ov/HjZVNBZShYAoCVcyf3iie/p\n/78UHhkuJoQc3pvk/Mv3hwRZ6TsLkUeklzYRVffAeBTyQSsQw/06KVNSygG9\n7CSc65Luh9Wl/0e2HZfIsS1Kk9arBKxJTkSyCT8zzAsiqcq0j5CegieR/Kvc\nw6z4UjEVzu9C4qTLWG16eZ9f9MsOost0zCp4NPXqzVxr/2oSN/I1SSuEjk02\np7svw91pQF34gbGm5UMTOKmq3PsM2cGTGWRzC8ElG9n1i1hHEZCdQELyKbv5\nCeKYKlAYDXvtQQezMDrSow5PN6ZSPKIn1IxvixkmCB4m4ec8T8IeWP59ymRb\nqDC0fmGDlWVqVYn5VneTctSd07S1jv1RgNVM+rWUUr1qPOaZSvqkEOfFEljD\nbW1g+KbLBlxIcmnoHmHMQZ003kT30mMODtoxTemrKrK1m9W5SytOwabEYkMk\n3Nm89Gd3Mvmq3OtRTsCKnb7ls6cKi2LoZcXKWKRG27is/PoYGEo5Zxy41Fdu\n500xph/nvRNgQY5UppdwB5FC0iCJkrFj6V2tWG3yqtLrZ2uEsMs+3o3u9gn0\nfw2F\r\n=mlS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/touch-target":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.4d95812f9.0_1626464586359_0.015912521930102175","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/checkbox","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c612b4398f4545de37709a511309719838ed96","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.38d1846cc.0.tgz","fileCount":43,"integrity":"sha512-nfGj9vITbg7L6gbUjeLYnkmNng8FIBURMwSBBQckYkHiu8c2j+XLyw8ZJ8rkr4Ny3KHLze53Z3fTDk5SUn0Adw==","signatures":[{"sig":"MEQCIGTJpl5He/WZHz/MjKlm8e03hQ52LP5PeQSlGR/5//JyAiAOjp6YvFAGkvXWHOsZWS2ixrHKKl1LWf5nKdKAW0hz+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cduCRA9TVsSAnZWagAA6qEP/RssqVQTHUUvFexsCwF+\nhfzvPRdDBpfChq5VtpbORSls3+lpC+Tygiz8lw0UPFnS2NoXQ1H39beFRi2A\nf/iuZXKz8XyRqFQ1gmlsbBldkGqjjnyN0P17CNsO0PZj9s6KfagAaIa03PaS\nzRONQQ6Ebfwv2I3heLQQiTvEdoNQYXTeeyALyJTSjBiV1AgzJpkgkLCiqrum\nowuvNbBHwg26cs8LhG4OGqIYvCAObK1SuEI4P31BfUsQ07EBQKFqj1ePzJ3g\nV77FtG4eqiiubV9bnsme8kSTIz/wDlkirlQUkj9Rijmbc1MmPJaa5sL2/Ono\n4+LfAkYyXKaq4THsJgvw9vNUa0LSRJSdnIJiaePtNjnV1CsYPXsw8O6fusSG\n+YJtOE7irvpVZWjja1guuv3sEfCLlQ0clT2gYCkpy0MDPs4rpjIt8PrNf+a7\nn8JNw5ou47p9CdhbMTy3e93yOFv1foN1Gd0EQsSE56Togs+Xpk83A6Qb+woD\nqDrM0B1hR88XZyHDGfGgd3zOObFWNlL85NXmbtU69IhM+HTHao56wfHOAnn2\nxyyVKgr17clN9y7TSgzBrtUkMquEu7o1Q2MBMkqL9stbY8/B2eiSJKBTx0IM\n5Z3dxhYACGmudgc8LdGUU22wNemqXXmZR/nsNefdOcOpV7lpF7naM6Zyufys\nPzU2\r\n=AXcf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/touch-target":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.38d1846cc.0_1626720110786_0.8428985532675299","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/checkbox","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67924036e2c7eb2474ec3fc9b1b028ee5c8a4d9a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.3f691eccf.0.tgz","fileCount":43,"integrity":"sha512-1bbxl4RhPnBH2jW4klwqnxrx2wR0BM4IrYI07vmCmHD2UV294xz1P/5Nk/uCnlV8jQX08MDc4PuDJWXhPJG0xw==","signatures":[{"sig":"MEYCIQCKKXhNeZaTDDT9TPqXBIWA7l9rCnuXVJ1D1zE/iVWgmAIhAIHYZo5iMuxIO/lEwKnmCF/7HtKwwAcShO2zHbtU1XaI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUECRA9TVsSAnZWagAAm40P/0sNvjoiqn/PHWTB1Tjp\nFcKwMGECJyx9F9rWJwbrrjFnYrl5hnBLI5yEcMZx2P7tj/OFWqEE6ud21cwW\nf8LAIKRZv2v9ikyrTtyqKkTQN2PMVmtIuy6IoB7skatuDhfSlcm2POGuS0CO\n0l2cX2kNieEyTnsbXyBXAz/+cqHlmQs3WruRZXuxSZ0z8BoHU9d5FqmB2mVb\nlKWoONqjvc3j9sg6feDlEQhE4jS6e3ckuN2OGuXptY2ivMiLdw4+738CFBpz\nzO0dgLN3yy5HZHqTaAFNoXO+iuS5MThUPhDD5kwZzhn3X4GGk4GqIwXfw2zw\n0y5cF+WopK1Ah24hCL6ZXJxxhpbOOrcyVur3fMhTG+e6Gu/vLNLejday2Zdc\nI3Ggs5CwEUr1tQPC4/pAyO8bswZB8YxxRoqxdrwJSdqfBF0RFImk5EHy9eEB\nM/9YriZ4JzER/OuRd8VgM6r75wVoP7rOTjIvyhkAS0oUnnHoGSD+HbQUBU13\n8+zdOwerQn2dvkki0SPSNtSTlpwjmE7WcEFh/zbKAD5mUEGSEtIg5HwbGL3U\njFjg3+1teNJgzV4NMnRj4HaTaR5Me3abLwhZ5dX7/rh12cPk8h0QeW/Ul5W+\n7Mqx5HOhfRHcwShhbVxVGDfS7PyqehjOZKodC5AqJj2Q9fZ/Oes6Ul9aoKDL\nCsrm\r\n=kAqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/touch-target":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.3f691eccf.0_1626797315755_0.8826562026201159","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/checkbox","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11dfbd3de961cfdbac1a692eef2e92a32c32a04b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":43,"integrity":"sha512-870GIK8V4wxaIgsPBhXMNvD4H/epuov6afqxE4gB9WF1lQ8M7qYTM2bVDqHiCGEajaK4qYylFHSIpxjpKXr9PQ==","signatures":[{"sig":"MEUCIQDruAd7aipbVztUg6cyXFl1fP3ikTqzVxCZGuxJBCqrRgIgbG1UqB9nIpEv1uoFpoEufw+fciIedv4vpRYPleiND/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBJCRA9TVsSAnZWagAAT3sP/jhkz2tgzeqL4/Gs8Mqt\nIPLX8X3AdRr2jXvZIjZ0g58yRUvhmTuidP9Gm+nZI0bCrWboBH3UrH0G3aHG\nF0BUkjfK76EaouY6cv2dlatwBDST2rzVe/aWNGWMSSu8a3uS7dwUC+n0iIIm\n7rRVnMEUxJ7MMBVcKX0GLMcgniLpcQR7hYbHyQ133iMC4/KLdHV4HdxtnyTK\nft5B7hKURmnqTA3g0Z0KZPe5Lc0igF5m+waiZB9gjEqymJszA4qlspQ8LWUI\n2ZorUGO1rY8GbICUtMB1xUyQ7XSsKB0pXBe6qWHMs/ivCqHbbI2HszQQ9p4q\noPxdSI7E1LxXK2eIPWh/o+70frmc3fZ2gEOL3LTn7bbPBJxp5rg2DiUy/xyQ\nJiMTE3adj+3E4Si6+tdujLwZl9mHYuqxvBSnoC2R/lfS0gCxrkdfmC0E/ypN\nXSM5GsZuEt4kzgeGy92ezGsuzAoavPjoruatvj1xnwCRWz8ld16HHd4ajP6V\nF7sAHQmYlmwi2i6Ei55sUNfvA98Ks1cVv6z/U8QhnYySFCc1tnije39F8HcS\nBitc1CObf8pXtEzrQMhnQG8AyRxI80OYAxlztnxpZLfdesNrL71IFL5fu9uo\nzwcPxWBNGtryt8Zzy1xkRv2AL6GCLze0C0GZOdx+R5NAmb5PQzSmNaOMjD54\nrGVG\r\n=xkAH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/touch-target":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ebb5c73bb.0_1626800201331_0.8717007558031435","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/checkbox","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dca563ad8f795eec37a9f6f116748e917600ce35","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-nightly.778a0e8a.0.tgz","fileCount":43,"integrity":"sha512-X6pd+eeuSG7tyhIhUlWOfOQAhcO4a3gJo61b7iewqT/9npT16dglEUSP7sAGfIzwtX8pcLoVg9gvS9TPuyWTCA==","signatures":[{"sig":"MEUCIFmVmKZK4ujD8LBrzFKeBO2qiESv0BFydYhgtrXUb1vxAiEA4hhRl+QPgu4Ev8vr6jf4phdGToLJXOnlBeHNObRdvTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqPCRA9TVsSAnZWagAAQmAQAJOdSi2RFYwWe2SptzmW\n0QZTj32iqtSvc57jT5PE+IEcwXowoUZPPmazgW0fb/agdSUyMJgganL5NuDZ\neFK3jK3GHovpZp7RvSIQEkqXGFZmDu3C0tv3qj2D3BfkibCeXX9fH8Uenel+\nZMlMNjOhEup5PtZAGnKlFW148EBpykRjJQhgASsg5KtNwKmvGHgGJZOOlcBJ\n4P9Uzd6uN8bgMOTpcGlC/8PkjHwptoq7/4f9zCtjJ7GgpojFUdlVT4hnUMSC\n11/bawsdbOf0w0u6ADyoexXLOmg1kQzNDe8ukoiqLJaodtFfMhOZ9p4rHl+n\neux0dzPTFJu0qgDwP5zbffvgYdJx9viy7f19/2+FjNl/JuHYf8gH5eXzM32k\npogiRIrFKy0Z90hj//w6RqeBCgEaQnGYBozhRMwG5M4yQPM5maEQjNt/Yfk7\n7hHluWM2xEwrsvSSvqNi33bkGMMfXq5Ocz45u6cVQ0D9vSiFOgRuRjbli1hx\nGT9HUx43d/S4ybXnxZdvsS1s1Yr+KvdpP0FKylywl5KBqiahjz20+OUIJdDc\npfxxOLWcHUIOEb16/UIxUEp8nL/FZVBD9R0+QvlsuPngWlHK/Gl71mU244pB\n1tKdkyVOSn213x6ex+I3Ac0P4fDqYGEoe5htyLlfoRNsgwakNvzZ2tReI7QE\nHcsd\r\n=4QkU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/touch-target":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-nightly.778a0e8a.0_1626815118910_0.5204053848077752","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/checkbox","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.791311bba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6429f1ec2586ef174d96ef805ce919b669dab0f8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.791311bba.0.tgz","fileCount":43,"integrity":"sha512-wXWrnYzpxxR700t2BL6exKK3u2lmQFNV8w2Gqi4XtuYkP8g4eB0Tj/fGGwhCOTtVBKYEX+p+Sjy+4zqiiVwR2Q==","signatures":[{"sig":"MEYCIQDXpRuAn4n5ZNfl0WOyFVIuRIPFDzZO+DWcClrxs8ICwwIhAKGJE3zrqfj5hwWRZHDL7gpfqUp3ujPvHtxGjefK3B04","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kaCRA9TVsSAnZWagAAe4UP/2E96zLFTNPXnkJwCeBf\nV2wF3mTTIhrH3Ujh5M5QatCdxm1xGWuY/IjmcDaFRyhEMlZjyWZU18394nDM\niv1q3g7oC6Z7cMJDXDQXVs9+XyDKAqp7zbSMSc5LDCr98SGLAHcEO19q5wqa\nqVmIZg8l6tGI3XYaUtNBfZx7OwRDQd9usKsW6zrGZ+Cx5fquHCA6TfczFy94\nqJEI9kVHgDfombbOGonmXgpeLYzwJEfJSnuAVerH0O++h6lrhxPbIx2gCxo0\n65n85eEEOEzKxVnSNblOt35U5RTCpvnnb9I8nmB3AofIT4gM0bX6jaSF491L\nEqV5KYFHKTk/Rl7sXC8A6laKArvGJ5LdC3Qk4GBWzkgKWkd+UkGQTHt8jkai\nvEIT7T5BoOxiUiSO2mD3esXzSUNqVAs/S4df5I1qJbLI102tJ6m1C1Xp00C7\nOh/ZhLh/bqd3jCrrIsbjIz3rReZwaWZJWg4wwcfCa7nAhzoQV6gB6PLbUF3P\nGFn3EaeodaDWFrb5QA8tZsmO9nqytym4JrtUVfK2jGtOYLYvcugDlvJEIhnG\nx/eKcK1criHYoUtshZt/CIAfMtOfH+pGJWj5mkZWxax+AhmnkUXq4Rpvqfh0\nhqdgchiVXXDjr2lWvtrIIUHzEGvzrXivwILvrZP3OifgcVcsaRUSKuSwclUs\niY85\r\n=3JI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/touch-target":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.791311bba.0_1626818842541_0.2965312367023867","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/checkbox","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edc338e54c6b3987d5a07feec0aa71679b046815","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":43,"integrity":"sha512-G5LdlX5gfPxwGI5eeHnNscxz4Pvkr/5J2lyQpGIBza9YVpEKr3k+WKhq6BnBZDxzTJ3hDc+3F2hcPh5Gb5/7cg==","signatures":[{"sig":"MEUCIQCHzVfQ4h1tW+06f3u7W3MJsgAtwWQ7vZojlP/KBi3YSwIgJbHY/y0HQI81R/MwxIE1YBYE/klMf1BVHqodwggIpko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7TCRA9TVsSAnZWagAAOQUP/12ssC5PUAF5zUfrZA7Z\nAYjOiU3EcyGIO7zTbn0d857LSTLnwkqrSigVNdOOecEORYw+gyGTRVf85Rx8\nVIZpCvq7jCq1f4lY00tJnB7crrVn9S6pA7FqKpPFyeJZQZByEU00f5ydKKCN\n5jksWfPAWljg4DqZzraCKGQe/Lu1k5oB6TBj8Qpn2URnG0nTpPULFsfe6+tm\nChVvOt2NnRVzEs+XgonmFq+nnRB0RN6jpSbOmV4dgn4Tg9aWTax+syrs5W4u\nuSXD6jb1pgGGbwCtDnIP435wDjtImC64c44MLO1uuSI+ygIq55YObEKUhsz9\nNfiFE6by8+EjZ1J8AqKEKmrTVcLuj8cLNRDx2AjhU3popJMqgfIIV2z9OW24\nXpu4GY69pO58oiuiyA3snVwsJdhggY6qu+eKZKa2NGKcZUv3ruLuEsUbeUUP\nVOcmVadTbiYsqpMI4PJ4oH59FenB84bWI+v8XgESqazIOk+UDUhdDawcP/D9\nWgjXbIZKnOBCz2ltvzMF28Ullb3UjPEbESObp1ikuXcVB1n4QNmMJsfZnfev\nlHnYQnbBfLwHPurp2b1li58AYnQ760CavpTs+9XPDj+41DrHsgHpUVv+STrk\njD0ckNT3hAUHY5MoqEi2Hwq19DFpQwKsZHMTIs8ULT3hIyPrTqlOlRee8vAU\nkpif\r\n=oP97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/touch-target":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.85e9a6ac3.0_1626881747656_0.9698844065604375","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/checkbox","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.6b0442278.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eda7b9608bb1b0c85664dc10d7c4776027d9b9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.6b0442278.0.tgz","fileCount":43,"integrity":"sha512-deWRH5AOmUBEzmd63GVHoRLOD0D3Cy4b18058/06GYwNrzlJCuzLNB675XPsXQbBVlurd4yDXTLllH4UJRFIxA==","signatures":[{"sig":"MEUCIHjZzgEhx4BiPtUB35ggTuCFLj1hYBVBTaNOdd2g3VKYAiEAzwY2MLO0UGGMWwRplk/aXc/1qIghKUB7k3fr1Ni45II=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxECRA9TVsSAnZWagAA7yEQAI/osZtD09dJH8yCf/9S\nxHBxAOBWq7QY3nWW2m66O9p/j6D2p8NrXqXtkTyHU+r2Kd/LJPh9WF0F6o03\nQxBsZhhP4bV9VRGE6l0e8GTq1hdoarDh7A5H582Zf+9wPqH9245UsEqIlbDm\nMtuZNoB6UZvescNpsl/JUsBv64XMPR0sDtBkjGkQmgLQs3NC1BK/eKBbw8EA\nNNROyA76S4FdCU6yJcn4TZHLKInCTyNMZnUKBAyKWL0rHBdVrcAxlXdHH3ah\njRzeEwo1q4GiUIRDyQLg1G/vJWXgYtvp2Yajcke85HY5wXLpIcvDii6xBs2m\nZkZTFPncMpaf+4HMGAGzcEYnksbuK1eeJD5ir13iPAwi/MTSxtFC9ct9aYj4\nVkNvQO35Fkzzg6NMfIXU6gDSKX3tFh/S5aIPWf62dRwB+gyf9/0YsP6G+KGU\nEhxglDmo+vT48WRy2jP0loP/foSSXLxlVYYn7bMWOyi13+5FdgHh/r8pFbjC\nKjYBLQerQvdmgBuhiNSJP/QYnBmj5/c5Y5cNviPJBQ7IBprU60PklH7/umbF\ngPgtRnOQxATS4Azkflhw5yY3bty4nZkQmDDvd1vrxdjVF8IqL4M3FmtmAi8O\nhWRlRyW2BmJtW1PPxWf3HzBNucDhY4/lF5MBIMuOAsHmMqNJGxvRQw/4WCYz\neEg0\r\n=6PyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/touch-target":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.6b0442278.0_1626893380561_0.736043456222838","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/checkbox","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf74ab34700ef6c9e547a68807f35de06d17bea7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.5f00e454a.0.tgz","fileCount":43,"integrity":"sha512-aP/76Mqm231Dqi3LjPQL49N9PPmaPQ20dxMeXpkBXOt+cKNeZaqD3Vstf8IdAVKiAwPY5+OKp3oZ2Mla2I58Tw==","signatures":[{"sig":"MEQCIHtv49CH/KdXMpB0tBmbe0gtVaxMAfg/JEGq/WK8P9aJAiBz6dNrXJV85xnfZMNf3MLND/Gn5QyhJwivpkDIp8ytTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWHCRA9TVsSAnZWagAAThoP/2kYkRo1r5ahK/Vx7VcM\nu8mXJWeqcM2x1umKGxEPJGiYMzvoPxcKzs4pPKiFwGWqd+v+aLfsu/RVm3Z0\nVKjx1/pNw7vCCk5NIXjv0NxKsJfeFnDtIQRw1VF/ZBpjL9sII0h9tgKfPOCm\nFKSM7LxIv2lNMs7ufvHh/ENvYUTg665iC3fjK03OoQD/thnK3S5lxUb6+zSM\nzc33xPhi7wfnh4TrKpZ8dlst3uOW4/6FDYt27I5qTMgpRzyZ1FYUS3kmKQyX\nrR9lcO8S13ijqrracprjWZEnuMzBhsfzS8V4502481FXxVVmvm7RPZz1Hl/P\nRGo+ag3FgGZJzU9Lu9arpnKgkR46lqTb+BDQ3+3hlZxSSpb5n1/FMHElv9gM\nezi2czbt95qQbWW9PsEnxKlaAOK5k3LAZvRnSoVbZA6julMeXK8E2/nGCcaq\nIiK0F50AZkWtgAAsF5h9bNUvLQ7GQJbXm8UWcq4NgwJxttO2SxVWVcNnY5rp\nKOSUSuiM7Myg4T1revtQEA+eKEuQqELFGyEHv/hrenMJ7h8sRkavR1rvF2h5\nT+WjpyL3HY1FNZNh+Dc5Ly3mZw3EBJ6UdgGfZfnK48MJrdurKn04xH4B7Yo7\nlQtAFh2ZwDJlJk0igYNQy1cqIuknZJbW/AY2/1dLcgMy+8zilu4PzTNQZB7u\noLBq\r\n=MSr8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/touch-target":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.5f00e454a.0_1626973574998_0.39659141221468297","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/checkbox","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45f4fa6f2b47f8876ad0a79551cc5c5849f94ca0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.90e08fc6b.0.tgz","fileCount":43,"integrity":"sha512-ueeF3xNkxPN2ZKZECiedt4AGdUHuWia2zbO/aPwjX/42JC4C22ex+G3rcixj3UFszJrfBWiCUhnjSkMjUX7aTw==","signatures":[{"sig":"MEUCIAwa8/lStf1pIXGuFKhbXQKTwe9MvLCnz2dfhbEn0TYXAiEAxv94oaJ/A5lvYLkg4EtitJqgbfiwtxaLYmTGiFTPMGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFqCRA9TVsSAnZWagAAcVQQAIiOlcrxY2Wl62QgB8wq\n2n2gT3TyppJKsLM9kMQQ8fA6IYIPnmJsoDk66F0L0428ke+XrT5cbsGqzn0i\nmgV0v4BAKf6pqLarqzZVdCZCRJe70OzCuTmY9PF3AKtW+6Q15pLA5WH9Ee3I\nWS0CWZWd5tGUBQTS7Md04ElTGnOascsNGkjYZzaRmF7MvPjz1lXlUevfZya+\nB31NUL43BfoYT2kYsxV7Ye0bSrye0OUJhEZwqpp39g7QuuozftgbBUWl9jje\nO4XdCCZvYOaTgh6mH1/ZC1jsOdwIbqK2EyrFETX5AMw85oOF55G4aCkL1Rq2\n9YY5OJDBLXQ5J2tuxExZduU8X13b1HiBk1Z9N754bNczv/PnPISTOGQtcV4K\n+o2gArKXor7e1b+KGJYSTdy68R+gDYIius6CTH+HALut9D14BuM2sJZDt9MX\nWJrm+pXgpplrjnw41uLjf+rrQMuntFzSXc6KDdlDmAdGORLe0KzY5ucvIIlo\niINjBPSTIUODYIQDh8iPy4JlW/KnsuOqyiOmmLSWkVLIYqlsv9Nh+ycx8nrN\nbxXpELClFkWKh/wyJM27WY6DL7b1XgSiPoXBjhUG+EWRivLlZWNdeEL8YqRT\nzWuF3jomj09QehkBIc/Q/jUBNP7vcKEXvrT5DvANAYsNwaS5VTencBop2Jja\nviHi\r\n=m+SI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/touch-target":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.90e08fc6b.0_1626997097935_0.7872112051309594","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/checkbox","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd804589ba07cd765c6419884fc8fbe87932d6dd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":43,"integrity":"sha512-np+O1GYY/Z8DKyrp7gABJ9pS9eThIiqTEsbUVAe1uZ5jCOFQ78b/mOTFHydMDTK4bv6OpxAGIFgioMhS+FWWgA==","signatures":[{"sig":"MEYCIQDfSl+8Q6UTiofm9TMzlvwR+eGorO0bbwFLuLx2anf6ngIhAJB3+BKcx0pxvktzRI3XcsdE94cvCx6rlUCO6FoZ9njM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZ9CRA9TVsSAnZWagAAthIP/1aCsiUkWjhiICP4ed+B\nMAmuuqMu/IQTLoF0leJdFelFQRkzD0XytLJYT1ES5DSYb2qNdAAg5ib2ZPin\n3s6396eehv4ZoCRQQI/ketp11FFn0S2oZJPMMwBz+Cc57SzH8jUH2NFOZWX8\nY6X0biZ7Vjy40LZfWj7O9xliACxZqqDTce/OPigupZpwrdc7yNBF5eXG0Aq9\nAeiQzjJtmzXhoqW8zPtboexP6Jgjl7nFM7L/xXeV+7cAdFlha46lwpJKJTxt\n9na5/qDIkea0l0RyNSXpu1eW+fR9QmdbALuSXtmBYaj83sajpNDxeRWYl2mj\nBfvFyCT5DNzrRt5aFh4dHMHE4lKekGXwKOr6zjeqR2FMlpStX8YDGmirtvob\n0mQzfTrXGE2zrEZbIW8xVDs0TZ8zGYURaW2gH6iSN2eGsrIppFuLXCzFjx0o\ntye2HIlTmWRiLZcqLax4PPOmW5ajPUKnSh8WvQb/B1+tfnGcp7rNoOOAcksg\nlKsGDCnxbMXxMRH9PmTGGUsYLB+3HLthNUfwcIbniHDwIZU2xdlpCq7ZwRoT\nmK5Ojp661jyx+fDPHhq/Wz5HuhHT/V/Ut4dkbZGwEKqFAqTx+OkkzG9Kioeu\nO/DeQtsnTjxcb+Rr9mchgfGnE/VP+qsgRxmUBDgg8YeVWx6Uu8F1fJoAvNPI\ndOQC\r\n=QhNG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/touch-target":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.cf5b9eb86.0_1627063933561_0.8579499681079694","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/checkbox","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07854b1da9b25446612239643ca4e9a0c460606f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.3f36ac75c.0.tgz","fileCount":43,"integrity":"sha512-fROeXrHlBAMhVO4y1s5tS1MrsHnZyII45cRHG67XoCWqy5bfu1EQ3iBHgH2epRGHnVvjzztAyik7o0ZYx7nE3g==","signatures":[{"sig":"MEYCIQDTkTLYHHDiPLWsFhWSZ1do+lfMOZrmW26zKmyKK89/sgIhALtcVTHLimfiSY+HtBZQHkgCbjaUBNzQ/djrD/l0zcT1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wskCRA9TVsSAnZWagAA5o0P/jSsWcGLHB12j+uUqyPZ\nPccR09MFigzrvoQ/lBr7j9L2SF5F/J33iO7uzeUWjINYLonAlIQWyASDnSMu\nYgjGUkCb/jfupgRpzTDS5cuaa9J1atAWaAV3WeINVLweB6oQkrhGmmv2Kq2W\n3WmotPVRySIqM2YsPOBgF2vVQ+uaurB0jrWejJZcW/kux5zkM1ir0l4QHLBl\n4h0ZhP0RFYud8tCXCXVnnPU8a1eWkFoHccP8fRyv2qHqlpYVraGvNNz59Bw8\nFm/NlKKKbZ8iwOE/aGyQUhcco7WHbx8OfQSG/4br1bJT6AlGMPVbypLutXIU\nMQukKfy5jKQSg9gdyYDVXCgQa21WdWMMDx08UEGg/+fOOjaCY/FETmXaWOP/\nmGWJhjljGHRPka8tGLerdDDtN/OeNeS1CO6MLVfrWMx8hSjcfYcq9XHdJCwr\nSOzV8nolBuLQ8EHtacIoy5sF+6bXBBUrcsWjEcufhOcQXNvwsPwXJDEghKAP\n62iVC24uwBeCdJ2Bokrj8WepjvZ7satLv4gRZM1/jUbjUH8uF2zPQkwhSAMM\nvz8onU8OR9b75P9T7U10yROOxPqjFFa2HHnCNWaG+bSIBIzjwtO/p8d4kSk1\n0MsGf3+SIqGnJSvWhbzM+qkbedSkFHvr4uefzIg5WUiC7Vf3C7bhSW+85MiC\nBp3U\r\n=jz/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/touch-target":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.3f36ac75c.0_1627065124088_0.6056822585720318","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/checkbox","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aedfa105967fd9888cfe8f4e60bfbe736a5d4cab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.ea1e1b850.0.tgz","fileCount":43,"integrity":"sha512-3i3LRfR6RARvCkRuyB3etD9sZ92+oy/GnGgwUBfjMU8lOWEnKswG8xy/F1QwVM1VFmGtKTYVyG9pwDDSJPakdw==","signatures":[{"sig":"MEUCIDO+YznteFh45gbpT+4hF+mndZ+b1cIFXNS+YZ/AAR93AiEAjITrOryMZWRdoDnwfV2Kn0v1AM70XNIYpX8Fz597mJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5JCRA9TVsSAnZWagAA5jcP/R9KAMCOyC1Ae09sVekK\nqYeGTkAPbMN3kLfAc6QF5j81Z1LM0xTfHfTzwlS1NZo0b7ZKS31kcMn3WYP1\nkHUWX2WE+jfNpYp4FqL196r+3almFekUs3cxgVhWyP8qyDNwwuyAzA9IpFG1\n30pxYyZSWOiPzxKBfyigV4oRMgNlfxdLgE80gqEOzf4YAhQybtlC6Aq5Hkvi\nRKXk0XvOCssrL5sQDg/oBh8gUZ9+6RtVYrlvV5QgUGOW5gy5pHJ9fpJdVGV1\ndsCg24QqBEOpHfr0KycoVN/TYh7ab59gAIXHDCA/m3ASNqtTTnaVnEs8/HFn\nYt1JS+h+EXY0ZdKTK2X+qQyLUC5eU//p2Wg0H/VlZG+vEfvHb70MOMUkk4kE\nbx1Rs60r//0fBcb7YuC1yrfr3zYgnK68jZ1WUPcmskDRfJDeg+0R4bfbmLtN\nOlH3X2ly5QMRiQvvzA26TkbWwYa1E9RkMo9BVqqVKguDeW3qWMlpDrz8NaWK\n+qg2m7qJGth61OMIMFX16FqmKsPTgGRBK5dLT6woZqFJc14//B0LVA5qQao8\nPv5DAP6FcRBZq/vzXWLgfKIlEdmxaqQOwADSlzUBqiDRhEeGdfYW6+puws2q\nfWJW1mZ4u1aHxBFgShDCTCf6VeKdZFNfxqpGh0rvJamZlq/6kQH5C3phZqXE\nk526\r\n=R/H/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/touch-target":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.ea1e1b850.0_1627160137705_0.3500783380516126","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/checkbox","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0-canary.22f390c43.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0acb442b923e356b92ddb2946787a9e602262a0a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0-canary.22f390c43.0.tgz","fileCount":43,"integrity":"sha512-cNQXA3J25teJtb8uy9I5uHunpQs0tUaa9kh/7Xh2shQpu2zYicWufmnQmoadFJyMbYu8yyX/d4h0wY86Hww8lw==","signatures":[{"sig":"MEUCICJzHEyN3fP/OnJmIXD8iZRVPB+V9nfHns3/lBEahE7nAiEAvJecAlMF+zI7O24rnSxO800NnRfWct/FedIyKm3I6iI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFehCRA9TVsSAnZWagAADIkP/RtaD17a1cjTy9rlcQti\nyMwnxdjtqwOsJ73CAgiRD6/H3u4X6MR/QSkx/k0UpvYKAMSN64YC0unhg2wg\naOEDQ4/sDH3hAXSVQ4VSBwYT1uSZ6+4N4KlfJ5bTknF8+XuKpUSdFqXvke3c\n+l7Rm9Vr9p/o9XLbDjp7YFpxjiLI/FVX28hWMWDwsBpV56yc6MAzRNqqGR4w\nSxUO9nQu+eLTozXBkhOCCKZ8fTnRalTtM8qJnGOUkQVRte9oqLCvFtn87gE4\nbReTm/WLwPKgwY2qirhvHIZ3zfJeUkd81uSTQO2/8foD7bX3zjQFTpDwF9Qq\nYUofJJUckRHhLFsGBqB3YwIvtsH6kwwSd8xgtP/NXdTJ5Fd9/iOBllgzJPq8\nIxVuMc+nqXCrisZR4aoBcCDK62WbXmKbZhAe4am4DQ2xuu5uxkFdH4uruuzm\nini4OL6SBreIggjApSXlpseP/sTwz3hioqDmgiZeaW5+/sltWMP1K22Wv1Cm\nK70mG+YpA9Un7H6tg7NabldIT4s9akNdabjDKFwkJjGufNy8RTgATs8OVdK9\nZ/XDsT6uPyZWEMMzk4F8g2rysGiD2zDYOcPCxTOQlM21mRPRLcuTBrqNzwp3\nn3RCX6hHHwYNqbL8iDr0tF2ko7T2nBzcEKndpeIedTQFq59SPs42eLmBWkF2\nitRU\r\n=WQ5U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/touch-target":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0-canary.22f390c43.0_1627412385547_0.40910290359111534","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/checkbox","version":"12.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@12.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d822fd6e15e5fe6c7c16c7d1238602b18a03b1e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-12.0.0.tgz","fileCount":42,"integrity":"sha512-lYPhS+6la2f6E8xsmAQtTCb6gKFqlSPMzvlnf/2+BS6P9iOracRYcWeO9jeze60m0gFiF8rk4Y1Z32Mkx7yPQw==","signatures":[{"sig":"MEYCIQCmpPw79EaHj++r9InakEs5baZBkDev3BHtR1Hrvg+VigIhANU/TVrv769xPlia6UWuwBa4UzyoN4D5Dq31fZf++08u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":747494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNWCRA9TVsSAnZWagAAwjYP/jOX0g0Y5bZqtWDqo9yF\ng4ccLv6oXteWB9qGJn51fv1dfguxLJ6sseVp4dCDsXvlg+NoSbAF2WJRwjqZ\nM/kp/wXEMHB+HFsFpOVHEJ4oEgztd0Qc6vdrbrpzLHZ5IFZV09pgygiiYhOr\nDm07TjUJX9mUcovRlEPZPzscbB3PRWLoHe50oI61ZbPsSI5k8rkfOEqaw0ZJ\nlY6hY5uBkNU5FpysSyNgXgouGB5MDjV68sheOLRMjXdogkmLZun9U0xsqMOW\n48QpkcoXpeaUQZUsgUtPrpTYJcKJisMp5XScYLpIP3OKI7EYtFOHNMvgoHcr\nhMxzijUNecKfnUHr8Lsx4XAHwiO9f2mbXl6jDTRueJOOJMpRFOzDtzUllOUp\ndn5F652h6Z/bYNmSnvvFod+aGoP9TqmetkD79+x024NCgqbkARI/q9XGvihG\n6377oxZ2M0o7IFSDqKBPACy0+sSBdrbCyt5IHx9Od4hIvpSbAZPQEtAdPIEK\nfqggBuAqI17Qke+5HjV/vw2xeMenSFMxPv8Nt4MgYSabr2mxRDOC03RRxuBP\n9wCMcRdu11AIQwPfaj9X6M0guCe7YR46paeBKbsV4MqXVqaRTxk8NWQgE5rH\nJsg8V4RTrFHfqgss2ona0+Jxjaqgh9ecQxL+Vi3eXEb4wjZdHCVkHM9BCSSz\nw78S\r\n=u1St\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/density":"^12.0.0","@material/animation":"^12.0.0","@material/touch-target":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_12.0.0_1627415382017_0.9383414617223043","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/checkbox","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9c65d3995cae2cafe396cc966a2789c92439cc6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.ae85f7eba.0.tgz","fileCount":43,"integrity":"sha512-x6ssK5qWGC528ELToPSI/LDjIEEY+NlCqsJiXEMraAXy1E+kucSNMZfCxNiQqJr6bFIZaefEJF8DnLdX3HKGqA==","signatures":[{"sig":"MEYCIQCgLRPIKNuIt/0M6KZ0tEyi4YJsv4YU8DUn98NJYkks6wIhAMFsCLeWFPjetbZmCGe6oHTflh4rdNb6VmDn2g0GwKyo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":749072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGO0CRA9TVsSAnZWagAA70MQAJneP3ur6PrqeeQp/BO3\nYQKKMgAsbd4KikSPaocDc/1MeSZjrNrpuVrcNYUmQ9E3HQFEJlcNTtB8u0Mv\nZZOPpz5v9EVzyDBo1uMCYjPbTSYQIZPeG75nJMqPW6CeY3/uIUQpy5BLnyCz\nPVhR5V90K9dMEFF0Z4k/cLWwQA2mlhCP4kQraR/d4dEyTHR0woQ4bV2UoR2H\nfeZTdQdF8BYMItXNxMSTSUYMG20YYxTfSr3wVyREkwY44KormPiC2IR47ec6\nUhhn85GTv6q0GMvoqFvmPC/TQpZ5hEAhvPY0aQIdjSTzCRC2zlxbU8NfVcsh\nnXPaV6hxA+o5HRjrxP9DhUvKdRSIL0Lb657cMyrPKKDNYbf9Im8H9bTmypKL\nzZQCqdWF2Gy1PJWs33wYsR1IdrtqKTOa0ypM4aB4sn3GCTU1WB1jieBrbTXa\nPdGnwTEMeDlkOINCeQDQurM+sZSpnUqPjTi4CiUatxEl7m6uhUcAZPexC4Wx\nhYeCJFmjV+l85VhVOdGc/JLQlX3P9F2Da96u9vVt09incny9bn5UrYiLamnn\nAGg/XAiudnY0xD96vIgr7nxXlgtIYsrd9OiH5oMRAns0LdI6LawS0UJCU2Dw\n6ZwCwSwphQu2HgumM7vfPMHfn8DwkGaI/vC0cdJyd3t5zfS2Ff6LkmV+YfT0\nJkyz\r\n=gW55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/touch-target":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.ae85f7eba.0_1627415475832_0.5399264693630541","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/checkbox","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.5981207f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"339e9946f4c8b1e0b477c395e6201a71451ed0d0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.5981207f7.0.tgz","fileCount":43,"integrity":"sha512-dz3NQ0RIm+UTYiaRLKuQSdLKNKQSz3z4w+Zdd3dDXxzithFXU+CUtIsiJ5xO5gmhE84wU+Qg6HD6qBBpFHznIg==","signatures":[{"sig":"MEUCIQCtqaKgJ9MLBzsvHxhkN3vd4zUDaLnhwZa+A4OxIzEOygIgJ1pmu3tlDc5X9XygZx9h7vY/7qb9AWg+Inkou5Gw6mw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQqCRA9TVsSAnZWagAAdFMP/3JXXoVlP5KjHQJbxdhR\n7nPdtyZx10kx5e9/LLV+rQ0Mf4TyRaoegvHFMcQMtML83FToMY3aO3mlLwJT\nj8znEjYsVhs01ldGL1Fy+tq2RsGoai2VO1x9FVHfUYqMu1WechJpnHPujU8H\n3fq1Nfp9dx2Jwj7ympMRfeoBq8/yjy3Ma6yR4St27IJCE/E0snfeaKkyk+4c\n/ndw2eNLD7HqEC8Mjd8M5HaEm4LGybptU8+6/BKv6zwEvZqq1VWXntqLI8Ze\nVubeApnOOdvUOnx9UEFADTryQH2jcIA7UFLIKUcxYdZIVpLTJLauNL19xUZR\n0hnyXdLwPhY/PiDpGokGkikItI8nbVLa6rmqtmO9vAST+7vHYL4wgfFuTlIW\ngGtotjmLk0/8430CWnvV5dH7iVot8NAvSSimyhGfoFkKMzQH3GYmlaRxID1d\nv6RXRALbxfNH+E3jjkqWDGpt5OLMyd7BmHNYtD6yrbCx8OYuwzbJRTF6e7eY\nCnUUFAbGBLgQVyxyahwN5JCxrDuGFbN3PpDp1M9cEwu07OBGHKhfZN+uf0iZ\nZZk1sTVDtoETQh51C3uFmcGef0NQrL5xuJSWi/GenbMswgMtMAqn9SqIm9as\n1VycU2chMPafPcr8A0V1cyaF2ZDuu+MSaW7uY1R2h17J3Xf6SyBc9yaPlsZn\nAI6p\r\n=sGRX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/touch-target":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.5981207f7.0_1627427882243_0.4670817804885481","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/checkbox","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1006624d832fe9fdd6dc7a345906eb5c2b784cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.83bdd0222.0.tgz","fileCount":43,"integrity":"sha512-a9rdO2aooO7PjjNBNZGmAY23EsB2t9zaafDMZTUmwKo7aZZONWHjAvArpTb7/KoA3oljroM46ANj3+CxaNNHMQ==","signatures":[{"sig":"MEUCIEkwYiykMt4QsbIUmuxn6OAKOn6Wez8mNMc0B5+7kDdwAiEAmmrPCWYWEAtSP8moItqquEd9YupqzBFhw5Sh+OCi05g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMcCRA9TVsSAnZWagAAqosP/jmg07axvZA/WIBXGyT0\n0KYXjTqf4/9uVw2X6EWsKa6yQgfLPT1WDOyRKmjV5VCeq8UE3qHEtMwt4u4M\nvP+ucugWL9ItNR6OixQM1hTWanjgcQ5K4YW9epasT9OqjRAGM8larAsyBRaO\nYmBsPhuTHXq7XogtIEpoSSYTqakZ0LrCjmIWXogUquy/5y3Xkcz/M7megb2F\n5Ihk3cmJs+LDl4kHin+1sVT7QZSvxJ8bnl+igTrbVS58oGsrQdsd/EusVbnC\nUaGM9V+x7Mp+7vV2FrYUz8bwiw/pWxiBHp0U447xFnOgB9XeZB+gw1X2TCSm\na51MtiIeTOJLQNT+W63SzaIIFR5lryk5vZozRehrCsjA2vOlFd6dpVzTAL8f\nOiRaVfkEANUbus7aEce+ZM4gNf5UJ6qvHJy0nUfdLrW6rdjlkjWXGOICiMkx\nCP81uPIA8z31wCnhyunjfRDn6QPG8OZoh9ieuNtEFjA9pe3hcEidpiMo9LRv\nQCgbMVxM50q7xVEyeKp5vIeqeXHyXtxQzuv5Lwzn5mA7LfebToo1PtfSOkxN\nBMuuljaMpi2Q70TB1YpsJjYSv7kzijSG30tFT6mecaoP7bmGJC7v9qoLOAb7\nuYgXDBSIlW6r/rLqXTcbKN/dZfKcYHjowjenu0wYSKU5bDPN8mlQHJeZRs2w\n+dvn\r\n=JpX8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/touch-target":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.83bdd0222.0_1627493148063_0.5405786673647479","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/checkbox","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.28656298a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9d004ce4e5139c88a3bf61361a090811f99f9f1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.28656298a.0.tgz","fileCount":43,"integrity":"sha512-HNvFOywDQIZrEYfCsQ7wMAW5yCMKGw/UUC/trn17niMYotW5YXCnxa3C6rWgC3p48aShZDH80uR8+gzPvYfJPQ==","signatures":[{"sig":"MEUCIQCyMjDFvFI9DiohK1O4pMOqAQ+/2vdp87X4X8tpoyI3owIgF4+yC/eR07t1RaETr9a3QJNdvny/o7N/K2fUAbZaTp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+vCRA9TVsSAnZWagAAYPcQAKK17cdZq6gOloZi2kki\n3vaqAGVf4ivnrqqM3gy+DhY8Kvpdru9hqQJmEZOYC8AjjBrAx+P/Ca66BQQ1\nroTCLtz1XoUJttfCdyz9i9PZWSQybIwpE/Cjk4RQlMDWxsp6YivuTIhgZ1Tj\nnGVfjLf9SWemYt6VTPYqIEjZES3zbYhKg3WKYI559adAaqtcbv4Uqh8xoMUw\nU3GUW2WWFpIGXiZYyPDtrmXxhFddysUOkWi6Hh7z+ON0VsL3zMU9vJ4BU7U7\nAGJCdJp+MB/SEu7pIp3tb1kDSFadEydPRVWdkGlAGAZVZ6I1/xOnlwvaTqWy\nxtbQa5gx/2dY+iokGuKzSvzd/qJlJVpbTzUqLq0Y9taPuHg0vdTAQXQzax1x\nxvrDlnpDKNEObgZxQdQq1mFdVdvi4yq99C9PhVnJReANy5AUR2gwVitZCQzJ\nclHozIkEh7lLR7/asl/jZql9gp49fS0F8D17lC8bghmrdzwL1x0ODSD0ZcJm\nAyM5naDX/ZtWcY15QYDmEY+wmU5s+Pt0QEpftFZ1t64JMkUvJVQBP86o9+L5\nfS0WyDhwgdekuk6Ql9ktEXX8T53rDdHOcdHfjwetQ1OAAF8UP5zhwSY+DDnm\nEjL3eD55G2/Xq7tuc/b6xbqkAthRviDN/cYLyklfvPiseS33JYI5GbP9SNeP\nN5y2\r\n=dqRo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/touch-target":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.28656298a.0_1627582382794_0.2703240310508681","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/checkbox","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77480884b83231447532351197901f55e4cae5a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.9e797daaf.0.tgz","fileCount":43,"integrity":"sha512-wIR2ulfs+Mbe17u8MTEIt8MWk5+MGCCzwM+UickIv48fOaii00Q1xPVe9VNeRQNq27z/Rkuqp9zj1EZ5bqTZFg==","signatures":[{"sig":"MEUCIQCXa2pmSaudNLOzKhiqYNb+JqscXhS4Zliz0vyDbKlIuQIgMIcdCFdQDjffHco5KAzc7yfNq0z1+DB3cAdzhm7juxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvTnCRA9TVsSAnZWagAArM8P+wXzNa9whQIzb19mftTn\nHVm0aPtTtIG4u1qmVYjWgGXwR4bEaxRwW+mFZOL96tGWi/1a6UVVHwPOKYjj\nEQUoahvJS8U3iBOciOJQId7Qw9VZyjLgDvOTpzGx1QYgCYj9Sy7fuE5sQLDL\nSO7x2gvGv10FhzlfHYpco1NsL2kTSzv1nyGfrL9uv2YwQp8OK9Lr414MIWFd\nthallKNnLfLvTojgXUv1lb3P485uhEKPXPvbim3r370cYa6d84DlwLRM61Lq\nZavtumd+vydy75fqyxmxT2zA99YXkTgZLrEKprT1xl0Za3bHOhLPFImgdvcE\nBosl2QjqNpb3BMeA3jf1lCR+jbE55RQxVtt/HvUKiA9ZG+BbVV9b5TAEjwq1\nnTPFookEfbJp0zqZud7d0RlosUQaUSTDIn4/8RUlry++hqWHPNnkUhNUWL+3\nqYk4MmH5gxigbgjms935SHA7W6y4agX2P5S8WRMjkTHJFUwBZU2FA/S3TCOf\nepp3uK6Tev35VqUJwK2KK9IXQSKvS3UfawFOumwX3KQ61Ia0L3o7hJpnTqmv\n3R0mPkmU6udQQsFndVghMTctfwtalIICO1JTD3BIbPkVbocRKPOpw1vMd6Fz\nlPzi3uxxx4Cut9MQ5x6dSH1vq+gidbfiHGMKaeQxci7yN3s4inLhTN/wcM8Y\nzw10\r\n=jpXD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/touch-target":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.9e797daaf.0_1627583719251_0.9057041491930722","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/checkbox","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e0dbc29ae5073538d1bdd74166fb926170a6b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":43,"integrity":"sha512-OaLmwCaNQiELSEtpt/b83UN4KbcUaq5ma2+9qLhbKw25sBySw3Uuv8P9YYKQ843cbkRCghKNao67PEYxTfa5uQ==","signatures":[{"sig":"MEUCIQCnFPeTRmfWuNgoejaOeqXFzSxmjr510h//J1CKZN8LCAIgPYFQp7SQPVaWjFkYL8Rqd3vXudcL0TOva9TW32/Q9OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1ZCRA9TVsSAnZWagAAMTYP/i9Wpfibw9Bm7R/XrCh5\nQO6l5/RTGtXm/pMBQVwHW2cw0dRc2bgJ+mTwVhODeCo3W5GE1AYRwsdKOwj1\nmZ1uWCUDLuhC5by35wXOEmyOA9J8Qx1ruGJTGTTkX6zHtvmqVuykyFwLaapg\nSyADbX2HJM1TX79S317ej0dvS17s5Vq20VluA/UX+EgK8MUoG1xAr9r6v6pk\nNxFNmS4RTVIlkjk7UVIK4lnmmUsP25wxaZzQQxTVY1QgVIxDbZgv1DSfpfvX\nkYrZ8a50msOuCBwoOuiFuRxjS/FRlcc2FnsCrpzN6Wn1OI2NratXHD9phWJE\nVc74G7XwS7p7GyeZrLsjLvFxq7/SpHqeon19lNaKYd48rYVhwLLhrr08pvi5\nUSlW7O3INb3B1q4I7EiqO4klJkJr4tOIdS3k/EPJ9ZZppOlkQoyPJWyZtzZP\n0Bzq51SZjBsaTOlQt8HTaOb0O1DFW/JlpoTHQ7K1zpM8h6r6/XZzcipVwba8\nqqSt5BUR+IXvWMTehoMrpLEza0kvNG+mgrHzzWu+FQfnYVHzKdBg8LrQF5eK\nxTySA6GUW8eJwOClqgH4E4MXnuuYMK4dDmD7RAnYtLNWvQxU6OE9mpH7HksL\nF9G6+EMp9ZIkQT2u3/ze1Aes1yVvDMgClNmhj271rjp/qh3jvCgBkOD/AqGf\nE1w3\r\n=NjVL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/touch-target":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.adb9f1ad8.0_1627671897621_0.09222306930704627","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/checkbox","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.cc5377458.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72fd132b1f8c08497a8ec0bbc434894a934ae826","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.cc5377458.0.tgz","fileCount":43,"integrity":"sha512-pngx6EMHIWUERorC/46VsrX5xGy90EuksSP9aYURDQWY7WZVeXIpr6On4Ej2eYr3ugbLnUm9DaaDNdW7faV3tA==","signatures":[{"sig":"MEYCIQDCrC0qCLGm10E3WzbmT0Hql4nw3rCHW0U3yt0WA2tvZwIhAP0e8msfCSi88pMVHNhglpiwI/NdH6KOmgLC0krjG0K7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAbCRA9TVsSAnZWagAAnooP/0KLIM/6V6Q4rSgMnnUA\nINCMdkvokxrkWpRXxmI4hXX3GV1hQPhCWqMswk3fyowePfNATiOgq4zcl4TQ\nevbdhe8czaWO219DWVnxEWh0u/EmyHgbV6vr17a0yrRElp2L9vKyWftY28xo\n10tn0Y9eWIwgXddLRN3WiSqJvq4bT/Ulg04yy6kR4WH7NOZKrT6m6dObrphp\nSB4Zh5lj5vUs0avyM1JIUifsZ3h3NuN0mDRjRc7xt6EJXbrxfOXjXz8KL5Cu\nVHGiOZFMS/yrubzM20PjwZyPrLatWsR8eo8B5ESwWImWy77D1lTUeh0hdA5/\ni4gtRMzbBqKEP1/0VQgj6HDc5/9fLyUcL/2z4txv74x+8/Cp9NsHzjrXaoQ3\nFp7/+K/Qqs4+Zf7gjw+Tq/YCIg6CL0BCjyOmEoLm2RvGdqU7LJ1AzDFRjMyA\nmM1gwArrhDTW4F7w+yPcAftI8imHrNC8fY6UUDEAbXwHHmR6zxurdJuc6ImF\neZbAM37sV0asEnwMTmapOhUBjnvL1mojMGQXqPQt1XM3yvahmnqEnbZECTjF\nRj4x2hsqS5z8z1Ane/3R4NyM515Lu+IN5m0Qc/A2VNR/wzw/sHkcmyvUbn8C\n2h3DKCVLNhlE5LoqG7N0w4yUZDhz5PpVpHzYE5k+4w10PVfsH2TOJlGh5ZO7\n8iIS\r\n=HxnY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/touch-target":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.cc5377458.0_1627680795583_0.5152924848356526","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/checkbox","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.a395972cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b1c6b80226b10728f0dccd1bf87c8ee73120ea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.a395972cf.0.tgz","fileCount":43,"integrity":"sha512-rEXeVPAanNMESLYB+H/Q5riRbWL5ZT4IAVL08Ft05PUoyxqAOhXmhY2AUU2qRjksgW0NySbdTgQodrkpWF/alg==","signatures":[{"sig":"MEUCIQDX9SpAlBb7X56cnUd9Of6cR/+DnLP5VHGuR1PDfkcphgIgZPLnzM0kSwAvZxhmxPDMa1tdFViAcAMo+6oZSCJYtCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPBCRA9TVsSAnZWagAAL+wP/jE5FybtyWtgyJCh7Luo\nk1GeFCtgO/tqZO0f35jh9LEi/YB9zmx1rrUm3E6NTT4HQPhtXdq0nkloTPQQ\nCAetkO2fi8gh6zOLKcqSbxryVCyCnI/8E32iNOkFjv2U2UjnefrmO87psE3K\nh2zmQbuZ17gkhLQLmJEiowHBMKS6v3IMQzQJXl+dy67qgz86ap8V6Pw3Nbw3\nzY3uYY+qYheqkSNrxgnaaXMrpILth04qGiuNJxIjC1oN6shIrtxWqtxeTcSh\nYjuBqyHB7ikfvY1f3c+a9DEHGVR8Uz7+Q7mfZODsYyJMjN7x4hoziqM8AsCD\nOYUOYsBDjb5f1fhHgqfuUcKGfC6+O7Ok5DIVellR/0wNuJFlrxLDEq/Tcf84\nMASOeGQq/ymTe1SaPM0P+zfS9FwhCgmdoUDv0eFxoMfz7k60A8gTVvyxirfE\nV0GeH1wOfs6HRja0wFtx+MkIEfHGMp68Slnc3HlpSYcVgvF0bREZ8LUVMm43\nDl90sjDfdfgfpqgjki7dWwKvA/xndC+UzQgbflnSregyb/uU5ODlDOHr2nYq\n/ZjRikvFkabjFal/wtENAD688U9GX14/loKpMUzAj8tcRsKl2fai97dUNibR\nP0qH5Vx2zWO/LDAp1xUFzYjL6xnY2FxC7c7DVJym7V3u6M1aBVILITey17YT\nAR25\r\n=057F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/touch-target":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.a395972cf.0_1628025793125_0.3450444534234136","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/checkbox","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603561ae9991ee3b497db877adaa1b150f4ac2f8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.7c96e6b98.0.tgz","fileCount":43,"integrity":"sha512-6SQ2nrKXOrKvloatW8g9VPQdyVUKpd6v29+GDDmxt3S4vT/2HvB5X7i8/83YCcTdUpz+I/N05db9w0suUkGwfQ==","signatures":[{"sig":"MEQCIDA41/e0nuQcn9z0Apuuy7RHBVBo0JuLXSOfG5l37E+tAiBfL/t4pPFJ+EUy0gUXQj4Wzm5Y3yU/sgN9pjXLQhyUWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+fCRA9TVsSAnZWagAAVR8P+gPLrGAWGEbEwM+xu5kL\n79WjKCbBkBZn+fSV1BYBKR1WZQ3rX8wb3rh0P1/YM1gDqpmRWRjVKe6sPSXS\ny54ewynBEnYbt6MGBqx6tLQr2UuSI08N6/+LhMuesWDiGSyCRoHizuKjz8RF\n4zb2dBj1IWfeWVEPKh2FqObblNzBlGOPpgiMMXhxpTRuA9qVut/o58YE98vy\n+7HPAmY8+mTGRCT8w1zzEy09qB0H27hmUF00SNwxNyNoRe2d3JmTuBGC+oEn\na7tovQsMskFaqPzhAJlQWR00qnfwgX5f3QH1LCSIqTQ45cDRWAjomhlnpFXY\nVee2FcLdx0gooYBFSuDskRQ+hOeoe8RsQXBlJ/42XjWkVwo5LBft6alhUlg0\n6HnnqJZ/zyCJ4ad6Lms2AaYZE+t3xnafJnQD63lRyW0/R9ALVoii1Zh+6o5F\nkpTXMUCstYngRGXrk4kWGqJlQcDNnPJFq/jBAztqQJ2jGC1/NUk+yW4NXze5\n3xw0YJS+bt+236sjJSxbsxjyb/ot18EggUrfoAiqWZ8OUOEUIMl0+dm4pN3v\nUnQov9trZUsV6p6LjXdBQ+2P05r/hBXhm/9alG98hnq5U+oeiQE2KBKv1Cdj\nFjdaqNgNqQ1NLoLig/E9v55asGLxGNSujQzvQKVkz3FyaWP6XCp+/DouK1D1\n4Gtm\r\n=60J7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/touch-target":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.7c96e6b98.0_1628028830964_0.32333028343467207","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/checkbox","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbff65bb5e3e7ba2e545cb6feb0c9e87119ad53e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":43,"integrity":"sha512-WlCDeaehl+aQWuBoE5mU7ZEX3tJ3wfF7fuhx0z49S1psBpmlwYpemD4sLbiulMX1PZCilu/bRDGEM1sm1sjaVA==","signatures":[{"sig":"MEUCIQCUEHknVZYCkwJGguYa+qP4zcClaJHnKYzoWmq8ZwuFTAIgD7LiIgWHePh2lmT6ea/UQSH3XZM4hWN2DrQH10mSdZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCynqCRA9TVsSAnZWagAAT4UP/2iTfjMlwzUPFho5fsL6\nT3PKqmHlA1nwOreUOCyVd0MZt8XscD7LODKdSV42EtYeUOWdY2BUZbtVtghe\nlRLxU4GjVifyqHB8Ly/XypsTWIpDvBFcqhqU8UggVax5ZsminiGVEaRALa28\nqvQ+NS5v4W7SekqRHQGD6LkK2ObluorkCDFIMKrAX/ZzpXJVk2j0HW3ZJ1w7\ndJfjmv9EuttESFAFB3eCHoSzZEo3NfxGab9+XZbC3UNyvU4NYP02oP9hjVLb\nBcwnDOVhoP8ySxnSMYuB0zsoQhc/zj12ZnkQ2MoC3rEZ+TC5BPaemrKIsUQD\n6N3WG7QmnkXkQQq80rdvwTDnuCgj8+mvHHxkICfkD0I1TKrD5rZMFuQmnqEh\nxoPUkRPOwEm2H01/4NmDBdpgQ3Z8L1+mEfpIqhi1B/9IOTL0BokpsaS7cexz\nLYl/hG7KN44kNNY7DA+CMZlqyLZEflq0NGb7WA2II0iAxSUpF03fi99EOe3/\nW1Y8Wz7zU04A3bdmbs8BGDdjARPn/CYqZinnM34zyjJZZQDhMuS9M0vhZpC1\nWhv0IJM/nvx775yOgSXhUc07v/oc60JA2kQeOCny9nLtgiMmRrVtE12E827d\n5BmBccxzDDFlD9qXyF6F53hDKODHsKTAJMW/9461n226VPJj1Kpl1KgPSWSU\nOZDJ\r\n=pU+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/touch-target":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.a80c8b2c2.0_1628121578322_0.012069105186550244","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/checkbox","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.3dd611091.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad7bd99dfc95311f794225ba53a3799872d6902","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.3dd611091.0.tgz","fileCount":43,"integrity":"sha512-sOYjZVh4BVov952A4jqDOF+40qpWS8YEnM7itkzMHGe+TC4T/quAS/2mr6IuioZbw45VM+0pI6TQ9we4OSEp/g==","signatures":[{"sig":"MEYCIQClW+6XrYVDK7mCQ9oGFP1m/8q6Kq2Oc9S+it2XnF8nkwIhAMcSljVsAOrUKJlECsISsGe/oJGPBTDQTehYeIpl34sr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FcCRA9TVsSAnZWagAAMuUP/3EpjEMaQIO/pW36xgxt\nJgDnttaBhgv3StU6pCdigjzipjtp0ymgMudYkKO04yd5v4CgUKNl+eyYgzQc\n1TmiSgKsLDRUOfk6rXT5ypmO9g0A300VWY+/1jKbUrBOKGJiog0ucyb3z7L1\nVr0LcLhG1ovoxSjoePLd86+E84SlUjclbrXaT/szsXiBkReJLh0d4TDzRmyv\nsaU4qNyz4I8kexFtBlABvysrgcsTMRU+ex0cd5gYEb51Yb2sXmRwGP5UdBh/\ncC7Q87DXRouYrFLnzLSryT1ZSd4HjPFIZIHJBhO6Mj0yY6VVgT5y4WB2JF30\nMJBI1Wna61+kO2TMZPz7PTjl4EOgrAqTkIGEH2D2ugVbM5HNVrlIlH/9pk/z\n+FFYWmbPJRxkuFCCQ1ybOO1xX2xqoAMPjnImVMTTqJRMD0OiH+kyhY4PGWch\nkOeHEUxkBjRNOZAOhPiL21buwK8vlv+msrpNUrgLvTPC+yYLnqUA2m13sIzl\n/uye3ghqk+JFChE3n/UrUj2pAw1tUED0ZZfLaMelf220zeZhaXhA8HOTF3FS\nI+ghwJyeLQcHGSXQ4nIcg1zJ1YwA9Gidwx21GX+sAFq7ZkN3UqF/Y17PONSN\nheXkrskAwCAAen6/B9p+vo2pJd6MnCy1sY9ybxdgxY14SM+Uj0N48YA84Wr6\n8oYH\r\n=0AXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/touch-target":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.3dd611091.0_1628135772031_0.36086105341671004","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/checkbox","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c534df91c56facc0c7950461cf61a92737704a0f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.5dee37ff6.0.tgz","fileCount":43,"integrity":"sha512-JhYhjd4ijDYV6EwQpizlrZVsqHRApezx61gvO5C80anuOsD8j4YXfSXsvScpC7oTEXReQ2RXto2F9IcxBStWKQ==","signatures":[{"sig":"MEQCIAUmMUa8janZq3Pd5UvOZzkmFW56PEvpUWvFi4+KP/78AiAJj5rlh6YzTdyjF/FX0I4Ly/KtkC3AfEF8pX05OoToEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCLwCRA9TVsSAnZWagAA2+UQAIEelrmwm3Yads3KStl+\nziIhGXNYKySucgpPPk30Z6B41jWWDmcgb8hF9Kxb5rcQq1Tx7HlCIVWrFX/z\ngNynHZRLWsKGuEtSJyeWYwVLisj4pfbiUGZzpjDB5A+djQRgLGZiQIsVNDjn\nxsztQpV6gNgs/ZCSQTKGr6KC0sqrDm01pGm1QcJHM/CQUS7oTqaKGfPubVnA\ndie9Z7Ofc5MaBNho0WspkksLB4RG2kl0v+oAEY5pIPYBN+mLx63gztb26b3K\nU7idFeLKesSSEZps68MVz2ZfjN/VDMPQmmhS8VatPx9qWllyJkhKN/qtTxGm\nbgM1/gGLmUtBCxMcN74NkvpDUauPaWy/pdKP2mF9cvqHo9+JhorcmG7q2AjX\n7m2S3uTxp2RbsYunTqpV8oo1vVhZw/J1DpzhEz6C7hMiSspTgKdP4XvfSh2p\naSrSaTFuT0SEbve4cxwrqP4lG74P+xLT19MDunfld50A031z1eFP++upt0PA\n1jOAdz/Pv1UmjA8JDzD6C61Ggberyk4qM5+5/evDtddb85LrYRdtBh4P8JhS\nLD1FBJmF/EGwa4OvU19sVJhDUT+pvMKE3433lDvG7VaZyi+nljedsrr8ZU8p\n6sCbVQ+sbpWUX1t/Ahm4gNimEAxv3bKWzgZqbFhLHJY0TptVlNLwdXyjiqwl\nhPPr\r\n=l6wq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/touch-target":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.5dee37ff6.0_1628185328486_0.003979133015790559","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/checkbox","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311dd4918a6be2348d4a9bff132b78cb971652e2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.bf405d22a.0.tgz","fileCount":43,"integrity":"sha512-zB0ZS+/iWb4D9PegkNlvioufyuEOlm8laZTkGF1vStaUoGIn69ZKawnQRWqmCgg1xwdFKh5Fy8pwsJMceC5PUQ==","signatures":[{"sig":"MEQCIFCxMWeeVrF1UmJUcsuX5b1T0RMPjcZvOkL5c1JxfJ4WAiAAuM7Rtjs6xUTw+hDb4oXduIZYCyT8chcm5oPXGe+ZjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":748036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEd2CRA9TVsSAnZWagAA1r4P/iqSFR9CzZTFodN/N9Dk\nyp/PkRCVxYBHlbElgou00iF+Y5imtlrZxddNEVY8MBfKNlF3OPQ7IQ1xPPBo\n7Fgp8QhlRiZmomPhUNixDom1oXVGxeXuSxdYNRUScCKkr9tf569iyXVLhZdh\n5TXpm5vtKRB93o5xmANE3fUIkh3Nw+RF60DhzepGAg7hIq/aMIx4RZqgasVF\nIxjCsyk7xdlFqBDdPP2O6U8zPqu9CFa9ntfNWuNz/DqG3uiKHb0yOpUbBrF0\nDjPea3pPq5XA2uIFXsiwUk5S0rSebT/Js6oW+jwNk7cD9zMjpn+rbbMEc64H\n4bbyj0bF1isz1NE8yHFxOUfCIFwEdVSROsWGGYSLPJs06jEJC72okdrqk9rk\n41Cg3JjWrvLkxXpdtXKTN4/2wdVeZeyBVPv5wcYQC2IG0hMxEMaaqI7HZF/a\nEDhcF15Azxzz1wMJMAghitwyJ8SkQucuArA9EmtGD2ZsJSju0de/GCuGFOxU\nDwfYZ4lcVUN2nB/nQBgCqWOpvzCF9WObU+d/ntLMbNbpfJ98JqAAKXqe8Q6G\n6yMpnT5y5dYZtTJZp1nnY2W+vk500lyR/IwCbV0ixMYRQOOa1hj1SQaumakV\nx/wJxu1Hw1u1OFELYtsI1qxn4HOnNGM1QlxehCm6an0NcdC5JnXbgqVVGGIj\nhxMu\r\n=EA+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","types":"dist/mdc.checkbox.d.ts","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/touch-target":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.bf405d22a.0_1628194678405_0.5691942867757176","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/checkbox","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b929c96ac333fb0e14a3e9cc8c02ca5a36001309","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.b47dd37a6.0.tgz","fileCount":42,"integrity":"sha512-dxdB4MPs1vznK81pb43fhlSTnp4xHPwP3GJ9WfhOxc+6ZA2HIjInD0DttRNBoIs+aHgoLS74cUDKhbNelPQX2Q==","signatures":[{"sig":"MEUCICwFR8vF5GbARbnvtKHOHM/N9c3uDVMNXcBkOeSpmPcXAiEAt6+Wizq4FDQo+8qS2zs+dg/bbxvhD0tsvBwncn1HH9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7qCRA9TVsSAnZWagAA1G8P/jPUG/PiWfEKFn9cheXu\nYtceddUEkwfdAtI56N2Z3pICcz3pwJlwC2IpXun7UBsFgGPET52u5fn8M9xe\nJkhu5S8NrJhk+Lf3hYaWDkJL2hYK7LSawzZzw2Irh7elWIiIhAevwjqXBF4J\ncykpgClckphY9wAhgrO0lpsBTgmzOLihYui8SN+uboG8tf3xDiPBpzUwnr7e\nVKWMLM3XKj48+F5ZJkPxXqmBJ5EXEPThhVN4ht8UkZ6XPC0hYSsh9JoZIsQo\nZtIEL1LuxJLI9SKjsVN2fZzFbx9OtYHn0Dl40XBAHBp7eFuqBRGyGS3lcJCK\nqmi8cGgvmYxcYNTfcf1Q6X45tURe3JJC6y0RZRZXfpIUTfozoHYu/v+CiHJ6\n6fpMSqMn8kV5YTyAHiEE6BHfyjp6iUyNyP58GyvQ7cXHIUiVo12TUpeYPGHB\nOE1/g3yKyBEKrhgOwVec7mi3pVwClcOANOtVj0XrO+VqH+FtDUtx3mhKQSRi\n1msMl3x1PGPSh8ammdSKE7iHoeFreIJoThhStx2iKudFgdLH1W+UDGAkk9Le\nBGK23uHeSjM4rZ/9d5KjdsPMcOiauVgXWWebl7byyxpWyKbDJIhAq4Dx8YIQ\nUwowKGqlHRiK7uU6Kfx8XZryK5NQqFr3x/+mhrzsDUh3SHqL+ahBHSUY5it8\nxvuw\r\n=XEr1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/touch-target":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.b47dd37a6.0_1628196586774_0.24084891071536085","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/checkbox","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"422d3cc6c7a29b8f88c8e1ebb953d17167250f98","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.6c82b965b.0.tgz","fileCount":42,"integrity":"sha512-dA4MWT8Sn2xIWT4AcnPzGlsmxZBlbEmfBXa2QLHf0iUgylX/idwo/TyEdvBV6QXQML3f2EAmXmWF5ZfysfnoxQ==","signatures":[{"sig":"MEQCID+4EGKFinf92oJHTdpcaAfxRE4F+SLKU74u4ek6UDv1AiBqxk4isyxf0aHQmpszqxIJ6vcvdw+YOC9dH6uLasgBCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/1CRA9TVsSAnZWagAAaZ0P/iaJn1bjKaZu0FX2xU69\n5hNhe1hJqg2DY4xxtzf+kv8VrQzoCDAPHnWRFDGwTsZKob6Omo26bhoY0OnN\n3zQ1qN1CKV6wqqsJyc744DNSLdCMJNDIItRozI3vSgB4qgXIiResg6pSem5f\n694IHoqiwtIL6Nq4g/kzzE/iXxmBu0lBKNckZayd0l7Gv/AsLVSSz7iFLbOA\nuEVB9am4r2UVjr22XQnWbNk7uXkhP94l5I9bFcNrq1z6DUfIaM8N8PuwAtml\nEmBNmAd3QYgQXNcaVc4u/GsEREwpVxW4Nq5SBRDNX6C/6YsnNN9HD6SP5Blj\nLxNqNsta6nFhrJCv3evlQTde0CiY6LyY190VQQk/cWeg/MkitZDYEeVJwMPR\nyhi7NlTVpc5B48iIyDp+ltYmfHmlrZmTQXONVXwdg9faaJbb+k6Kkqu7TZlD\nul+2hiV5x26pZ4lfEnj+TvGkO3PJLStdtleIoZxresQQ0MKFsm+i69n2Opz5\nifswCzKXCq651HKy1OUZ3zFAY7qbx3UsUhLb8N2oP50wnPbU2vBiv5VZI+f0\n3zb/TNYszJ4UTK7sUK2ars3sgYnn6eGIJcNH+M4LSYdxo4sjajNjY6wSyv0z\noDYB6KZ5LkSxNvTjfhRTjDeqEtJrUW3LRdZ2/XPk66PWGveNZkXVYKz/tkt8\nyn5/\r\n=Sp/c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/touch-target":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.6c82b965b.0_1628266485127_0.7535473507195916","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/checkbox","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f888a4f46b9e907fb64b3c0d01f7937db3821405","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.4ca11fe76.0.tgz","fileCount":42,"integrity":"sha512-SBsWrMZtqFc4kh4UW1BATn2fsK5UnoBNM/abldwMXnKfFnywNeI+7sQr75eaUPZ/5PkztswJHweg2PyT+4UPRw==","signatures":[{"sig":"MEQCIBzcn8GPi2wkFJIfuIkcHHC2SpSJeIYYLAX4asfM/NgeAiAPG88azBKMWc4cEZyScTYGDpn3a22OCQ31prWdhpjFyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxMCRA9TVsSAnZWagAAyXcP/jnouaUYc1LTP6nQaxj3\nenFLKjZkzAk4lG7i75VYAW4SeozO3xsJbsVjWsKpVWuETY+oqOUu3JNmm76A\nHvC3nE+6QdOsUGg4RGnqiKFAxys9Aj/c15cbsZI70cNdyGEyUnsIGTxdoZgr\nFxUI0q9QKV7KQO9NgwIyEa9H5epshM9MrE/x+W2opU1Kt8VaDjQN2KzZTm8g\nTPbkW1y+aZ7nhyC9NY+RLm5sdYc4p11/EK5cqATdNTL8DSMyQ6CWbeGz/u4L\nIaXUXG44JzflRWpHhodx4D9T4dxww01gKPcJN9z1g1uefTv7VWm+4pRV8jfH\njWRSBSsR0A8/cmlVsgL9GlUbsYssWJiDlqN48KD3MYJHBHnh6eiWHYUJhb3v\nOzMnk8+4JC85GySbbCNNPfkO2jcTaE2mequC0G1Fjl/W/fEmmdPs3G81y+8A\ns3kkVpxUjtecbMTthGixNesB4ctQEH7wZ87q43f0n5tTn2d7Zb7nmaUkqI+G\nzUkkB8i+IFeOpl96cVQ4tBmGCG/k591MUXDwwtDQL5L/GPujEv0pH0WT3Oh0\nQbcd4NzRxsT6nLoE4SMzAfsbfY0AnbMxduQOh2BertwhPOeDvSCVvtIKpVVy\n6sz6tl3s3mhs9K7U+Lw2tS1/oP46DEFOy1jo39S7g74kW9KUjILQ5kjmWEb+\nCE3B\r\n=Fv7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/touch-target":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.4ca11fe76.0_1628269644225_0.37644522951736614","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/checkbox","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60a8bd309206ec0846f06fcca231794e67665089","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.510cf90f2.0.tgz","fileCount":42,"integrity":"sha512-QSheLr3YLXUaCJ7LIVo2JQaGZi3A/tqXeOw+hf4oLtBeuhNo4Skua21rNMz+CUB0sS9sh0yl2czOwx5jp1A+1w==","signatures":[{"sig":"MEYCIQCunLEeie9J78Sy6bPBhYPERL+0pBf+sKwo0ZnLs7tDZAIhAK+zjDK7xCK7SdxvlMyvHj/OaPO/XkPZBb+5jORTyxdQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMWCRA9TVsSAnZWagAAb6sP/2mUUU79R+gdqU3SzYXT\n6GRQf2quDYvDMj7qvcC8yQng18N/1GrWPnM5U11H+2xoo17FKNtR61FblOdk\nAFDa7voHozYZNd4AHeSYFVUKfe0wYiQSjhzJiiZIrwaX3WONSC2G6tH5ds+K\n2v4UmDzuGkmDt4m/IbrLv+uxvj+Vu5GNL1iaP40aR+0L3IZyhoemQDbt8Dru\nf+UQE28lRsic7kyOytTb3iBF0pa4iE/hlut44NqTe+r4srKu5E2EU/a49QHx\n8kdajbLOFYxJML+kxFuUBcOam4Rjz9vNAkXZZcjPV+Ug6hzJ/qQDvF21S/cZ\n7scbTDCcPxbYwTlwHGGGeevGo3dGd5d3DRPxm4tsVn21Z8mFBjyFbslfS2nB\niOXaPWRXqajKG0WMKgmwDxGZitwuFsFIURSb2TM867aHDeMiaEq23Eca/1kM\nMJwf3mEXSHAKuBl9VK7gzzeL42sc/QP/UKuA12s+X/YnK6Ow8nTQG5ea7tow\nbCzdrDOsCuJMnZH8+RkdozTt6ojLA6Dz1g5OItmhUnafQjv8Tjhqucf5NZsV\nZAuafm05+pZ7g8zByY4JwknZ7CFptaZjU7scfqY1khRjg4MciS9RXpAnScW8\nkdxsuhC1lf3b95VK6pzbWrdPr8HjsznXreHJO4WlnhcPz8/S078GenAK1Lmj\nQZwu\r\n=0kBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/touch-target":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.510cf90f2.0_1628529430369_0.5931957036217486","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/checkbox","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"080248b4365a75accf78428394d8f01e6fa4cd9e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.17580ebf7.0.tgz","fileCount":42,"integrity":"sha512-yvqBFUupXQGf3QYkZXL5vRMr7s6Coezunk8/SfomOMxQygeNaggjyqExOGd7QckWcJWWRmMAS7KgUFGXNKZzjA==","signatures":[{"sig":"MEUCIQC+xlv16xF7bh0x3wMxq+JoHBkRJldmQtZr0/79d9JvEAIgNw+obzrKIp0CBKQO+7owybvNQ+drRNneZ2GlWCSAnx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXEuCRA9TVsSAnZWagAABfIP/0c7e8UBCw5Yh+Mn8bW4\nALr0Qt5Q3ndkoGUhv9YDm7LTA89E1xMyXKgPMs/5DUZbG9PPSwvtTt7BwrLY\nGTtviJJ3et46wyPgzZQ2AglCEp5h5VxMd+u9O8wz3O+9QoxZRXdx9DplMTMj\nyZDCgUeG2k3WCvDgDQhwuWYUTcLNFET9PdomDzx/v391fD04LnZEOemhnLak\nl6svdLG2dQj5bX0BxHlxMUxcododbIjN1bdGM7C/pC4FHViG8MtvGX4CK3sJ\nyrKZZucb4TDDfrRiLUF2dJp+Jm51gGvsKd5AG0asRTCbSlTDeU5SfvO3i+3o\ntkGyogwzAXGUy9FQM0fbLRFdDTtBlrk6TWE7M9/85m019QclGDs5hjxsdRYZ\ng44n8ejo7L9op3daP9QL6G7HdCeRJlQ71De4bgnJ3ohhHWPHjQPzOMKO3bgY\nRZMmLAvyN1RCKVWAYI6bCGt5vQ2gqPXK2AG7MhkNv5xWMTwwHJTULUomN/zm\ngsh/AgjRSllKMPvXIFjqWRPMw9qi/mKSvaXBYdyHx4KRFVmZ1+wIrEKeyL2J\nMFxpS0xwqRI9k/0ygi5/6vaG9d4LR8TLSVuFwcnTuMNY+lbT7vDrAVsXnVFF\nlJQyO9pleCBbJVhqdom4VLw3MmzElv2OCZ5i/eyja4ABrz4Bmuks+JWNddd1\nqh1B\r\n=Ytxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/touch-target":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.17580ebf7.0_1628533038193_0.948364576545681","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/checkbox","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.7249a3060.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5787d6a3211e08f7e2b79ee0dc18435b59c2de25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.7249a3060.0.tgz","fileCount":42,"integrity":"sha512-37lTHNQgKDCiIJi/d5sBS7LzZZ3f2KoI/xFctmMuoIdLiwuNsQkAMXhD3EByOw/1u6jIrf/VwD5JHNtIdwNPrw==","signatures":[{"sig":"MEUCIFYDwnF1bFccGwTRO0JQpWVc+mieLHz8x05I07NucTi5AiEAtMRR2Mf9XHTkiwA/rieREGI1XWYvrwlU5bH2pC4jH5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIqCRA9TVsSAnZWagAAtroP/3/KU4TvpgK7Yn3anZkp\nhMFg8ImNf4CbsH9KpSr6t2oQLCgHrxVTyoxZiLgZKX99bkPnrVBcsbVyIgtI\nI77SsyLYGXW445NmWw1ioB0lQiLJ8XfmKqirdV1DYDSymrqdeUhujsLHMV1Q\nFCCTocl0vjdT26vqLg3C7VlO8/0KL015ZAjlEauxVoOCo8HcnORaK/xczMPt\nGP34yC7ioYxUI3pLr+Z5yqJoC1HqSwMcQPMdk2GS9pV9Wjp/3eLO5MipLzIy\niAtV9+v0NIimH0ZmuiTTuD58zSTMK400e4SIBaagcjC50mogacL6MPWnPkqT\nD9NeTecU0fYsoRLAPIj2pdyIHRk+B7bUAKG6DOSYvrnmUbFEy467NhZxhYMR\nNJIyrk09Rs8dI3KXJEU/yuP2FJb+Fjd7kmUnwq2a+//R6hEkRIhKwenLqEUI\nHBjLnWoMZ0DrMqmhZbUgN/1z/95rGKSygkBW/Z/oz2zC0MqOpW80S+9/c3+Y\noaOjXGkZiGFb0eFGL92jwXIJ4DVxysT8cK1JOI6/SktFpY0nyEobDChcf1wZ\n3iZj+dy8NLi6a1NG1k1apiQ8ii0GaD8BvxBOcvDYxsLh3zHhfEt/R/ZMDCHj\nCsQxR+NaNOAa62J9C2c0pcHtc/wyjVZkveSMgSjnNhnii25hB3QG2oEyDouX\nzRAk\r\n=7fC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/touch-target":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.7249a3060.0_1628533290551_0.7624862169051461","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/checkbox","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.4c405863b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc6a78c57dea90a94befa3bf3d9d6e1b091d0283","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.4c405863b.0.tgz","fileCount":42,"integrity":"sha512-RwV6Nks0Qlb9or1DPK+b0NMBcoCChraeux0zh7D1l2BGMTSRCUxhREq3Err7IIVqRgndJjnbzcWVPnB58qGBfw==","signatures":[{"sig":"MEUCIQD/CA8ECnFrKZrGX+hlScZnvYoAeO93G3oiYA3g+c66LwIgDbdXWfv04TJwUzPg1jiCJeu3Jt67K7HZJ6O4rBlzfXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEroYCRA9TVsSAnZWagAAsrAP/3sToCpcAOBfruDEVXNa\n3C7P9uZgIzjF1CtX5JTFaaKGmr4L21hFsCPPlY/mAv+mvAWX8QUGYOCpAkX7\n8K/RtXXhMr6DkvZ5MPwVVak5oECNU4iFqVXT8WE2lJ80quL5uTH5CilVEs6H\nDoHpf2I15XdcrNnajLUst66nHOYdfdUyRHEYHR6WM62+JS2vy7CigCf2wW6C\n6QabAubgCZj9e5T3mw/MnnhlHHxzS8sqIklm/LuTvUhJxejVNVuQjHKy3NxI\na9EW5eDpKIfHYXLsuFmJrXqd6/Bn0pAx4Gze65Z1jcJtmyD7QPEEDaEZpzRU\nF8cRCNTfERe/o0GyquB5Ot4gMFcZ0KAI7cgRAuIDPOEbX60iaA9iWAsof1wq\n7v6CS44pGKR3SVWgf+E8R/CIUBS7UpaSkGUXsm0yYRwH+ES070+vw+Am9yqR\nBzQEvJSHdd8xT2GOM53BpR0c1nnLUQbkp22tg+EsxN2mksT3lB05EXZ0mx5f\nNmYqCXfQpz7bSQY8IT6WswVhmjNePCC3HDcK8zDmwBBq+8vDlmMec1t03hbP\nh+TaZfdiqMqrbXw/JGp1CFDAExBCYMP/2+Bi1Raq/t0i79nbMTUn+wUk9mXS\nzvIsYHxla70g3Jc2w8VWIRtnbcgojlBlUs08oRHff4vq+rZTTSme/6X+LO0v\nbl+S\r\n=i6dG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/touch-target":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.4c405863b.0_1628617240720_0.7292528140140793","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/checkbox","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b60af89bf083fa76c617cd2702abe8ec5e93b20e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.f4241a42a.0.tgz","fileCount":42,"integrity":"sha512-E3Nye8g+JBuUUmqVWhMzpfzFTwl+6Vyxa+j2g/peq1rvPXlyj9CIKE27k3Lls0PJtAURtT6AaCIe21ydHZuaWQ==","signatures":[{"sig":"MEUCIQCDg0tn7qbndqlzMR2yiO7ZUUtIDpY4/G0kZTsL4yVptQIgE8mDW+V28I5rnug3Rlbdtb5peueu5mhc5vvfF+FTmkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAHzCRA9TVsSAnZWagAAEhUQAJglDIGQ/eXf2cx34qYx\nYd8pXZgtfgyrX/IGzHc/HCnMRkF2c+eulxNyQUR1SmOGAMyfUKKDjZv3dWgf\nVnaI2eVzjJF1QGtygcAsd5OHUAeG1ByBLS/PM+qZRHIVc9A6C4QYS8wl2PlO\nBQiWIoG48mi10Jkf1/9uadScPY5bBREZ1Z6ZZM2c2hGDuk+Cbvb1fRpYjE3r\nGPTDkU+KQ98o/KqhhztVpjsuNbsj8cOdp/LhpDZvYUPw0EWXxMPYdy6+w7hu\nXAH505rO7A+92RC1ZpqLp0AKCOAA7SKklu4PzuoTk7xwXQ/WR9p9hLzmNur+\nbPh9pQ5mKxy9A1VjVldf1xb+wKLD+W4T+NNK3EVJe0HWXBXzW8tlMV0vzzq6\ni4msrZ94j3fBSkGC6L+YqEUXPkBGO17ruT7RI7jt6/H/G1ReQcNT/6SbYwnd\n2CLIPG6rLkTx4jynJsjJn8bErr31stZihPMCFY63ESkeOTO+aXnxZkEYwGUK\nE1QIrEIj1Yjx5khM0hHmsL8BM7ZTS/vN5fv07KVDL3H/cen42kzWBTdUC6c4\nD8xaOstrtRMRQfxgoNY4Z3SkR8VglilOWj9cz77ECbnQZiIxq/yWVeAUd31C\nNq0bWRkExbSRETgU6k166LEn6oh39m01ql2nn7tZETfH2ME5x6hjEUr1L75l\nFlmP\r\n=PUX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/touch-target":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.f4241a42a.0_1628701171161_0.32710313929706536","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/checkbox","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f8753db2df309d5ee2fe6ba1bb267381ee00036","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":42,"integrity":"sha512-1kNbw5KEiufqN1vnYbftbWsp3mx8fVMbRJn2QbEXidCsJfM+u1KeXejMVfb5j3u4aGV8uqB8jLRujCZwsPimow==","signatures":[{"sig":"MEQCIDYmpzPU5Izt1UZ95JFJHkpXyf/jeQhrtCj6MflOQSEkAiBoVCvLsgOSelIh2iWnMKRsL5zw6T3rgsj8QCBhnyaQVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEICRA9TVsSAnZWagAA1/kP/iu99GVNt7Af7QEaZvl9\n9l33s047bs+oqiTbFluzbVtzVIc6Lf05Ge0y3YQ4FW6jrp7nmQOEZwD4MzYi\npzj0esFgsO8DBMhoy1ooXJA58Ex0COnmSPOY6z64OrUSbyl/NdeUm81V4gty\nFSh3imR4jHgwlRKmhamoI8tEn+C2bSzR3PiZ+RTTOKoBTB7zDNdlCIUjs9cD\nPLFAnWd6A6j/7ZApfapOb7wogIeemBesLc+YvBS3oS+jqUW8pY/NYDYtbRy4\nEyf7j7HaljBPQK4ZC25tcoMuHpYKoZ7QgLMsInsSK482PNbAxipxMLjEJnEY\nnXAV03bRW+p0vMGk9udYhA5Zg/A2q78qpstZOigfc0O2XVbc+/1THkerQzLk\ny3g1Qpj28F3ByOU2UwP+LZPlA4jP3Mqo7on+9T8sl0sSrzg1BvLqPvZPJ4EG\n54ebTs188OZo2S2u0lSpVYYYRqhbiXskVaHo9jZzYnE+gM0YenN7nPDp96yz\nGrZnxVCA11YpN786BRwJpuuTehW1jf1uKca10W9dyQf9t2PkN8gUb34Q/IOQ\nKOChGfD3LPHIEuLH/+GMEkkP4nBVUYfDPIwSxNqogshkROYruumaWGnmmGzg\noriyerXpnIbiEmo9tJUIZt45Xv0+53tuQ6xNb8n7d8IUxUSAu7oq337QF5ok\nCWdt\r\n=qKmX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/touch-target":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.0ad12ed3c.0_1628717319947_0.2618264621154327","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/checkbox","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a96df110eca34a73a73902bc62b2789b1c28619b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.077dcfcfe.0.tgz","fileCount":42,"integrity":"sha512-+sMQLGwAP0ld+JwUnRzlY3oMhD/vLDFQADiJH6oHIy9UAR67+P+fda/XuT/AFd6IH+q2lER9izeQPUYM2t+8AA==","signatures":[{"sig":"MEQCIElJqYyDefGE5wuBqHu9C7a1nhmozVo6H0Lu/fHVAdO4AiA09AyVja6V2rM0Vf8DSO5ougLnDswiDffnKW/jxCIDKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCGCRA9TVsSAnZWagAAnK8P/i+6yXWlDpzFy8YWlRkw\n9/dIV2EDOeF6RXrQDjLZldCxOz0XO7e3EZVm4hgBrUvKnf5CD9HmUVEbeCKK\nje5jIz5GU0x6fbHQqEzBUSLacp3HXY0XdYe48b9/ldDkCWf12i8PDokCgd4s\n4vjVCrMjPl0siitfY86YtW/G2EJV03+1m/Tgf5xSgCRyHRRtosQ1Bf3plRUS\n1v/uo7ukiWOsCwM/G1V2wxMMy92FkZiZ5P6J2/uoy2tHnnzLrd16BcglXFyX\nyV7HWyY8IQp7Y0NVfePpDevbixxldz03uD3kBt/onoAabT50+s8Hw8vYIZdM\nxT6GNNL7PZ59vIgLLoQ1IegKsuNaIVxBEKu/gsltjL9gomljVYQFTXzjZ22U\ne0RizTthN1ya4GIk122dvqF+D/EGLzTAFaGO2MPDvoBzS1qAhA/YoyGMb32Z\nRA7Up1ca8lEUtuit3FSRQZOhNBxcaWkR6xl0yN9XJJuNPDoYU5zxdnKu+vCl\noVmKwcJ8WwxWOa6VhFgrbrg9uJx7Pa+XR+ICDHnGcsAdHIuiiDnbUAL6vJJb\nQNYDtD000XWrOLvQas6flfn9wAZ9eNcuKnbpamnxLSORA6B5/JhMEvLTk9/x\naWmDTHVZ5L8bFzJ6MR8L2E2re3NipteKhy4lTxrVv6IKY/P0Bt5JqQtcrWHd\n2h+P\r\n=NDR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/touch-target":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.077dcfcfe.0_1628790918408_0.19500885196210693","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/checkbox","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.e3346766f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d640fbcd68e0934d8379d13a2c599a5f7d133bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.e3346766f.0.tgz","fileCount":42,"integrity":"sha512-JDe2A9b7cJ+ZlugvSgrqeYYwOacxsYoJpUBsHmjuBKMkXvU44yXc3i+38qvKbo7ZDuXJCMcGxKyPtNZ+L2yswg==","signatures":[{"sig":"MEYCIQCfGjzvA90e4UZTRlcQA0/g/S87EE/r6vIV076JP/6byAIhALCnsU6dZMXgV0QAbXCzMqBCDDZVsB9lv9iByg9QrmMc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvMCRA9TVsSAnZWagAACGIP/2+gjMT238I2wIgPUKb4\npo+1Ebqd33gA2Q7eYZOQABlhXbEpsFHeVJkzDV/cx4N0RONIUyUaLf8vNxdD\nN7JCW1CGA+5wpFg7FKcwyh84BA1tNOtoS/VBI0BoT2MI0VZN25+bjj8gKVDj\nriEqG4QUr2i10DTcwNUpCBoomsON+WTnze8KNIZVfgHMSNMpSM7kdftVwhhD\n3N/ggi7El2F0vPw3CkaCJLvPQ8DIZbn9phwJbDkr0x8JGli7uVxwpJFHqeun\nTcTxkdmrUyAIkYww46psditV98jAho+HNJbnNxV5OGPbuuuBTR8RsfktB/c1\nbDP61pPvrbPToxPYWc8X7O42luSE9bsU4ZLKIgwtNY82zGMoZL8jC3cy/4nS\nAkl/mGYV497eF1EPFi3NxZcoJd8yFor6WVujo6/RFW97p+IcXjCw53irve4i\nIOKS73pkfJDOVWO46Oviee7qukFNvM3uuhbJbCydQwbnfFy7Bzjfw+pPJn1c\n63YhIEFYvFwk67Dru9fXQ1Yrlp1KY1wAr2FoRV2tHKrMizjuAzyjzhd4UZuF\nGpa+UdFAtgsPLNQnDMdHenKSN6INsU8cTag2Rg6qUMS33HOSSjNlM/+QfMiu\nZmfhBLX49aVFmhPav48Mnxke9kATzLRtXXUSLzpVnSgdeuKao5NR3gZkKYRZ\nfQSk\r\n=2Vyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/touch-target":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.e3346766f.0_1628883916602_0.134035057369432","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/checkbox","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"421490a2d8b5980b43ce80908a2af661280970c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.2fb068fb0.0.tgz","fileCount":42,"integrity":"sha512-oEzA1w4I3d27qZVhNrE4zB0cbTMTxHXIkIWlGUx7n7Mlz1ZAQXEb/R38zd50K5DyTvd3ycCBwErQq74tMasfPg==","signatures":[{"sig":"MEYCIQDwcwUUQwmz2F8933bCdc1S4Az58wm1iVkGlb0Qtd9qwwIhAJEq8YQaHndPSu7iwoHBJ/RdAgZdupHcDEIst4jYsrzZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsyGCRA9TVsSAnZWagAAilsP/2464uKkOEQ1CwGq6YjJ\nEUCaFRBOweMcWRXTWAW1sMpLugfuMXZFuYx1yz1LNI7RfPDEgviD/daiVdwY\nSPEgQxBuvfHhEOKzax1O4sORT1tUABMDgEgs+1t8ejwyFvICvgzizg05EwxE\n5M5JWEICWWGizC3VOFyzNhzS8SW8OS+qrVmjzTR4xi0hjTmClwbIpDPiZOwQ\ns2NlEFByUVJAwJQD+w2dLC3tLORWcFAuir4uCGscbDV68BXGFgfPmKHD8w4h\nIny6cg9Afj8SYNWn53XzL3u9LbJd2SnskuDIdQtijzBE9ETi4BHvmXmqw1Xs\nC95FDgi4amPBe4eiaEIl5G9DiaF8eZblm4+NPeCjMbnfmtcxb4gOtgMToyIu\nbAt2RDtpclfbNktde6/xJGC2j0kpVjTvxOn60adDkHQX7tP4+Dr6wpaE7HTg\n5WDVd4bvTov5jihhn28YQTYEIjxXzeg0ecIzZpQuPLqBfuciHDFh4nStQl+w\ng8spg5Uy+MnWkl9rPT8sgxoCgGGTEL2ZVIUVJ2VjJExRSgHL2hCcAZqXFyQc\nu9i6QtrmZKVK1Hpj0p1T9tsLBH3zkMz3mpyQnt/TdekGj1nHrVuaR3cePU6F\nnn1ker7nYSMUJ8RxITyzJPZkfH3vt6NYgBLjwXnOBnZgt6XkCXqZW04hMnO0\nITYu\r\n=J9z6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/touch-target":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.2fb068fb0.0_1628884102320_0.7222333030620145","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/checkbox","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"848b4b3e781f39d87e8d0c947e032d883e643d4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.fb76c5069.0.tgz","fileCount":42,"integrity":"sha512-Cy0pumBbRSxELSH9cVTzg2EfXDwQiuhhnHieM8k2D2fjKsosbesbYiQ2LI8eX54Ih+WTfvHQUgR7UgiVHwstbg==","signatures":[{"sig":"MEQCIB360P9fsCAPIY8XSjXoOU+CHfgL0F/eUSwQIWQqtMlZAiB296IUtq7GISuTW5saxZyqXhEv4i6jdAn9JHqEnRaOJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWgCRA9TVsSAnZWagAAx14P/RHL18F6Cr8ZL/AU/HX5\nS8zFq43P2bMlaW5FZV4+KeJRu7xLmYXBz8B11upI72SrZ948HpUrgyiZ3XgM\nyurO301XbX/LM/qaZOqQ61Pz94vGDpS9V5crJc1bJzS65lNcxx2/jFV12Zeh\n5gV7GVeezPJzkp3XJAjFhFfKhZmmBbHI08DT6wU1tUZMBJ6KHpginSvzOBIT\nGv1nKRxzvz6ytWrXiRoeBbTjx/jOqbNBmNLsS0LiYYeg1jWZkWIB+WF/Aqdu\nyGsonAQytE1GBv5FPmNm50Svq2Ie+VsNXsNANAvmVPbBlQXU6SipxXwqWQAA\nAceXvYMXlBtjN9IKaAPhzDKk6m7G1Od0WQ0HNm+SMExWoG3ed9jHRPGu8l61\n20Pog/cGiZExql9/uRNgmj2uAJywdp1QDuFTTzs9a/QjaGjJCss8YmjDz0zm\nPFGfFHV2qdXu0GEsNVcGNOyckMvwISlmf/QLXWPKMNJ7L/WQOVjs7EA8kevN\nms13QNOQWer4279cgifZUPV8TW0RAAn2cQ1uRORuvnYz92eLAddA6ACQ0fPI\n3e0AV+nMYZAFRtht9ZdXqV3cWo5A+E/AN1RxNQNsrFG1K5ivnbbpDcLg5JV8\ngNaK49u/+3kkIVVk4iLopof4HJnu8TSsiFINRYiGHYz/CZYSj1OZqqCU03AS\nnpzR\r\n=QkM3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/touch-target":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.fb76c5069.0_1629144479925_0.40611513786775966","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/checkbox","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.457d89aad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba60e6bea203a68c78969e49d73c446bc0a94777","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.457d89aad.0.tgz","fileCount":42,"integrity":"sha512-9SuulYJ1K5mElmfIYScfESAGMm73/E5xaxwqnXQ6GFphCMvCTYtpZ29f26kgFputYY504Q+gCnj46M1VNMHe5A==","signatures":[{"sig":"MEUCIQCDhiNHwFKd7BwOJOXFGxrN/xInbSi79jD0wZw0epsnvwIgd2017eE5oWhV7AhMUJnq1gm8QveeegkPYi+FgZ/sviA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QGCRA9TVsSAnZWagAA/w4P/RM296zEmSGARPuChi36\nkhEKUXc+5nVZMn6UjzaFt75K/pv01ouqwBi2VrjtNqUvQ2cfuwHOHTNgf+pI\nRlw90XcEcWVql4khXCDOtv3eXlksKnnOBBSPb+EcHdsdLw8GSMc9nJjuPA2z\nZvAaKcK7mERR0jYEjYsQoC57/kKrzKFI1Shh/glM8GliFz5EnYsOguCfNOta\nsy1DSB64cw79xGnR4pOwxw7LRzhdpfAs4zDjKD3YkhwnhSdYmKGyiv4rX93p\n3MVV0Xb/ma/Cv3BeSLkiytnlzjCf4Z3/utYqiP/WpKsL1lfKykjO2Z5Mc4fc\nj+4ZKnQs5BsFRQ6OFMLP3Mkiy9dQ/oYo6St1NgSMeoBvktOQZFgoHLwyj0VL\nXodY7cXRA/3QRQBpEYHvKFSP/e70mqiXEWD3gFlTdpbsn5sfOs9p8XJ306ep\n5xxKzZoA35XZuUguwFGL8BD99UUkkXLRsacuZcY4hM1ohReg5r1uEnlavn6G\nwDRVF7uw5U8StERTrNnwOj/5+1rsP2coPaJPAHEEYIZL1/8Vx6ipD2UOGrXn\ngwVVXL31OxWuRxzcyRFrhhGRuF0u47Tr4HhZdOJbWfu604skRsZVSZ8XDLBV\n0b+yTF+FA5rYUqGvTVtcBzJ5yCy35PLa9o924JS63z6YdXPRCxmn+fiTrS6W\nGdc3\r\n=f+va\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/touch-target":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.457d89aad.0_1629213702666_0.6149353966155","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/checkbox","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fc4a576cc263bef1e913d5c95591c2c9d4a7c74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.0de2f2edc.0.tgz","fileCount":42,"integrity":"sha512-IEh0Vmo7TBubtJrz8YZSCe3+fggUQTnBvXdNBK5BiKZSwwE2DIOREKPgtq9dB/2li7mj1oegSsxZuu3HJDNL3Q==","signatures":[{"sig":"MEUCIQCOBFZgKvsjlMpWfdD945xA0d3JS0PSTChJeAlfjd33BgIgO3teBjHMdcTP8t3HSnUgHu0GlhJM4/q6sgcCVcevbtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCH2CRA9TVsSAnZWagAA8HUP/16XZfsoAytkCUZcQQyp\nauN8qYalcucxJiU4n9/cW/MPh4qZYs6yP+IQL2L3m7RhMO+gNncVjnBiAn5r\nzpaQHIuwkhrM3uxss7k9pwqiS3R2kvSGgItzkbGgKVnkcIiGNwfN+KGUw3XL\n/xtTgdEHnYoDOkRoNwlsz6w0CoCqhOXojyI35AoKg/pRscoiXtMTnIW8ZfSi\ndtAfY4m7ZOn7U14clxMOHKvW3CECekcZ4YnJx5K0Hu38pJyHquZ03LUtiPMG\n9lit8tl7bbBg15TvZyCwIEoc8w10eUPo9H0k3NI9eepkRDEIwCBgB24/q6BL\nvVJMFQ7n+SQzz64wy2yTZw3q2NyJ21kmmbttPpxTy8u/CijHxC9CAUH2b00i\nFNNeZOX6bu1IE0zCJ8lQlTQ67Ldd63avYvKh96ojKut4hIMjBPszQBnXS5Sq\nMJIQ/TENSXaEUxHKmrMKMALprEuFctwXwidf8gCQK1PQSJRmXUym8aAshDAo\n/zbpMu7M9gzS7dCpml0K70q7CmZJH22pir9fwClaneEaDxUzFdiMijzOcJSz\njsWmAAFJc1EsUvll+enDmkB/lojzphx1v6MLVn6i5v967NACCQslcgGwWdzv\nulZnCpLHDsLo1MgHPmCJo0qH1xeyB9Qj0jf+3V+HxoroFIAyZOLTcizaAEBO\n0UHC\r\n=qrb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/touch-target":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.0de2f2edc.0_1629233654243_0.3729664038846585","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/checkbox","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd5dfbf245bfa295542e3cb37efc1f72f5f833e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.1f9259b9d.0.tgz","fileCount":42,"integrity":"sha512-SOX9FlhuoDq+dxIIfnIFJe1ua+hEa1RK0ej6MoSXALq2HFvw3szJDm+Y/IY/xtboi5orZNOr78oLHp0qxWkfEA==","signatures":[{"sig":"MEUCIQDV8MNVF1iSpLqYjoKQwvRQNZZJSo0UxcOpQYq4uQfIBAIgWs8PfYWgTVY8lw440FkDEXnAcvSh8g5EGO+NazNOAsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDSxCRA9TVsSAnZWagAAP+sP/2UY43/zmHtgckuZyPYA\n6OBYnlDdcQ0VhexV7SttLfMoEbFUv/izh6wonkea46u7D6Jik2upYsaRgt8L\neQphd1CKqM/uowjArpnJtnC5PZnER6tW7ZGhnSRL9rzvIlHf28ZOcl59VDwD\nEa67sRyXhs2HoiOL+LnGbZAtEYiw6hGkzcqoLA3l8q9tnUIqqR9EGhtvwWpV\nPRaufzhBpMwwdHYlk5GOIPPqwEWtChjz6go6zIzp3MQ9dJB/Y7Z6Zr/4ozHn\nrTN0ULdg4sWKowPCoekmfiW8qlOUnVDCdbYFpVRrBaVK7+dXoPaLd6lzA59Z\n4z6l2kGL+J+qij8as4oCgSYlY2pX9heW1a7VjQ2M3RjRqaIGYKIK/csG9EWU\ndd9miDmJ5LT4MWG5CqKdy8g0UVZhfW2IGxg3+y21dgAZCGKmcx6y3Tr7oGYc\n2g9SqvDqw4Q7IY74bdWv4ZlRObHCKql92fZ3INMEoWO7hUYLQ19q6mrNYZrj\nPX1L/TQFOW+dWnnDAX7WpYjbkdHmYqM8CD8gc4E+j5bm/TtuVqg39MhTVapm\nyPJtg5SsHSMYDIa6Ai7b7GrgDmNen4PucOqIQoxlmfh7ZDOuKlTBHMrDtueH\n+3rB8ves/5ID0rcgAkrIwoyTveCGy2fgql3RErf93BIGLVUZ7SZ4YifFMgDX\ntASO\r\n=XjvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/touch-target":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.1f9259b9d.0_1629238448938_0.6916139460705153","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/checkbox","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.3b9290351.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18f7f926e35b1c0634cf52f21223c603b0e02667","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.3b9290351.0.tgz","fileCount":42,"integrity":"sha512-vto7wc1F3jswLMU5BhuO0BFJ3w2jmHW/NMptMCRbgC4cEgjdk5APJ1I6oY1V7YZw7WPiy+O3IDTwu0eWP87fRg==","signatures":[{"sig":"MEUCIQDr//9tshIVv05W6mzK1BWoqsTKYeUBzMp2Ipe0BWZSRwIgBObFiRnlx4qdPpHSUifswQ15UZKEudYcnziP5SajGEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlRCRA9TVsSAnZWagAAiM4P/Asehf7L73pWdDFni2y9\n7ri2+OPYGY0CmfiRGlKsci5oJFghRcgoE1q+BtivJKwcbQVXWnXqobx9+YFl\nhZMzoUOOxlWKhRd7K4EvjBloX8yWXGpimIYnNU4qavRyvnGk/wMSpTWeXN+T\n5zV1sndVS4Oz8L+ga3cDSXCPKksnFvPRqyGL5vTRBf7QD7V67JQVFXLjbpao\nUdnHydKxMC+MBFW+2KI+RcEbTS66kbdMya13+j8TYnouAt4xrM6GvLXhTCZY\nRvihh4VlRsP53Cvot6PaO4tAZVQ0mhX7toc5xJ90vB3jNDxyNJQgLqAyGvMk\nQ3GjKNta2nEJ/wqONbZe+WPxI+d7r8v1+55WEhBfFzrxDG/HX9GaLumaUObK\nSBfK0fvHzJ/QriDaJuWfg/Hqp6pWFupGu9kTs6Ixb4E75+d98koL5pOYJesR\nP6ZuCXP2i7QDP3+HZrr5o7sQkoON3Go6Wupo62PksUupIKW6CPHJM+k6WkCx\nKry82AasKSlQWb1s/giW56aImnkGkxQ0Trel56/o0YE9rREJjUpOdfvQcWqM\nI4JvpdzavukiCO/5t/SxN8HlxHdRJuPGjjp4a7ClRcxVwH3inBiUhCQUkiWz\n3ufKpd06mUGdbu+tx2Mdy15GdMEzqgrZB86zrUtpJKfiCEki9VpIxdXE29zU\nlioP\r\n=TMas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/touch-target":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.3b9290351.0_1629264209723_0.786021910410474","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/checkbox","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36f7b0c5b057aa4657b1fc5e4422c7bee7aeecfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.43d2eed2a.0.tgz","fileCount":42,"integrity":"sha512-xi+QuMy61Z+mDDRUw5VoMshenRSAKWxS1kKgu1vDIlaxNENIENNvFoMVj2R6EGnA4OOD7U2FLLInqJ0Gkd0SpQ==","signatures":[{"sig":"MEUCIQCoYIwIVui4SJYeGPAd/LIjRCavQlabpfp6+dSGCxOVTgIgTEzM6rE/vTzvGp8xgvzsLh7vxQeP3yTmiJrBsE3phbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS7+CRA9TVsSAnZWagAA9jsP+gJoL3z2wqX+epFWUU/X\nmq8PERcId/UgaEpUUA5M5khQJ1gQ19LfyCG476+yv2OZTEG7uSvmfMm1HybC\njcwaTxizfWIL9A8GFo8t+rgkc5lZjsXOFkQ/mwJz5yxBPEWhzcF2VIPd0HsW\nZ+4jOd/5g8NvFeN0SU92PTpXbBEAslRUUxbGviL3ENTt2J2HTOIzaJjq/ubK\nUZjRD8Q4nc8bXg+GpojJhJK8izh+YWXZiTJkeOOU8UA2DT1WL7BEAXmJta5K\nm1mmm7KAIB3fOIdA+1aRrUA8oWfum7ulA3a2h1Le/67Z4xjB+ikXXdUIUgcw\n1eKcnux4Yqvhwa3CiUGEnOjpEGfZUcuuUD3E39L6pBdnFGNc6eWLiV2X3PyV\nH9mMFMWtOmXOHBeUtTTTOwzkaDRanq3G5YJ6mYJtn1M+igBr26grCgQwF2Lt\n7bGrGX7IQxrK2kOPFAD83by2FYnwKTtjgTP3NYr7dmb3cmYVPsb3c+WUsLrh\n14Jrj8x7kTRvZ6x6AOY8I+NtmlGLnPJ3Ufle2EqTE8JZtr/AVqs1WXDg9JGj\nBtLeinuthonJrq8wfQUeXaFse5FjtvjZtsVAbbGAEjmOCRcdTlg6gNIOfgvz\nURDn4cnxYLfhB/T5nYANPpe/w/+eIHVSqEWHbIZ+TIrf4MDxC2/hmCziKhy4\nYN3L\r\n=FOFz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/touch-target":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.43d2eed2a.0_1629302526142_0.1580609674492801","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/checkbox","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.0a9069300.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9567fc6a3b136699c64bdc2328805c667079187","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.0a9069300.0.tgz","fileCount":42,"integrity":"sha512-Q88U7Gj2X2zKauyYVgthHztWwp7EB9WfWNlOl3Ya86IjZ7sipBgDbYBzO0IUyACu4Cz/whdtICjj6VGajGHIgQ==","signatures":[{"sig":"MEUCIQD/ijlKSMvkrc7arRMXHH9nVjnIBFBj37sX+i7fswruGwIgfi/fnhQ1DPPCot8RgCrwFtkbhZnvXit/ovahmmoDs5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQaCRA9TVsSAnZWagAAQlwQAKLKyJnreqvrKbu4c044\n5+x5+5PFL+VVcOU9Ahp7FXqYDo0TNYmL6AvZSV50LOPmAapVrENgY7Y3/uUS\nT2MV3dMdkU73LPV4Fyyo6zqrnvwjrW6f7ytVWrUwt6Z8Ws+99tVt+JvRVMHL\nJm5UtSIdJ6Io6+es/Mxa2UqR3KoX0rgKQ8uk9uaUxxzs+zI1puQCYZPgEpXU\nPzd57cSYcS7jtUuaf6lB9+XP3JljvGb4ycsNnJAvKXiVmWCMfPuDvvCd6rXd\nAsBDnejgruBmDg9+1giwdAjQwuAXQOj/ynt2vWI7bAK5hHBfPKdYa7kGqD+g\n94WC3lANQ9BmbgSY+s/b8fZZWIUBcOFf4E/i010nN2U67cevgUEsVyUyopcz\nv/NVSpY9U6Fnz1RN9fFN7L6wtsH3ES/HVltq4rmT5CfhrpP7YPYuyG0QXyde\nzB4kScYVd5/JXP9i2hNLaj5SdTR2NWh+MlrMM6n7So4FKx38mIiTeauLisPX\nPuNZXa36OarKvYGm8WZT5Na5lGPHGrqCAl/T9w0q5XT02s5MhQYEZ3b5DHeE\nCY36wcree/IWm+BLqbTje2y9qUzrNiL6h863kXw7ABQQBNJdj42XHvdpH4pw\nTbjkxpNzbWZhNsKzRuS10Tvzg+bQ0MVlYtfn8hPjFqBOl3lsg7NYpKRcbFMq\nGJfe\r\n=z7B2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/touch-target":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.0a9069300.0_1629389850682_0.7525143690898795","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/checkbox","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e33efa56da32763a4d0c56632973a16205a6c93","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.7da413ed8.0.tgz","fileCount":42,"integrity":"sha512-vtWmuEmWTtteWI61YCMndvgvdDqpTbMi0ka+K/Ac4eLRHRnzjS09NCAuK3u4uaK/Tt4Ck6MBVxRAFkIZvm0mpQ==","signatures":[{"sig":"MEYCIQDFnfkNRBiJdKQWeiCC58wDscMI/+Hp9e6F6yMFe+qygwIhAL7c5+MqgxP0G0lvLbfIwcByJkYlluV9GVruUxNUwyK1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87PCRA9TVsSAnZWagAA48QP/iHf/7Mh06+2Nd13GZwl\nTSaw15n7ns3B0NauD/RcP3oq0lLIjwcunAc347bBJEO2faPqPZLmuBMrSnIY\nRlEO0tlQVd91hZNz5fyNt1yyDAYbK4fUiyLcG5lSlxWZWCZ7H1NZolnHTXdn\nf7zhAFx86OoOOpqy17L/9mmk8S6Oa8+U4SC+Pf2u81T6OowHkGFXYJcSw1m8\nKLnvfSA8uAU5ocUb9KtXI0em3kEu/nQJD0nOZ63WFTwqm4NXZyLPTI1dEgzS\npi4cPoW9fTJxTRqOcA+sw2vBxaBNhZNJlsh+WinQlORq/P0GR+0vhXz8YkAl\npt46rO5D2NKGqt8H/5/8GeIRDFPy/bV7vdUEDTXhkq1r5W3V9zbgP2YLTSS8\nZwqrp++oxz5HAunqmq1seeGVwSGsINEzHeJJ37eLeGz9eI59sNSq+9vi+u/5\nJ5EfsNVlSM43wwbuH0ZL6Zfe5gkKyjkcMxmhNeYt+SphitIwLKukX/aoXNAr\ng/MatHRPiToZdzZHMwUlx5cLOtyxIPN+ALTIo7YKQL/uqLoF3yrAMiM6DN9P\n1py0Ru1MpUMoTdvlpNjORmcdo6vVlzTBtAhRb0C5ziVeMwdLGU6TA3Cgc9UD\nIESCAp3wthIweUVjFaFS9uSM3248I3B5tx7rM0EaGeH0jjCYCwXaq336woU5\nygqk\r\n=QopP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/touch-target":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.7da413ed8.0_1629474511672_0.9296473145106459","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/checkbox","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f80c1edf7a35608e5f2028edc6b31118822f8d55","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":42,"integrity":"sha512-IdOl66qBtaGkj4rOIqgj3+qgBMhaqz8gqlsYDawygCbAGi7hnM2k+KJf5n8mNZZdwvJ7ZvTqJ+oaC+8dQKSCIw==","signatures":[{"sig":"MEQCIASO8OakOfc/vGnF8aBni+zQZunPQ62Kb7Zuns/FNDYVAiAr58uVSaXLmOqA9A2GbADVKdWHIRxl9CE/+RNNwqP2cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAM7CRA9TVsSAnZWagAANA0P/A3xqK2TJcnpdj5m0CkZ\nyF72t0t8EFd4NkuVvINPX1beGSKLXD3wBZTrWARxqvbMjXxgMjwhYB94VDhu\ncsSYLLEqSn4KcCqz2yF+2+jS89/0rmlRAN2CaQ+2wwYEs6gTmGel9NakQGN3\nKWZDUplUgNeOlcIh56B0Xs8MCFSoNyKo/2alPsItZWtD971v4PBK3yAvVMoa\niJ/e+EIUfpjUlpKRkDpOkbrvnaNeBqggZ5v+tGgnEMaLFToK2v+8l6pEFKL4\nR/3MbdsdzSASZvZiybEfpnooNW23cFyoDFlG8dg1IxQDavzBcib81Fidq8Oq\nv3LsyQzooZwKslQ+xuyiiNktYTs6/AQVlb8A3TjbVH6Et2wxEYwlnI7H5GTg\n/I5ehr9Gzs0kujdOI4E1bKkfeiOVQlzj7GzsHWnjCwV/5oRhghQV2FVCI0Pc\nhVVeE6kB/cv35g2nAkszKW1aGHLvkLid+jWvIMzGO5YVezvziaep2Au4qO0o\naSaJabRVnjUuJCxTun6sLh2zhTPbAemBZCMf7Hb6ztXCLbtDSNTi3qPEmllG\n7sHgjW2UL9PtcuzlkCQuFkGQL00vHuitmtxsuq41KhFu4BXjAlBaSQH233Hl\nYLczn7SuF3dIUnq6sDhU6FdCIxAtQEHzE58ifMSkuMPhTLLV7+uL8wtCRYwR\nqqR+\r\n=l3VV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/touch-target":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.e1e69fd8e.0_1629487931288_0.15993702653610264","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/checkbox","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3da56b363ae0a58b3fff607da5d412968cab55e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.f5afc16df.0.tgz","fileCount":42,"integrity":"sha512-IjxWXnHNH1uMn7vTNWoElZ3GM12WifR/+mXm7uU5D7wHhTAKyXIRY+BwofK/TRPeFW1gwhX5r9ztptmEFOyhyw==","signatures":[{"sig":"MEQCIDlTlw7LodEDAqO5K1PfZw+zyI1+i+W1281oj0hVevkiAiAch22q8Joe66IHQhYtwd6oqFcQcXpo8AyUFAUE+/f48A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAACRA9TVsSAnZWagAAPTgP/2ejPWShopgbjjhjPlvE\nsTy29+RSaSEcwTg5MN4AWdKgiIjp2cPL+S/+JJQSiL487Qr3tN0Ujn7x+syk\nN2NA6HjfYw6EGDJQ5pjbv3+PZrDVu4758uNAYlxfoONE2OzU3ony+JoltjsZ\nCbXTuCh0eTy2YSpzMfU3dBsT/ZQy+XncpX2LR74xn5RFeY9ySXuwY4tEVdYq\nDgbxAFoZQbcBfataNJ7dCYFpRxreHnhS9IEE32KA1ubCfpNkhaINImMhEhrf\nx4BTi2xope590bl0RcNcVKYuBn6IKMyeF6xP3UgJXyb1RLLgb/h6HhUWxmy+\nsjp45CYREkNbaBJ42bymJS8LDIphMrwrOjGXh9lyGtVgtUJ41AQpWKza3/LW\nPe+Fp8awMMFDZqMRxbMSKvSXOLLdQ+ZfjM+sxWowZvvrvuBAUbbfuyeY8da/\n466fiyGHDihMbCRUutjoyFbBsgfbE+We1h5FtBYEt7X3vPRJYcr4+GmltGL+\nsIAHk6pa7VRgI3mbucbWxWsaxiy2ztzpD2TCm1eiRTYhBDHYZF9ySGFQ3CWR\nGY6OLG/xD+eeLr4wlOgpcDuvto9On2echXbYYDaXAcDHDXXSxFrUsQFDu3bM\nz3Hhk6+TT0fxwTM91TGc9xTSBrP47hvw/muRGKEmJL1hNN1/M5Pm1UPE24xw\nin/k\r\n=5DE7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/touch-target":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.f5afc16df.0_1629491199957_0.3490434963941522","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/checkbox","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddc9a0565dc5b60e990bfcaf89f103172c649944","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.28d0d75bb.0.tgz","fileCount":42,"integrity":"sha512-RMIkUoqS3UyJS/FH7+M31GnL46fkk2yjG2MyEXKtWvIFHDerCjnbXmQ11hoQCXwyKGK0oPNF8LYWe3Dz31ZeQA==","signatures":[{"sig":"MEQCIHh1+16Kjyfy/0FTjjY1r73Zr4W2hSbu3EjI1yZnpr9QAiBjukvp8vWz4RFphbQNW81oQqzusMzQHXKS63QeZJV31Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqoCRA9TVsSAnZWagAATiIP/1wPokeIvk2QC46n7In/\nyOp28wJdL+UxydweOD2UcWRpTsyPOW2l4E+1R4zwgUhf3k3Jb8w/1arzTVdy\nfFtx+Yo+RVNyurCaYKOQC43gn+Pa5ZqcIUIizVFYh7RcsNHTZzm5y2rLuWOU\nR0DjgOkuzIqGsgF6AB0E95L2SW1YYDzeji80XnKjIzFMG6YzuCHNauYMx/ef\ndnrmLNdkwfs7JGKPabmWTLwBSJP+tWMKt+eto41t+CV9cmWZ+t7IjpKVl6fm\nh/Mk0SzB20J2oTJTJC5/3RA+9DKtw17bFumjODyINiCcvScplWu/bxLpZXE8\nieV0gzMiA2PV6nvTxgZbsXySh6f1xYxOZiiOXRu8AXfaPyjzhTvoY0ENWtvY\nzojrGUnGe8QXc09nCt3zz6JJoRczwhgAWLLY3OEvO5qSwfBU87gUbqJ1e61v\nJI8ogj93Wbb6S7d97SoCRY+BHZDgGfNSbhvdfX7vTG2xBurnQbVzHP8xF5D1\nSIJYs8xloyo1VAUnL9uGjBWWW1ZKoLDnpl3nqQMcF6nvYl/TOzPq4uJO/3xG\nW9Fh/bPfSj/gz7lIEBv4ieP6NKxGKCXThNOQD3T/R0caI5Ch/NY7fEJC1KKh\nPAZk/UiFR5a9JW0JFTh5Aw0tAkTl7T5mBJdiKBo6PAH2z2dqzazCKXBkHqsT\naQUe\r\n=BBZ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/touch-target":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.28d0d75bb.0_1629498024075_0.46559303846167244","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/checkbox","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.21ece5360.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2547273629a344f2f8af197b0a334ad4f2a96684","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.21ece5360.0.tgz","fileCount":42,"integrity":"sha512-IKy83+iVvmSFLpFjot7+WtARsULKMS/8ML1wdgYRaRehowe4dlL4NjUgTFLmvUo/ViHlm/XxldJIn+ufKK/z9Q==","signatures":[{"sig":"MEUCIQDbAQHYYlKCl5M3Llgs5WVe8zvSGSYuBcWVN6ITdl6TVAIgIYcCcyRlfffTMVz8/IjYmciA2U+MVwRv/IURvRpAhdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5JCRA9TVsSAnZWagAAeDMP/ApSc7YM2DUMBUAmfKVN\nEpGbHe82mcfhslbkdJvH45F3WXabF5c1obvg3CX4zulEWk78WRYzOrnLeWxo\nhBOc/cqvfpY2JL8ArTOfpMTQL0LgBRPEVspTX/mBhblNOZCYTv8Iv7rPeOfC\nAL5S+gLcL93kfNHx2cxkoK3OTRN6aST9dWVrSX71rbB1nHFaQ8vtcuCCqFo3\nU5+E7P8Mttz0BDZ2CY6oQRoZGS3Dtg8VbHjDbNm4qrFc+J3yoGjh0U9UZf1a\nMwWUvLcTZT1nV9tyTWMV/lbJNHeULYAbpGI6mU+nZu6pq4gtcsoFtD0UP1hA\nC4ZFI/F6x1uvSlKv1y5uuayJJT/1CfcOXZy5bcxNiHdlsRJC9RGMx1vHlUY1\nAlizbHwDWHlHmlAz+Bitxh7gl37I/F0iq3g5kkEX25FAIJ6nngTCOiXZsCht\n2D95mPKBGVMEMvJaMhKaoy4WSp28FFg2Pq4gaANQ692LKswMINC6ntv5Ts+X\nbfrQoS6pIaFwULL0fwYEejAsxPH8Y/t97pGTi7GD1FndUJVqLZ213hbkoWpG\nwI4N0LGeItpNZDgU6/CvTz+jxmmFIqo3/Qm5qtJTHMD6g90i9nxCqIBYRo5M\nWm5h1p4xrr0KQWv3xZ7/ipKMPImWJFlYI3WupzMeUd2CCZ2AAWNI0bO4HboH\nt9Da\r\n=0R/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/touch-target":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.21ece5360.0_1629503048998_0.4378499447833144","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/checkbox","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643624d71db83b843e17a9b2d1f0ae2ab9ff9e2f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.8de07c02a.0.tgz","fileCount":42,"integrity":"sha512-PrP9rsPlwU3fTNh1/C/pnBnMXxOmu211ebhZfRP4GP0Y3inP1iITOfQeb5KNb3/4Slr2utVlmepoCJC+IjIIBw==","signatures":[{"sig":"MEYCIQDG3EsM7Z0po7ewNhEMO5MI3mhWpYgb0PvVhCRsom5GBwIhAKO+YpqX1TfcsfYHzGkmJKJ5owwuy5m7h0ke7Nqdemzs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74zCRA9TVsSAnZWagAAMewP/if+Pf+F0U3njjLigIxb\n+xs/CnsqhoflMZg2fPNyoxM+cn779Of31n+rWKUzwWzQxtJRmMtTv81JxV+Z\nz8hZqUEzHxhQlzwNORH57pGsQYvEl5zJQnmnVk8IINmMtWDwoEwTLToEtJ/n\nrfjvzYbudmIyPyWF9ZU18KIkLYdZdP9k5e2ed3JUMelBa5uFe95vgYrluvMk\npgh4ZvX3Uci65xK2pwiQ0vUxgpiolLBm1syuyPGGA+2On1TY7MArmdK4gZda\niw+rY7AbDjSkF7BAzdj00xIeSgeYNG7DUf753P2ReppShLvJCV7yhIRFhOBN\nvsLOIa0D4PLFRsxMWk+XmN9RKCmDpJddCqe0YqpncM+ZyaHKCB8UqLXFoaVN\nbdq5EHGbZWDT68fVdBF1W/8tBv9u6L7qLKLIHuNPjhkmw8T/sRhSL1YY0l+9\n5qeAPE7rPaqbN7q0MAeTTadi3dbSU+ITkvxMMk2jRNBaVWRHXS/4f+wVIzhA\nkQVYe87UmGr39CHeBIZCr8kdilWUfwsy5jm4PWRzyu/CTwRxBHNk6izT8cOE\nTkjlrLoY+UuxKGoMNs29mn8zfI7fIdcAhE1PdiWwPfpFcPrNFwv3yylKNXeo\nCzLSWl3ahL6SswQaiEN1SmOF7Tklj/i8a6Q6EgFCdakoO/esj89SO1gOVZhh\nPbR2\r\n=mcGa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/touch-target":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.8de07c02a.0_1629732402923_0.45355113118073453","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/checkbox","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff1eff5a96244df1007d784bcbfd5a0d55d6c72f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.65aa63b0c.0.tgz","fileCount":42,"integrity":"sha512-fKmBqszRmWpHsvoVT3vpg6LL9W6vwvIyD5RGXlzeMa8/HvU4cODgQrbc9UiWkpUrFSEosI3WtUpMAs6B6+UQOg==","signatures":[{"sig":"MEQCIHtZFCO97A11M5M5s17egYw75mds3gpuj9QOJte9ASG+AiA7BW+Ve7eUgS+P9emCayMx3Zb1zLZrOGD0xm61LXqxmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAdCRA9TVsSAnZWagAA5ZgP/iNC53ginS8BXXlvEspU\nmfUAwSazsrfYMCz5uehGGI9tCqHc8yPOTM1mcJA82vrBbx4txSElZwBdQOKe\nkKomspRISxgVlUJ21vpjytbzyNGP3LZLy5FDPGHTQkuFIBhef75BkJIk/TZ8\nUcb3jdmh3JFfnXrYbSiYl4eaB7+PhgWev4oRiWLkLUw2aUobUPztZ5+YzW+p\nR7ZdwhO0Uj37TQT+yMVz8YZqegsklNxc1TTwSr7ZuxRgorYSe5xxqtMUyGxL\nkc41sxwKWqQhhqLEO4pmypXCajy5csjpV9t3MJ9rvbEYrxctR2KwcVc1mlsJ\naKTrnZ4muU+eFOGMM4d2Gbob0LzQyuS4zvBEGxjAqiY713AVH4C6CtuNEbZr\npBz0vh8XR3hUEgOXAj1V6OMVDRV081QLV1F0g86nOjlv46M7FiKaLQU7xaBM\ndePiXotnCLlMmZmOTSPI2HaRt+bVauycnQP+17+zVq4SC0cgp5VvGLTU4Std\ncTAy054gnNS5uiineXfr/8+ElfHg5dyBa0bgmdRJZHV1aquM8FskB5F9er5C\nK7UhPoVGLiFj43Ounc/tCYmZD3m3TaGA08uU9w+NOQHV9pprbGnDZPRX7se9\nExs1RmOzWvglO7XtumAldesLXsj4xUkg+DhYcwo8PKbEuexFQwSBxavep7LH\n9f7v\r\n=F9CI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/touch-target":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.65aa63b0c.0_1629818909109_0.7478424009513249","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/checkbox","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d50c1dc6d590eb6eed6dc2c5f5d169f5869c1bd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.15981e9d9.0.tgz","fileCount":42,"integrity":"sha512-hZtYhAxC0J1+ZjN+U3q4+TkhRP9m3MostfYR951jhX/fL/WJ2T7aHuPBCQ3FPtRJVh3H/YybAWu6Mx1mrqAs/A==","signatures":[{"sig":"MEUCIHsm+umKaL67NYlPBu+XFus/uLLpUb+nBu5klQdNz6k0AiEAzdzGJW4Lmgcix4MuhvoOoFZM5/JtSk0RsWTGN2CJUc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRuGCRA9TVsSAnZWagAAwVsQAJxtQ2xGiXwafQJbz/wU\nPkaOLZJ2lCjUlM744iC4mtA/sW89uCZc9WybSbb1H8a1YMxY5/FHuHLJDxrJ\nekqAWV+G+zObunJwLgmhCg0guqQ22rwPnqZ7etVOmUsSOtibdpZ7s916bb6l\neiXiSTnFRT4NKoQUQwDHl6EfHvvOFMe3rgcGshkhq6BDjLvgeMrZpi3ajHxV\n+JP8NX+Rgp2+tkf8hFHgSUIJiRJZxk48FszIpee+VnL1Qun2zmJx5RqV+fq1\nZBfN0pTCc+jlAHZyBkyxgPaItqDFXRzZs7FLuQLVYmrpkQhDBEbRicBJvJNZ\nva2SJFrTXvrLE2BpeYBK8QGjZbLjQ5P7cpFFFmTa9eDZbJR2Ls4QXT+f78to\nAYvoYuq0YHcHFbF4gB9TW2WYw733SxXts8ktW/WjqC4QFluBVpvKHSaMsQQP\nLVGAFg8iAoO/qlgwqFDoLpkdHrRmzhr//MNQwXjVF5JwnWDWkMhuU98AOnJ/\n0+AyAWUqOvYTT2tlJJeXUPb6/QveWLOoRlS3zfhnWh7b4Or0A4Q5vIiFHjZc\nDtH7n5ZsuoXw4U4ScrtJWVW0djwaeSbGaS/NEz3ps4cSTAKeZ53YEOoeVNJi\nSkR7889PdYHFuia4UcFZZOBv6/hU9G5bVMlVI5CNwDbKonVTyIOB4q1yY/TU\n1Ma5\r\n=oqBh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/touch-target":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.15981e9d9.0_1629821830230_0.16250115807331555","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/checkbox","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3018f1e340e65a0fa1f7f9c238cd3427d8d62859","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.fa7520f62.0.tgz","fileCount":42,"integrity":"sha512-1kTMxQx1NbkMJpohDbp1+H11KVba8WD0hYn5Zg2V53MgUyi0uaViZiR91+epEtVmqNJl9qMAJIS748XtX7lquA==","signatures":[{"sig":"MEUCIQCMkMd5PzVIZ10Y945cfVlyluMBZjw0Uk8FIWoNppGtxQIgWzr/QbjVimZQCIIwI8/fHaK0wQOLnH32oaOXW4ZSo1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJjCRA9TVsSAnZWagAA0q0P/03nSSShY8qlGYd7bG7N\nSq3kOpb53re4bGyukkLooChoCqxkludY3kQ5t9Z1399Gcq48JWo0q+oDKfCp\nZIFSr4VWFLxfrzMV8RmvSYbDI8gMC101lYdtEbeLwSumCoIDJOFxvyfEuYZp\nd5EDesocXvFlOpRRO/FQfv3+iFJvgwVByv09jtHlaaF74u2BOgc+3eBsZtOX\ntjvdi1jcXmSc7GLntL36Go95NVSYAC+cP7EdTOLjEiAEvecAmS61qrofnwZW\nJrnxPDZyvbARPbPcU6FG+QMhNOr0b7ffJrW2BainOcAdhfc9aR63k1nZMfht\ntPpy1WpgQm7d4IgupH9pQeL5XZoxnq5VETLTEiaxtQa0iKELPVtC8yi9IcI5\nej9MKLebSeBikyLLAiFw9Z/7YmhKame1EgqV44r2kOdWYlWhrmwwRC80ixjT\nZ2wo0VIgyimfAPkH96B7xcGbsOOpIg3knCT8xqqHMAyE5q7fzAwWP+j/IThT\nKbM2EfRgpx+JaHd6iWb627ZJCerUxc5Ba3flaRiBAZzBsU1QNXVLgrHrjxTy\nBgDrlHDSKNQBP/ZtUqniQI43p7rMFDRHCBjxKFICYz5LZ/9LTqvw9mvWI3oa\nd3VwJ82hc9y6qSgoAaqVASFkoHT8HdIOm8ICkpfw4p4meB0Jffcc3F/7XpQC\nV+Rq\r\n=QLgA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/touch-target":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.fa7520f62.0_1629844067659_0.8326214607080515","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/checkbox","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22a870c5cb9503633c44d780ba527a65a7811e34","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":42,"integrity":"sha512-ETqBWs0WawSFpaeTiyDWVx4OmX91YMNdQpGTb0CPh/GbMQd06/a7XgdR3kzHht2zFTOvNJLEBr/iyVQXCFnVUQ==","signatures":[{"sig":"MEUCIDRVGFPX5uRSe4JTjM7g8/XfyRwfhPquhXmm6pJ1sHWbAiEAjKMITVklmyoGESQQV6MMx0ubszLfH52i44zX3qHVf8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdCCRA9TVsSAnZWagAA+R0P/jNLMgtLsJcTc3okGV6y\n9vaSR9w82Ho2vsnQlZXWhjdsR6v9nsOBEmk95skNsMmKLJpBJQ6ZzQZzc/9m\n6NC8kZhkzaGbiJrJU/Uwq74xMvqiHkeGcOG7yGSNCiKXQb7E2erRJPTZFK+Q\nAP6O3IxAyDCFkrR55HyiwSV4P7OobEFZ/3AFgfrLcSOL++D7hEIwM5UUFW0n\nxRY7KQ9zqk2bWhWC0Y/fkMxUoUoNRq5u5xZ7AzHTNtkRtbc4Pm5d4Cfo/uDI\nzBl6NlMeC+5IcCS2r2/YeD9eFZmy8ncuOQ8gPb5P06Hrmon4lcSQL1dQZYsF\nsZzwy0A+qGs12Ua6p95bO6nSSQ51+D+S5CJ81DAl+2i475bBM0s8oQEdUFw4\nmIbAdRuLVMLJtNqOcOvjkJtZ18RrkSQ/jCdXpg6Aa1ugx2cAt63OpS5TUlVG\nsck7DSCIAq6nAixLP1lai7Kd/MdiBfLD8YygfWbKYeCv9R/H/3s0vj3z2xKd\np73TP/D8tkKNw90SataQttQwSusxtjurPp6TOAksCUHZpIorvb8Lgjwte8MT\nKiPF1YvWQuHu2LHwA278fIwMhktv/ek/sbPKHG5yILQxBgadxGGyyA7+/IPP\nMgO5IKnykXcRBLyHiDBFvwvBVOUnxuBJ2INIaVl7Sifv6X3sIJvZKkbzDePd\nMzDo\r\n=PTlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/touch-target":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.ce25bc3ec.0_1629845314259_0.3588159374920894","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/checkbox","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c27dccbc998ed5b90f210509585d8d7e0793b80c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.12f5622e1.0.tgz","fileCount":42,"integrity":"sha512-StSIIfQl+0nNHzqzMq3j0tDhogJuSEekhleMbgIWmkjUX7rbAerOeIX9XqqfXfWJPCICOP2ADpNuQTdW0EGvRA==","signatures":[{"sig":"MEUCIQC0saDO4k9j8/UzU0ElfwL6bEm5bSHRd6yrIb/YtQWRuAIge4fw3amBDIErjQ2mhM/PD12f/x9v8YHAvjLAc5P6Asc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX4tCRA9TVsSAnZWagAA+6wP/37xoklPOQiVI+MlXj5/\nAqDaxk7jYNtbgSr4lAmtzg3SR/qPogHOVM8eYZriaG00o0JmeyLlcq4cKCZB\nh8TupBD7H/VzizBq4WtZYAbG6OeRQ7lhqYHjcduJOonv6/q5UG3Y283zOc6L\n7V/GW4hRqsqPqbzTkxqk0QQCobJXUQZJ9hNG9UiVgDe+16482F+2ogPT1Xgj\nL/Ngz+2wlMYTiP0fKXCh5fFQUVvLocsmBdu7F74KuJ26ARfQMt69eSovZUpd\n84jivaZ2DRM2Hrm8LhkZcSwhDIXtOZgpluM6SvKoLM9PY0Mubt2yhbo44yuW\ntUJxcPvEXhwFiwgUZqvni0ZF1mU45ZTKxID7CPm5rraVAGKFohLfkeMwcUMw\nfAtMwond6hHW94Kb/eRNX7I7R1dAkNzWTumQXyXEBIVxF+7u4K2ScXHOnej5\nqOSzyGQ/vmic5M3DW7+dyucZuW650vXyFxr7jwvm889uS1wd/BMXFK31q0YL\niVfQY7DnhrbCObX4eCbDB6uiimNc5+crQiQqfKiOR4XuAyvj+JIzA+kCZlWD\nyzC7ItourTqK3WmImuTWE9B1XU64V3Fdb4Cq406exifXdYSsZawI5PkmOGss\nKeaUC7YBcbgbpxM3NBuJiLx5sn4jlHLRlEyKHWIqvzm5C37qdDGAzjLWb9Tn\nfHJF\r\n=VF8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/touch-target":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.12f5622e1.0_1629847085014_0.5527159267367259","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/checkbox","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d11dc0b564440c20e74948064d1ffcf3bb3f7995","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d97f8f133.0.tgz","fileCount":42,"integrity":"sha512-8bEVlm2Cnwwbb4zbBh6A0A8YDpISnH1WlVHNRXFKKkw8IxslD9GHpg3LShYd019lhxl1eJ1Wv+GsQVsp/z6LXg==","signatures":[{"sig":"MEQCIDBDCIDgHl1LnWtk/ydrXzWcGLzQC9wLptRWprMIA2VNAiB7GAaaRGQUMHYvLMHopYhWKpdRggo3vCdvAPF0LZAgyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozsCRA9TVsSAnZWagAAy0UP/0aJRJB3UYeCGi2Vr+In\naeih5YcLLSqLSNL6+JCy5qRoPaUWL2dGvTzzzyu7lj8x3OuKzanEZJ4PYtcS\n30HkYGT94h/yOwOCul9VqObb6r9Tc3sAnbqbU2m3GDIyphoK2VqiXI6WtQIM\npIQeYMmJsaHozAXt7LucR1S7nN5CBLmwNLnc533fwJE0s5jJmeYcqt0xPTiw\nxChK1DmxJTqRleZXsTevi16Ap27uVxwpbgP1bV8Qf2gzhlKqZ2h+2OdqoCd2\nqZzlQHlXrFcK/9gtcQ9z+yhFvfAZqDaMZytbMbrbSOJkVOcpiIubjA1HZWW4\nN16SE2OmKRCiTJuCX6R2ou8AwBG9/iEP3kAUF2A7kS8Qu7N2wNO0eDZm6iI+\nRvI7wUQEKCWpEYAqjB8n/6DQUJF/NUm0yeHPYaAbaailTQL5IEaINfka7DvU\nXXPLeZGwp+hBPGzzqj+8hsPZySUKVwyZqQR+ikpTZ+PPcVBA9EdYHrMz2mJ3\nTwOgwSM85XJAPe3s8EGYPgZm56a66ZirCC/KFL30IkvrkQSep1HeP+SPYqxo\n8CxyYNtgekia3VeYNkjAVQpiVMJLbHKXG93nNldHoYjiokcXZ757pqpmywde\nGMYjV+bZ4Bq+AQYpGNdmA6l6hThkDkMKTZhkCce9uC/bpKVAm1MAhbzJFwHG\nAmV0\r\n=A0sU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/touch-target":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d97f8f133.0_1629916396099_0.32230299847636945","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/checkbox","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a48a221a620255d9bf648a27c6e0fc0b6e9c41f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d86fb6fac.0.tgz","fileCount":42,"integrity":"sha512-OWyaov3EN/PomGZDu59V469EpPOzd09loZwnEEWarp7WK+qywOKo8QTQEcxxLaQCsf5L0B9SxZgCemy1H6AFbw==","signatures":[{"sig":"MEUCIA5aLwWVub1DrAokAX1MA3UwuIjoS7bPI2kuSi57xIA3AiEAtRUzolr5S/eFJaJ/Bz2RFyRjISeQUI/UnehItNhqqAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpG3CRA9TVsSAnZWagAA8d0P/RZtpRPB8snjZ9aCMnHq\nrOzX0LfJAMmuC3Ejm9QVJyxes6VqF1BEZcx8mh088HeetIGuq8M+S45VAJor\n/BztCAwJGIqLb209jNm5RBhl9JsjSYPB045goNsMz3/5sDdcfkHU9dP1HBgG\n0I5rJromaw+/k9KnKMwx2EoMv1/+RnTaOppr3Ef1WRk+oGHhIX9ds8opLVtg\nVLUYGX6fORVQ+9kC1yuaAKNyVqtS9wimI+NHqyrl7GO5mJ2k0Z5XjyTtO4rh\nIe7Krl9Gz70JNAyDSu5nGOJCvi19HZ+rrRY30HAFo0rC/GKQRyZUNNwynGZl\n0NUHsf8W3VpJeDbwz+vxXvkm6zvrnI0KP9RNNnOrJ0spGQgLeK5d0yFbGSSV\nHVyb6VVEUg4KaslA3iQh5YXX6+N1cG4Ves3+ox3g5E6ZQaeelbeNdDg3yDQQ\ndBrR6hdRv42zi4J6SyVc5OZj9CjOSf8mb0YtV1Sq2qQMK/e4v4zYxyUqOBzi\n0y2bY+6wtCirr3SAjtCnLtTkN2NTsVq0H+VVE+UvUz6/NxGDbCudLBmzaS3Z\nRAcc1fYsua3wNbK5Wk55zJTBdv+Xe5UZtkxYh1191A6pzRHIY0cIydKfmH5L\nC5ZSzDs9tjLFB7zjlPRU52fEZxwIrklsBH721q0NeqkXTT8CzI6xgJfsq7Eo\nJ9fB\r\n=MyM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/touch-target":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d86fb6fac.0_1629917623190_0.3014927589596592","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/checkbox","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2304dbdec08bf7b77a7dbcf9670bb851b3f494b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.e8554dbbf.0.tgz","fileCount":42,"integrity":"sha512-BfOMUjK0SrHi490LUYtNsURMEnSmtD73bvdP2ZGTA8EPgMxXmKLv0kIFVkgWscI70ApZCKhNkZ4me14Bym2EjA==","signatures":[{"sig":"MEYCIQD2QPjhISa9hZPcTohK8wrkLtqaZRI35Zd+f+K0m+JrhwIhAJ/8HAF8QfXLkQTP5aBs+vcIWUQ0+C17u2w9AW4tjFZ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr0/CRA9TVsSAnZWagAArikP/0JUTfiKDShrPUv7BFUW\nTqH1lkrzOJaWAbVqOaUQkWWiXopYKLrUmgPpQUvN4HYJaW19AR8mkxRYBTqL\nyqkVsLMCalfYTBH22+wL1+FHB1+FrxFOk61rBT6jmQffF1qCQoVxylwLvi7T\nkoN/RfOXUpokpIAYnJhUsnUKcSGr7/+rZzkg6YhUJh8QsiV1kxOtqnstSV99\nz6BoZQhDqLSAquWeNP/AvkjfRBfQmf4vhKHllEgQw6L7RPBf1okYLXBjhVOi\nMj7wU47PYCOUFxbmRwjX9gwaGwvOoJpDXl901MgnCa6B+jFtRCGWaQKeNRUS\nLTbPg9vcpYw/+cCHbz6QJSZOtwlXawdCxrBjHyoNNdSHXU3q3VinWlyNX7SZ\npunvdem35e+fH257zchfAgnwPWx+z8zDAepceOIvV1Zvu9ljTFPRk8LpFanM\nkjo8RUX6DiV1pRwakuA6Vf8YPAtICPBA4PNRaI29Md2NHnY0YyRO4mMv8J5f\njbDV5lMnWCRxck7ARhmRXrxry2qSrc/FDQxV/bgIMMKTr59Arg+4WmriKuke\nC4/dCa8aK78ACzPp7FzFd0LRuUwhzB5xRT5yOxxofUgo9s6cRXU/ALWGp7UI\nPG9r9Ws/okTfECLctnACWGcZM10ZRJa0o+cWrXYvfI8ndxOHAJh9IJM0wNmX\nrx3V\r\n=muUQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/touch-target":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.e8554dbbf.0_1629928767552_0.537481758888152","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/checkbox","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"898446501035f8f6770355ddbab39224872f719a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.877e3fb0d.0.tgz","fileCount":42,"integrity":"sha512-DHPl6mrl5MLl7loZUYU2VncSkazvKgBBm7qJQB2kG7DRdJWMYB56chMLmA6QIaCT3PQ0Low2xs/KD5Go5YM71g==","signatures":[{"sig":"MEUCIQCz0wvi/i+ByXkLPXMhdBhDHMKZjtbAUfpc8m0YGJbdDQIgZ1jScligAQEamRvEKWYqzbq03ZzFUl79sWdc8NrL5WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VVCRA9TVsSAnZWagAAOHUP/2KQYI7VXvHCqDtifItu\nSwwQP+4TH1YpdrzgpKBSGQjCRs2yBKNH3EhRg9b0Z0GzV9pzhqcp0Hgh4Jpd\ngawPq2I8vvU4wXMpFCwaXhdwl8bm/EsXcz2hDFXOf+89sogH1c4BRXm2YZDt\nzh7jXo0e7uyjaE2BoJd80fxa+FToeK3En+r6FOeqU2NyG3ZnJwp4ZdAJhux2\nliX+CLEldeWdwnBwdQ9IswTsxU8gHVf6/igukOpVqY1af12gWcPW4tdTI37r\nB9Ig/r05VeTbz9Bj5/76WHobMcn3134Au4hListaDcRQDjGi3F+pN5XIpVOe\negca28j+DxP+ZwBHNoY79uanvZlzSU1vKDHtB8DvYRa1RpOXUrAGitq2c/P5\nrCksX+wTDzeeg0VJi/BkoCQ/h2MkR/o6w9iXGjvhfbli7JirVbbRfs3CwJGO\nlGzTmt/afMrFYyFPhrOlCZgqkOEB5tqia6S26/zHEs/TcbaCwD7iDLNakOsj\nv7rABTm5wmCilKFIjeH35KlmwBaswYUWPRv4i2OvM+X5gNXv626yoSVapuhm\nxaFX3CWOYrOI3ZOu0t9+Kd852XiFO4QAYU+TAFYae/D0Nch3yodRLRl2WQ8R\nzXJJezxVdgNSmM1SS9jdrgP7YLhgmqlXRAZVk9G8juV0A4Hlth5jaK/7T4wk\nxkSm\r\n=AhJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/touch-target":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.877e3fb0d.0_1629992277388_0.9804194330960656","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/checkbox","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.6236f3576.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48952c45026a860c986c5f3671c90fc07890b3e6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.6236f3576.0.tgz","fileCount":42,"integrity":"sha512-DsMTpkRkyHXbRzWT86+qkQy/JKky26IGZsE3adUdqKAm6Rj3liP7dkA5CZbbVcxSZi5E/MHUK4rUAKNUwRMVZg==","signatures":[{"sig":"MEUCIEVMelEWO6Sl6HjVseCyS+dnG6FkchRCwDMb56gzUmYBAiEAo7yPuXYTA3Mj3sb0QkcEJETRGpKuBqkc6XW1G360/KM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vdCRA9TVsSAnZWagAAG3sP/j4d/0/COy3oCk9fxQWS\nC3wZ/BHoNyonECbyYilhQ9dRMXL/E0vgCzyvkYHUKqtLIqs2IeH0JBiCe5xb\npDKZHJiubPPiQ96itQlrROgnsDbzvnkpf4zVJ1rbz58RXGB/OVQEnBHVLrOB\nvgTp1B6d3jZdw91PlUir7jwTBa5Tl94f8nF7FkXb2+IFdWu/CIHVd4OcYnOP\nGz5T5tspUZPa3x6+ydO5LV2kJyH9+ZOUgN5P7zp+2QtjYxz+pUwKbh2cOSCE\nOUa6gG958ugec57b0krKmJVgMmqT8JypOt6yOfeztHWxuW0WUvvI0I353BE2\nQoF/w67cd4W9IOcpAjzoGeV9bePOpsVGfLF+6aTC6UzYmCqSabvKjilddYTV\nunurx17gBy6hQOpa37FREcuI8LZKWOjk8OXHj0d6iR0YIB9dNTOulOFv+O1e\nImTU/d9ssvRKWbBW30mLQ0CSKsRerKuX6UdvqvnVSsyrbLlvC7MM4Ut+CmoD\nmxWjIeazqFKSH+L+XnSKxJg8PsjGW4LDWLJZjomAw8/Lwe1pgB2lzxJqWZPw\n4S3FwiqH4iCjRcX/vd1ZXXosF+0b74BUFWmZsslb8pH21QQzC0FAK0PtO3AS\nP7uZ1sJsNfwYtSaYzGUc7c19b5Z3zgkxDn2mdp61M+IBKDYFlNRP+Iai2smo\ngeJs\r\n=PwRj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/touch-target":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.6236f3576.0_1629993949205_0.7108813658861599","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/checkbox","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c775bacb317a4b54ad4c8cef13d38bfb9dd9320","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.1d19158a1.0.tgz","fileCount":42,"integrity":"sha512-4POBekVHUuekCHFZEALmUG2s9SWXINslsYhi5OhkQNtUBuLzPjpvXWt1BEJFttSEnlchhNqrmEtbptMZvU5vsQ==","signatures":[{"sig":"MEUCIQDvcBk061kvwGBSgRJJpRJFHLwIEdpH539e1snKef5iewIgSRNJh3RKi2KGXRil4HySpSlTqmvOvbIy46d4GHyvhoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qmCRA9TVsSAnZWagAAFjIP/jSlYiJkKs2skRQwddbP\ngS0uV2yPwN0+1XyuzIJKlnwAZ7XwC5KEGSw7uZjhacthKP9bxPXuMNZ/HtiL\n8ge42Wk4WN0XGRrMQhFDhzzL9IYQFCBv/2TuCRvOB+jUBME1wduTr74418Xi\n0S1BcAm0TyH3o9SAc02+HjFNaPqWleKeDmo01fgZ3uxdUZKQitnH+2adL4gL\ncu/M4lQB9dUz3shzGtsDoeY+bh/FSWN/7mp+Ewa2Mo5wmX3FZbdxCih7qcmF\nFJas5XEG449uAXYr2bWekGKdX5eU4D2n2LT2QBl7UaFJ2emXXJizhOZ1F3s6\nwoNChfVwkAVY9oyJWlGp3DY2ZcXWEbv//IsFmJfT2cWzsnI1yEsYO15ErRie\nP2HOJB7tMamNwPThuhtnSPoiVFtLJb/DNLayu7SjDchUnnEc4toxDgu7GgFY\nj1SNV6KFcjz4I4T6ZzeUfpdfsdJ7zgH05N4lJt4mo2UDTwNtjpIvdfe5gxwQ\nBeYb9aVVo0/8ce3toN89x9MopEcViivVvc8m96BAWYjiwXRBkc+plsIuA8iK\nzKbUkUL/+mrGSbNe8gtCribXzGgkylmHIbdT22KHOg51YZ3yh6sKBIobLkLK\nYdVOErLSVjCo299vKsnS/TBi+EZwmghuUVLiPSPjQwqcBHbfebwXOdj3OwkF\nSuhg\r\n=8bm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/touch-target":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.1d19158a1.0_1629997734717_0.8164531426069521","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/checkbox","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb8f8e426f3a6f29aef638c7f01fdd2716a10846","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.6adc9e83f.0.tgz","fileCount":42,"integrity":"sha512-9a6434+5YYKDX6DgFfbh69o2ZflmaVzBvWUsFOgzUdcLC5nTD3QO2LV7C9MR2KKOyNIykFaWapujyTukfAviQg==","signatures":[{"sig":"MEUCIDJ3l2P/+WIdpctpcOh77xZg4QZsov44kYn4IO/8bV3bAiEAjNswnMwqGRpAeavviHCYYjf7DB7dSSD5MdK17LyO/FM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV8/CRA9TVsSAnZWagAAoNAP/2NMXOn3zH9PSk8VFwcl\nlVL421Uj+gzRPXPjWvrMnNTiJPMI6tSzbL1X8jvJd4hc4Bg2TEe9d7psyLp7\nvvwCNPrgM0rEbVE+kKywoaHvQCfWOHoxMhwu4BGXhXuibdja1hHsrjTfoL0x\nFnYiFDpe/5vsCPQ9eKu/rOi1sc5xqZm5UY7W+lKqtAMwPSk3UHSewWgLb9RL\nDD8jWrGX+IUnto8mCuucxBUNPF2oPE+SDWDU/U05QAH0ROnOt4PPBhLSXrrr\n3NAhFukVhflkxzZdkpc3lBNuG2iXBxhkdO6h2FKDHi3vrLGtWI4pxkNGapO3\n4YTZYPIG9r3H7zox5N4nFCIqGsxQkRmXkr7y/517BI8pC+TUtK6h9Qa3GB5t\nMu+asFc4bEeZ2ZWv/73GB7/3kAVaV8U3+PQ0WYUCtESHwacQFd1MyxukyXLF\nFCIovr7gVBGVqQeAOTQl0Gr6QwPvp7WoIVl8i0wrSsKKROmTcQmHk90ncoQb\nyHvYMfTd+8EWpTm6SnpYM0i2Jd8RBgpnTyPFN9SiCzvIY4BfCv9Da/4ePY4u\nbRrZW+9n1+zg7gumfUJqS9Zv0fy8vaSUevxB9JyYmvE+kztJXMN8hL8ywKYB\nBW+kN3aknUx5mrNzXJ1VYMIYL5C6bunPQHiR+2+Y/scvyuDmcSI1mFceteYI\nqgGG\r\n=tOeB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/touch-target":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.6adc9e83f.0_1630363455677_0.10554146461766689","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/checkbox","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d082790f0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b13d9d1a099e0709baf8f916e7d0c7ada529e15c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d082790f0.0.tgz","fileCount":42,"integrity":"sha512-qlhQ/FXWBZs5OyjdU3JdZb4v/CMScig2HzS/xK1g70hSgyrleOnz6DUGt1nbLBjVtiGgyaVUHz35T9BgXmejKA==","signatures":[{"sig":"MEUCIQDEc8N49EUppdfyl4LxVM1e92alDFsmY/pPVokBzdUQmgIgc9RiZNIOw9po6Fn7IDMKD9QOy0LVXCOGUTKMfbWMoVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aPCRA9TVsSAnZWagAAAaEQAI9Liax94yuDKYUjp6FY\nd+Z8oHA/8EezYOzoJ5WdfiiBt9w1bLBShHf8jw1YwUCOsZk46Tu3ibJhkz5P\n7OZgY8GnIf4Ti4d8CCE/qLRe3ajJaO3Qnw2kAB3oGV/HhLuA+T4/IBVyjTkf\nNO96fAeMVqjZE+xjcVV9uXoDBBpLKQ7T6L1J0suR+Y8OFMDm/XhB9zdhJBO9\nRo5Qy+eNmQc30quLuTAP22iCxrvJCDR1sJxX35Wie/26JOFdccsenhixT0u4\n+9aG77tDSyKZF2P5088j1VS1CW+M2IbiIHfrlSlLsViDDx1c+Ai0yhDZMbJX\npijGX8cIbuksVXJ1M3g7plyzw7Er/mvBdisP29SelXwUjE2QDRNbVdKX53LE\nghwvLvQdP1ibA4pKCVlidCd2B+qj+Dd0FxcX4vce5UIiQ25iNeicTaHqgXQg\nXvuzLiwA0QlABYpvXRyRFKxxWSWfl8JZVay51fg9qEBGHweMaVupJtW5Nl+s\nbz8wF3tjeZbL64edQ9QWmg1E7Qq2Ur7awBcqODNfzv9IwXx9JmX1xxN98M4z\nBfXd6Xt32GVqv0ot1qM1TSoK6ywpdBsX4hiOdAC7r26Pd+6mAtdOr63go3OK\ny3PH82JEbIk7spWHYSqbCRmO3LL/fCYrsmpXDNtgyfCPnJ7Ubxu7ATURgfKF\nRuA2\r\n=otzt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/touch-target":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d082790f0.0_1630533263653_0.17284415301747202","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/checkbox","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd233d057ef3d30ebb78dfe3036d40e1d45adfc4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.e2c4f0196.0.tgz","fileCount":42,"integrity":"sha512-pHSfscIgVPZR2gw8YNlXRl5koqGvHMJUF/gffLeKgRPzGcIGGS9N0JuzjTAWK8KsSVM0n3pBO5teOYSBcSsyQg==","signatures":[{"sig":"MEQCIG0M1+thKmgyi5+V6vXmPqNDO5KGEx8dYaB+wFIiZjIdAiBJY9e5HT0pACzDnB6893waG1+SOM8GFNR7tTH0auhkPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLKCRA9TVsSAnZWagAAULQP/RIghx4bsdNXfkfk/LE/\nkOfreIvK3OIRha7vtOnEyH0BwSK/JBsTbJECyEheNrc3i1X3Bmfc0VeP2maa\ncLvSV+8l6BLp7Zq1gFhw8CgGfpC6K8wxuJC/UEmLWaSkx3R87/5EnNj6h/ao\nZdcno8ssuTyGLVzvngWdp41xXlRlChf8L65nJGN9N5PyK9vi7FepjprnnijN\ngsxxeYnH5YeXkGz9kFxkUCM1TEDzHSGwyrQDVRxrY3XIAWUr3hX5ky+s2txB\nqh4kEjX5ThrNchnN+NsJz5hISw9qf3mn3GXnbTPtn/taZd8mnQkFzlyhSyOz\nbvN88qL/FkebX+Qfpp62yvXSOMVslpxkiNsokTqCKSM2y/aLmoXjDRm87nFx\nsUsyriyrwH9xQJRJ170htCpsWuwQJfmh7u8ZeyWrZmhfLSMRGxtyXvC4v1UV\nZyIX2DOa3ocbOsX74DTQ4ai3KgIjJ2Um7KMfF8k5N6Tovs+cMAjRsJHO5Es2\nkwjNe/h8U3R+/ourcyvuAbxgE2zchqSw7f1XNGrpTUIc4fiC0T5fu3VeBVZ6\n5NihhPRHV6FJYqL7RJeW6LR5bSPhGltnzKfbSxR0KhWgrTlv3rReYzmK//+i\n5lM84+DFL1FqaRRbEeiyOohxR1zknHf8H02cUE/g7u+UY31CRGImOlcjls8C\nbx3O\r\n=UYc+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/touch-target":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.e2c4f0196.0_1630548682082_0.1396028843616226","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/checkbox","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.611db508e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbe85f073c8527c1d1a597b27972389aa22417c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.611db508e.0.tgz","fileCount":42,"integrity":"sha512-Pgz5wOTEjdlZ+iYvvkbD+4CwWVQW4raWQqT8i1elp2CLH+TGFFzM0jVzBnj2NOpbvzr5K9j37fX7KpGZ2Kyzyw==","signatures":[{"sig":"MEUCIFV/3BpxjkHRYP/1Qv1zx9qrVtJfzADAuBzivrqCi/oAAiEAucJiQIS70ddF5l5CzdK8x3cI3yZH7tbV756dEfC4u/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEGvCRA9TVsSAnZWagAAZBsP+wRGKjEuWNvND342cX/S\nwFEeyuRMmZ+BMEweuCU9rRBnwlUymYC7Py/rXQ1JA/knoZ82rYwC3IZxxZtc\nj5cM8zcra3gksSWTIvYE34G06r7yuOItEBG8EQT/TTkyd/CTtlAdfb9vU1if\ns3OQQDf6P6noh20JvTdT19BE79pMHyaGt+DAwthauRkn34I9zc58kvPklTZu\nodB3QDWjBMXMNyrhgsBvhHwkJ8LNbrCSStx5Hw+qSNs1tlnB4BQQgto0RLzs\nJo54xrsrvU6qs9Q7q4nLqJv1AgatULJ5UkFXKAhkrZ/zpYGEwvh4wm3cLc/7\nfCwmJahVZER9ypTEwbpxuL+UtbyZRpp7M1Sbr1GWa2MeBF5vpd0fy+Vi8M/3\n62CpcnOmJ8+vwmvEd8Jcv2X55Z6xeGtO5WqLYyuyAf5GL4Po0ePxNp8LVCWY\nXqPkgcBjBGVVNY7IxnbR6Z8yiwR1JGmS7bXifGDYVQXUSl1ICkjSpwQ1Jixa\nSZWnV6klrwe4wkDv1IR6E6t7DabZ2jr9ookyjr6v3gvK0XRWUgZ5lbP7/0dN\nH4QV4djIRtJ7r1czBbVzmxk4nTSV/pMMzb51ujY/ZOWzVprIin1q/82junba\nBvsaatrlAjCj+4nIzMrAyvOrRTmIEsOLLlILtarujgKa7x8uw+2c75kui+6K\n6LGJ\r\n=K9MO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/touch-target":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.611db508e.0_1630552494905_0.6367253680579237","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/checkbox","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d4706933f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5693e2f76e71ba310af24518999e32007ef3d6ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d4706933f.0.tgz","fileCount":42,"integrity":"sha512-OJprear1EJTFaZGuAQhFpy8TAArdUOObIjRizC8qQPmURkURz+OPNGdMx8mZMPwAo0scJv1tau14Tg1EjwuoJQ==","signatures":[{"sig":"MEQCICU/G8q39nSGdTd+ytzc393SzclxB4HOiah4mhpEF+YIAiB7ErPBl5hii9dwpVo1mgIqmWYsVDvUbh2+AQO2vzcD7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/KCRA9TVsSAnZWagAAdcQP/Rxup+r8stfhsLo/s5Tg\nZCI3Jf7uMX9rN0YzR2Htw1xBzePL2LfiZTsXtLwMwm6l0c0NnlhWiz1AaujI\nSYkxmf85GBIp6iGLSzdBOlo5WY8a8pSf5ZzUEwaobjWjSkg57bS3W0rkKkUu\nz2bqHje3gJ4oXU4BEoWSG8IDl+6UhcuFtj+UptWUHsoKslR6P3zRwP6vovna\n7PFtxUb8IDN1aHTioDybkgrY7o1mcJrsJ+ma2YDlmpbXk/XguPkUfz8ZdYDo\n7ACyB/LTK2m3mf75pTibClTN32M4pQZNxVG4/XdarHHfXKSgujgXyh3Un91I\nDmANY1Eq31e8ECV/V4ixSMzYu7E+86BH/OCj2ei7Vrxka4A6xYvjb8ZWw1Tu\nKDQETTen0bTKQhJKu4nQOQczyblm7yhpi9lMsYrHVhpinEpSgtIiWRWTpuA9\nd6CuN4k84pcD/I0SbFdaA6FAV7NnngEBAKSL+9hldckhsOWfRhxsqv8cr7z3\nAOC/Lny+svb1oZuHDNDXYaO1cDGioG06f4uA6JGcy9+rDylXq5RoAJpaBdoS\nJW4+rzJxEP3G7Khjt67p0MaGH1aMKSjFczkNqqqbyNOSTiWNl+gFn4XaLF3m\niylo8JBj8WJx2njHKj94gqyzXGj700LxLsBC1H2060Qtj1bRrzw5+U+4qtpx\n3Reg\r\n=VjuP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/touch-target":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d4706933f.0_1630597066143_0.05941327895488069","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/checkbox","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b145ed4696ddbc1f203026dea1f274e324766bb3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.c16fe03ce.0.tgz","fileCount":42,"integrity":"sha512-AX08Ix26aTXMHY3sJqjY2m/dIVpPs3QJXjVyuDIRZmGsaFztwq47+mgwLnvNq+ImvgDMPHQVrEeOhokATxnZ6w==","signatures":[{"sig":"MEUCIEhr0vcC9/4vTqksL1IKxmmFxiF3jOVjAUnyasC4jeMTAiEAw81WcC03zw2f7evK9doIO4ZHV/qrSTWJJBEem6NQt+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":737939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2RCRA9TVsSAnZWagAAQvEP/1fiX+Ti7aVbPev55+/W\nAAh5bTMzUy08QajnQhOtxLPZFVKE3bCm3A9/MJdhpljsNFyq9LGbWigmtTWi\n5qZuj0NhPC/n0ZZTAC9Llj1kPTm5MBINPtbuUWxAO2iE5+205Gmyd6wMIPBQ\nwnVUURg4tRsuTNOQeh33jKjN6WWaF1H8/z0lJWtcWZMj6vh/dGfXqDYfSRJS\nY17ceviqlFQsoCtAfE2NHWm78IA70y7HHp4J4k0kv2t9jvECX/eO8ed8iKP+\nNF3i5s9Qr82iG2GO7pWYryIxpZOX2IRct7rf1kl/FlZmVt1EbXaamJkRa8CI\n2iv8h4EDDGfrvU1nGbFjGBIpAqz+FnQswUNfvURhRO9zNrAkXf9wAXVup6AN\n8e7zVKwt33ZC42UhfgkVctQHP56KX2rwKv+M7y8Yhwr5wPZmPiy0nDF2u3ku\nEKjDbWwLhz+K+t/fPi9GNAR5P0TGz2vkA+WKDjOof8uUUiupAaRjXsUtpXO+\nGIS5roGHM3xkMDo8YUO05GZKQCfmXvbYBwvZtrdaW1PSyow9tHALCZ2lSmdD\nU/HRQSTkYpfOwZExrPD0oPwp/eVTO+PNHCp0gBBVdYj39gGoJlzO5iTQxmY5\ninPyqwnGj1H3dxIAx8WoD6IR2F2aN5P/p/hlAw0XcT7rJPWcIfsC8Hv7lLhf\n6ayJ\r\n=FfpA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/touch-target":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.c16fe03ce.0_1630604689464_0.30042847955109186","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/checkbox","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.9203a958a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd4bd9fe89aa4bb2e9b4f54620ac0de9a1c542b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.9203a958a.0.tgz","fileCount":42,"integrity":"sha512-L95joY71PU9hG10efU3Q9QoQGpGJUOUSZH1oAyGh2OjOQoSzjMeHADrGRsTTqE6mUyrtbg+zaOohhVnFC5tTzA==","signatures":[{"sig":"MEQCICl677NUU8Hx+qIOqkmVDZ8a+oWm2R5m0fNoEB1FDzK0AiBMGVVlWUsV7oJ4lcga4mEls/sv7WnQo61i3PUPhLYy3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWJ7CRA9TVsSAnZWagAA+0IP/iPF7Pr9IrpoQVnQzLPX\nDbGJp/pYBCZW3uD2AS8B9v3tH3y3Wu/tMSBA+fkI1Bir42P46RE/txOP1vLa\nqOVA4N31qooB7oEVBY5+nzQIqz3rY5Rybkkuz15xId4bE2UQwtkIM4lGp0f0\nBG7r4w2k+5NLFQRyQVq+OqL7PdHI9sULOzref662GsTnGtNtjnvrBgTCowQ8\nw04L+4SyH0tp+tUT+MSRbv+V9ulFRI1mQ8lAHcEZWrqoxYZl7cWRjKeOazpd\nqZQ/FsGxbrONWvOjquR3z74wUd+qJnzozYJZjcdxXKjVWXp6Evder/FDoQEt\nbkCMlFAlDV2aFkZsL8muetnsKifY+udbSKw+LX9xr3xLxeafMqS7V3NokC6u\nhICx6g12ltEiULS5c7E3YFL9M0kV83gjVg4vgj/BIhmKyfur8VH43Lnm2Kh6\nlFTAsytMB3gNc8ku65YYmhi7NgOId9sHMJcctfh+IqHlXmEshByMMMSzz6hi\nfuUXZAuNKRkjztx7PK81h7fMTc/4hI/aoK48OClqzx7rWEF4jVvrKZjqGbpG\nGtWEXvXBZIAv6UgsBbsLkrr9mOO2aoKWfyZQiKoqyL3q52N3dTk/Irv7qTmF\nmCYx3QvX1KBecGmjLSh2DOxdo1kOJA+ZAfcgJPlTGrXUJKWZTJxgJltPMv2d\nHWKv\r\n=CHlj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/touch-target":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.9203a958a.0_1630626427252_0.2525142535129199","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/checkbox","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5360712d733af4fd3657f6e822ede993a9a18a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.fddd5ae93.0.tgz","fileCount":42,"integrity":"sha512-u6ea2zw53w+bXfmm2t4CxvWqQddzaQq3NWdUYBgL2YwaEQW99AeSJAZeXpwAa+BBNdbrsMsoGpLV89cAy42ujg==","signatures":[{"sig":"MEUCIGHwb0z7BysqY30xphgsfMh4u/N/WpW4acQ317RssXxsAiEAhFC5Mu0clHSflQXtsOirB93fpGcHcIpWLBKCi+BvOZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8lCRA9TVsSAnZWagAASQYP/j5i51Api5FI+I6ExlCn\naK01DV2Xy4bzPtquGmnhV2x7FXtelsjiw2snp9gGSxlkabawLE5NDKCn7Ard\nL9Ci5EZuq7Xb066PzDNc9PzTF1SczzYvaNXmNS9Cm4SUpKNFg2f6GkigUqZ3\nPh4DGM5R+56jt41jUqOK2Qt2jaw2/xWpx1yXekzOIe1povYwRu9UL1NPdJkv\nK1HJiF/greDD8Lkw7qt1pd2+3arRpMDVVeHq0rk9mCmvFvPr0/93bnJgeXu2\nz7kUkDVta2rvl5j9Pvva72gLmygi7+t9BBBjYryAYZDPGw/WFRbqYQ+Nx3sS\nXPrktg/qOEtQgY87K5OgrON68UUtSXjaWYhT598bTGPlV6rxkhhhu+G3TKTU\nbu0cvyreQEYH5C2ZpPjOECpK92YR8t/z8lNFqYyDFBy0EPkU0C/crf0+X91a\nkkqmo8TbOxKy8ekTcOw6nVBd1ziy8enc87GAoDZTiMLt+kbrbtyZZ4DcUnUV\n9O+kRen5poRbc54oull33Uq21zqiMSw2E2giXZW0bDMJsEOGWFaQGDMppeHi\nxuuHLyxB2NeA+iJdok8sDqr3fEeNH+EN7AMhMCtCj2eQqX7udQqKYYy2lhHb\noLK5/WI291IwvLC84N87Fr4vYEB14iAVhn9Azzr7Z2NLXWlvaTthngJ1zpqX\nLMio\r\n=24Mx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/touch-target":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.fddd5ae93.0_1630654244864_0.2298366884388645","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/checkbox","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.117599a8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4e81ca8edbe3f79019577d8fe3f9f64ca988990","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.117599a8b.0.tgz","fileCount":42,"integrity":"sha512-hQII3p52cVQu73HCJrz+XSdbXyb+DPw1+3OnyL5XEyjKeuY/1lZemznxMEgC3SMh4ewHCPm0TmNJVQkcbRgOiw==","signatures":[{"sig":"MEYCIQCBp6UtTBYVoHG60V3hNEGZYfk+p8cvKoPnOjB2clQGtAIhAIkIsgi5ENIPj5r/MRprfvIoDcX9vF8YECid1qdzeovf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+FCRA9TVsSAnZWagAAj2AP/01Yd+CNqKdETw/QfPF1\nYZ3xdj910Fc7/txbM0Nrs/Ywi2O5ZdHqU2jgPTjMd8v2PmxZQYi45zQJ6KeM\nUsYKJNwZrwv5huxhUPV1/TLyVK9tuZsqXL73VDnQ8qOmPg/WisQLN4AGUFO6\nWlTUb3fLadYOrytuf4wD3ZjhVl5NFZaTnU2IICPQUAiGR4mXVZaUn94XoGsr\npdYucBGBNuIRNWLHKmXa1NEx0eyCxcURyPR3ro20sRZBcNWWjmmFxdwVia8I\no9mZj04Nrl5iLWL0p/a0w/JaW14mWf03iWT17EVBVPNGnyGiWhmFOScgPy2B\nNfGg6hqoVQeEg4nMnGIqD/2n+psls4QC8VHI1qh5WQ9IJd87B6QIddb9o29Y\nYqT7bKqm2MkXyPfX9gNme2+ByFwxnrq7Ne0RVINoQk+NXnhFhGPPYDrA7MqL\n3OHFf/Gdw0ZrQjp0n6LqM761xE6SAwggAdi+KoMq8qp8M/BdlBEe+kWvuvXt\nyKDBfMtDi6TBVor0wbwSxXX/GNFg6SKVgPClzTcpzqnkC/MEvXEhU4ZE4MQ9\nauCBENGby8TL5JrASjCdVcINlPDcBoQlruTYPMOIKcHEAAEPh/rhPXQk1Tns\nT6SbrA8u/lvlXrlEIiT+qn/RLXcYlgDUjfBCx/LCGxqm5rmr/l6T9PAaXGJC\nzp5t\r\n=RlBE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/touch-target":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.117599a8b.0_1630654341256_0.37545553036827006","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/checkbox","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba4ba82933888e2edf8928281067339fbcc0526c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.e4180d07b.0.tgz","fileCount":42,"integrity":"sha512-PkT5vAavHt6EYoMu4wjzSE2PTHFM6N7UwwpFUyYOKkAgsjvVyTiiws2sMBcXXReY1CCfEhCf+cNxCIFFAnY1Ng==","signatures":[{"sig":"MEUCIGWCUgiXIZnYxkOWqlEXYuidZAWBHzMjThF16Fn0QVZiAiEAxVcYax+AfXxuzCZUWEyv9dQY31NbCxmKqZ8C7oG5A1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+jCRA9TVsSAnZWagAAb9YP/Redap85jDv6pCrb2gRN\nPcr/40Oci/ZgH3c9CFeuVYkApLw313MOV29zSc1MJKlBMNRa31QN20NHegrl\n1aDfLwqHf+lJgsmSrxeasSiR8QNpPeHaxKazwEsrGk0eGMptTNNz12c+MkFw\nvdH7BQhKamUnhKglilt4Y83w04tgnSz2R3g/VtS2eogUsyNzAf4gBCbPSatq\nBQV0gmbvtm/ZhcZmw81XKnHK/NmQOJoPLoh69/gAX6wuDX79fMK5Hm99GPfI\nJbt7T+mnvEUE8zXj2P08qbMV58BKgr1DDv5Y6wSiK76M7VH/IXR+Zh587QIF\nmsLh5lSOxiHjWKIayVlZbOVfFSxF7F/dCqVMtew8QfYOCjC3frKkH2Fo1gZJ\nTUp8zhPiGiImJjBuY6OGn3YgR+ltbwm6MinH0qGfZhy0rG3GtacIZpdcfRaG\nKOP4wo0cE54ktK77tDFhRVrVTEzgDgBtyP9VHm6+LrHoHjulMa6AtmCd1L28\nC/Spzcd9WbC3OdOXHVjvXqjobAwIkGNqljERH/JATmcpjthqn0H1UCKWSw3j\nvuq5A0V1KFdvDyimNsYLGtdsCANmT4cCkxiMev+NtV38zniiEoyPO5dc1tV5\ncMx2MLtS/o5hlVbNOL46CrkJqyXeOG9woIjkxK4Ff+MhybhYpKy5ZKQ5m0xO\n2/sV\r\n=AD6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/touch-target":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.e4180d07b.0_1630654371706_0.5829059020502925","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/checkbox","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.42d175efc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5e4a2261765cdf95eda0418aefbdd33413fb56","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.42d175efc.0.tgz","fileCount":42,"integrity":"sha512-cVtAqaGlart0H9XNeen5zUrMT0s0EY7LJ0Nd0K+GLn9Gvh/F8sfA8aIjjuveJZEou4bf74YIURhmAIAajSP2lQ==","signatures":[{"sig":"MEQCIHxfhGs8ruL/QuAclvyCyr13lX3AgTAI+JuATRRe3OSUAiAJOWWftyADuulC50ST3zuzn6xPUecWZU5fAbUHEb/ixQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkKoCRA9TVsSAnZWagAA7EAP/i5WdU+ZS9QE0x2qxO76\nEUiMLyPUB7T2oRHUrrUr0NRp21eUYo6rQDwQpBTlLHUCWIMZG4NZSC+cwjgd\nME+veATp3Jslz6E44N+Ev79Pc3ikXpZhAnIoBS1s3kGhWYY4JoHDeQ5irahr\nMU96WzFMH15EWNU0mr9wfibVN/phIwTEWUBx8aQZ6ashZ7/aOLfzU8zEZHBs\n7K3CV48vyVfUE4hTwThZzWhyxxS/14pwgHvNy0/GCbWzJSe4RSj9OTs5w/L7\nliEot4J2bhWjQs8FVD6ZITGWr0n7nB5bmLrpD6qvg6GjRuPJamhmAUjY8cW9\nhKYRWotaLrfBo8rSk2dwpCWOCtTKUClCxcBARmJyrCSyAjpT3iqJTiRkvs3y\nnQTleLpIk1Jjb0jXARLBHNe/KQ8rkAW3tnZ2R45+rDRwoU+4k4PQCH+p+J37\nnH+3daHEbLUXgrcyHblZUsqOVP8gsoBFq6EZ4ghXB6W643n2nLyavb6FFxgW\nYuek+AhB6rZM2vqc3RppfSZDXiYP9inasTc8uBple0+mdMd1MnOU41BFW/O3\n9vozHcyeKyFVP9hVhrXsNpWuzV6XXQWKGf0fljMlRI8oHsdFtI3EAaJTkJXu\nXNFG58Tk1T9jluikcJL3nsSr5H09HDDlGTQta8iFtcC1tRxpua0z7zvgzf/6\nL583\r\n=Lsb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/touch-target":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.42d175efc.0_1630683815881_0.6119939823116627","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/checkbox","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.72464476c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"618dd6a2b5cd2fecf1d5a273a3354bdf057cbdcb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.72464476c.0.tgz","fileCount":42,"integrity":"sha512-StKMgdI57iXCxDgae9Alb3Nri/H9V4PRZxbyJ74wGY3UFgzPi5DzafTno/pOq8UuPWfF1+9fms94pKnyDlCQSw==","signatures":[{"sig":"MEUCIQCcwCwaImQ6Ok9J9V9oEa+GY7Okw6z8m4hBHkiNOw6feQIgW2z2K5jWY9lx3wMKjrOsgmOwmakR/fnKdIwPSr4PxPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4ahCRA9TVsSAnZWagAA/WcP/0KOlR/hjeapH37L1fzT\nZblxGIa90duu5uamX2uPRTeM4wDtEl0kntGvQrLKK2yEbiUl/d19h9iYAHni\nmD1ExD/DmgzHb135esXr8gKURZdCf0W41ZJOLVVjUFQdVQRENRJbA0KNpoGz\nao+5D7lRyqLvO8cCmXwqqfomWUdRGGJqB9ajaeAEBTlqWoJ0DJsG2N1SrqVX\nyvJ1NLqkpPjNT7c00M3TS89Tj43bZBRPaHZTzYY3olexWwgRy223kJgTrGPB\nXJNtXWeIIJ070Hj1NatowRhHKqrJHdqeFD7mwSgY8/EeUl/vYtQc29RpxBES\nr9rMbMJhADePbWpMrk24qHiNdCUTEzP7VqFR3kQ4w6cR9+u+MiOH2mr2qNlH\nHsytfDUzAQXdboW23XUlceVZD7ByM7QETQZAwsxb9wMA4JP3jP/wV+C9G6bR\nkoCFhRYz3c5Kx7b+iE5dhePq4ShxKje9PFYyNqNeQnwhUzjyvEIaBsJOjpfG\n08ZVA6SixxgoEOS2vuwbVbbmymkxfEwUdTT7BQQqcF1dHwQifQaJ+mshW2Gz\n3S79jOBQwr4CS4mqUd6bwbd3dvhgEGee5Xa2TQdQImRI+rsF40sgOU7AR0wl\nTapcHIDmhUFITdrje99K/oK4X7roJnBjm7Xkv0saGANgg+/9OhpGF8yTdSD9\nC2C8\r\n=rq6w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/touch-target":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.72464476c.0_1631028897187_0.34763042974976255","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/checkbox","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.37d4db866.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a86871ffb332062cc11a04304f06ffd99ebf340c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.37d4db866.0.tgz","fileCount":42,"integrity":"sha512-J1jIgBA1VW0LDW26SZPsf6xzerJfdOhjXmIcg2yPhRjsuuzyvBJvLHEU0JjJpZNGpPdpOK1bySNCIKGAtQg9bQ==","signatures":[{"sig":"MEQCIAXYAof/jNzfHbcPFOfJldbBHKDpIodDS32VaYpHH7XTAiAU6pNqoDL6pDsTNB6ugAt4n/N0qVxTmN2RJ1GDNKyY6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhtnCRA9TVsSAnZWagAAh3gP/jMmbwKvcx+JCrFMnmPb\nffZnSTmRKHkzwcw/IR3KZJB6klsvPhU4iKVlRYpjWQ4/G+W/nHu++jTAGdte\n36wHekL1CnLcXNzOPgh3m3vn0S/koaICQxIcDa2Gf2u5jDqyp/D1cgHjMr7n\nLssW3kPv3AIvp2Bxaxab/2oi0hCbhL645gP7haBzyaBJB8M4yGPFHQbE+dSb\nMmsOAJ1ToRAZ6lCYlHr78JSHL5UiMej1lW2W/gMZ2MFEvURGvgJIL/PdwsQ7\nI2WOCYcT8KOFJ8tSgmHzjidcaIp2ljft41OwxK353gQukPQ8H2dyc+i0MtXg\nQsHGBaJTpQKFRVGF2aKCCaKFcXtQQoJqG0ul41fS/abTn9X/B/LFdt8Ls8Nf\ngJPjA6y0jMvzO/YarH6jJWSp7b2Wp2EpQVIRwwNCwDl7gtrY6fU4F7w6tVkV\nrbTnj3SsbihDtlpTYlyziMZPph2Hnb1R+VO1eKKrGUxRfCXAtorcVQOnH7KL\nJBRpEC2kbwfUKT2VhP5ff7aOP8FL85n+mwBOhQgejepyPMEMr6z2jbnD212F\n4hOo5A2Mgy4WFuBgKnU8+aBgKAfvWEAvnYRIzBO9xN+Jr4rJUbz6GLvcy/lJ\nwt4as646x3MzqMFF1EjMzyqfdsP3mphuMnR/9Hbny7+fPyWjTPIN17vkfQPu\n+QF9\r\n=7xlZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/touch-target":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.37d4db866.0_1631198055273_0.1379962852022394","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/checkbox","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.6df682e74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5d289c1954a19ebafe5671e57ce2a411d22f6d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.6df682e74.0.tgz","fileCount":42,"integrity":"sha512-j5vHYqlsC9e61mxial1U+NEzI0OXG/OPabSwq3kyplE1nmkwk2vdo+mVMO37sdUA0+CW6se6vZ+0W3GpyH79Kw==","signatures":[{"sig":"MEYCIQCBQywk3LgW6lnRaCKLZVrNqTo/rsJx1EndR/rrQq9eLAIhAIftGuYcQLw7vmB80u/mdEFEzaPb9RPY8I1H1OceV730","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiu7CRA9TVsSAnZWagAATZ0QAJsKvgH0XmNeirLxnNp3\nMHt6VahEYCTqcKr752Hu4wDQ7vBW23KxxXpUJkilx7sjo523NDHZLVjoU/EM\n77ppWAho93j+85+bEWmbQKk8/wfym5oxH0Fp5cuUXH3WG0dTgGoWzjUgj6ZE\n6Dyah9Wi6n1BXKEMNDqsB8LnI9/Qqa63hRdE/pKvUpsOAUe26gJU39bgo5/G\nwVvMCFWUSQZY72Vw5iGibeTwjNk7gONx2fMPN0U5srqKyLgBXEhPGIoEHoSw\ncGeLkrS3Zktif+fuXT8Xb4+S5GrhLKWk8Oydm5hDDMFUYuN8jKqmu6gfJvBC\nPzUzQDiwplPKT84+eHKJyHge2gIXm7MkDX5ERvcGNXyHeuKohTe+7zcSRak0\nlt6vJGc7kQoS97d+g5fg6C6rqnAvewtFuaJIvHga8sJlcq06Yx5cnhKMwFY3\nv0hgFNquBVihOS+ABrs+kzRSB/3SpM7qAcl2R6zI6cTi69sBO+uUYjZYuZwK\nH32bsWbo8JIDPgIswk7SpIU9xTRwm1FlLKev0Ddzov26bpUCj0CBMI1Kl2sc\nubOXmQ2DTr0Ken0zEPk4uxYkWHbH3VwvyFpzkrR9uiHCr/9yg/rmumY/G9II\ncFSTySVjCVCjtjc5c+Vtg8qInrXh+VFgv8dRSfd9n2+XWHM5TFTIzn6dBDUa\nwIP/\r\n=86gd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/touch-target":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.6df682e74.0_1631202235000_0.5678118093323952","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/checkbox","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.b49359c35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e5ad45a3a8c4a74d56764dded96d475fffad205","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.b49359c35.0.tgz","fileCount":42,"integrity":"sha512-NrJlhGHAor7mMmrQz0SCYuVvD5or9v1qUzPRXNkLAO17PBcavi2L6N0egJ+ehBOZT/RohV4is4PLP6t9m6SsFA==","signatures":[{"sig":"MEUCIQC4yfvVdgIh2C60jAicNzGgejIzqLzDW2EPcF/vHFtIpQIgBo7umcuXNKluUIbj5tx0istxrWQemozLAjRwlDTtD+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYNCRA9TVsSAnZWagAAwIkQAJz+MVTzGjvxKtjGkHAF\nnhDUJzOQMdIjfXLIEaPuT+miws8KcN8bRdrM2BPdjvGDb3n/2J69DbEuVqIb\ntO9JYLXgchFiCYGEx/0fArA9v2s6ZRApkuOmBRiTa6LQICWW0qg8+RmOddPL\nZhc4FCWLP5V2BUG1klm7vRl7zQzlQ8gnmBbc7fZaGq8vpXd5M+vAIMIuP6th\nwTcLVfYynwij8ZDMnALBuHGq39zDQ+Hft+xgcAywmsfAYzt3t9FG6P5kcs4j\nhwFv6Ki4oE0l4lIlw19s3YroEDeqzgtfv3eQduQoVwsXJDBOORMFJOQMRvWU\nu2/yGEG8WQtgE3gX3GFM8WZQHdfFz7c1QOTRKymzBfqQpGW+ArJB+C8CAPm+\n2UmbuZEzHAauZ72N45lhdAMsvl72ON7urRQiLJDogzJ8b6aTWS53qRqomq2z\nkuU3qCe8a0UJ75M/IWBDycSvseU5kJu62aLxYx+dXWgsoRg4nioAJmzr7CQY\n/WtmGMwPVNv6CXFtSqfR6aeEei/vSjhjcJ0Qza9Vjb1FkxMJTZESfeiKTb1X\ng7Bt+eJzEfJS6R/CpORY4HkXJYVh0vWfdFOgo6kbFeC22M68XJfawj1XDuEU\n4327XmYq71BW8TZ21evlao9pC5aH0s83q3xvM1ArFwlgP5ARMtIzi5Laz1Gw\nqjQg\r\n=iS6i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/touch-target":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.b49359c35.0_1631208972820_0.1523992541985144","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/checkbox","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4183c4543a5c4693cac910e3c24ac6cf52fd0236","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.470bd34e8.0.tgz","fileCount":42,"integrity":"sha512-DNq3ZbxJ7v6T1GWSN0BB4S/2T/pllOs2xfOQn/PsrTGIxRwS7bU/YgXs21xbRnIDpXS+e25RUCa5xmQfOSWTJg==","signatures":[{"sig":"MEYCIQCF62u+W7w0T7IJ+Q2B5ReHMb62eyi5UOSX2GFvf/iR4gIhAIxKGlxjQWf9m4xmjwhAzBbKp8ZTZ+kjwVmX2mNrIP8X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwYCRA9TVsSAnZWagAAaKkP/0DvbIx6qhCR+F1rW7nz\nFiAZxB087T/5sX23+5fClZfQZ53X63+M+uzuoWdVNPirYQn6Kj3eIYjG2Q8f\n/WmIAOIkVEAvpXuNWF3Y7+9pwJt9blONzSkRZVquFsK/hSffUEQ8bSrzP2eL\n1DOsyR8Ty9vVZfeX/iA9dII9VjWds+1XfNsNg3MVS8fNAI4/REvvjEjQoGUM\nix68NonbjvHxYwUc0e0GNR3WwrwqxpD2kaYXacezWEss10uad94pN34vtXGq\nG7OyiKjqxG6ZrYmZuZ4CFJ+X10OEF2IVDDOcB7RJ44UeDEjJC2TAfM/bms5w\nl8hvCerA5Y8X+Mq7idL8V51PHNb2pc6EBGKHKOvj1ELJfoeiNrx9lWBDTQuQ\nqwtO37vHGyesM3p4Yd2jg29SGIDsFMffPeSbd7bq9pNnNIJi/3bZAzMEz8uu\n4tRdCP/8MWzv+TSsTG4XWx8vAJxiWY3/7uuiHNO8CJm43uVtL4D23nmlUoFg\nRD8oEdcRcwW28MJRE7IbN3ngm4EySGlvDqAmGI47BDWxTYWz3Yxle5WQNc/F\nmf0TgNu/YV8FYSOtgGYtIcn4gaXXTrlJmK2ctyDbGXegmflqjN+DpRPWTWUj\nYitirigqfuK2atG21vctoztcIMIyvDetxAHDEF/rz+oXWF9towUuuwmGZMZC\nWaFY\r\n=JcwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/touch-target":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.470bd34e8.0_1631210520144_0.9455297724237564","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/checkbox","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d48a01771.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd5c43abba434d1e31cb84278c0159a4cdd7a8a1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d48a01771.0.tgz","fileCount":42,"integrity":"sha512-85VO/59jzjexrDy+hIabj1uU0AP+JSzo6f4CEL9JqN3Hh2aBmRhRIXsaTEpBuQeZz10wu4VWrB3vyZ/8V/dI8w==","signatures":[{"sig":"MEQCIGT0HFnOOcuTrdSJAz7kdktYQ6UPCKj6vCgGZMf0PdTuAiBOHAxuVBv4AeBuRg8lcGeZ43KE6mulG6aYnaHkPRhXeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk44CRA9TVsSAnZWagAAzGAP/0qYkdwCp6vZRcqwSzS7\nxodDYKicwxOKUl4V2YgmmNfRTDyzxZL0nlxeyeVu8FVu0nlQxjJtkqOm/k1p\nwckUeHaJHYwJJZrrX75pZe6wlu+25Jh6D1kU5XFCrF2atEUXDFnwS+ncRD8p\nJ4c1+PdFc4u2MHlzvMFGkya8CeRtRPYHIV2u3iq8vpIlPt9AQUKGllfbePsv\nYZmRoKm22Gv3m90jFnIFMx6/C5kZbpgcaL7uycHyiXeeqetntdunin5aolL6\n6MCiRr50WHiF4dqCXxMHmlM5ZuQO8hbcUTTUeRXgbZ8RAEj4sSdHKJz6uFsh\ng9edOns6fW5vNeYjp+H25PvxPjHTc4hvQKhmj0xHRgroMDD4d6hyG0CE26o0\naM1CtNV0NptsR0NmYxcjEe/kHkiR0uOGB/9m9oUPlgdvOjmOX39fs+aXtAFc\nDh/bNjQRgwyZ+G1VBPdrqiF2Jfw/wNk1tXEFfRdOqVqCDSGG0m34YatO5aQV\nxCTcaUs/BsZCXYIbi8mvgSaPKIPAfWW4xx8leXngGNa2MXQFiB24kDS6gAR0\ng9VlIxyab/N7GeJyH+hcnmEmb6HeqsrQJt9Zz+RKhJLxGfieVQpn7mMvgNYv\nfEoZ8B3ZWRrEOByiSphXdg1hLkR7TIM12veU8hWT6F7qlhMg6lu4n0AITbWN\nhUCw\r\n=npdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/touch-target":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d48a01771.0_1631211064732_0.7056906072495441","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/checkbox","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.13db34b34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03dbeddbcf45484becc207b4fe65b921cd3de35f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.13db34b34.0.tgz","fileCount":42,"integrity":"sha512-1ht8h23dljMUdyqOMA/CJPM9fCYpcItALqsRrBaVKEeTQaC1bnsIjQ6oJwbU9FvjbTxWVl7LaAymARQiX3UMJA==","signatures":[{"sig":"MEQCIFODpY96/ZajBzkDjshmoIk4S+JXiSvyANHbv+2bkaWFAiAcs3UD8rgLpEXL5p25o6vt+qsKrX6lyeYFbxRatgsh1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlG+CRA9TVsSAnZWagAAz5gP/0XT/VPLlHrKxADTE79w\nBqmZsBDunB6ADqyJQ+oLF02zk9rwW9Vks+e5Yoq3p0vRZSg1EGGb5fc2xAfP\n11APGrW1TcZIDagzjp/UvHETyUWAKjLJ+6osRPfxekE2XldVxd3IcFHb6rp8\np3YwYOXlwZ2KOO/Ll179m43HAkeRS5xjspeJk8C5oorRSqW4ZXpdjqpIiYkB\nCi1kYHh/yQnx7Sr3bwQ0BgIwDRKmww4xzNUC9bfRDTU+xZxEXeR91P5MIvKk\nWkyoYaxqOe8b1aoljZ3AxNRs6hyq8v5MPhCuguFhHD4NgsB5Gj0FQVKUuOHU\nIURqx4iNLs3dLPOjktpOX3dLQbboKNm5d3+zwvGNEzVMv3QFbZdiabPEFEBc\nIQFcaneP/uw6Z25E9lh/0dM5fvM+gY+I50TSUt4HBNdbqlOpiW9ovIoXZl8v\nz+j0y5A+oK6bCjxvELQbA8yKnHOU0UupHu/jf+IW2lzjJlZwU9b/2594fawV\nJM4MjM983VeL+P5qkymWKS2FXofnAksrDteBBJ8zMyPT4EPfUDdwN6NOC1iy\nDUM/G/CyrP/4fuiQQ8s5hmanlntkg2Opx+jT4UazGxjIdLfRUDA3Fm2iIZmi\nwrdYmqGqRFOuXQ9kPuVmVS/E9BTXwYow/UiWKMhcgGeH8Ufbq9FfPctedu+h\nCTy3\r\n=UR8S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/touch-target":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.13db34b34.0_1631211965984_0.23032492463261356","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/checkbox","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.864798678.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e20690d77d3820a255091761eab46c01b683381","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.864798678.0.tgz","fileCount":42,"integrity":"sha512-H3s1aHvE2Kr3lveaCRq2PrDL3CciG3hXDbDMvDt1PYx14EXgPylB8zCXB4kU9ka6jxuxlWOyS9li6rJfg+ooCQ==","signatures":[{"sig":"MEYCIQCdbrz5wqItUbHYpAMSzbecDgyiS1syO4f0IT6QBvVMkQIhAPKDUQ0NayVeZPS+KjFoM18Iqy05DjqQBQrVzo9jcRWm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlRtCRA9TVsSAnZWagAAQl8P/32idzsW31/RgFkGaQy1\nH+cOUi0/DgjlZHiQEHbta8JQJrP5fTXpivOmgJS3HyVOMLh59VJZS9Fx7ISz\nyhWIrWt+majXJPWpUPr0YA4dexrh+ILF5iJlMsotPP0nivkCE9HDCoxykIdG\nDL2A2BrG9cRhP4a8MbHDyhu4P15eF2rRU24u6SyjRfzZ7pqeP0JMQGSZo/RK\nmKwoaBCYgGO+lLFyLOwxhUefjTjHFbE+yPWxi7UGbTpDxFShphK06LYR+Y1P\ncu6r9pxfFvzLBFJBbPiRx/Lxk2TdSfzovFwyh7gGdsuP7xqhQu7JoV6leERj\n5owTole6I4CcZ463alq4bW5/edtikeoYl/BqMVJ7kYSloNZ1bA+vzCtlU+5X\nXhDGnUtJrNN4n8Gt/MpCaLdtcx8MLMKBrWHZWIP6ZibIRHmjnufV6FJKF68U\nOr1uRB6iYJf/ENMGTtJz0+qmNkTfrwdGXC+tsqpCBmTGVPjVvuGu9M0qBTfn\nNaVPTI1b/iXVL/nm9wwscA2dKJmC/NnKV9TiKbDvjZOTxmBABEH8TrDfhkSU\nC9QVpCe5SAk0Tjl1W2hcqpI3TUAHZlak0Nq5+0i/CnxKen3fgZP2cXJF6dPg\n51f6M4pR7LSckza+Y1rSDJoSK6hoAITZAL84Mz3fVmztSTzXLa0Fx7v41kSb\nl/3S\r\n=iEMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/touch-target":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.864798678.0_1631212653102_0.3881321173202146","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/checkbox","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bf3b842512d1c6aa81c4699f618cf77db5daa74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d04bda3fb.0.tgz","fileCount":42,"integrity":"sha512-F2B2eL2bwFdlL6SU8/0Ldhde27pcxfOhqsal5j/LfX3Wx89Rlir6nea4t8KX49tskQoCGeo+uk7f36dmbhqYYQ==","signatures":[{"sig":"MEUCIBDetO4pIpZRiF/fxyG1k9nsguTb/xHWOaEqRaygpZlTAiEArJb4SrG6F0ldjyz7QhuZVLm6CJqaQQMK6MB6szoi3jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3gxCRA9TVsSAnZWagAAWBAQAI/aHpP4RUh0haCjeXBJ\nt95emrMXGTiFxotR9NiHyEcu/wk0J7zs3w6IhPLrAoQegYJM679aw5+nPV6a\n6EiOygF5SPIfeEn3kyByfCx22/g+Z9ogx4vyns2jye5fYxi+HH+pi2fVtwcA\nt2YndMXRl/6P0CxFlKgon37n1H8O3eclnRy0QprbtsaiFnPD1mJLfBQDm0ln\n+3d2PMuS11KSaLNYtBe+n5+9SPPl2to4/Fc87wCoajbaIXWYNxNvSNEoMhOW\na7JIR0ndhti+Ki4UIpLIcjdLAJE8VJhVqy4jPIIO6L7GRvGv4Znf5MLdTrlW\njP7RpzGuq/OQjCoXZPfHJntSvEpe1gwLW1coALb8XbImQSEEkU63HHuJmrN0\nZHdwniR6s99gg9eRuz09AOIUXqBnGkW6+WD7OiZGnZtX3btFGCaAFXIn2XuR\nKGxMzEyMpx4doHGRfguZmW7kuh4hPxcBEKMonbnIXmQLKOLBNRMznEEr7/Q/\nAU/BSZYlQGqrKQ3fwiAivj35vcP5CriUxJ1drFqRAKO2tzRGrQF6d4HpivS3\nlbJHzDaWWFw7MVM3Lwq6e1LRRQKTMfbFWl3w84Kp67cpLslqP7a838CZdOnN\nKNBIV8T4rmLU3wthEXYkyRAwKpvGH1M9sSAQq8MNlh8ma2XnHihRmErBKonI\nqt62\r\n=vjzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/touch-target":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d04bda3fb.0_1631287345517_0.8936144665269454","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/checkbox","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d340ac689fc02b83429d3317fa833df2084173d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.5533f73d3.0.tgz","fileCount":42,"integrity":"sha512-qk0ea2BRpTzx46xMg8VboJ5wtOukr5MCzYkS+gPLEjnfFjsG2PhG0Qzn9V/ArIzBp2oy4WOAZi1qXcY8fAsrBA==","signatures":[{"sig":"MEQCICY2+dR1iR9iA+pcLc6PT/DIA2Gn1w8mlL1KYG3q/a1TAiBUjDhi4jOixL9d/eA5XSQGk/54tGe2v1eNyJ4ZZU4WrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9j1CRA9TVsSAnZWagAAMc8P/0XyYo3Ondz1I4OM8iyQ\n4ay81xha09M/7mtCdxqn0ByLHUVmI8ZwIJ9Zcn9Vsa0QpfkUNG2lqhXVjjhJ\nKXDm2ywLeYb3vFIcCzI91n9IFhIayMR/VOflzI0k2O9OIoe1J4eCZ7R/QP68\nlkU8uwB7ZvwofZ2oebOxVmvSWFRQ+WsRBP76rEO2aHu7w5qgVDxCGs9EOxNC\nQpy/U+q5xsUtpx678GslQYRMWImVTrvCp0iaIDmf92EfXia4ozROA8SEYGL3\nsY59TjUs3kb76Oe4IQD7J9PTx2RFN/JLHyVbB9RGrdA4lPlbbC4M9LQluRw+\nMXpZWxZwXYQcS7UFhGEF3D++WSCMthfcc2KLD8sMfCnnHSGpnHm7vu0PjZGl\n0Qk5TGVRBCv/AvzeEJLREY/uYh2B3RGXm7Fc0THs3lY6c/7bPuEfSe0YSSr2\nguUSSRiVmMeLc48HlFmKN3bFPpvpp385FLOnGUK+lJVkPF3kvgVzegMybeEX\nHVbDt0Dlx9IqxcSmX0elcJbldEs7Re6S1q/M76XWtrc6HCG++Wugat0WnytG\nU0ahKlHdAobXSIcjWT+CV/td4elcCbptvf4c2dc0gxBDDdbzmX4EOwnktoCE\ncUGl2M97dvkGrYvXoZQDW6FU6u4NQlBiIaBdW4R4sILjiPX3/SINA41htNcd\n7X0C\r\n=qPwn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/touch-target":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.5533f73d3.0_1631574261238_0.9321387019974681","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/checkbox","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.08398f880.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecab1d6bebf8ed49e9b241c89f76329f852489ba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.08398f880.0.tgz","fileCount":42,"integrity":"sha512-8z/O8pUhbH9hZc8bqiPGOn9HgF8HUXu3t1HyQzd8ziW1Zbr5nCi4/1jxfI+v+UnL9GnBbaRszAA+/iRtIUo4OQ==","signatures":[{"sig":"MEUCIQCPxIvcYJzsaBOVzLUmcQ9/TZXvgIJGNTYUjAWz7qNxEAIgU8qCqI5PmVpRKHY7uCLItzW9T3uDf2AEA7NZud39Gts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":738735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+AlCRA9TVsSAnZWagAAKoYP+wVmmr2A8MvALalWm0YW\nipV1ssSyTz80kJEztAkhzvxSBi9AvQtKo3qsmLnQ857JauqlHF6x/mKHN02E\nYnXu77hHPoZTOEjbjtPC1C4qtnsa/euz0ogfmDY9Mmi5opGrpOrnapZM8m9p\norAxu7ezT218QTHjvkYhVLBPxloTgUg2YRGSkU9taZjcEpJC8dI5jvRqX3f8\nwe+ZtUnitvciUophopLfeLtw9uHDv/qgTAJMbH6zEohv3iPFhrxIuFKYv6p2\ntVNbjIttkYpvKP9/7jOtzugJi/37nmFWAHYqTnExf7IgKdU9Cl6rBUSFe93I\ndBxhv1zL2yRwM6kMI+94VB5KH80rkg4DCRMJO1YDZloRACuvkJe+7s3fmgVF\nWTK5sUt25ZmAkl0BUVPNDnZUjZ9aDw9NjsatsjycXEQwhsg4pfZNlr0/dYrO\no66DHZv4/h14btH0LjxMrn3vsMLUHLCqCKTZgZzAvJ3ejkShD7oDqJq06DRf\nVXsPJ10XeCPkdeP4sdXa79qqDzhs8fe0JHkD9/hmJhFpJfBDBIAwAfGwLSyd\n9ol++IFxduFh5+q7aumGA2qW1di3VoA169NelW8/vMc6vmjX//U1Ie0AlAaa\n7jnmUXXoFODPx69WqG4DIB4lUij3uQ0W1QY6WIzSVkpLG8wP3f/Zf14zixju\njNrl\r\n=O+Zw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/touch-target":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.08398f880.0_1631576101578_0.3145321755210768","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/checkbox","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2aa5994127a2a60a318fd7f4e6d3a7188b961a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.818f4ee93.0.tgz","fileCount":42,"integrity":"sha512-LDa2LCOWvk5gwayv0BUSr1hsO7udhXNZY68IApnS6/MxpHS1pGe/rD5xwsgLYl56x8RFlzjqkraMa8X80Ilh1w==","signatures":[{"sig":"MEQCIBclb9vDac2ps6gtLEd+1g/JXqsdX8gTEVCKR9rz6D/uAiAnBZi2h0euiUsJYyHkYLHLT5W3KqPRaDLtSf7z37WOdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":739041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKGCRA9TVsSAnZWagAAMRUP/RRCtjE3NvA/GuiYu6Nt\nyVcARkFv5rjJ9+GKlkq+oHpJUvExy5gDj6nXWqFx4EtyTgRcMIsMudyOxM2u\ndp9ybYdn8jENKVsmh54EDsYu0YzlinoMrkdjJYUEjv/V58BmxQEED6hhlzBR\n4XAXaX1x877Yhws2HZUpgAGF06XFMXshAFOcjpW3V66GHl4kclN7oAQSkhyB\nl/Z5C2/6OCTOmmh6fESRLv4Wp83gUpwMjdmEUytOfaMlVonVtru6Pzp0rmRQ\nlzMoSruF81i7LcvQE3I0upcKCof0+QaE3X35TdhdEVFqZfLqP/Kd9sWN7OoN\ndp2Iq4EoTi+l1JRwmIu4/Hxe1s+tMqNh7bnO8tEyOHdRUF0pmcEAvB578q1J\nXpELd4+agQlTGirKkh6LSFwoYtxQpVR/qZ8gvAdMrEjNI8YYjX3bIrI77zmy\n38s24sqAaOtA6SwHhWYNU5L8R7xhws/egpxec6oHo787W+nPTMmhKvpaX9sa\nhDsw71Z+Ber2yGULTIgXlxDYEUzU9SrfCcM9P29ZOMSEbov5Bl2x0Dy+4/KM\nyqQFUyRKKfFiBOWve/ThxxB+IZvIEi5xCmjxh1fnniVJlmE98lOIO/k9Nrz+\nRwHFvWqlPlDE1GUamkmbDFfTEaM9O/V7tc730W2REIXP0sikrVbDpJkbtljQ\nGar1\r\n=Jp0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/touch-target":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.818f4ee93.0_1631728261784_0.9968790396707592","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/checkbox","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bde37343fe51b7d302b8613421d2a59d7bbd01e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.8355e14dc.0.tgz","fileCount":42,"integrity":"sha512-R9H+pCi+Ag7Zqmt30P9Rt55gLhC1M72au+K5khzVngKPb/E/azg94aRy529i2ZhohQQRmzNAU58Am9Cr8SD67w==","signatures":[{"sig":"MEQCIHgSAYjhiyZWbR2xeW5ONq6aY0Iml82ouCycJWoLMG4XAiANXRxPeXtatxmUA+UvChky6W8IzcKjfpl7oJ7SDvQs2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":739041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkW8CRA9TVsSAnZWagAAMdsP/jw8RMtNNbPHSNkcQhey\nBphDKDQgNCL8JWAgeO3PJVHgosZiLXOsJwUAUwGPTuworR3Bq1FsYx0pOPLS\nV8lrBLtRE48fom2HXN3F7kbYZK2/o6l76ca2x3pEg/eJLd7RQLnhx4Uo/AJG\n5wap/Mbe5WgPmugFx6ECfk/OVv4vxF0BuxAI5t9szJP31QvGG3jD9cg+uE7T\ngKd4ZRORH3+c1xCpVOzitZHev3W/DZpkE6x81c3Ti9M05XvM9zpoCeneDhwu\nRqY+g1rGy9O0Fyenho1InZek3a7FFfZ4yJzTatI/PY6cX0nTLdhZoS/t834p\ncOguqqg8LGRLaO2KnsX/Q/RxLh0XzJ4zKYpOaKAgXPihz/dzBCJK7FAegjge\nNN+ZIn3wxh9ivLjDkBkXZzFFYKudpcKZFIU9lwYdPwRI7TIWnYnyQJB4I3Jh\nm+3CBrIyD4tlRe0V7dEbeEXATWKIXRrWSuRnTPj18VJNe3Y7JNNZgS79kljo\nkvuwbQUSz1rgl2F7Cf8llZXnwKBeTfy9Rb7b2XulnV+bssKDplRmKWT1oE+0\nAEqx3b5DUeDBDqMbtq7N41VmRFX1B4qvDZUoSCXFf8GpRa961Chf4fxrNHNq\ndD+6E4ldbEIJZZLr8uEE1h27qLGYxgWYM056OOiAHRkuZYZjFlx6xw07JtGu\nLj19\r\n=mHd9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/touch-target":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.8355e14dc.0_1631733180274_0.7369079001694754","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/checkbox","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f57b925a3e61db9960eab1fd15d36add92e853c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":42,"integrity":"sha512-6CTSqINImr+c5T6ZjPZrDg8hpPTy0PR2FhNWSB2ooCNDatZQKbJRCZK5oMFoxDAS7NmixS/hhACLGZ6vkF2ZtA==","signatures":[{"sig":"MEQCIEiln4EYvI46rYDr2VQY18wR40NuqDp1HBXzQRDh/2rCAiBk5U781fztE+APBg8+KqZska+H6M5oFfwnZ8ZFT2RU6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzRCRA9TVsSAnZWagAABpQP/Rl0C0f7Q8Te+IqLF06I\nUdNdtMyQTDfEs/KfhrEI8jOkRxKq9I2pleSlWrQEQkn7SG7b3OiHyoZcyOXu\njXBBYzBKiZwZwdCV0MlDRcULH42EVkRX2mn7RqiXaS5xIec10uRDvdX2s5iW\neTtGPDwQF1RjkQHgifEEVkxuNHngxkPzkcDEv95CCZ9wOuJFpg94VAQUZO2b\n+oQspCh1Vzw8ZNLluD/oh262HrE3wdUaHukLYvKfhc1VDged4w9dDle6qr26\n5AcapQLk8TNANIxTXuU5B8yyYMZQsxqlb3ykMPD/o+yPJ3vNUvpYIzYXjChy\nDpQ/kiiQiosVqZ69kPlxnHD6DqMEl9Ny/xJU2O98AjnipU2WFh127CE8LRxA\nfAOY+nFGSAG+Jkh2M4vWERD3XvXfZWD1CKaLOe8O1luHuLOozFKsIcW4dN/k\nyvEfORen6aujIX4KUjFPll1vsneFMu84NWnlEllLOgpRHtaNA9nlFPrahpCe\nF/+XjQAh3HzJtnEKVpI35w8YNxQF5+nTCwKoUL4AAn0mzT7SxaCC5bKC9LQR\nLVSrugoEzL5R8HiSnLfyaksbP68yETc0nrCoCyr+PxxELpNZ2TY/3V03i7xK\nBgCSLn7TJAZ6tbJySJHDG1Ju44YW4GzJP95XVT2+xfIba/+3ze7vSX9biY15\nQ6fu\r\n=Hbhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/touch-target":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.d4e16a6c4.0_1631743185684_0.611780855679565","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/checkbox","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19029e585e94bd00de87d8ff79313af687526fdf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.65125b3a6.0.tgz","fileCount":42,"integrity":"sha512-kapFCXbUHe1GbjXQlsJIsO+/Vo/ahXLf5vNQ5f6IyKopFWEIPx6OncoXqgqX43ld0uWbK8m06PGl4UrjtxiG/w==","signatures":[{"sig":"MEUCIEsxIlxEqMQh2laQWpo5xnX2v6yh0lmZ5zN98PM8LLkIAiEA2f55Z5XKkiRlJ6AVwR3BSbJktzLnY6ry9Q/xXlY8I70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SLCRA9TVsSAnZWagAAf2UP/Ryk79l+sCpJaGmg/hXr\nGFqwLkGvbE5F0HM5FVRbIdrDFF966ViAW0f+NBCFabVc/Xw+JbAle0cPv4r7\nMXlNCax7Ks6EyNuoYff9MiGSa5TMkZeaFJZjHStieaNf9VXfw74a3xUeKl+/\nSCG5m2xEIYGVg+1bvyHlJr+C/Z4XBK3eE1f7vtyprJMSVbGk239XxyA7aBlC\n+FwOfzzfahURwYnmP17cyGHhfJOmn6kuY32yoOpM321xZf8iTRZprSHQzi2N\ni1fGabJy7bRnPrdyHsi5uBbJnjZHpko3ALdA2gmB3lo7WC8HC3gKCZZYalbl\nLpp17OlOfaR/SIYc8GgZfcZ2kU47+uPWWwJjfIYLKHyM8oDFNTBsNsLXT4Mv\nBaxa++I6Q7L1FcZk4n6KYACevKpaoXd5nUNYQ1ZtVu1k8Q6xPmY0gWouJl05\nN72quMcm2gbAmGHnbdzWc5gZG7WTnRIyc44NPJMcGywDuUjlJOibht+EyVjL\nvcum5XSqMw2h820Hvmw/tX1tNRsch0vlJ8sIWF0OzQkz/yFXY6n26oIKQQ4N\nM0l/wcAmzrlCtlWQGj+FjojxAMc6MJbdnWxTetLJwjqPgVI/rObadyL9F1Cw\n9ypTvbXTyrfSSCmoVkeXBIbAIvM2WQb6awAr/VeTM3FuMM0dVbv4goVEiRWj\nljfV\r\n=zVCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/touch-target":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.65125b3a6.0_1631827083202_0.6044683770214219","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/checkbox","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.80a583365.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94968d310d019ff853472e2782c68d05293e589","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.80a583365.0.tgz","fileCount":42,"integrity":"sha512-WKR1oBa8yI6Otdv6xAHKCevDVwGEziT8OM3+x6dsS9326TN+cxxKWyuG0QLJGC8jwUX7WK96kmv79KK4uLzueA==","signatures":[{"sig":"MEUCIQDJimnmZzaiGy6z5my2vakApDd/p2MnDJ6RVdr9bI1m3AIgWQWuTQ6hL/Dwqb0n/jMadOvZ8oOHjW4MPjm9ePiWOVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/touch-target":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.80a583365.0_1631910973399_0.20770391338294925","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/checkbox","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.83900936a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e19983bf1bace89419451410ba2b22520aefa9aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.83900936a.0.tgz","fileCount":42,"integrity":"sha512-1ZX/hAOwQwNhueMxOV2JuE9QMxDL5ffOzg+P2v+fibN6jF6wgqFCgj4PZ75wawkzhQ5azhBHnolCrKU6bO49RQ==","signatures":[{"sig":"MEUCIQCNSLhYZu4v3fQtt+Nh27RA5HOgRqlesEyaVvwztBCsKQIgPxIBlp1uwGknODhV6x7FBQ4M6a6c6djHa5y/Rg0aXPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/touch-target":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.83900936a.0_1631921082901_0.881061859014056","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/checkbox","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac7dc5779cd3d3a0f284b0be688261ccbb6c37f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.860ad06a1.0.tgz","fileCount":42,"integrity":"sha512-RemR5R/YB1A1T8CEFcYImgMkVDXyEKqTL57NWFzL5sTt7sRwddaqb6DMkDNwzr7jKQgCI6ljCJtU0X6LPerECA==","signatures":[{"sig":"MEYCIQCNr9y4cR2I5Za80z7E6XjJCLVQzJDKMqJdBPWGQ86OzgIhANJ9Y3v1GQxcQ4ZyhJfHtYJ/8QM6huZzu3jG6D4ydkjc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/touch-target":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.860ad06a1.0_1631921782686_0.5984177897103717","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/checkbox","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f44c12149fa0e131138137e30789411b4662a48c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.3b8d4429e.0.tgz","fileCount":42,"integrity":"sha512-hVew8eGnKmSkxDDxfiU/68ou61Vr2Sm2MgeuTUSQfh/P/7fAlJ/7oupeCDMqCWGfpMcaCvcynatAKBbkLJsStQ==","signatures":[{"sig":"MEUCIEGYlOqGCQoCUCTFWaCc6RiJm86dOBFeL0PHL5z5u0hsAiEAylPJm5a4lLRwvmSa1FqTzamRfo1JEAD8/lXwZEqCyuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/touch-target":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.3b8d4429e.0_1632160077841_0.050557970959197895","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/checkbox","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ae044feccb53682a7068f593ecc79f58114cc7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.2da3606b9.0.tgz","fileCount":42,"integrity":"sha512-I87maFsVrHMqXXfWT5B4BSg8Nmk5nQDwoKXMakg6+Ty1tIUvbqcJ4vnybbFcn7cdwtuXDh2tI447G+rK22l22Q==","signatures":[{"sig":"MEYCIQDOZXqcO/IIlSmVQwr+XTdmUWLK+IFJCiQhtmEUdQlWawIhAI+hh5x643gjUNnFInhzFdw3UaHhCuUJo/wuWAbrp+H/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740135},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/touch-target":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.2da3606b9.0_1632166684871_0.9775276027418933","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/checkbox","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1809077d149d29af16e0da3c68914dcca3c4eb93","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.e8c598d1e.0.tgz","fileCount":42,"integrity":"sha512-4SKkAXRwtPmV1gczEk1TamCqSG5mg0ervM8CeLy2WJs7i5AmrXmNZWFcBQPUWFp04DJg4p8iqA7PAkWCi4ptAQ==","signatures":[{"sig":"MEUCIQD/+XPix63AchHHrf0T0ctPONUQf7nc+h3BdVXVPyFt8QIgHjfaP08lSm1mW7jpqrzMwwyxy5WSvyItyXIVVUh9vJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740507},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/touch-target":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.e8c598d1e.0_1632172337587_0.7372822990630774","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/checkbox","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2089c679f2f592fcc5100096a5e6c97fc37fdfb8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.1340ee9f7.0.tgz","fileCount":42,"integrity":"sha512-7ZwE4i5vtyqdpoULYYm/S4AYEfN+EZkHxYYk0Ydov/H1DTz+qa52Qlz6dR8jUPmhrvHyC2VM9aAaOR4M1ip1nQ==","signatures":[{"sig":"MEUCIBLc0c9LtIHTZca1vGtBXmCklaDLbota8NX4aeS7YbkgAiEAx6NH19FohmUxZdL36WMT9n7eVJSZ3Qm+NmADK3HCtFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740539},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/touch-target":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.1340ee9f7.0_1632333498257_0.32555538933767725","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/checkbox","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.65084baff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c7f7f00ebefd4292e2ede9841eabccefa0a612","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.65084baff.0.tgz","fileCount":42,"integrity":"sha512-9Ag8cYYplA9yGV6Ve2NnAtCC2wRasgEe8QhOGVn8+jTauHYnu0z6++BV/9jdJsGqd2rMhopHBmWLjVYbiELcZw==","signatures":[{"sig":"MEUCIFVaZEaH+enR1TdO2FaeobqfoOP5N9sJLK171QFTodaXAiEA+wc0R1ElMgqhKbAEQv/qqyoqCIR6JVOexHcGfaHAAa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740539},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/touch-target":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.65084baff.0_1632432352603_0.9236856109160114","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/checkbox","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ce5703a2f3f33b82761a415b97bbcd0501fedb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":42,"integrity":"sha512-1QUxzjfCJZpIt99slSChyAOUDaQg0rjUpp5jOQwzGleshk01I/ZliIC4LX5fGCWP8N1XSrxBNr8F+LMjcwT6GQ==","signatures":[{"sig":"MEUCIQCcze3fb2ZxqNs2QF1iItddapbZsWIOj2AcvSrLqpc9LQIgFd1ZVOzoUSXtmG25chVDA0cmFzkcBQN/TA7XZh24y5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740539},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/touch-target":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0-canary.c79aa0cdd.0_1632490938372_0.8529301738520159","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/checkbox","version":"13.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@13.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7ca7930586102a748998239672f62724a90ad9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-13.0.0.tgz","fileCount":41,"integrity":"sha512-tRC6n9Jq7GgdU0d1F8NOvUy6WiRZR58tUgL1QqoiQK9PGKSt0dAF3Aa48uubO7/Lt9K4NqgwV6/OeHv8pHaM/w==","signatures":[{"sig":"MEYCIQC+Q/eYxQ9gk8zj8tkqtDQWFzvhwuJUNRVlaObuWce7ugIhANeSXjeyF4WyHXo8w77OmRO5Lm7UrItkaIwHqFqs4aKd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":739417},"main":"dist/mdc.checkbox.js","module":"./index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/density":"^13.0.0","@material/animation":"^13.0.0","@material/touch-target":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_13.0.0_1632512775869_0.15869290405252445","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/checkbox","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.198431fcd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd0450c88795c6836df1773eec64fdcf20ba4974","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.198431fcd.0.tgz","fileCount":42,"integrity":"sha512-++W0ivnabQi5ChMu8TsSR9lDDSwnJ5vcub6dTCC6eJMiYznk9MqXJM5G2FW1WlQsqn+AYfJAc+pkgYMEiNF2Ww==","signatures":[{"sig":"MEUCIQCxa9y7yBSuuOe615ttxH3jlmrEo5M7mh5wEYVyeZJgZQIgLg1wgIZFP6Gv96WtwwyFQk4dJZocE6uVtFrR+HoVd5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740539},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/touch-target":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.198431fcd.0_1632512820273_0.9319617361000887","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/checkbox","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a96660515921b2b3e5c4c4c67b2893f270851e53","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":42,"integrity":"sha512-W5JZUvOYa5GXzA4Ve1gTAi+WqsLolKPZfXraY2QIeY8v0AvuibiT/SPSUgp2Y2Z4f3qIS8+s9y0vuAO6mGz+Dg==","signatures":[{"sig":"MEUCICgoUv7fjC9kpSj/Qk89SRCmr1Vaj1CvFKdnGvUitSWgAiEA85vZJBp0b/skpWrhMxi5mTXmlMI3yiPqc/jpikAfg8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/touch-target":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.9a02b6ef8.0_1632575484316_0.16272265663327046","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/checkbox","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4fdf1e22f9565f81fa69a414e3f1fe5f106d960","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.758ce31d9.0.tgz","fileCount":42,"integrity":"sha512-zNBXRq/C6543lbmskEAOlgChTEQ/LIpTa43/Q5YbLWenN2ySAT2uWzVuWXRCNQuJrIwUNYt6y1iRzgTELm4n/Q==","signatures":[{"sig":"MEUCIGSJ2UByxdxo6ZbdRUlcOZfvwNVIeijKjLs/uv6cNQz5AiEAh9Va3tyAId/n2fvqW80KCRUqUDMymihkwPf5hgqd+hk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/touch-target":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.758ce31d9.0_1632763777907_0.31338741706576867","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/checkbox","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3e8c199cbcfcf8c3ad93a594472fabf9b3e0a9c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.86b50ef74.0.tgz","fileCount":42,"integrity":"sha512-Z22ajjFk75lOFr9vzOnCyYF8cN+qrCbcyLZhQEKGlEZyypuvZUQmTFhqWgb6UJABojcJdGa8Zzov8QMi2ONu8w==","signatures":[{"sig":"MEUCIQDVhWMjceXTP+pKNezfgs6pEsjFERjRxiWlPArDRHgYyQIgB9eyIP9yMAp9b2IU1PfP10+XCRR857VdhhBo57rywzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/touch-target":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.86b50ef74.0_1632851006382_0.09802785621367427","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/checkbox","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21213885d5d1e6f46157e2dcdac759c4f4774d1b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.b2fe3528b.0.tgz","fileCount":42,"integrity":"sha512-9n/Rc1Pr5eLWxju3fYRwPtV1rmrapNO4M3Znmhds938+RYLEvsWzdsAQigOAIu4LGjjIHOi28/ZLisyzf7jj+A==","signatures":[{"sig":"MEUCIFBl2EGvfBwqT7SSrm8tZEc4oujiSwrvgg8em9zUIqlZAiEAm9xt1lEVWuGUsMMw5OIyixwy96mrby/eOoLQ4RoS0KM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/touch-target":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.b2fe3528b.0_1632956237904_0.7753316427719312","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/checkbox","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.586e740dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"798cef6ba44c92ee1100ed352e9f62b07d1d0677","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.586e740dd.0.tgz","fileCount":42,"integrity":"sha512-xZdcQmVV1w492rF4o5cA1ppbPf5XWsxcVWbc1KqGL5pnM3jj4Ee9zRBpdaJY+o7pdbWl5vCh2maEzbnl66ibng==","signatures":[{"sig":"MEYCIQCckxUqlNxFRfRF9NsdWKcEV9vKql5mcuYU1WVJo0swTQIhALXQsDhXxkh51pTqeFmWitCkNxWQQMBPb8U5JNJ93SI2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/touch-target":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.586e740dd.0_1633019501568_0.5338707443197399","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/checkbox","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4353740832b5eabbb89e262702b06e0b20f71d80","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.2ac92d766.0.tgz","fileCount":42,"integrity":"sha512-QVKNgaVsoR3qFmrYHTt7ur6vuHPceBnpTb+WxOY2igYMShtq+PPQrKXLoQ9JrA9V/wONo5ipv8sd7tB3R6MIIQ==","signatures":[{"sig":"MEUCIBCVOVvwuB6ZuhRYisl9mfZzEJ42YoGLE6ECisyGwZVCAiEA4SDPQyQJ7IjoOZTzLHQrMz1wkkUv955xHaX2s+wH3dY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/touch-target":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.2ac92d766.0_1633462136261_0.9164395576823217","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/checkbox","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a42775ba2f015dce3c73b9a4ef75d1d6afdcf34","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.353ca7e9f.0.tgz","fileCount":42,"integrity":"sha512-Va900EpOuTPzFd8mYLI/04//vsFpz4d9fKDMSwFfqQq5OeoOzNdLyzJtdVyLdQQsjk3eDap2aMbJHeabBAsMWg==","signatures":[{"sig":"MEUCIQCiF18YuIMpdUNA2Rzh+/nN9b8uPQ/9V0UFcBx+fYDpWAIgViBRrwSzAPMFZUx/ZoMGD1yRdXkjVJQhPGyJWUJHsS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/touch-target":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.353ca7e9f.0_1633718839517_0.539271736971022","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/checkbox","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d343277321f761f63980af6332f47489b1999c39","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.c78ff0429.0.tgz","fileCount":42,"integrity":"sha512-Z3UwvQeCXEW0jDNwtS/1DsXwysPLpiWxm1fjKxDTO8EwQ/GWQi1JqFFNBAfCv1A+wiLrW8xHw5kOgaXNX6aeFw==","signatures":[{"sig":"MEUCIQDfI46dJjP3ZWyCnUghoxNnSr7DFMGWOew9XLym9wDnIQIgXxHRY7QNZq61Qb6JAcJZD+GsqxI7OHnQ4sCb+LHAST8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/touch-target":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.c78ff0429.0_1633972950957_0.7286014206453804","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/checkbox","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.261f2db59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"563089c36ec9ae3caea638fe53223fdacba56848","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.261f2db59.0.tgz","fileCount":42,"integrity":"sha512-ah59WELDJUOuTL5F8qvHvIRp+7kW05dnyE1QNhKJsYXdM4iD31Ds1ZvNSdt7DF9CDWEM2AO+wFF1JAuh7UzHlw==","signatures":[{"sig":"MEYCIQDpFr2qHE5ggh3TFpkQC/HxvaJRpO9avCGSH8ce8Yw4ygIhAOULbSQMk+fOBeHhkw88OtlOePziakDiP/iktxEMtdv/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/touch-target":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.261f2db59.0_1634749203928_0.21904477428978497","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/checkbox","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecae72fcb2b581d75e4815f373d2caa243baf86a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.9803d2dc1.0.tgz","fileCount":42,"integrity":"sha512-y8XiwdXm6eLwOmL99oqd8wTh24I6hi5P0X5TQbU8o0HxDzZD02JEtL48ZczZIR+vxIJFZqqQlgSkoGbBcK3z+A==","signatures":[{"sig":"MEUCIQDCYVDKPLBHZWXjawpffHFqg9LoVEPWBVCiacs+z0KZsgIgfOtVAP4TQwt9Gxy3X07S90YWWSkI86uoHyZp2IQNqTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/touch-target":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.9803d2dc1.0_1634757734747_0.5923016686342659","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/checkbox","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.348665978.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a59c042347c8271681d4b6a7fe1745e15d24c385","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.348665978.0.tgz","fileCount":42,"integrity":"sha512-kJ5JN2GypA0IDt47++9pHuMElg3Mx0KdCj3k0FRCfe0iZLbBt4BApGTCqQ27zJTq86VXPZSsDSfkW0njMWaHUA==","signatures":[{"sig":"MEQCIAI149xMLRdQkQdANnu/ggTE3FG39oyvaAKz+h6Od0ZsAiB8M3nMF53rrh6MJBHNtmXCpyGsaJAdtVLX/JqdVl/obA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/touch-target":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.348665978.0_1634827869567_0.24309176745301264","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/checkbox","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"787302083bd7ea500572483eb53d781c7a952691","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.b2b979a8a.0.tgz","fileCount":42,"integrity":"sha512-87HP1akUPZUliKn4g6PctLElxZ33oblJeATj7GeHfTmbZ71ACOelSbDlJM8FDVP2ploM8U7pOOEZmfvhvNoUKg==","signatures":[{"sig":"MEUCIQDqMcbjgtHDIOHd0otNksLtMVo6iOSBHMRJ0dIT2bqPKgIgZxLpxNR7hoA1idP0xhoUajCd2zbFTTBrmUudzFOc9Ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/touch-target":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.b2b979a8a.0_1635433963905_0.6619541963461915","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/checkbox","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80eea647764f543670bd7720ed90ee48e72e2eb2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":42,"integrity":"sha512-pC+LN5CeTLh1qwsRXH7+FRgjkNslJQ9y2At03yf1lKZ/+iqujMupaKTyn9KyAr6MYVZKTgWZALOiIlXOhKfyHg==","signatures":[{"sig":"MEYCIQD9AOWJarp149g5VfbQh7NuiiixrqvByK9GG22yRyKYgQIhAJHs1zWgPkzfAhK6gCguiBvkddyFZxd9vC+EzrMvZCpX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/touch-target":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.1af7c1c4a.0_1635443595383_0.18577399614431278","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/checkbox","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef490babd69d83856ce520c77ad9b8fc0b7e7885","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.4afd353cd.0.tgz","fileCount":42,"integrity":"sha512-IgvDBT3vtMkp+gNM6ZSVqPBifoX11sD9EP4GYuafkkyp4MxutLDLNwKA9sUxeuY0k/6QoyZYySnUl9PafW8i2w==","signatures":[{"sig":"MEYCIQCzQkNyJsG4E6rbG4qjvQskD2z2vlIBSXlJV+Xm64g76wIhAJ2JFDVEB3t7Xk5bimRcTHzOFciSKPfNW4JRdOg5Eq95","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/touch-target":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.4afd353cd.0_1635519717462_0.8342476227826767","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/checkbox","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.a986df922.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e1049393190c61a70cc4ed5aac5e57a2c6e7d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.a986df922.0.tgz","fileCount":42,"integrity":"sha512-PiUQa3NDac2kGceg3fSY9KFZpnbrpoWF5i3CYXR59soYyh2cn4nMc1gUseHha+SROCQKerwlCIsDwGVak8jGNA==","signatures":[{"sig":"MEUCIQDoZUjNx4ctjPx1QzLtHbiQvZbKU6NVQfzH0vsszA1K8AIgVp+icPXUxwV95BNdBGHBeDjPE1bCSz7f4CpTrHslAmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/touch-target":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.a986df922.0_1635543326606_0.3904787635741578","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/checkbox","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02bda1c816abd7285896a9b64cde257efb599bdb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.c3cdff07b.0.tgz","fileCount":42,"integrity":"sha512-P92OD7w49ksNPbVIWbnTfvAxHDgAiiIP6hcX1FeBWIJHOf8kbYfo5SChtqINCQVvOnjD5RmYqqcC0MePga1XhA==","signatures":[{"sig":"MEUCIQDGuL70CaHNAHqccPbyv5nhkZiuEzKhpeGUL/V59JAs2QIgSecRfQi5+1zpfGt8KvnIwV60OGHG1SH3vTI1YLNSvB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/touch-target":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.c3cdff07b.0_1636484779056_0.14989388798161718","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/checkbox","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.468392606.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5a059cf42bbc8cd64497f4182c307100ba7dd5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.468392606.0.tgz","fileCount":42,"integrity":"sha512-cECyQxnO2WihPx/f+pHVh2pgwK2OgsJQZ/u5meWdcBieow1BOBWUNlUq31cypfTxe2nmhGghLuwdxDQ40W2dfg==","signatures":[{"sig":"MEQCIHeW4haE81BP18kvknN1u52f4Q5BtH337iQW/rhukrjsAiBI/BDIILM1ejNDDii0B80hI5FH377jFWB4xmPXEugdsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/touch-target":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.468392606.0_1636659632038_0.13138828051476703","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/checkbox","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.828f9803b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"626a24859d6d8756c8c42d1063a7b94c9b3f4cd5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.828f9803b.0.tgz","fileCount":42,"integrity":"sha512-lQmsdq0B5owrTDKeljkGFW44L7eUDbFY0M9yKnXYBpRc0J65nTf5XKDDWzhrt68FeQkORMhaQKFbXqeI2Uvitg==","signatures":[{"sig":"MEUCIQDHa6CrSAYSU1f/3sxUKTjyHjGUjWb1a81Ikz0aXKFsEAIgNwjNnAZBg+4tXL9DviYN69FDVqATVFTvBjxtnBha0tQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/touch-target":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.828f9803b.0_1636660273824_0.7650622589307345","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/checkbox","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.8795cba87.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94b5362cd68d4c8efa5c39f7dc9765f2337d97ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.8795cba87.0.tgz","fileCount":42,"integrity":"sha512-xXeCvb5DDRfZ0z0Zhji8x+/6YMWmJq5TTaQNpnX2i1qQfbzICUmRaVn0bb7fDFNvH3v36Q4e0YOh1n9t40MKcA==","signatures":[{"sig":"MEQCIHLK6BF9Pi+esNXiHq4NHRSAuvmbXNP7fSFHiu50wgHrAiBKc/u0MrmdhUjxn5t/nkpoorHlvNjWhAJwvfIL/AWClg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/touch-target":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.8795cba87.0_1636660630659_0.5283714694640151","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/checkbox","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcce244e22ba06cad67a66813e714638bf9a9dc4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.cd7f8cace.0.tgz","fileCount":42,"integrity":"sha512-HxIxRIf+TqhHXyOMo2SGQjV/byyYkvxdV0u71tr34BKNsaMi2uL/iPu2x91TZKPHRuMLkp+HEQWRAB9LcBE8Ng==","signatures":[{"sig":"MEYCIQDp4KBlwp09udzYTgDCJn9z2C4LP6qVEJIC10d+ZTPKYgIhAK1jQNUBTta7Hkm/oaplgwDPfHCB6Ax83saQGMSXfVs6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/touch-target":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.cd7f8cace.0_1636660733752_0.37222007866857276","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/checkbox","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.207230eb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b12045168b783d5140a1cadeb3dcdd5e09456286","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.207230eb8.0.tgz","fileCount":42,"integrity":"sha512-8YvgG0c10uKxgU5aNAP9zZz/064m1wG+Bt4+4SxriAQxxiVidYgcoOAKYrICNO1sJH+IaHDjRg6uy/fvuSJ1RA==","signatures":[{"sig":"MEUCIQDE0Rr+y/aasGoESRNP8ooW+SoaRfEOuBwHbkBoauVp1wIgS8DreNacf2EYhA0xLEUfGqBsi3+P59B7k7EtXszSZ1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/touch-target":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.207230eb8.0_1636669496284_0.2924277520493608","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/checkbox","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db0ee890615f468d811095e3f7871079267ed2aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.991fb99f7.0.tgz","fileCount":42,"integrity":"sha512-9ynYRm5rBsKe6+x1AiyHjD6KyngtNGuEPR2asZtWp56nxyh4wFF9uWROTbjqwsQvFOrd5Eh2+HxO78teov3/FQ==","signatures":[{"sig":"MEUCIE92pC4i+GuKjTkrTTPfMh+Ubkfnub9cXz7ocruuyG+jAiEA6eSz68vq+ayBBjx70JrUZ+tfyDXjK51XLT2Ba5F34qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/touch-target":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.991fb99f7.0_1636670211069_0.5540752111454208","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/checkbox","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.15db4f164.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7dc85223c96124acf311b340538e859819d5e66","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.15db4f164.0.tgz","fileCount":42,"integrity":"sha512-K1A+ZPphMBu/RuuD9tCLZOHEAuPFrNtISQcPAr+O3JyJ/bqJcYD1eJkIgYF3syEIETNSjDOd7oOot8lF1dodEw==","signatures":[{"sig":"MEYCIQCJOTjYgGpDSeQQgLC/hRr2u3Vpcy3o0mMtQoMDRmfougIhAJxls6cLJMml6HYCvrf8Jc57PEUKbO/VUB4FAUauPQw5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/touch-target":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.15db4f164.0_1636738211674_0.515291914404816","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/checkbox","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"088776b66c2930eeede536602cd691b835219dac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":42,"integrity":"sha512-yFQE0U9U7GMaG7RFPiaE+OxCBC8wD2fOrQTcadLg/U+S9MsDdEXXeKzdZImtZqMekPp8ER5gMizscSfGIrq+MA==","signatures":[{"sig":"MEUCID1Fo8r70x/iSW9a1SytjJI7pIlmNO+5t9WRkA0Nz451AiEAllMP+7ks5tkPydz6n8DFvBzTcTKZ+TcaFyzVON7cXFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/touch-target":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.8fcad5a3c.0_1636744455241_0.8168571683085377","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/checkbox","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b4cf78e594ccd87ed6a8b3b38264a8d278aa6d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.f81fb1d23.0.tgz","fileCount":42,"integrity":"sha512-NT9gb6Y6u/TvZ1E2dhbX+7hyp7uL3fZFLvD8gEDcowSgPmCJbiVyRorHwHOdGMemB6DgFUzR1RWASk7mRXPx5w==","signatures":[{"sig":"MEQCIAJsrxpfTmmZai93AaPKXik+qB+FeKBSo4kgoG32XFR9AiAH3CEWU9gEz0DxEJQNC88r8DIvolOseFFn7a6XBalhIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/touch-target":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.f81fb1d23.0_1636756841751_0.7989976733709918","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/checkbox","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1719dda9253b8781540759d2948bf0c098fa0b83","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.783f6fd5a.0.tgz","fileCount":42,"integrity":"sha512-VNGBr1C4JhmWIU2AWjk/fOqk7n9tSGgeA3Cs/3j/VfK0E328Wq3O575bnYOxZemPLvGkUzuOuPqeqU1Plnp8GQ==","signatures":[{"sig":"MEQCIHSCqWsb0FWBR5yiHMUPJBMLMAeAgCw0CgO5hL55jYhRAiAYWT3gsVL+AoQx/lLhON8HK9VLjBmQJITtIM7UoPWZtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0aqCRA9TVsSAnZWagAAALoP/1LK3mQAR1W4Jo816UII\nnvS79Rrtp2k1HrXzQsZy8vNxjiVkp/tWHkv7NhrEectR0r5xClq8zfvIKu+P\nKJuskO4XDgcyuKsVbhKJt8gULrNaqh5+i2TMfGxhIdi7uKOTiAMDofpVWC9H\n1Mb6rhS6juhypve1t+x15Ryuk/hgLG7u511wXGOMVt4fjvBQbc0VLuq2EHHP\nEcNxb5j90sFS16vdijiKnEwnBqsWVAAGaieB9I03wLQ6va53CHYueTt2uGzz\n8bi3ln0muqDpShYfzR8RKnMxHbmYg4e2CxkLl5KDBfzsrAKfWlJT9EOOtQh9\nD22YsME+OWTFWUWxA2oQzOydmUEWG2q5psQI5b3MydAolnAoAF42H60nMaS0\nmAHXzh8UgJMuvnLV48oVC2UnekQOME7knC1L3oNNfyl/dh6uIYc0Z8oytlgA\nLVGabzUbhAjWk0x7bkAWMkEJ3Ouh7mGDcS12JUuSMFb6WQT83Iwe7ggjgVWK\n/9KhwZbnVgIG29XS5cfIZeR4RMD8DXgxovKBy5YVt2A+4lEr1IuGydkXGSSj\nBcBH10y9UiheSwhV3uu4d3tb7MSp20sHswo4KDtk57FPjuyEOkgKHVPMCwBG\njuuHsTybNvqXw88kkRlTabbF2GGb9GHZrNyoe4dUVmO6U47krEggxiEG4SfH\nCuA1\r\n=utww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/touch-target":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.783f6fd5a.0_1637041834692_0.5047048257369939","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/checkbox","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf7e81af2a607487c7f76bafb816be69121e8575","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.d57ec74c7.0.tgz","fileCount":42,"integrity":"sha512-UXoNoL8otSALY7TXj1cw3SfCytvMlfFgwvQUNW2N5HtCR2nQt3i6vj8d6+mndnNLABXLDV+cV4EST13W1roZ5A==","signatures":[{"sig":"MEYCIQDIOEYNtWegBYu2eVw0zV1fE/PVQtGCVJ9NAXQuTHxnEAIhAP2xb1pVfZjTAIFdh/1nHuAT4h5U7pL+Dmx5ZbkLN9PA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mGCRA9TVsSAnZWagAA1L4P/0mqHDf4GVw4xy1wlhIv\n/kqb+gB7gP05SJVoPUOZDiqUK5MUQ+PrWo8Bd1VBsfgsR8eWmlcMxFDHXRch\nB5LJZ69FntTYkd8m4fUTXNTV4i5Sy8sNdZS2gKXvX27jl18n7gb0X9TMN+qF\npoAjGfO2Muj1uy63RnCw4iOzja68rjioG08tGCFDWQDmSJ7dj6ckd/Cdxach\ntswurfeVoFJDY7DoorslFS+tJx8Y89uuLrpZQkA4fYGQiE7hT89aVuJ05hqb\nn30wNXT0I7vm4ooKn+32VRWR7c2wL0ai1FMocon6ERPjaTBr7E43te7Gdv9U\nvbkq8UPyPVqTcNgj307QRjqXGQ9yoQFvKTZRQJ/oab4M0KJKeDk1YSadx7B8\nWnjl0Ie1RMZme5LHF9i2SecCpkxuWFx6zpAohr+AOiDNRYUzoKBcZ1QoYgO5\nFYk2uAToDr1i1nxSP7Noc+BnggoeNQCJ9JEye2gSIDkshge9XXrtf0rPkJfD\ndjawo73eheFWmMsxtPN5pUMU0nN82SLG4TkfxJEqxkfhzZbBI3sm1yynwqek\neAupITnS1+ZcXkUTeyMjDkkZkwH1rxTTSaE9dThOPAMOskiebHDuAtMBhMOD\nMyvXiqID2knnWFq4fuJQ1GV2Oms1MpGhV93jeAGozR6a1emXXae0gcR7p4qs\nYdH3\r\n=fjeQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/touch-target":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.d57ec74c7.0_1637079429795_0.9618581084354187","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/checkbox","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.554c71829.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7842eb856c5b15fc48e9d49d45cd154d745543c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.554c71829.0.tgz","fileCount":42,"integrity":"sha512-NXxs4y+71/GdWnQCIvFFld6aBqzoYzM7xlIA3AsJZNhLsLmPPqPcm7DDednet+718zDCTIdUWiQDQZlK34H8XA==","signatures":[{"sig":"MEUCID1uW8ZjRN4MUKIAbHBsFrCmhal16Y1wXbu1obilwkyYAiEAvV61KX6BygMKd/6/Clj1OXPz3EFuzaAvNGOqAbek6z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9ouCRA9TVsSAnZWagAAlfoP/0Myohu4JQdPIO5Aba0E\nzsiHf5KeuVdq/A2f9UiV4MCUZY9P4GxxOU/lDDVYtFLC2LF63D45d5xYSpC0\nINjRigq2mv95rT7qFCK4kOIOIz1Tweb+RWBSg8vnMC4T/b0K49OITTThoXJ4\nnhJ8WiCXAYE1fLu9G4zZVzEXYV+fTF423F25X/7/E+Daz4Tq1JahIDt6PD4n\nyIZ1L/FLmnsalriKuYNR8QtpLuxq1XGepoCmjYtnlainjHoCUtLJ8o2YHOs+\ne0QzM4ZW+73L1bbmsi49L5dwhOMQqvE1AFXTR65boAAaLBF0oIeTdSnX29Xr\n6K++HZsH+VPN+pKh8RwKbspCC/W4fjoPoxL0dZkSbF8S5A1TfPlc7ymjwmd8\najPd1su0/OYZuCfrzgm+qr28SS/2jVsWAvIaPQFcyVcT9KEH8CzVqa2Kkq08\n1wUPvdAa9RLFjZWZkTpY09z+E5185esr8OEdGmn8ggnwN6Jikome7XY+Rdod\nrDQ8yl5aYJRgWzEcbfVV/10ZpyRko3XKK0NYxksx1ysLmseQREtna+Upfkc4\nmBqswY+J+8XWhCaete98WBVzMA5zfZF4LdWRzZWRNEHf9SkQhYvyRxZNX9T6\n0F78BHDkB6fn9May1XiWOeDsTmtNZ45+ME4CJQ8mrsxZcEBECuvJnURkresZ\n7aQI\r\n=K0Ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/touch-target":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.554c71829.0_1637079597866_0.9012156458862366","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/checkbox","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4af43850000218cc998b371fc2100dceb7d80f17","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.3ef470efe.0.tgz","fileCount":42,"integrity":"sha512-NilmlCdeQ6dU0HeRWdp/Qi3cpUVutQRCiH+tSqXpTLGDfQEyXyG7BEnR4pnNHcPAvSPgek8gDbkApx2BbbkpHA==","signatures":[{"sig":"MEUCIGk4ZFLnSNI3tsF2m6704nJ1jleVq/2pohLsxGu34IqzAiEAula4uZ4Gw3glx8Tlxrv5QxOyELR8nbS9/SmPh+qJTVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9tOCRA9TVsSAnZWagAAqwsQAIAIJ39W7zTgrUpW/JOw\nEsRu94caUKB18DzT9tkr0Q3i4TE5NK89ToC3zmgm+ZjmTvsm1q6xYzm0xJbA\njKos9/oTJcV0T5PP12mA6ZT99jt4PdsGClKKjk479MPzAIRkXGpvPUNMwS6X\n/PiXW9ajEu+G8dSd1iFQOCMSPZPFCGQfUVr2R79D7npng5GnsLsVAQRPpMWo\nCQXCJMPklHmqnMctFeBToGCyWBB/nwsvyAd2BR37n63bSdJ/9Ul9jXT5mN0j\nvEo33ffhvdiSQxJIeLyJy4Sk0ImXWgRcsfIZWYltN2Kp9gIydFWIS9DwwMf2\nrjvWNSg/FGagF2CWmn+dJuh2JxVXlrGtcKl65K3Ws9nDA4wVchxD5Rtgm6MR\ns90yM/FfzFHFI6Q4INEf5N0wy40cKzxXpJxmqBq3pCkigfWiLhkZrYeEHRoR\ntAi6j1AqmoQzB9dFvfAmnvSjtoQmT0GlLttxEPE1KjOkw5AY34+SNruh6LuV\nCpt6+8G7Vb8yvsb6W9FhELT1OVcjIpd8W/hN5oSU5dNIEupHdvcOjVx3bIk9\n+j9WB0oPzjdmClFV6mKpX/OFjyvgzLd6WaUNZGurtYJsaCyQBYJklK/TJ7Nj\nr4SLK8cNaxsMKC5ImFUFP4hRT4mGRrLZYuEPU9GrHjOj8zTLGGym+r1ir5lr\nbMhy\r\n=eKPB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/touch-target":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.3ef470efe.0_1637079886333_0.42094326372961666","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/checkbox","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea92292e3a6bd696ec01c19bda5fb8a3f65480b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.61a28b2b5.0.tgz","fileCount":42,"integrity":"sha512-agMhtXxLivXRY/Vv8dI7gQg5uHkDYU2Po+epdGa7sDuHlPqCBJVebnri3PpXt2J0cJ7ZBJcFVX9tbsHvcBkA5Q==","signatures":[{"sig":"MEUCIQDaWA7NAdfabYNlp84cY4mWpXeDbrovtGrReOChjnCuJgIga+Hx8VPrFLmQHy93Iq6AgT49M0uCSqbkgrbOq68IHsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVEmCRA9TVsSAnZWagAAvWcP/3FPiLZHTTUH+ITy5jOg\nTO94/0OQZ988xwIvqScCzdBbWGZk4r5zoZR9wC5E+nKQr01pe5tZx2czi27p\nqDppR6awKHwg7qyDR3zK3SABSR/lvColaPrlC6JzYDnTLTC9o02Zhu4RRX1i\neOaV1dHs/vYGDXYljZz/eX3rEEgacdH6xRI+AC743rHVtPVEdZiBWVtlGHa8\n6vGxG7eStFd8dwRpo/o060MOBuJtDHakinilrblmqYtGOxjVh7eEkq5kjDxw\nPtwjM+hYVLce6oWWmfDhdLcap4CsoaUfecGLGiAwSPAJ7NU3qz/SlkkXfxYb\n09rTNYkt2DhG4EZ5ZWupMJP4/aOavgnNaMaLOyCsHuhB+iHXJv203AfY3/46\nDf1RpAgAlG0cHievwm94IVop9KbtdocYTCXXifHPAp7QeVuww1BFnPHVcvF5\n1QVg803xLdznGDte8TbOI3/MgMP3US+CRejNI3rM54pAmqEtjn/3QyTZRkTz\nAwlxFoEQ/5mLc9sLd58yjYTfeKJCRBTDAIeADCBaG8+BFaD3oVIsrkMbkuZi\nmjAkjM88Yf3q31kFo5wkZXK0DFLLOuR1n5hjArJ1JCOKNCjh0TTmZDWRlrSx\nyZ/hEraF5kiqKkWPMSQAan85CIB8QXqYY7+UqPE+Iy3EhhkF95aYuMvMrunT\nJXQx\r\n=sbyj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/touch-target":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.61a28b2b5.0_1637175589876_0.7827027964945106","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/checkbox","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53c1abd74d460922c5ce760d2b25ec354926fc88","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.fae6c652d.0.tgz","fileCount":42,"integrity":"sha512-b43/L6DA57XXqtmlY3RwZayU2GOJXclfnG+239t36g2y2qx1V8vUF1MiylV8sYYAt7f+F041nIVXQcS8UBaHFw==","signatures":[{"sig":"MEUCIAbhgtxgjRfbKEgSN+xYe/SSeDnzyryc0oFAJsyRPZN9AiEAjF/QsOnYNuiX0zfil4b3Yo+nUx5Kda9iAUqb6NOcOFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln5+CRA9TVsSAnZWagAA6AMP/3c0n6eLKDhtL69d7Fxg\nn3gD67qjTExBkg5dtkfStvkH7kfLE7Qj6SRnwPHF9jMGxq9jOBsT11EVZcpb\nxVxObaFfKQdg2JwPvzxA6ZnU25iHN1fNJPgoMYnAEa8XbkcTc9i7nTl3LGTZ\nIoCmSa3KC0p6Yjpl+AZ8He+Vnh7rsZwSeyKJLl8LmNrtGFjCJIPXSCPdeN7j\nw0/Tf7AINCsSH1UW0wEy3egjc6jK4dDuWX+7MToUmJpLfo5RANxcVZyLKDWv\nmqTfFRbT7QZJgZF0OJGY6h/4O47cwU6+ZCRA7TnxTACglKtuljG5A6s5fjgU\nTCR4de4FvGrjIlnDoYthCIgRFshx0a9wehmTNqkDrpNsXnfBX10PWPrdCZUG\n074zKFFPYkD5ScNN2XCmT0Yqk0lzQKuVg4tzls4kOqreSW5mvEYHZjcg42Kd\ntlqZc5Joe0/mtel/zFo9l1yMejLd9rmXO4H2hToBjosmKjUQwVNAET7ndyKk\njjPxYULsZlUmIeji/dTniLwxdP86lyMKkQTv/XVnPy1pnki2SwSigZRRFhzT\n+G8pwWjm6M0Hp9jAzkY33S7+EhUhzuKiJcQim8o2KiT5dYj487VUaEP8kvcf\nNDnn7EGzh6NjSt1OICApupBJRd58waQwYlrkT0l34ws9LllvD4L3ctdesKk1\nFqB0\r\n=9xML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/touch-target":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.fae6c652d.0_1637252734095_0.4493183249769144","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/checkbox","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"277b05f99e777199271cd4aea35c10dcdb6ae2ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.978a3b5bb.0.tgz","fileCount":42,"integrity":"sha512-ZVNa49jEBCSJd8F+46fDulSNGtBflLofwOMLUTF04VuCU3+BxbpYm3uXYXbTbfjjKi2tvw8RxmhrPfE4R5WjLw==","signatures":[{"sig":"MEUCIBPRcSyF6Vw3Xl2TIGqvQX/gtIKVWZ3GdroYDJ55TxHlAiEAmAZDnBsCV85dt0hVBecZULWNu8hJE1JxRhdMsOzWV1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2KCRA9TVsSAnZWagAA3PcP/3hX4Hffc6T+2EpKGnUg\nPStUxXPqpkRDH6NX2D4RvMKSUg8Clz8k61xHFj3erDGFodJcB6HPCPFG5qvo\nvD0dEoKxA1zrgSn34wUtMdT6y618o21k7bGptpJnSxbg6Ppd4xBePMF3/OBa\nvrPmObDcY5A4jGFyUGY0QoNt408iDksSgQwdCgBIQtLWMN8VoNGbkB0FyDBC\nB0hrdegw4SJKymetogmywL6cIBQz91zouWSNQ2Fr1cDn0K5Gr/kqPKIY2ZM6\nXC+Szjdvy9lshIJ3kEFgSfvTejcCich13S0h3+yXV8uVgG6xYou5lDwnkPr2\nIDwNqZ/IXFc6CIPSkhCwiUowetFp+y+RN4+wJoBTqWsYJz7VHXb4ZsuO+Kf3\nl63ozIGO+haZAwLscjyh/KpQnHjfV3+75sEZDsT+r7RbeMtaI1Y/n+rAg8RE\n3WU4nboBriO1DP7TRMYsvT3nEuwkMOBOQhiAnw4W0kSdqRyto+JeaFtogcR1\nzhcPJlL+zpGdpaDDKizwtFu7pY1rXLqS8G7YQmUoW52L80RwfWlC8geH82wX\nZtRLIuBytJbXe8N6kaGHwhiSl2FKq5YltgAkOuEY28EUtbnwpI+sqDpscfo5\neraAMCPZurY2zVNazxZTqz+qD1Cy3WfYGCbm8KFYVFoH9vig618gfNxqph2g\noPpR\r\n=uekb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/touch-target":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.978a3b5bb.0_1637350794318_0.19017650395052788","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/checkbox","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6068b844dbc0d8b4ee3d10fd3b93e30977b5824f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.e6f43cf44.0.tgz","fileCount":42,"integrity":"sha512-+L+yw8KkLjuWl6avpiLZ0JZPZQxEi8fe+0DSg4pvH8/9Zdl2OCpkW3Uf6cKFov/Y/wFFuvaCuD2MrsT0e7Rwaw==","signatures":[{"sig":"MEQCIBY2cmEmpWRPj8YtFlDFEfENvEKDdZ+j6emAnQ5Y+wrQAiBpyNg7s3+J4aXqmPUxKWTO9hXZXvYmVqyJdfwmwSiNjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9TzCRA9TVsSAnZWagAAJXEP/A2WLNAY+JGezbf4ay1U\naJBrHFnPjz/f8TbHOjdKCwnFlCeVBaCHKvGXmIEuMaTAQtByRN/Kfv7hHz4s\nikLC/8aLYzO8atns4nBAq5VJWvPS1FlWnxS6zsWBob7omGtbgK7CLYYDMhb0\nG2TsSnV3gLZ9U7erWE1lyknoB8pA/ANp4kh2Q+YE9F/weHOBOHI8pUnSdRl4\n8eLexE2rhwKUY68/VnM2Vjb0qqmAt7+RWwl8t5t147NKOIlWa8GKmz5MEbCD\nOpVH5PQUZsMVYBdUTUcnxXjoMFl69PNMWiZP5hhmIo3aPQPtYLkPutNIzWVy\neIvNz04F5vh4dOTgXJJ6eu7Xp34tJhaa/DP4aZ9q8bEpiBTyp/gxNOrKBV3k\n6jTr/1ibPvzRVbP4DMu3ZuVBCk4wPvU1avE9mRu4gWZyL7IvkZK+sL8YWF4L\nclSfMND6FRUaZf91Ik7QwdqoNKyVMAsovvQQZGybNvZI88Km6rxtNtNVWijo\nXVwOakKNzZ+uJnfmH0VO+Aot4dfNn9PBAKFH7uX8DuBtRq4e5AB0S5gNwC3d\nWCePuONpcIjSPCX9JgEkSqS3UmIvxCsAvbxvugJXaXspF140v8plWp53dvig\noV43d5G6/PnHk5QW9vrqO5vqmB1uhN3uJuRnhnW6jAzkU+KazlW93IGj0aQu\nhwed\r\n=uoj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/touch-target":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.e6f43cf44.0_1637602547695_0.2930934445748734","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/checkbox","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"760216f31fa37f06e127264f568d0af86b739f87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.39cf14bc3.0.tgz","fileCount":42,"integrity":"sha512-0Nht7pPDW7sKuoPE7wyL8Stpu3AJwTFbbd7iqb2EDIs1WmgUokm0OsApXvosCVs4aZcigqJB/eLKjHKC9atZZQ==","signatures":[{"sig":"MEYCIQCiZ7mRAYg8+Cs33PJeDKA8gRHcvWf8Ov+x4XL2ck5kzgIhAKU/n73K/WP+CaxlgN8ZzMXhaTUWHf4B4pCufUnU0t72","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCIkCRA9TVsSAnZWagAAKAgP/0eb0WPemYGoVausmFam\nzjAyNc+f2FVKo1Q83cCUzRAlazwdXmZJzFE6jwR2n6AE8Xfwe/A90bys34i/\ndoA+gSFevpAKX6l8oGldRZYot8K683QqPMy/3Yv6b6oI+Y5iWlxmMh6VFdoA\ngKtvyvlveL8sY8PpebFVbm0rTisJ2PP2tvzPaAJ49JCRUeQoMj7UBAOynifN\nTTYgMz757S6GKk6eYPGAhOKaQ1z9rl6mM/paVM/umzaG+hhqi4Tx7VaJHKcn\nzTGbJFuUkOW4ZHK+f+jUBpBv9DmyvaxRUzSEEL3s8e7qmpOcF3vf28p+i304\nwoQWirUDjXWvX/6MiZir3F2cYCdnYlfglcSgj8oGuBLVktzeybxGI/IBc9Vs\nZyLWegUaXyWqoygqrEy2ITModYDZBsnRmn+KLXxABGfVw9IlDxTKt6Rniwnu\nYrKUjEySYPIP0rPXF4AS2KtLaFSA5XcLAvYBGl7rHsxjYIOdwkfoZuO4PQzX\nNNG8aEMBUqLsh3J4BsjaEAhPJBmnSPuk7EGmPOa863DcBzBUtZLCAfvpYr8S\nNArro+Kibde9yjQSGpwW7+7w3ooRFv5MufWFAARHEXYR8M5vKAOgr91a/kPc\nBnpDhT9YrzAbtiXfows+jm2IuJyCBSpylIlMi5nEbagE75qaWOStSZUQqu23\n+TD7\r\n=qF0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/touch-target":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.39cf14bc3.0_1637622308402_0.5454691405647287","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/checkbox","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.93134d453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e99ddc2241bc8d6f740047db104a87a45c1da87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.93134d453.0.tgz","fileCount":42,"integrity":"sha512-oliPSkLy/grFooreanFcoDW6dZslOxYybfO/sXZI54AtKhrLymneAEx7vojZMD9Hg528RHc2Cqu7oP3XjvmeQg==","signatures":[{"sig":"MEYCIQCTglpFk1apClbKLOBjyzrKJD8fsykPVM3HFyaj/ZNZfgIhAN5g84Txafgt9TpNYHHLNho792kOgtNGRib+7uP1azMf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":740956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtJCRA9TVsSAnZWagAA4HcP/j+Cd8hIJh7RSSBaPdy9\n2EP7UUjYIjB3vMIWOvYa+Fx5fNgTgEmawQeYNGYqSVd7UDtK+6mNavtIwM5X\nGU3iDXnbhDYLTcYOtJ+Ut+x6QeE8cddwDpuIqyKC8Qid+0knpsMkedUIaUp+\n1R9ssKOElM2wViqWGkVyMXcH6XxgN6CfjskK0M3/ruQxk7uYNmZTJqs1MbAa\nO2vDiHFA5JWrqBJX8KX/6mCTn0rvDCNmNoPdkBLWLd15RaxBh7wa/WuQ4iBm\nvQxLnTF5Va5kVmpNI0NSPCVwjn1liq+LcV63njMdYWvVCJJH2GsNI3GRFOL1\nDwq+4W6HD3gXKBD2NCDZN1lgYJYemlezP3kzdXjZX41o4m1AwP1fIxFsJz4Q\nsr9kVmgKYyXR6F92OkUIWZrRfrpu14NkXDTuhJvwloBJQrQ+G+EHHyJqFuhe\n9L8idxwGyx5FLMGlfuBcOn2n4djMnHd6+BwlMO+mMykcNjRFnk3sw5I++zXC\n7xIUqOZIkaaSgqoxtI9u0vM8ReAs6nlHUIzPGWYtCe3d1qf9hQGEc+ZdP9/4\ne8Q/Bx4Rd6o6OmuRr6szlocVXS/wJbJ55C6kPyM1VJbFfwX7U3cM2k9ExXiK\nZyLiocGVooiHyW1ChITq9esUQkR0KNry6xrV+sS6kz0H0pNXX4CWMfcCSd3O\nEkx4\r\n=3LbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/touch-target":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.93134d453.0_1637681993113_0.16761092867297167","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/checkbox","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e5ee07a650f278ca93ba7c30f8251028e729741","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.bbd11268f.0.tgz","fileCount":42,"integrity":"sha512-zfKXB9He4a7tf87S+sFAGuM1QY/ndoLP5BCl80ib2JDVSvWmcXONpZWHblPzkaMFUhrntIQBfe2ubz9jGbi+KQ==","signatures":[{"sig":"MEQCIGjlf2su/Q5WyYiN6y2UnNQ8iY89MZuJflbQzHVKB/2pAiAO8qdU4PTwE8NP5+RfjJUWwMhv7uNeFK1NBZL4SCvaMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwVCRA9TVsSAnZWagAAJk4QAJdcOQahqHPb/6y8Or3+\nEzh6o9OvhX2Af7VV9D3gYBQ+zKCp5ipRbdoIssb9iowTRvou8tw91tLfaSZz\nYQAis44BIMcFqYFPefG2AP9h216ezwc8e6kfGlwycy5FfjVlSqGNYfnEbUaQ\nFN6mSKYqhcJrC8DiqC+t0sRAzq3dt1l8iw2fFKxQPetHkPIy/0UD3YQSGv8L\nZtpkOU4co8mRvua9zVi4RWM9tdSPmkRAWUfdkSIvI9p1W31p1lQ3aMUZBH5K\nV8LjgOAUmh1cEwEYLS12BbAYKK8uLCw8nkNElaxQ3BnNGp6NMmBEOmLhtVPh\n725w7VHOhj5CX93oqg/kOE8dPuztm9YDIDOcy4xajtwSMK+G2bNEKdhyqaSU\nCAVo57SumqQuzy6cIe+cTWLHjgwRe2pKVeMLAANxq1dtjfK5Uh3KY+noH1nP\nYH9jgfUkfoAjt/UNG9uztyC4vjY6hLmhDCVcUFvOjfLw4lX03RyT2GwkTmXj\nDb+1zeo1uvSNXUoH6lCGbKYAuGr8E6n574iEb4Us9gtMZ5WlKQDRef09reQ+\n9tg9J4HxMhrQr0hymGxFX3UgznKqKJ8nolN+yWjbWKHuGAjzgPz00QcJ9XYY\n7SaP20mV2Nd9KiWnftwY8jLe+Zu0x5wjhyeXmNKF17jlI5Cot1eOiuZingmr\nZaQK\r\n=jc/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/touch-target":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.bbd11268f.0_1637706773409_0.2775115324591788","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/checkbox","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82c616adbb5d8d0a2b25b9d9753dd3b15bff210","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":42,"integrity":"sha512-4shMOiweDskm3LVDN5GlH85Zp/rDV+lnOWQsNh844uxlt+9Son97UDExM5x53Jg97dGY9AGQ2fPYrlOyavInwg==","signatures":[{"sig":"MEUCIQCaV4gtrD1q9+Cs1P6Rjgf9ybyR38VAL+gE9tFfaZjLsQIgXR1aIeftO8O+z6liuPgHri2mm5JwostAvjSPTx9T5SA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxXCRA9TVsSAnZWagAAl8QP/i63O554TZPRQ8RGReAo\nuAZBWiuVHFD09P6Ts7TQ5svQJZklCv92L7Ru0LMAu+yV1MsyhHLhgQ3sV1OE\nb7n5y0ifAQbowACUmCElIr8xXL3Hg75/5+n0OV9sGQPcC4P0KSRNOtsJjczO\n8GcN/VdD6uBbNpCDx66KMagfuR06zS15zvI3Nt4xEz6UcZqP/kMYIrx9P9hv\nLoW3wpjKF2UrcOiabGRxt6fs4iV7YOkKE/7qt5tvKUGF4U/GXpsJJGWakU42\nmMEZ2Iim/EqW+R9fpbXonZ8M1wxTJt50xXwOSmJqUUoWvqGh/HinyXSryIXo\na2wBl2BxYAl1lYdi6xc3yguKZ3kM42rs3IqztxPeQJR7/DM0jcDJMxtGSemS\nmiqWWg5aq77MHmXXvEMj1Wo1s6WwpbV1D6Rm9VpUfN7gmtKGuT1JG/jJyhj1\n/1ZfbI7bEbcF6NTCNEGO0wDNZt+2YaH+FOwRhpXKtukmW/EhNWlYhsIGxT4b\n3EQNgvq++Ig7BOE2CqjqjL5XCCwp40ENrWaYgvatq9O0fj0brBsAMllIRZba\nVi0HM+3pBtM7DjR4jWtiGY1qBE7/Bo8tTnBIqAsNKx7NdXul7EXi3sykntnZ\naKw4qC4hM+ynIybMZ6dqvKhzYhGVDHvSftbc0nGT1e/NtoUU4La6V5hSZ4kF\nyAFZ\r\n=cqIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/touch-target":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.3db9c4d3d.0_1637768279778_0.016248348047362082","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/checkbox","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d559dae50035521dc7f137e463c5b88eb613b69","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.78305b6d5.0.tgz","fileCount":42,"integrity":"sha512-USz4jDru3OJD/SzvQz9OIDeJNAHk/HL4MPgIsvgAsE+TZaEdZJ0AC613CzKJoABTkO5FcusvVnxoN9HghDd4rg==","signatures":[{"sig":"MEUCIQD4/kGCBbVf6Tpr2fuEZbw9s+M3usxGuMrHWt3DkFA/LwIgDLclX3tj3a+fPPvrmsqbAJl+IiLT1qDjSfZXiqJFj+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpe0CRA9TVsSAnZWagAASocP+gO0fllQUhHOtPK+FHm2\nQfLMOqJnhprP2gznDqmEeoi2v0iVmZV++DCPzffA/AShDVo/JTTzoBpQVL6X\ntwMMtlCXBlqS3WXa3mZxISdJtDp9VPVOOLrpFRfmYNJbXpeeX5EowXaTGpV0\nCst4yZrkFwHYJ5uKhaSclL58NyN2Xtb9AUQ08e0wQZlqJXF4w9JpTJRUuzU1\nPWO5TEptFKr4mEXrYk6eHbSwG5Gg8Fdb9/fSm3WzP7asdK7yQNciazu1wMCi\n0KCcQPUFGj0K6GUMUa9wajn7DUffTtqqeFX/Uquo5/o1R2lNZHVniU/y4oRw\nggZCsTDCPUpJxqc0VPI6lcvPo/yeX2ZJNDgaS7jThUYfcnezwflL1rdCDL0o\nk/z1YWHGNcTIiNP2Y/ZKQSmUNzA9VEoLjYHtMq829s9qQ1ZCFrsYUMakzjDV\nieON0CRhx6Mtaup0/8JOo8HpHWI6iee74luj3TYQN4nKKTVU1116zZtl9GXb\nBWqWPOrSodM+dWd1FtQiSvyDDHzB3PtpH2ukrVlv4JvFfB8U+FLJw6ow3Te9\nnJRs/tGN2MbxXj8MsQb4qXYoN+PCZEvtahs/g4iZ5OMwPazgxeuLvTepTYUs\nutD69l3jQtN417/WAd5EBmlUrmC0FdS8N51kMICwzYVomkQWPt1zQrcEJtcx\nc7JP\r\n=J6If\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/touch-target":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.78305b6d5.0_1637783476429_0.47834280011251007","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/checkbox","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c98700a4908b38f7025e65d1abd8cad26d9407f9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.43d08ba77.0.tgz","fileCount":42,"integrity":"sha512-XdUaEYBTs0kfRL2J0dPpU5O27gSXRmsDXUcrM/y5wIJG+Dy+2ZHQQKs5/V238IaYKJnSJVmX8JWWOUu9H/puxg==","signatures":[{"sig":"MEYCIQDcwAYe9ILhpfsisYWLCrYxuKYf3mzdD79WLky6MtV37wIhAMRDMW1DPgNcoYaaJUHlWo94aUImmGRVfDQF7koeEYvf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqwnCRA9TVsSAnZWagAAgAwP/21qN+kWs9J0xlYNOm4o\nRuoORPr796cl8JIfRuP9L1wukDRa9HTMYO/xNnl7/gscFfBf80do5zPLzChn\na937vxMnzSJMgERYFAHCPr29TsZc6QRsSp43xrc10M0uiQ1Dd0IkUngrMUEm\nW1R0bPiHsNjKhK1//E5eK/hSkPKsx4nJNGWXPgB3DN5qwqQ8ogKRiSv/krDI\nwXGqznY/WtLnaWwbqBRL7EJ4C4W8uE+xNdbtQ1yghndnJpboJeVPrEVVs+hb\nxUoSUS7GFDWeS/xckN67nM+Wj+FDk7fwweIGp0f9e6kfHCkUiR/rSylEekDZ\n6VPUoy0NTi3NpDY0XLtBRcczVO0vLEHNWHLbFErXahjDiVEcM2udfG7MyFiE\n1GTtc7/ycWVI096kpTvhoBcQI2jCwPGvvXFapH7sn25ySBzn0UysKsopNbOk\nn+2rOna6uFKh5Qi+pVqQILI826MzYtspc5qvWJjsn9vBiVANQquGxH4OqUw9\nsz5yyguIbjZdt0nZESJYML98uA2YG6fY2yeA+wSERLZvNz1M73/PplqFoDG2\nsQuNAwJuizFoJel31MDwGjt782vNLTJhWNvdFAVgkoLhiW4S/DrLF85/2Wel\nRZyp7Yrv8KytHBuu5I2s6FLrN04IDnMrNrp6z757Fh6C83+TYZT6iqUr52qu\n1T8W\r\n=wJGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/touch-target":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.43d08ba77.0_1638312999070_0.9103316401154131","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/checkbox","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.17a072535.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff4612731fbd813aee0723b42f8ae597c15b3b7c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.17a072535.0.tgz","fileCount":42,"integrity":"sha512-hrHPVSmLX0yOvi5sCVBTz+R9g1+ivZdQSicFN1z2qr8IlFeoUVA0BW5rxhUpsS0H8O8LapX6gdRM7v0AC+rPQA==","signatures":[{"sig":"MEQCIG5t+O8LAeruzJ93o8BG/mM8xydfTr3tQyHHRm2A2ppiAiA6YrXmFUL215eH6Qm2puIWeaMbAahwIDL8vO9WYKzLvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsACRA9TVsSAnZWagAALiEP/3PxlWC+wEI95FK31lKs\nSHJbCqNhnKRlc0uJqFGtF3OU1wrhfimFWy34Q6qSquPRE3Wp+nhz6LFS2DNa\nQc2msfx6VcXygT2fiJs2kpkf/ioHb8Q7K5I0LpayP4WoWTBP/A+BAm1q7MPG\n9uJ9QjIvMurw9JTdzPUeJcBg1+5pqb9+GZ27Ov2103zxyLdSI/mQShkfhiZj\nnWybxbj4nK7Oalr7qvd7zER2S/83xEFYBOrQs3EJqqnR5oRyq/PA19BP/qBy\nta8VGqr5li/dv+/3gIumR5ElNnTY+YDnACuTRumrREvWjHWuVGsSY1xHqTrg\nsvWycGCda+MML832yXCygMLH3zJXjLTJBe/hf5TOS8HGhfaxfTGwpRLJllJg\n/JaBIbYpMpqPhSzftUoQeZMB8OqvtTc+2LIrdkh8TCi7fSJdmbASS7Z7Ek/h\n5o6PJRiFwEAmS2t96r7ZwuutbEewLErOg24YfEuJnnBfKfu3Bp5kxy+3bQJR\nVlp1wpcKqCkaY/HahoXGb5xkrCOW1qUPpNRI7pim575HKRCWUkCO6lvPxhio\neaTHOI741qqxqYMoKM+sRDGNrjqFnPHmJNYUhiwkICxa5JAV2WypRGEnbbG9\neFHuExtOh3jiInf+Hd+QNRN1Ms6wyjU4qCWW8eiyg76RI9GjRHVy2I/ERGc4\nR9ia\r\n=czdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/touch-target":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.17a072535.0_1638468352531_0.4183519486639915","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/checkbox","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.5d809696c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2a262b671a882cb66caeadc9aa46f56bb1a71ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.5d809696c.0.tgz","fileCount":42,"integrity":"sha512-mGJI/IHKrHbH8if5fUjcmi6McleqJsv+8ShfIatjow3z9qGtCIin7fnTJ+ppgGsER1dKfXstrTNDwcgqhQ9j9g==","signatures":[{"sig":"MEUCIHafYNhxfsyThUMFmtIHiNWzCI71HRhsNRnii7G3UGOlAiEA1RyZMkNIPOj85B9bA/gInczJJ2+/WTW0Z+0VILvcMyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8fCRA9TVsSAnZWagAAvS4QAIABSioU61cz2Gd4W0q9\nRmo0kQl6g951uuHpuB1lT7aowgbufl6RvwpTHrf53AV4a2VtbHnUeIkIGEvS\nQ49b4j7nuxoRgARHAcOqzVUjXIEZqi21l+5e8+WGX240qWdpwIvtbnvRbD15\ncunpwJYLc5TIW1sdJoBjGfTANHoottwo0kSX16gldSlw4xpCJH+t7bCrM2dT\nOUXmdJURKW+JbCjWcOr1L/kAlfWmge9MZkgoXay3VCAj6MWdwe3wByA3HOuE\nK6RJP2gqc2g+DJYNNXGWG/faaecYuu8eV5vt/+ObqMANOJqsQV8GUyHQoStG\n6diYe73rZvuC+DcW1HWMGTW8Usuy5cz3CenFnHiyAA7AjYg90PHss5DtO5F9\nCEK18gweVrbLeiDNvFIi2k7jBjKuClKGsRrwtVE0v/DisnwmvYo3rtfkQXhT\nhZj0vSyRVeqomgheL5hgr648uwjZQm6yd2oxExPEcmkLcdzsQqAh1Yn9sFL6\nnGvCro0TrD2hUyYqkojAmInfrHF9k527rWqG/Hc5GUYX1fEES9pUqRFnXrIN\nrUsEFtkZMISbhKEhAkIyNVYTAnvtt4lJ/TsQHh3W8yFq41N0ZhKnSt+Lmx08\n74eAg44suLTrD4TA7aJ55f91WLyQuP8xgch3/rHUdS2b5J+gcHHAI5ZVXDPE\nk5JD\r\n=rUbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/touch-target":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.5d809696c.0_1638985502598_0.6582659271709694","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/checkbox","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3611618e6fbf189edc92fb41ff82de418011d0bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.b6510c8c1.0.tgz","fileCount":42,"integrity":"sha512-TyYx7M/V+3VoxG/vHhGAYvu7ExDtgg7RqknRo3FKTfrTobY0oV62HKDNc4RB1/BWyPTC6TioEq7BbgzUibfXFg==","signatures":[{"sig":"MEYCIQCyvMmpa6SxHXuV9/qWjJSpj0ixQs/GBoZ4+23mVCp08QIhAPdQ1XlGKgGV4z/LbUZ9qNWV00tLCzFM+trcL+Dj1VSR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRTCRA9TVsSAnZWagAAv0kP/A3zPiYxkr74VikXKEoL\n7dlE3C8J9EsvdtzFvy3fQQxB95/Jp1CLGPQEoBx6WxcBg/Vflk2sX3oDUx0F\nzI1LR6G/TISFn/mPj4j3XzgSVwdqf0XtyE3MGA9RW+3oVmkrT5TwDtk22yzY\n9h7idRv0tKCCKzAPTNB2hYJyg3I1Nndo2rpIL3rxmjh+gWpA7+WuaDe5BtYY\n2S5iIzU4RHw7HXCJTrFCFT1+wqa+F5LEp3la+280x9Fu5rCjnWf7bne6r+rP\nbdnyHjF/pCa39JkUMwym3EV/X7i4/ckqhGhWDqRqw7z/heKyFIJJYItwAarp\n3Zz04F+eDp2OTd9+9eXEp2O6tyQwsmKdcSwKbZRCCrt/gENWfY3/zjE4+uJF\nijhgpaBDp7SF4lP/8Lz5kdP5MPFkm1y33asm6Au/J0y7HV0ldChFP5DHOlN8\nf08Aj9e7OIZdU3/H8QAn/Dm/WJlldmAZ7NT+l3gTZPlVpszsmXf/ja580jif\noYWCaigeVRyxiGSLzqnoCyYOiNG6Q3OX/dYy8vucvwDGjmzHfTuIqBFA/F2E\noNCp1F+p0GgyK9haxtnW8DVPRw/qo/IIPHlPGB2HfX3ECXoY44V2yJmTnwdb\nn5ra8hsysluatmEpib2a413t/0TYFS9ngaW5Mnn2pY1iSFsq+WiJ2GBWvLk/\nSkpK\r\n=CcLd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/touch-target":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.b6510c8c1.0_1638986835657_0.6028909582204491","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/checkbox","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.f460e23da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668ce209d5c87e1cb8da9a5f2dbd244dffaf6b03","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.f460e23da.0.tgz","fileCount":42,"integrity":"sha512-Qi/GKsiPetxvalEH4IXQnnUHPwt/rvjs37s5ykVeiCBlzWGIHoQk0HdKl4ALwjjmfCpb5BoaDmm4cNknx4Imrw==","signatures":[{"sig":"MEUCIEQj0lyfjCOaoVcA7z6NXnpS321IUwoycEXTsYgu0gO2AiEAwEjXHwYmpExWeFOoCQQgl7A6WkYwkiGXW1wbZ8gkDho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GICRA9TVsSAnZWagAAKwQP/iLqPBNIzMi8t7kEF5g5\nI9MV6QRsbyGrzlUN9HrAjAPYdSYg9+RN0lD94+cBf44WAm2HCAZDgDn21oHX\nSi6nyfTVkIA3A2uMQmDJWkl0ilI+6uV8PUqCHTPTH8mCOxnfOlGh7iTDDf8u\nTBejK4rgPKBPO/JJwJhb7qS+HWlizaRy/U6+2xM9Y2tk2BFXi/Kv/v5kmRi7\nESoJmRMiHjghqq5CC6n1hKNnTe7ea6XcwArdzygIChrdVowePpY5julgZ0WB\nZ7I/RduE93JyNkZ1JW2sfyL+DJYQDl3VBshY9WW1usYF7meqs5S44RCTbO3m\nAqvgvMLm5n7/Tbukszt8chpujEauI5r24Z/8kdDJPiPip1gS2YDGS8gfjTi6\n2l/e9YETdsfwXrz+hhjdBqNDg63p9Cfue1tgpVVwXCzMHL0Ovlwx2Qty/eCW\n5+eiFTe0ZSY/4Lt5LQGaXKI+TtSaUjdqJrteDZn3E/Dc7goUOOdR3T9rbtA3\nNbBWQtHiQoYwlIh5VNp4LT7+Xd3yXOcjJ7hLlHkbhnR+Ga85sFhPTtNC2fW8\n45tCkoGZhCnX1Z6n6PnzZIMOyB+6dtzDVxYFtTqsP2zyRgvttIR0Z0ljdsJT\nOIITCupje67E2P1e9QpxIpRhdCPvmOrcTN/r/psrxF/KuVh+quQ1x57tY9my\nJLJH\r\n=k7ZA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/touch-target":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.f460e23da.0_1639149960526_0.5594363301491487","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/checkbox","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3feff6bbeba24206ea6b636baaad12a00dc744b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.7d8ea4624.0.tgz","fileCount":42,"integrity":"sha512-heVHiiqTsEkXOx+7p+2/YRvppv4oLnoChr4CTbJKIJP9ALg/hjl9EAWzfDm74DDNeqszctG1IUGRhl+UaMx2tw==","signatures":[{"sig":"MEUCIDgu34sL67CUOW9idSCNXBF43tod1kc7vLt07tCPbSbXAiEAo/hO6q8LoED4na7YY+hNPVhFqfRByNTRablNN8/J5WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6qxCRA9TVsSAnZWagAAxCIP/2YEwBtPIzKo9TcAApTM\n15uwq8b20w4QdRmEwkXilg7x089V21EsGaTYK31NYofdUPERj5PnzQCEDqf6\nHnVVhtbLgkGQwhlF1AExwZgjH24MRtYXUILloREMEyTRNa94Gapwk/jmMJPe\ncF2nuef8sOBnIQBehK6Kg3yKUWHPCfp/unDcyAIKsyTsdApOZN9ezWB+udpE\nd15B6w3PiiweMtEdMr0exHAv1r9tvAFNVaZzOfSV3p8Kv0U3WtPqKxXmD47a\nHntSL/PaEPb0hQuJHjENw17AkvM7imwywEbsMpsE9a3fSmhfZss+tcIvFJvU\nYXzYofDT8FdoiP9uFxaiuh0pUinAw+w01fDxwVZ+a0tMPBcvRmVe7u6rB9SH\nAYuOhoIH8abzHZKz8m2lpfQ79uGr8q+cy7TVK9vGBN3il/eBjln4dzlgA7yO\nsjZTqcoruWWjVH+aHTBX+cPDrv8Y9M3ExVo5pr1KivuldL7b785mZx/m8FTs\nI1VHmErQnoncr4V+GWUGl3D6jy3PubA2XJFVH2XSEnsY6enRnxKgg2Piud/O\nYwc6dTS3zM83zGgBlaQNupra77abu+zwahmBwz/RILp6L0Zm2l+iIrU+wsGp\nuPJcfZ8YhJif558yBRWdPrjUYbRAFZfSrHWQF6NN/g6DEf1uEfogDRyZ+vWa\nAY93\r\n=qZZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/touch-target":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.7d8ea4624.0_1639164593126_0.24549817099876314","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/checkbox","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2473a878e0fa4bd8c70d0b967c68fe8cfa17aaf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":42,"integrity":"sha512-sm9HKBzVHlSMDaw8B6IJ7kCcn5Oa6t4Hj9f+mQoKSj9WgFyW7JktG7Cf7eDyXjWiCJvw/EkgnKI1mNbdhnUUTw==","signatures":[{"sig":"MEUCIFvkDcbJDDYDDoUfC9dRmiUIG+hOeUw6TsKQeK28QVhpAiEA155XiGErp9kvreHJZpkysHO3rTv8drxstInN6DF4CVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwQCRA9TVsSAnZWagAA+qAQAJZSH2iR479Y4DiGqDck\n+ARTdrly0ghp+Q0rS7TOEKgvu3wOgc5qblfXNkHnfzEyOC52SwpE8Sdeguh3\ns/dLH3A0GswDvzkPPqC5PaE7T5rTcjaA7YdJfJvTMYsXUEmZf4skIT2MB4iO\nEKWoN7hUj2XoBf6SJMW8KAXK3Vu5PiXrufimc0OEsS4jzMBAwdIaJbfvioE8\nmHXp2WrldxEO8NQDzAZNq5YaDbj/VBcM183xxvgXjOKRYcJ0A71BZUebeTbS\nqko02gd6+nIWIO28l9/F+Fjnrb7hAX+w7txSbSzgd5T1mYAENmJhzI8B98Mk\nZEVobjgWUXmEGMfR9I1AtRnYt+KmHFD7rejhaJR2HIURpUgmvGFKm8gyqW2d\ny4ddMFzjmsHxW5vz030dJhoqwNCe5KB91z9lxsyQkukLL0SxExNLEw5M9ooe\nRvVGQ9ytc4+jdwgKVtUdxLnHK0mYRmoihph7myX5woywkut96yJhKk7wI+Ka\ni5iZTv8g+0r7PbWsCs8Qu+yEYdJLCsZT/XgWoC0KalE25rN/qEC8BEDH9e5w\n6GvVAIe4hEaiHLcotTvwRBM0AdFMMCKc/es/n4S/np5FTxitM+OjE004dXc0\n+LLfYUotZdA17DNumxuIkRn6ioAN093JWRTvOmtc70szrdvXeXRb4dS6mnZn\nX8nO\r\n=9nBO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/touch-target":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.8fffcb5dd.0_1639472144711_0.15095506170955986","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/checkbox","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9df49f89bd27609548523aee2b0bed94b00e816d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.21e1cb9be.0.tgz","fileCount":42,"integrity":"sha512-/dANBJMs91ET7ZIKhu4VtIURDLplL/lYrIANDYrysz/BWOtZ1NabHyoViBZIxHFWhKAn7BrwDZsVvT+IMj7Vgw==","signatures":[{"sig":"MEUCIQDCRjjjh9bdubIlV8JOReXeh+n8VAWXNh/2tKQZlPP8MQIga8BAKltt3gAgBwIdQAl1n8Xjlr1Pf6GplIyQkS81jEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPMrCRA9TVsSAnZWagAAN7sQAJgcwWcRc+fly9dIo23M\nDNPx7f89XRaaJrgiDqgYEKWiApO+ssZeYQfba4yPceL3hDaP7aQI4tc3lAHi\nq3KE31rwGrBMQJ9X9Ug9jJE1S6kf4f9fvyPKRY9HjlO0AOu2/+Q/S30rYE0H\nDepeuPlZgPxC+g2vIMdUEQV/Gx2zxcRUIhzJbdRu3qvIpGHmhvM6+ZcKrtAo\nq3A7eOlqPC1Xszd4kQb34YgEJLUWJl8y9xB26i8FgqBdua0zulFAwmh8QA01\nG5Anz93reP1O3f+H3WJ0/E8SMdGK2FhuwDa5rW7adaNqnK2gPm3zPHEQFj0U\nrsc+V4z8Qc6MqySmtl1dE/EdmiScx8xGOmC6/mi4FicmwxRwwEM8Dale60jK\nuB8k3jBXtBNRvEXScaJsxBy4NlSDthnwiZMj5Hz9r5CpViIxRdVY68TZicxb\nPAfunfwjUNIO8dXo8JNYt2rQwOLArT8iK9lvdENhkdu+o2FW5Kh+hu0yj+4H\nR149UaYsneS/kevbgZe2moUc+XFDYuzJWt2a+6zf0jfg+leU3lDf+0klatJM\nuy4PQRFjJN4O6D+ly816f+O/RvmC6QNFJOxm/TmTO7HVef45mYl5kKVAajQu\ngEHxy5kXWYwgzThmUnsyYtDZTm7V7sSlRM+qsydBFYD0qzYZd7iVZPybtkl2\nyuCr\r\n=rzzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/touch-target":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.21e1cb9be.0_1639510827619_0.7667065975064629","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/checkbox","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d018f4312a51c74fcea321ab546bb97c015b4b6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.ba78e8724.0.tgz","fileCount":42,"integrity":"sha512-prLPmMyWL8EjkiLElH2cDh6hcjoSUuZQevt0qp6j+WxbP0LTvubdYlZ0M2MUNyaIne+HKD2reASnJRPktUbonw==","signatures":[{"sig":"MEUCIFNsxRSWN7kaWDLdldm7RRQuBxdl6b+tNH8CjqiPtPpeAiEA3uyQccoYgAcT3Yec6TbV41gaCJjkoF63VJP/NNbO2P8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiRCRA9TVsSAnZWagAACGwP/2dRNnBII+A5jk7TScEV\n/bFftIXwbsm7l2Tc1WRsMN3zV4qkywdwamPhEVqo7iBJoY8KhEH/l/1iMQS7\n1tO2Aydnl72VjCNKCl9nzV3SmUmL4cf/eDw0pa2q6H+5Cu1CfIGDzDvgAl+F\nUGLRsnsOSHfhVMZvtuUSK8UXAs+ErT8hUID9TSVfW+gIufVEGzyh1Tysj/J2\ntPlPhOCQ2KL65S/XduF93kEfE1V38zLy6mBXtk9bE8X2pHDi4URIIgvwHlIH\nm7/FVPYtuZnNB6dMwjJlZaYcQ+2244Gfh+nZQMJ8hidF/kqh1FmDeL/ZGflN\njHXpUKUmUyyXsY4mgsT3nR/ZDfBL3PfuJItm7FOVrwqVKJiCb7rW+nJQrCyY\nlSf1d7N30lgWvfkmfOVZAs5L7mB9tcE7oZ5DppTEl4wUUZlq6Y6879pF8L6t\nYWqvwRrjah+z4C/z3bUrmPCAqW8DjJDLfRFGR7vspgPNcnvBmEOgjwNvU77c\nCj1qLJzFeDxi+8amN0G5FPNSRUNC6QGce9ZmpCIngrSwU5No9tSVu5SQ9wGr\n0t5H9L0w9zB1/6wLxL4R6w8Kx5d+ORGRuLLk4ggbeB28xpQyUot4Q1ARkPks\nGFJRCqaYxZYg0dFI+iujTCGL09+M8nCPhurXcSrn07ggxIzdubLJAeRTe7ol\n3n9k\r\n=6OvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/touch-target":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.ba78e8724.0_1639606417250_0.016619847678043476","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/checkbox","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c791de615a0c80eae966780514cebbfa36f0e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.e3e073c00.0.tgz","fileCount":42,"integrity":"sha512-88LDsbUABKVts6WiCw/6Qdx0NVFhQDLHZ8fHGQNJVdL9b2pufKCi3XMERSLdINFaBYBzkO+1JRKLru3QPL8MCg==","signatures":[{"sig":"MEYCIQC9oQps36YcuiPhKHq4PXEd3RKYx+IweSIutMRPhWHjTwIhAPc2zocRDE4GWq5vTl4LTo0CwdDBofD/yGVVyV0J9eNl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPE8CRA9TVsSAnZWagAAs+sP/ifMGwSuh9LmANOM/eNB\nT2Ei3fsH8wzAjnp4gjh6wCM5L5wDBGXORmY5s1UrkcfC+QlWaY3hlzN1B8pp\n/XIbBaL3ieJCC5s6gF6ptr1Xo8zQXrHSKzPkoiNdOAf50OcUin0RnmLG5PHL\n2ilELxW1JPyFkltoArywYaldMLVY7DJcX6sIhezRSseYJKpukhxzjHNzcoSi\nDgVvId010KfKcuAWXVFlabTQZc69Lwxwx40fszvfEW5TqDzIBkhV7L6RIHpI\nNl2l0+GS2Ne6QCLlfsUNyvtIEf78Abf5sNbN4zHhQQOGfQjb6t0HpyUVMh5t\nm4wkrRHk6qv/I0R0WoMitT80bfHr9RSu4AtP8y4yq0BD65RAiwdRPTjZ7GLK\nQRBoMuxj3w4MV/LeKB4IFxl3x976U6vJiANdmLPs2GbgV5nndwtbujm96NXG\nWRLvzZBXnO3mentPkAbpUhgrv6IelkDeALqh5vGWw1tSa5S46pcZ5kDuQXWu\nxm/eo8I3f/NfVKzcB/01IYDVUJuQikdCb0zBJAoY5LVhDcEWgSDI8bVPkjH4\nBDaDLhqIj96Mp1S1Dx+nyfDm88uQLnnTtmy36hL1OQ7FQWsUHvzKko8BNLtN\nQyJrI3E1J3bqVQKRpe8Os1XAW7IyiBSjdC/8HIigeoCEf4bPWYKspOd5uV+z\nKrXU\r\n=QEZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/touch-target":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.e3e073c00.0_1640034619872_0.26537400418563095","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/checkbox","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76e77af640d2b5a6074b119cb46bc0c20f34e7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.3366a71d7.0.tgz","fileCount":42,"integrity":"sha512-dMXzluSh6SEsWHLDbDD4Il84/MS6HbxafC02fKBIDcWE0cTAo7YMu4arUMvIWQqIdSsHPp5N7xgK2y6Bemw+qw==","signatures":[{"sig":"MEUCIQC1Be/o3db+Yy+TZ8GNrCMyF9H671r8qxm+B+vcdRtFXQIgDhw4bBt5DFYdWKM80Eisilyt5+gsI+RVrKVlX36IHZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsCCRA9TVsSAnZWagAA0/gP/0a9gB1Eb+qAdUe8HNVF\nxE9R6HgS/ErhmDazsRMIHSgk6VeZ5sU+DX2qRgKncJpIiFRiHleOPqcGuUkf\nopDZ8w0Fh0AVY+CtQ6UTKJqZXnR74YHJQOZ5QP1fEMbt7eMEFu6JQkeBx2ab\nvXJyE90bEE0P1/4dOWFQVztAsjnZk7mjESIlPXsiPdUsxGvn/YYov/OMLav1\nxQgW+EjqmAINivTqdQ31hZImr4jyOy3mpfzb/ebKD2rBKTlP4kkNdPVFyIaF\n7Jlfng+uno377aLe1eEL4z30baVPzPOOA0/dGAlAt7CYDmL3EnvgJh8mnDYK\nqf+QDZtaNCLQK7N43F+ToamVRRZCF9TImRKxcnj/849ijHS8b7CieRwcSQkh\nJ6NFfSpgO4afJmprunVFkIKHbc8azBa3Y6M7IExvLROjgvV25jCaoR4ByrAN\nj0N1rA9UI+2Eph3ieXnqthgccx+J/iYeiCxvGyLbMJVaLwgu/QhpIUVDRF4r\n1o3s9o2KwWpl4Mx73V1EZzMdNQO0BIUjQQ9ughPgNOa5gdnM2dUfoaoCrJSN\nAtEFSOHpjWqs+Um+MDF+qHNectYaKt5413J/pvdl0WwW2RlGIDsxVGrtiJlh\nYwEEAEe7IcTnFNnKyX1kkhycnKRbIxLOj2Z5D4TwE1V5QIwc1NMs5OXBMk6w\ncvXQ\r\n=gibS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/touch-target":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.3366a71d7.0_1640176385938_0.1545988795773412","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/checkbox","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b159f833c17d7aef3baa741698befafd79784c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.c047f7c19.0.tgz","fileCount":42,"integrity":"sha512-juF6U9qTslKzz3GFnveofVpU04GRoZFi2upCuCtckQRTOiDWYmI1F+RRK6Qg7y9ydGOli6y2DwyHySS21DcbWg==","signatures":[{"sig":"MEUCIQD3FigMM0RQE9TRc50c6HoQTbsGwHbMdZPA5kSQrIcnuwIgMb6sqmdoqmestFpqkSzH/0PXQch6xKsYCt6HAyGV6UI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ctmCRA9TVsSAnZWagAAkbAQAKKXbDdRLNlcjeRBFHQW\nEBb4LsL2XG/kstzdd7Uj3WNC/3CbQuwXoapefF7M5ajC0VrMvMs+E2d0NLYx\n2IgDmfJw7pd7o3ETjvLlqxb8557LeOB2T8pFel5/BqApePVsqvZoEhh0Kzg1\niIGyK3nMdGgTPdP18GLIBLLNeeeOUxiX46awST8pfBE9xA0WVh1yaOaFyUOz\nBlSuZtQ4W30Fu/6ipFwoKAEruNFBpf+2ZZHTO5CBsSTrxCCAgOzgJWWGpCwy\njtnh2kiPFCA8qJZflFGQinw0+j8qUFHVehSSmWBU37xXy7hfADcb2P7FKJkf\nh0bug1JJG8zJkeeg+6/08WHojTqiMyNzIUU3D5sk1WGw7nfQ8kO8+wwDc3HX\nJSB8Sj6n3h6ndUs7Sc9GMAPBwuWDHs6PNksrrRTdCae3wvBCkYXIgOmDhqFC\nMPl7gBALvacJZGrl9Q44VdJOVmHWd0aBdsjHE8K9Oy+wFoj9jJgcx8WHu8Rj\nxr9b3nPZSP/oR34LgmHd+CjN18q1T6MaLLy+tQchxwFuyqtbR2GSBQUI5Tas\nJ4/nZnEBjoOTVzco20WN26Cmu8i+aa7jG/lN/k192NU2gxOWInGywOAWeedz\nSiyYPhAU2jmcuNmXUHpD24YzNfLRQbq53dj45y6Bo9epX0elo7J0g532bGyO\nfbs0\r\n=P/UC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/touch-target":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.c047f7c19.0_1641401189941_0.9772837707217075","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/checkbox","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"957f0f1a2f1bd5713f4ba393dc6b9198fac9ad31","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.05db65ec0.0.tgz","fileCount":42,"integrity":"sha512-U0+nm6CiJlKtsWD94e+nMpmuvU5PUwlHMTawc85TxEa4bQreLA2D0T0Mzr0eteukCsoOutmay9Qax/O6ERkndQ==","signatures":[{"sig":"MEYCIQCyFvRxa7MevcQAIyjQHt5lxT645vYOp9ZHoN9WiQd4zwIhALZDGxQWhzfUZ8MgpM8VHAlrNFtKuCm4Ur+KGlN5ZdBl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOMCRA9TVsSAnZWagAAnnYP/1Da+v6JNXrlbzzIHumY\nDPepma4rm4Ok06xImzFzTXEVvFuIfQkpKME1wbrQt7NoLmcB5/22Yd6izTDq\nKYtR6+33QvR+oKgvDE+cO/zbGhBNuxAQJ1VQthrumTWfeQSgrEq8HBNntlIx\nXh9LL+NgOmonn2E4QdWUENTCJdBEPZ2imlH+jH/tgPH6Nh8eLReL7rT2Ydmu\ncQ9diT56bFstSH80pxI8F/4odMV/Z4q6zigxHj16mwMSZOAqJhA5/+uQ8VOR\nat3EQYC//DmNQNF/J+E3drTZ1txcTyJtNpcxU8D0bNfAcgbTtOmL7HegGY8W\nALug4Y5NBctaUocXIYEXI4KpobS4h85jApftckAg8OMSckNVjKo7avoAxAOi\nekJDrWqqX4v58Y8prBz8+YiP74uzyqL609bogPtoORAuZZ1LWVuGsXl/PHiF\nvzMUGF6+Be4IcR8IcofeSx55NMoxBy6PgHc4ARvDi83n950GhYPTvhxnmVCQ\nElBQku/hVh02u20AgWihSUA4uk1p5mJZelPhelAYTd8+bhD/g029altx/Idy\n0LD6KIBKPC0i2wMg7DhWdGdVKtci91WjZVUFrkmffn47o9qAjpf23TdQw4il\nlY8QUNUegNhXWkOgbSHhCTdqrNSyddciGD/kmUwAJvXsTtuDbXZQ6D7BalbM\npgIs\r\n=Bpuo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/touch-target":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.05db65ec0.0_1641489292501_0.2379877292953021","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/checkbox","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0edbcf8412e53d394a954885cf0a017257b8d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":42,"integrity":"sha512-4iECyxMle/ff6M6RjQNetmxtTESmOk040B3yydfBEsaMFbji5GTe6TSpIzDwwG5lhXq2n+691+ZT632NI6pFDA==","signatures":[{"sig":"MEUCIBM7e9zoiJIlH1kn/plftza6u5IMCijjSxpNiozQc124AiEAoPRFPRDV/RsA+EnGgBhYbse4hBHv+DcsrPGn4WEp6QY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GPzCRA9TVsSAnZWagAAEPYP/Rejk5qrO9PK5WRdr16Q\nR14uFmwEpG5b82MLQIWpO/y/OwW+ttAEilVgRfpygiRRjh2VayFoUb+Wf+8m\nduKemvQJGYArjpG4HUVVRwZU2b+jaVxeveYLWe9++MtXnBKBVuhwhG7j072e\nJoi0qBR+bTX7vkaWlv4akwU4Xr0XvGMwQrRzsMp9kuE85xzkucYadziZcxe7\n8TVGo5f8K40iG1BGgwa4xOU302ep9zF3R9A6DF9OXYB18NQOVv+pTHOKLJel\nsJxLS8naXBm0JhkzvoR+lr09pQw57iQHn6vR7zECcQtvpYjQvhz/XGLUXdhT\n5/IlFB9PR465Fyk0xlUV9+VeqntwCZCSCp5K3PibZ6wZVcS0tVCjS7ObLWlq\nh8AzKgz5Bv9lc0LZ6XlRKN7t+mWvaT9401t8KeweTlss6DKipuZhiaULhxIO\nUZlRPvKQVe9keWZDkfSTpiQhoEKEVLitVKqr7pdRcKwLY/32DIyd7PylXgJa\nzCs5h57H4NJHI16vDiltGqZwizLMIHi1x9NteXVsTLi8jSBrXRRzHzqK5H5J\nS35nGTuLXqYyCtfExs64TiwMNyrGevic9JhL0OI2bWKD7X444ifyAfxlY+If\nW0UfMNo0riZ35mqQs/u/eKsmcVn2LHb4PT7X3wfpdSByraPOb+wTOBeIiFaG\nLPpW\r\n=IGuY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/touch-target":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.6ca8b8f85.0_1641571315691_0.7824986899756674","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/checkbox","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d84eaf99f344ca1a9eae5c30f607d06725efb16","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.173ee7a7a.0.tgz","fileCount":42,"integrity":"sha512-OR390jfZ7tOczp+87hh7EZGn8qa/SaY69A9prrBNX97BT11ou5U7oSNfcrA4NhzdYkbCIKH9ka//GJEiIRCUfA==","signatures":[{"sig":"MEUCIFIiZw7ExEtRy8xIhKg7rdbrvO+7CzFll3myb7RfjROUAiEA4ladDN42WSmN+rnYAFFH9kai5NlIhoHfnF6j09wKlbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTgCRA9TVsSAnZWagAAYDwP/jQBSaSOegYCG4kMW0fB\n8kRFSKgyLWKCCEueYyqkvSgdvLsAVB0f2od8Pid3MMzJHtc2Jy3yTbgLDZ3c\nSp5baq32kvbNfa5wvxdnCY7XAgbzABrsGqNCGVAMY4bObyPI1SRxaMN1J2Et\nvx96AnVLA0JMeQ1K6jC2PIQkMzJHdzg5zA0nvWifcFrZCnw7gL4Gv6xCsMSk\nnlVFWoClUdkfdbFZgPqLWMAJiA4fiu0HlET3+7dCXbOz5MaVD6WlYzpnXtrU\nTkcNswoMq7kVAOrXNJ+M6pNvsOWlXKvmuz9Xp2Cc9J3HgNj6pw0dcq2XKMJj\n+0M1PMSVE2uJSxsEreFaFI37BNvLiOb577UrmeaRaoMOnbRbc7aJexKdieTf\ndBOqsJUWFXCFlivWB9jE5hxTdBZtaL8raR8rAhpGET+U7YgC45ufkuZWt8wG\n8NrObyAA7qFUcVoQqKwAzAxEHDiV01YNauVu8cIThujOXkIpwrM6D4odvsfJ\nhJo5ljp97uN48XpifPaYDGO1t1fQe8dgrkJBUEzpBPPzz9onRiIKQ1hE//Zi\nNUtsWRcsNCxx/hB/nsDD54KtGYF/jTLPKAgLMjGMVw2KeluiEMQd6bHCEfy5\nR2w52CLGiimK1Tt2BTGzotnVAqXxekIwT53jXXl7lQOwldl6ju+63ROwE4Q4\nXb0V\r\n=/KOK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/focus-ring":"14.0.0-canary.173ee7a7a.0","@material/touch-target":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.173ee7a7a.0_1641833696509_0.907509862502341","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/checkbox","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9806c542482ce226dc5aaf0a7e771490d0d15e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.b704e4dfc.0.tgz","fileCount":42,"integrity":"sha512-a829UBJMyjXZ/MlIdcEfzEvhigQedoLhp91YaRyc3hU1xza7KtOTdbnPVH8I16hIKP0QFWecrjdvqHMzt6Vb5Q==","signatures":[{"sig":"MEYCIQCtdgcWbrjp9/6Gl3+fza9cqEyLXAGwlgDAPbVCSqFQIwIhAK6o3/xtNqPY1aa2GIhhLU2kTvv/YO3Hls9ESnKykNmX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwFCRA9TVsSAnZWagAAD/8P/iKF30ykoQUAM9m6FLvr\n2A5OA56Lx812RLVDMiBqO5OQv9oIisHvh/p5t2tQW/ocBpfJIe4Vb3hnbUr8\nvbWv85QjnSRUascUHEjxH0yu8Q1Iw2hX553vO6PZfkTEJIfrhxJnvDQwWt7f\nj0K5NGkAID+a1VgkaQ+d78gO7R+XS6L3Oj7w/0DvtbU7NVP31PEPEWc2kisc\nmdfVulvsm3tOmTovxXi9rlZPbZRzD0HwXNB2FFwh9Zo6aFZgzWm59a8xXrY0\nF+ml9xfndx1ktaFA0vzjPD262QE7w+/Ep6tF+/q4QJIo2rH93Kib0nE8k0yz\n3ltBJ4A005TVXFAhnyRZbUl5mUPfshf/3TxLZyjxq8C2CJkCe7CB8oN1jCb7\nT8nvgyAcMIbe6Cru4iOaRL5ieDxAduy0/g0sxYP1uwZg3RRaJm+kZk2Omy8q\nMekbpynsgRvHl94YFCesEs8XIep51aAsHxu2Mm7E1brAMnPUk9bVgLnu5k0x\n9fMShYcX4VBUW4nHgoih3J7XT2RuTy+IWXfBsOGNZhuHFUNex7eXfkkYdVZw\nuFJ4Km0pvz9QOWOlBRtkgTpEnB47rAOsIIzfgegjkCJUHkXROYJIoNWvZryg\nTi46BxUlaUa31ApkJHTW/c7j69LDlPffmoKRM6iVYCC8cKfvqnvsoKxEN+yL\nuzq7\r\n=N26+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/touch-target":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.b704e4dfc.0_1641839620980_0.3967988481364564","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/checkbox","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1833e092037d495822a3d6bad995f998958c5411","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.c14e977ee.0.tgz","fileCount":42,"integrity":"sha512-+uu0fPOkGNERcE6uJH3UqT9TPQHD8ICm0Im9yL+lZM8jtZ7gxkgIzUDW0Adktk/ANebTj0floxJFar9RfODnmQ==","signatures":[{"sig":"MEYCIQDWXlCvr5gwVikWItvk3IJUxgQc57DHNStU6pWGMF5V9AIhALnV3QNgSwfWCf8jYQSVbWh/Zo3T3ewbt1rl2U9jKEuJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":742885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ac8CRA9TVsSAnZWagAANn0P/2chuTt4oklOva2nFwfb\nh8NkMFZ9QMgon4A8xELQMbNzzMqkGgQcVKDW4WH83UFRx9rSlo3KuAJF66nA\nmuWqgAZyOB6QPMtZLqlPPNX9b4T8ncJJxLMdS4GbudCQIV59gLGJIAKuDeNm\nDoRD0AeqIeq/YQb4k77nnC0SmaGrcqaLAn+1jEFvYeaYM7PJBxjwYCyR7lpI\naVHTJhfa5ZshdTz6RXXwh8UrbWlVso9oacV2jlnvmC4JFddy3aNeHdNRiXxh\napEMQo6rcTCwj6peRZtAOf4EB/iuoJUpjQJG5wpRMejUU87CIgFErWHnPdME\nDBIk2pm7tLQsJTWLVYfrxVCbBxTCycAsrKz07feDNvnErFtZCjxguRc/VNkS\nOk195ElDZ3jpChaSG09NznTXdos/fda8CwB+tUsHdVGWnsi8w1Rou9ewSqPe\nFC5g4j5pZ02VdU4bH8tinb2TNy6x418I5CDwJeKXlOVyC2fSs5b30i+PnttU\n5U/DtiUAO8D+H23lSA2UQcz3a0WdiuPQXbmNCstvIbc/pw6Pcs3MfHTu5lSB\nPIqDa2wvS5hC/eU2pqXzE3wFF5B4f51WZsqnlli5DAgiZ62nWb1ZrDtxBELE\nTnhANN+GvgvRH8Z+HqhXUIiihPyTqb9cR9kTbdaCmpZ1b5UUji+VcsD8gdWv\nH43M\r\n=daAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/touch-target":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.c14e977ee.0_1641916220305_0.907749506271609","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/checkbox","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"266086ce1a441d553ef586dfb75dc69764070e73","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.b094eaa4e.0.tgz","fileCount":42,"integrity":"sha512-Dct6pDTKH2q01IzSgMa5Opx/iRWkfZ0TMv1c7a1EocLUI4mpWsrlhjfnmcRcoQhHuf4xv13EeKV85ql7IAg17Q==","signatures":[{"sig":"MEUCIQDv6LyLyIOl1/vUwmyCApEOPMcZ1c8AB6gkcVe6y8ECWgIgTIkPgRJxgip+LKMd0nN0X1rEb+nemmjYoZ+9oK0g6Dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":742885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cQ0CRA9TVsSAnZWagAAIpsP/1/QsrVGQakePd3tpJr2\nn6WbZOxmKOn+q0v7T0Ts2H3zFmovZuIfi/tO6Fpq2+4gKnnmdk3GDRTaETk9\nwXmApQLmkXNA/eM1sYJt/o7q6GtTKUxrS+6HHWawV+yPpnP5LzwIVQ9v3r0e\n49KjdLofnT79CY0/bzHHVXiCbRgUUyp42hveA7agjpsCUYry38WKbZ/t8pOw\nE+dqtMk6fDY+GG6BXiBjlHQe7Uwz+Jf7wnMgW2U1D/xkSNFMJ+KNEFKF/ITf\ncPwHdAJ8zXLWdO+TdYfVcQ99qZjHq85LGZe7CAV4JKWw1KzTnZznVF6t5UNx\nfMj/New/yGXccBUvG9a3ODtnSBOsygah4SPVvnq4vUXPRnfuo4qWXD/b3E+w\n+xnDVx5CV7XHdcIMEh1/DFEmQSCtQMRC19XnOuA8r0LENLaWj55xEyrkG+gP\nc0ZPWF1vICG9WAfiZJPD6Y21UDw7tZ9ldrXvXROzQSO6TwGnFxrQ3Zs4iQL4\n1LEny+g/gAkAZ/OEV9dp8eTBWJP66sX3fFk3mYtwiSrvZfxJokf+0SxFeW+j\nloatKtCVKIg0Hh6DiOjvzD8xp1EdP+i71Up/OO2R+TWF8EFTdCbOTtVkuWWu\nSu4bBTLKY/jga7fqrbWEJMvAqTUBKRaosCzcjsl9Pzg+Tbq87wshfxrcmoUl\nqhUX\r\n=q6zA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/touch-target":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.b094eaa4e.0_1642185780014_0.415552175189003","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/checkbox","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.390220e42.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1d1fdda15d16871d2c85028e97947e44c735cd6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.390220e42.0.tgz","fileCount":42,"integrity":"sha512-Hcl1lWMwKo+RcfTUrj6M4JBlUO9Pv+CvLOpHoXYzrHR04BvFZtbDqszwLR6ykMmiPM6qZFUBvYvNivcG7lxc8w==","signatures":[{"sig":"MEYCIQDJYODMVgIHpEFa23vL9Thvnxjjt3VqZuTaYTVurImXmwIhANFNUxSgIadSzRoxhREEOEKR2/wmuLTdKCX/8X3QzoU2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":742885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z16CRA9TVsSAnZWagAAquoP/12y6V2sxbf/Hru+HccR\nwKrdW7ae5mmyY3CIODIx/Fw2eQuxtu012iCwwGymHmWKsoNfPp337h/Piu5a\npdrYPROGRieAXZh9yoq4EuHsKTyPaovVXVDUctU/p4iJh4I7rW9SAXGulSG6\noPyqKxeK7x29446Te+aS/zdHbgDIGfGSKwb6sq7pjYKUb3SVft5c5H3DZqgH\nZ90JwI9CEyri+gnnxQeOm2qNeZTxdaazF9XxQVXR0iI60VTuXgJjrBR4OfFB\nKskLO+uDPs/Uf/sHJzzHDjRmxMJ5s7x30W+TYu38/1LR77lSnsO2YRV8AUtO\niGQhrzwjWgfe6D12Y7P596AEmKEz1xt6+bonvj+R/wPqrUVgWjzWOhrq6hOb\nNnw9vCgC7xAnIHJoZIWbxCo8505ZaL/AVT/CU2bXbUj7i9zq7aWNypdEtbTU\njzH4sspy+pv2wQE7AM25lz+eVBEc8lg3kfHMxIPjUROokrKXOHpq3yl0MNsE\nW0xdPJWFFF9EXBUbmALGCxBgz7Fwgc8VsXx8X58U+6b1sjVdPxFaUdictrwl\nopkdf5ZvK7iIDbtl3bO1C0nw97vZSwKvtCKbfVcpZCX1mzGS314qz/PSY/Y2\nwyVB5pnvCW4/LKwRhUtlX0d4At+3V6XLehDEKicUzty9fEknzB7uuPESIzDi\n9tgp\r\n=vFYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/touch-target":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.390220e42.0_1642438010448_0.5689687015479266","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/checkbox","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87723f77c63784fb396d1b3935b3b9474f08fb7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.4b5391f8b.0.tgz","fileCount":42,"integrity":"sha512-7ukB//ORQmNBqn4MEWYInYso+FR3GR93KJ7aas1yzmxfECC76BfTI1BkpN2/ZyTo8yr+hHzSajAEKHEngsjVzQ==","signatures":[{"sig":"MEQCIAWckkeX2iOX8eKCfGBYGwK6Tt6vQtn58uiZu/AVTIayAiAzR30eVDpapvq5cNnrjxPmk/RnRA+DW3hVDQYdbxqI/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":742885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KR0CRA9TVsSAnZWagAA18EP/39TVoM+JbSxZy62XrAf\nHryNByDnIAQNet7/T4N8qQbnLR1PuwlAgJArUdmF/rCZUHUNNqPY3bSXndEm\nNzWcNBybhZzzsNvOgbJd4d7+uzVFayCN9H7mUWqCnFZ4AQSvi9ja5I2ePcwl\nma9cdHZNDhVy9r7YQkfHuh8ILx6N6vW24HXHuIbq6ZmWhZc/fHrQkX9ICEew\nGeecJh/fXtG4BKvGcIlb8MWWPQCwg/tYk0fHZYCmBBn3J+JtgfVvNv0ftVCw\nQw48jYNrRirqEQ7t+w/2WMmU/GdnyLbw0BQtomWvPj9Gv3CLMxh6dI3YcvDJ\n4BsQN7bVKjgrAJPOVie6YuSJSmyQGWZL1FL986VoQRqUnM+jkutfYIRcQ+tv\n0HVfJ3tvd1Umk0vDs7OnEqbNWG0By7fY4akX8KviUu0r5PK6apVJcwR/KvnV\n9w/jkwR5Jcg1jtzSpxV7r4Hwnck+Z3M9oykkL8Ldxyj7DpXQ9W0lGV0Ad3J8\ncTTkWJWQUS1/cWBAQsQTfQ3ZhsXNONJ5AxGRVMcWweHPHq0U1Ty+Swzb5+R+\n8Ygb1rtnjZfp909axWWAsvFyTvxX9QACF379dYCF/HWw3Z71uiUno9ACxYX2\nlLALuqCCz2ZcY0BNIs9AD1Wn1Gw6+R9+kcD2+T9tH+//5wPIgGYGPhtScwxj\nVnjX\r\n=9kiZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/touch-target":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.4b5391f8b.0_1642636403960_0.08730709763928712","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/checkbox","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"214083f37e26523f26187c875c35055322d87195","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.cef6bc623.0.tgz","fileCount":42,"integrity":"sha512-AtLFZUSDwq1Z5frUXb2hGG913t+sCS2z3EN3NQRmIKFyWhcXGv4huGEqktVP66jordBDmXJKwUb+8y7gQMtkFA==","signatures":[{"sig":"MEQCIBSPFRC8oE2ypEp+Sh5vMK3XsZl3zvSDgpW1m+e+f0MiAiBah6TqipmxZ14RASEX4RTVgz+NqyuP6IKHvfTR65H32A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpFCRA9TVsSAnZWagAAqSkQAITZM5BKsD27eGGsR6mS\nUOXDACwvnPwGsxJkeTEXKdFpP3Aqg6WwpN5yWyrLg5rFaUWlh+k4PJmdEnOR\nQj4FMr5J4uRNvDaQpqnZwsn/DUD4+oQTvOM8ddOomvYfIrfFmgn4Tgu+T4Ie\n8y67di8/KhkMy2M/b9vxAiSOEbkAXsnmtY1cA+cX1IZ1E+tG/mw/L8EmXb/Q\nhrVWbtm+uzscVZhLwbbDqkpctrITS87/sJ//YfmYc+y1qjEcJw62VKiyTALr\nHNQf4h3HqoMKhkU7N1dANv6XEf9EaBe/ZYgZRtz/iTXbPjpQDI/Rt0TRVKgx\nBDXl/214Fyds/IPJP4PjznFZ4szPHI+xiAqPsIesPcj7lc37rRA6Acv2jIpQ\noArBVYW8Dk5IqeK0AoxzmZjcRQGRxFDiFl2xv4A7SITFiqbYOcsFv2ghLCxD\nhLYa0LeVS4yGuqQQ0StEmrbnnc10sz5ZaD3CKRSA95VJ3b0Ujdw0ZRq4kcap\njQ6m3hTno4ZzZEUijm7SOjEh2bLR/8chImZl5tcypsUdTm1gKIaEhvlX/4tz\nVoWhfHUG4gTQji/u6qv7Vqexdhw2690FblwOELoasn7YZ0xqn4XNtrXRcqnh\nNYKVEiD20R9gOuuYDJCh8UACnipoFndNyOzlDzKzUA31lW0Js9I12Hh904Fy\nMq1b\r\n=FCot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/focus-ring":"14.0.0-canary.cef6bc623.0","@material/touch-target":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.cef6bc623.0_1642637893526_0.5151613417346885","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/checkbox","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.0379179c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06aa4f79a4cebe3b43bf8eb744f672ef161987a4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.0379179c4.0.tgz","fileCount":42,"integrity":"sha512-FZIvVk6/Al+zN0ALzSoM46Krd96cTKaPS2teB3LprxiL0HmMGeiAmGR3ZwnoN90/RkNDJGWpMbJu2gg9+TnaKg==","signatures":[{"sig":"MEUCIQCkmCRZGQ5nYG7cbNaXLwQlP0i4smIT56NhEwK6v8CdegIgIzCy7+mNPoJ/HJQkLJpvORqFtyTaM11i9YuFfVOT4NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAFCRA9TVsSAnZWagAAYZgP/jpie6EzZDLA0x4oWgGc\nKQkbeAuooUbSTrhrwhBHvaSWwFNhb7bBuWc7pPIOlyEfc+m8g4z3xVQyLeaA\nnQ1tPqIZz0JdbAe15hV2GChNEaXpdx0dEJP2Hjf3MzQZSLAWb9k948Iaehiv\nrj9ZOjgFtadGQe8Ecw3gHiJxwwdRmq5OlurqOaU9Z3HU3BIPv3weQo+X6cCQ\nnc0ZWXEudQmoaToTf5tKMwG90jBjoee5DMMZzWq3w+Ib8nMlJ3X2m5FWquaW\nZ3b/EbbK1GoUdQkUF7X/QUgv1x+2eiu1FDYBhL+dlohfxP5ckE/d5IHy7JCL\ngF72qjPc+dB+raKZY5rVzmxlDd/M4K3L6c0EvC/KUnovB3nM9UXEEHiRN7pU\n1mYKWpKG8Gm70N2SQa9KzrVdHUXKrO1ai1ZSgBh563luZhRvH/X0UOI1vPan\n8Y9QlCpKUKc75MuCfotzUE7O0WegLMANhA2aSC8Fff+8JPSxHd6rX2QbiF39\nkAXC13HgNywYdE8GxBfYIAgsGBuXp2QIkq30tdb3crb6h6r/pVdEukQ5NcZR\ngSIx+KV2fye7VXzoqkKr49E3VLXZEklq4BBaT8DUO8BgP79RXv/09q6h+c1B\nM4cp3uIw9MMc+pEA6bG4SZ2GLKhSm9eyajWHVfnhUdu8D/Iz6M+xvWfTWJu3\n0Kl3\r\n=DqUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/focus-ring":"14.0.0-canary.0379179c4.0","@material/touch-target":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.0379179c4.0_1642704901411_0.5989355787571868","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/checkbox","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4581c2e9a5c75eae94357f7b8d1f4efb11f5153","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.e62f3dabf.0.tgz","fileCount":42,"integrity":"sha512-6KzfA4Z1e5Vt7hdtXztWYdXfodgsVWF+2R1i9e1iTBDOcug96/70qxcXkpXh1Rpf3Zp+lN5NR/RtKhbSi6Nj+w==","signatures":[{"sig":"MEUCIDnbC3EQqPBWdaRioTBBOBQBx6Wc1K6Ze1lXbgwos1h2AiEAiMxUaS3PmcpUaWpBuZB5Dqx14S0l1HuLvpyoNx++r58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zvhCRA9TVsSAnZWagAAYZ8P/09JxWzqGhKeWJ4jUSJ+\np0KuJuiVNMC5SWJHDJgAMCqu3kvVsSc+y3o+gw9GAS2ytmOGmdasR84GqqeL\nAi43AN4S1zumoGZFd7ljZ+fk8cszSk44q5T3f1p1kjwUhHIoySX71CjspQdA\nGy1wXE2ByvqOES93N8cgwozPeSYkYyHXmBGvvuH+wEqv/mb/T0vl0v8O6WpL\nL49SPmYdwUmDLZnvgG9qUtXKnsrHjL45J0ctCxYOn5zmUhjbcADbtqfHnwzx\nYvjqy9Bp4fYHQpb7+A7TWL3BZaL8vyy4YjFgYcUisShhcI23QosfK0LoytJj\nxKywDnsQTmqjwuvh/QWLARv0Cpl0FVWKccGYArYQm3AAknM9EWxSs95hdOhy\nOpIX8bSB/dFrU2uhsuGc1Kh5mwEZT6NcguG2pTC5+ab6Tcwd5jaBErStu3jf\nEzWeaBzMW9kJQ+EzrZptFZIxSr9YOX0xTNC4463Y+olD16spzLVzg4KXiOoj\nQuEln5jN0lnhBeQ3lQ7O5rHT+t5fbsxPdttnp87PwHCFtg0i0IOc3KqFhujz\nOUe4XbwbCIZGx3NTqCqProzKZjjPykueriiwOFPPnBHmBGHjHSB/JOh9IoHH\nUH+gpw3EsPuiWdx/Y9UfEDEXQNpCu+M3dx2gbPvH4C/LwsSxJgs4qcjIkt9V\ngN8f\r\n=APN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/focus-ring":"14.0.0-canary.e62f3dabf.0","@material/touch-target":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.e62f3dabf.0_1642806240905_0.38841547672599286","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/checkbox","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04a753a4096355ce2d28013c14344ebecc2612c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.3e20c1de8.0.tgz","fileCount":42,"integrity":"sha512-7szhB4Pvt2twI5QGZHQlVGf7GMT6H8kp77UbaE6RCJAnu7Lcsr2+AyKw/3ZOq31vxA+wn/tDhCZOZ6Ezk27lcA==","signatures":[{"sig":"MEUCIGGbXQ2bRU88vhRmmdR1Oan32rOwV8tJJXsPVpI28j0nAiEA+zxqLwmgUaXA816cX1FQkBKxsXNV/XPwjlIVZUo0X4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgUCRA9TVsSAnZWagAAY9sP/Ay4i6WmpXTj+aHNEEl8\nAQGOS/b6n9FScsmCEL4tT88a3uH8d+3qU7FjKjrjz1Yj3XnCh2l7Vi9HQAJk\nd/3/vbYXeT+ngg6fAW33oNxYqICvfm9IJwydhtNEX9xKYS/oeh3qYBmJ9Fzo\nQ3Rb8FmdlUN0eMq4wdGNXxHgpj8FuB8LzB+8yzmi0Qudf6qxxmhSC/YneFWe\nb2Iy/TqBJJ2ql7UxINlp5eP8pM2xN4w2L/a/Q6KS4jK0lFl/tZGxzFKETBv6\n4ekkveSiNCBzdtbtvzhCfR6ueb4ln+S2gmlkkjw5mXhJdXcC8r+gdSXXjIAn\nZDu8wvQlQg3DTTGuD/SfUrhlKkHGtGwJ21eqlDETiPU6YFBiALB4feuiufIS\nTztc1yEJFLWS00Kdiu77a+l3pm7/doxKeegT3mPuqdmS2LPS04VS7O9gsiUe\n0JWP5T178eALUfQR9vZfzt3umpJX17vn3/pacdFLLcdpFpxT4oCIofSy2Qo2\nG0gOnVtqwHIQBIbnCadsFYXbV3whq8TgwIDUvL03MvbVLc3/86zD/VfqQo65\nIBYdjmhtS+2EYUHzhFqB0RcVJFqaM9zS2mJB1fYMyrHsIxrX6pWH2iVy0nhE\nmnnFGKvPWuIMNtehJ4yLpyQS1LRdqwsUHcBfl+Yg+dA9nVQoJtpjJDqxFwOy\nNieL\r\n=byjS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/focus-ring":"14.0.0-canary.3e20c1de8.0","@material/touch-target":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.3e20c1de8.0_1643124755851_0.29711885305444286","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/checkbox","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3b1074aef6b7bcbb1078d2c93f704ddb9ae842a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.9f9d928b2.0.tgz","fileCount":42,"integrity":"sha512-vOSs59RlJUkXeX0ItFabotL2vhZLpV4yU8txsepoIlyFIEnQdF+wowUQK0eaYcXiwKwzVWjpZUpu/FZ7bwm5aA==","signatures":[{"sig":"MEYCIQCnB2t4qlJHQ99Jk0y/MLjWqeXdP7Zy22vWtHyDpkCCpgIhAJfXtACFF3e+tcm0GmHAlXv74TT1yPjKAiIMzoA0/gjA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDdCRA9TVsSAnZWagAAR3wP/Rscnb103LahapVIPBrf\nZFGNzONLX+rfjF4hillf3J/vKUjmhHyjdK3r5xQiAnjjoVTT9eYxWyAW2cTj\nU4fvLGLian+oLfcZ1P24uPfVIDoIqSKE0dFmmDh/uiOdxrRFYbm4AWM7X9bg\nn+g9ZX3a3sYAzgUKlcZVy9UNXcxOhBuJx+Aw0wxEx3wVCBiWdxFNUb0M+suf\nPQCqn16V2xzzeQOW20hza4xA13TuwtjUOK8PNjMscERxy4MBqJo3gyXNp1VF\n79o60HbgV4X83qvPG2ckX385GSKvEMeHgqrzrvDqLvpECc/SWnqHaxeis2S5\nqcA7LU4FxjmRfLqjWZB3OD5pkDEodrbZGG0gfivrl2gHKjyf3eK6tjnIaV7s\nrk/rNdPfM/ERM8FPQkwW/uU20QEIGdqOtTMm9oAC9rpqwvbD2v4fYHcBwMpb\nL5C7eovsctGDrr0L6vuJmZWeNw1iyZHgl8xArNKYvwx7XoWLnsFuTwEeAUVF\nwe6B41/m/CS8QRPKq2w1Owt/TnDFNVhzWhu+1nm2ozbqrjaCaDX3eFAYAiSi\nqcL2Sv2TdVvdH5oDppWseDzSNtTELLq7BqrdO64GSrxNjct0SVsrgngJhPnd\nVYhFNshl6iN0vUulu2c1tYAxU5OWYLUrERytOAS7hn8zelESK9gKJNM5X0wu\n4byK\r\n=qD1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/focus-ring":"14.0.0-canary.9f9d928b2.0","@material/touch-target":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.9f9d928b2.0_1643307229308_0.13457040525447383","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/checkbox","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd715612e85b425a5b6faaca26bc71ec68566d67","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.a2bcb065c.0.tgz","fileCount":42,"integrity":"sha512-0zzDuGMXAROGcY544hTuA4wdF6CzPsImBc5zb2uWvp2y7dbca9FxQajvOsFtuq4NG/ry6WHJv+bPD5W3ELbymw==","signatures":[{"sig":"MEUCIQCbF5o7S54pEcTF/YA60pE1qG3VRy8G2E5ofVTukWIHsQIgF9IoigJwx7pz/JpHTcO5y1Ephc3HoyMCJMZEtxFqn4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYHCRA9TVsSAnZWagAAbFUP/3YxWL+E2IUxCQKEKvfB\nJTJEtN1IrOTIrAU7zL9JTprDV8KU032YWtgPbHUuz1SjA84WHeDoaXnON0+C\nvegctG6Vrb3jeeEBeOQMGNa1HoR2N0925NiGxRi1n4a2gErUGu33f1xRzhOn\nA/A7kZmj6X2F9d6lNsIPWFWn8h+EnofLD+LI7Gj2EYio83HnPt/CsdcDDArq\np0NUI+C2KlGEm+f9uexaYijUClz8+PnPjcGmD/ZWG3LuykyjL60sT5HJsy5R\nOwjLlBI3b6DkSEVsH0QR01LGFeJNss5649SRA9+3l8QUAIfX4lt+iE2FG+Np\nN+/r4keYz78oo/m4Pv2oPX4dYR1xmuBjqRXUjnC/IclPXO38+/OKjTBHCM8H\nTti1evigJKGtQU6qFxOttWn/M4a6+ai1z05jGLCO+JkYU8PzR2i5ZdbarmS7\nyrV242vY9r8ilyUPR81GwNmK738gzDh4Xs6N28uAXG9nsfINagw5WtXPwPY6\nxGfT4v4ZOh1KvpjJf1YgnUFsIDu7jcp857FH/vdZkq/wpHpIsAl7G3RxdTEx\npDVkx1jxjmE9Dxhi3dhILJFD8Yb1xlINo0SO7oED31sLuNL9+H9LwdDv9H8G\nxPAXdBbvV8Ox3srtlUS1IHErKzxNSQlj9WZzR2d98pmSCYvEp+fivX4fUf8x\nUj7z\r\n=Z1gO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/focus-ring":"14.0.0-canary.a2bcb065c.0","@material/touch-target":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.a2bcb065c.0_1643398662909_0.28080523139811175","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/checkbox","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"599e11fc5240366ab60a0d69229ecb483be41be0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":42,"integrity":"sha512-Cc8QF5NqZ6I/iSHZSFAaXTX2l8cf5SLZFTAUafy29BsjKHkPtUi0Hl76OiWpRrUj166wjSni2awICBEiRtlhfQ==","signatures":[{"sig":"MEUCIQDJDzRcTIGv4NpudN+vpDIqtJWsFE7cXs9XY/jJLQzm7QIgVp8b6aGuoMViniXsZ9opNqPlCSa2Ad/LHLxk77/YmYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcKCRA9TVsSAnZWagAAL8cP/iwIwovlaySHXppWMI2r\nz2Uk9Q4SsVmkfjfUXYtrOWy9rSBXiXZkIk06cZgUJ7EtyVxjLH6OAbEaQXp7\n4j/hTXWeFyN1x5DrfYIqSG/FiffmXgF3/70IBpAEdAKfkAlHFCKMH5ZldDoK\nDsVSmo6CCKM7+0JjXaoiy75xaKXL4THQmgtaHZTo5Z8XO06slpk84oA3plQB\nlbCpZAzYCSN6Q8njEKnzha5JA22rGRx2iL11wRXXC+afeBPJCksDqVKRY4RP\nMtRWUS75N5GR5W4w3D/3ZslGptXo6GQVR1ba/b8XNsTt10BTzPA8CxiIY7fm\ntCOCn0ezvSKcgoonqkDzqJc8qAipksBsWwN+AFNfKa9wYqfo2jb3LRnjcqvg\nkuCiVQc7wpzUuQgRVv/TiJK0Oz/rLPETz9KzrLurd4pGv7tdc2sdUWTq/EJF\nNKcbvYWwj7RnPXyIhKdqfyP9CP95oY2ZxNt0HxLIvO7zvbpHwse9vDHGtCH4\nzJDu3jaW9xTCN7iBXcVofuznyZQpAD2vhCaqfoSJXxQHio54tHr+Wbjkn18B\ndIJcQ0sZO3grlC0j20NeXXgMG6DxGPZw+Y1Y0Ms/EFzq1Z5H/yLFVqwYnudq\nFNt7Tj8X9mqutKEbjs3aWKiAPWX57j6gd3jb/HM36cnXIlevLg9OKUbrYv3X\neu4+\r\n=zQ/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/focus-ring":"14.0.0-canary.4e66fb2e1.0","@material/touch-target":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.4e66fb2e1.0_1643398922409_0.28969299268675264","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/checkbox","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b4a2830aea6cd091e4b7e23e08750af65ff892","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.9736ddce9.0.tgz","fileCount":42,"integrity":"sha512-sTu9an2He5R+VvURT/xP1ZH7AGMEA9tHK0MWt/yiwZxGGT3bzg8L/k55FmvOXmDMW+TgAaKmaybxnmZzx/tLRg==","signatures":[{"sig":"MEYCIQC997l8YBq2Y1FYw0WnxYFhpopaOKuYRMGZV7h+DXA+mwIhAJrh4LovEqW12r1Ur4gC1fZzzmHvMiCRf0c+89bZ8WhC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3nCRA9TVsSAnZWagAAHQAP/Rg0D1WfSy13hnS6OUFR\ncjqPa+kvk7sFZBHu+2nDXXqwDX366fMLT5XTyLLsCQZjdCeh1/nrxwAmk30c\n/oGtkhInWcJyP2w98Gb8hTze4p6/QXkkZCNrSSvSOAmzugjy/rLVbg0zeK99\nv4LlTylf4QST+zFPWHmOOaFTsbaqzemL8x588/GxE3X12l/FBbqmuZj1ZR9U\nLBS7qrGC7X3wqiVpiCXTWL0mGl+c9slAI1HWdhl3QAS/NqbKfsMY/zsJdrCN\nmEzHPBz3K3CzHCeerbYFB+8dWiVDj6HZCg8SK6BInKrv3eno7cEqDaUrl7hl\nuOMUk8Trk9xRzM0bxG5uckfk2jpLQxoKAR6quW7M7h99RV7BxbyDdGfGG+5E\nRo2A0dY0kUM8zpuswKMgdkx8c2S7xSrEGT6Hyt4NjZ3UJbJPTO1/AmbMouWv\nzqd+7B+I1qfLiDcaotTjiG9TbTU6ugiajHWnyUh8J2F2fqAG/+/5rhExH933\nqsQUHTvP0MGZuvktqHZD1zR4VkfvwDwG51t+5zftpkjYaNdtjKlQ9DWDbczV\nO2P+odnMoB+ptDPj/yqss2nSC+PXJZEd+a7OWCO904bBHgLiiR9K/JAKsELx\nqZeJ7kM4a3J2KofXBPbPHPGkYAl6sLg/SeZUNWf5YXWaKO79vRJw+Ceg9IAD\nh2Wl\r\n=4/BX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/focus-ring":"14.0.0-canary.9736ddce9.0","@material/touch-target":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.9736ddce9.0_1643449831239_0.020763981889011518","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/checkbox","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eab758ab12ef246066e1de27c60fc9d5663805e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":42,"integrity":"sha512-sCZrSQZDjhNpU+NevAYnAMaxFH4RubudoEjo9BeWQ047Ui+dnhH71J7siM2nZ+ShwD51NVprmd12bAAKTsN0Sg==","signatures":[{"sig":"MEUCIQDP9o7MP3cVRRjuGjMx+0gGFWhdPyeywB8ohBH+JbsXMQIgKHm2LBa6+Bw/oRS5voPBsoYLPXVxLnJ4jNJH3mWmJ5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8fCRA9TVsSAnZWagAASv4P+gLbJfTuFDXf1TwyDzVN\nHnOYH5qtJ6I4aH4eoCwbsmvPAHoxS35k4m75l1bs0JmiDrVKVuRlSyTcwFKA\n9iezCHcZW4eqVdqwJxyNVikHPlMCkHtQlJjCJfdYOOgwsNJXfX2Qdi5WUvzA\nWNg+qHNBNJLzui9IIvptLSv38XZ9yZxHQ+yt8hgj17HHu9jhR6MQsSx+chtN\nmh6u1ANAd3IV3MLn/AlMHBg0yf6P+AOOjJketTGp4RbNkxrcc/Nai+720aUL\nUgfYnZwCY/rsR+H64BeTmctHB1UYIKsZF8NpNcdnsXht5qMe9PWsB5a0xoNt\nJaXYHRJ8aQ3Jyt49gIWYuwTOkDuYZ1KrOh0wjWqU32gvi7QIF/uGU6WnmrJe\ndwKUdM+LPub2aFJR3u9cYFSvaqK3wuMA1NVC/Yr7AMfzA43IJxfa01TszKgp\nYMRY0E+dqQvwxBCkvhC+EuGHmVAA8zdif8uDoC6CN1lmB2TpXbSKWs3R2h5p\nVcfgeLMlZHUFXzUkoznzy/ydOWOXF87UZHOXzX3PZQp2ziGF4kOOhe2kaXlg\nkMo4ZckBtKo9dusn+XA0/CDqHgSCAzeaGSFHiJ+8KPlqgHXR8vWXHGBNwDu7\nqgI39OIWGw8RyYZQYzCRkOiJ0agWttZIvzIsZW9WlZWbv/gZTJhty/pDhXRd\n1v4i\r\n=VQxq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/focus-ring":"14.0.0-canary.cc4ed13cc.0","@material/touch-target":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.cc4ed13cc.0_1643999007059_0.6945922907362811","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/checkbox","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec624093bc66fab3dbf6fa6d37e602d8d0eeafd3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.dcba26fe1.0.tgz","fileCount":42,"integrity":"sha512-K8+LECQHpm65iylQaBF4ZUs9Eq0GqMgxD2J2+7THtTwCt7NrNnPXe7q3d6+c2pPTjqnMmr31QRlP3IPZRQRLDg==","signatures":[{"sig":"MEUCIHZ9MIr8f4i1NYKwjUgDP5Ws7lUeKHr0E/nhRGItnrttAiEAoNp1WGZJAJUg8B+vAYuSf4laInxsb6vOmUosKKg+jWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFfCRA9TVsSAnZWagAA9koQAJjeIAoo0nQYlQwkxZeP\nHZ+/h1zKC4nFnNvUmGaaN4+lekSeJynH6vWHYYzeCl5NpxdOBpqrL59afllW\nq9BxREaQZ4ZiPiuattWKl7cm5OkKjBkM42ieZuULxRD5VYa4F5JUmxByMWgd\nSTMQra92atSQ1dzmKqXc6j37ZXHZ5SbJjgY1RK3/PYAu29kcHzI0QrsctYoG\noG2U8aQJXGc3VLsahGPWFYZBkSofRQqfXTkQPGBhVgVwlLMRRMpH1p2c/4gh\nt3pBYKt+7HEo0CBaXmvPJaftsu0puCznW5bkDfr0QTzdHpsfzuur8KNuIsLl\nkGLsjyyswI+aenlBI4yTMUoe1usVi9Vwdr3vT5236OrnTBE4ZBwzup5iMZL8\n/M2G3ici3SXCKmA2k/Mq9fV2pIZfIA5rujBwTTf42FHkE9d8H6c9x0hnOnfs\nb+qqLNTgJ434/7twi+j7FiXuHn7htJx15QcNQtzzas6L0PgmQJQjNFas4nt0\nlobgZmsiTDR4rjfa4kSz/EG++CyxIPbVVz0hNTVwxwa+7K8RUnxRgTtdDzmp\n2RvoMrmDGQp7oEVl7KZbX/R+c9xGo3Uy93mG8w9wWdYtqAIW6G7rMRMh/yo+\nU1kU1krsU8RTRLkAlqju7A0u3QkpBIPgJt/rOxImzbvJPOPo2xen58UKuYsz\ngN/e\r\n=JVWU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/focus-ring":"14.0.0-canary.dcba26fe1.0","@material/touch-target":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.dcba26fe1.0_1644011871272_0.02549410906576144","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/checkbox","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ead7b07ab2acf2e963ac887a79a194ebc0ab69","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.ec54d9046.0.tgz","fileCount":42,"integrity":"sha512-Otfiq4MlDU015RzJXdSQwRcLdhCl6k+ecDKU7S41C5NPge/hu4925DagGi9cbWDgmqZ7BrDr3r0k0I2aMflNEQ==","signatures":[{"sig":"MEQCIHG2MF7zFs4a2HQUw0MT/K9Irv9YVBZBjQwaanMiU7o+AiBvukZJsIlNE6x48+rFoYiXT6Tq/qoww2+pk3hatiE0XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8NCRA9TVsSAnZWagAAkV4P/1n1fYdyxSKww5q+SxXk\n2CAPfB+g3zsJ67BWqO7No4moKlgI/Hpt9LF4HnkO2gwmIokos94spsHeJxx/\nlgx2DHW4Nu6m9z66+l06qF63QZhjh1FRyuhZwBJVo9hIwt/8cv2Nmdxt3Nw9\njpSuBPpZMeFNwCQlTnCyrVRfuTLCfPhKyDQEtvutgSJbsPP+d1O86r1mNVH4\nw4j6A3LmqLSQ5helPcTchyx7fRE5fzQaFWztYGnmpPCRr/TKqLa9IehauRem\nw5l6pO2cEuFYHmp2uOVJSJdExRLlfpW0+B1eQK8gZU6GhGS06TtZSFBjQzMr\ndYXVwx7rtiQQ81G8Wuv8Y8VAGJbPujyhJAc6GJ/AB6lTivBccFvPKz5h8Gfl\ny2RADFBwe6Pf6gKBD01Ar/0NXjGL9uSMAWX2iYrC5OaSNI7b+Q+tVTlEhrK2\nW79s3eqpPRrKKOqVbZLOkhafxX5+ijYL2RJO7btQlXfH/Qem40l4KCdiurDn\nPmH80+YTfvXHbZB3r+z6p9qv/8TNOQb+IBQkeqkstIiCilFeD46oPWibBW9B\nqGkuyW9ZU62W4PknlFeDZmXSyef/o04UhCBQ4s+oo+tlW9cYsoGcjW8C3dyy\nvJxlJudZO9xGtQ1r7kBHstt+6KtojtiIfUrUjrEuhPuJ9n2Yv5dJRkpl7pjE\n8yn+\r\n=6dhQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/focus-ring":"14.0.0-canary.ec54d9046.0","@material/touch-target":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.ec54d9046.0_1644248845251_0.09884818565631615","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/checkbox","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecdc01bbfd0c9f606d076a040203c9b406ce8eb5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.ea9b5b463.0.tgz","fileCount":42,"integrity":"sha512-rhcFDT2EAFie01ceHpvnnpj+jfZFJY3DAH8z9XXE3sD9QAMeBgmSfPSYYBNwS7+YZvhwrOql1sPTsmlMB+OEHA==","signatures":[{"sig":"MEYCIQCbg6/LMSZxW3Wy+LrAAwJ2nLEQHohadEOHLo8IiYyxjwIhALPv+1/haMAg8xIGz6IHwGSJ5HhCOWJLywUYi4XWh1M2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//NCRA9TVsSAnZWagAAJNYQAJa7yfEDM+c6Cl2cj7MO\ne+zC390TmwmxRFglbuijRCTEZKHPW64I7qYoaLDKXRDe0FBtck560M+W30U8\nOrcA+veuwayf9tAoMV1PALXEaq8v9ktiVyVtkTcJgnYFLusbh0W8WnG+GzDs\n+bqRddsLrVrMamuJq5CSHJRRRYvej3he6fwV5K4zyZDIgSCjpVarxZ863Tox\n4GmpjTIBWYt4H9KXCFI/rTvLc+tWBTXj8o0Z4zK3UOna1ORJ3ptyD4CBJEnQ\nilzQ5dzYF6Qk196dfzuIFA4IMmk+7BaYMSc6q5VILXc/EtvPxXo3L4F74wvV\n5nsOQ9gsJ1rdG+vltgbSbkqO13vdr7p2DoT8SpxsrmJMHMtnRzPd7rGg6nui\na2OqSq3evBCFyCWMBKjyCQWjHQs2cnMyJOTpptvV2NCtIVA8fv9W1B52sOLV\nvmmNADYNPrdUOtU4eaMVMWf3CmKRzKVv68VcH/QvGEYwWmn9TJCGxR0MpH+a\n057XT7tTDrRfXv+84C5mul8S7zCTTUPcaOmgVblQVtxu/Es1ZnqbNtjgOqO2\nkRfDAOxrsFJCUxOk+l6OLaHrXrptZRR98IJHw9LTYQFQybngvrq0tEzckJdn\nZYOKaCPXrls011/+SSUzxx4d0BXqJjO7SjnMoIjfjlrDKWzvG99SPNVVt30c\nJOnx\r\n=S85u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/focus-ring":"14.0.0-canary.ea9b5b463.0","@material/touch-target":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.ea9b5b463.0_1644429261765_0.4264711906419141","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/checkbox","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"911f7f54783ff0201411df7a8795a64bf5775d4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.96ea061c1.0.tgz","fileCount":42,"integrity":"sha512-XQVfMxCPNKb1tt9BWbUhoasmNezqBna2n7kFUnQwOZpGemCszkwVQ1wZ0eGJHbqsoSWv0HrSMqvITaUva9lEXg==","signatures":[{"sig":"MEQCIASS0Sw8x/VcSpCNgaWix9+5ySYbsQK1wiX1YHFPUakYAiB4Yj/S+0qeL4BgWu5OY8ZnAbwvQ83tsnQPvwTOjiNjKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA8vCRA9TVsSAnZWagAALPcQAJXvgwxDRqVfh9GSd6oy\nIlvNxLErKMjKAuWJmC7McBbrUjZYqoG90TBruJ5Xk4y5ySWLpxZws4q41/Wu\n+/f8qEEOWm49QpNRb0u6JC3tQ5+wJGKRKvT5HOINyfUbREUAg+8OkghGJidB\nBpBNKPYHiEluUEqRx6sTg+SM69dD6GJpj2J5UXGaIr8EyyrwP64wgMFPDcEe\ndx0jnta3yrb0GNsTeDMcELxf5NWLtmwMnTeiD5KpkI5+U6x9rkwGEKo7VVZj\nyYMI++hqTpZEK0zxpYCu4PrkY34uXo8XgeSSUKMyNSyIIf8/P25vXyQGyp4Q\ne8DiG7wFWBrF/bwn5QsrijncwgJCWCjcaj+5loIh+otEeqb6FtWTP/jfErt9\nLcPa3Z9oqRx4NJh2MHHBzOld3R8kT8+tZcKRi6PXoz2JKPJOAq6cfvnd14fv\nge99uz4vZ3REYv2J5vZCykl/yUkYgQCWxKckbG1Cb726WvK0t8oHi/DqOqz3\niBZyqdesty1xVLLb2iGRsdETYVfTET3lBZFhtUtwGmq6Odhfsy4F/ornWG1Z\nLYTDX1j2gwSi0Ye3R1ZE5evEGwTywTR/ju5gOWyjmqdydmadfPXI9YziryLo\nVolBLPsXwpaARlHdX0YybfqY7Kr2WMa7ns44kTJvMyjr2RPHfYsqk4O+CvNE\nN4tZ\r\n=8mGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/focus-ring":"14.0.0-canary.96ea061c1.0","@material/touch-target":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.96ea061c1.0_1644433192644_0.6941489692949869","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/checkbox","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.e00181e59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd371df325bcb8dd62c60d0874c24ec553def00f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.e00181e59.0.tgz","fileCount":42,"integrity":"sha512-30see/f5JQhZ7dCHU+dwYD1eTw6jSJ8t/zrqQzz+EOW1apPKDejUd2RL0fyhUPtFD+F4Fr/uxpn+7WiYgGsAGg==","signatures":[{"sig":"MEUCIQCR4AkXNfJxbPLCmnyxLLXU7pER2FlnH/2S3Wcs9RhabAIgAaE/XclaIRRggA1aTbn5Py6t8n3s8v8GU0k9shVo4VE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXBuCRA9TVsSAnZWagAAM7UQAJxLB869AHhjf8+b44ck\n5d2KXn5JtK+/TVqI740WbfRssxkAvHN+NMMcohqsYsAHHvdNp0MhyudNoVuP\nSC5LSG8cP9dSUoV2f8Wgx6GC1/7lQycRbDuvxNorjVdfp6/hjHHHc4AeNTfm\n/zDsb1WX1IhkTmG5yekYLklBgOfYMUyBNpvnyJJQU1Hd4CB2YCAouo6PJPHF\nY1ALvn4P/x2pn567d2LR9qlPtjJY0LQ8hPGnYg0aePYfOKhaEZyF43H6YG1P\nZ0bsYKNllaL7fF8Oj2BDDlNdSe54csBgzck7QwBovSX/OjJ7GLH3b5jfX7Dy\nbTutt3SVvx+sjTM/3myEwqPWoe5k2rhvMaYXo6/0wzCNLKfsc0B/ZuHIXrI6\ncksByvAc/YSTgE1jvHAFr/hcU2zKi6+Q5+pM6uEqsWuskp7EfPtRO4bacK6w\n/JdMKS/hieRLVro6dcLxGY81OlUZRkhIwUmXU8Z/8YsBtgKCzAjWuw60x6r5\nbAifkYiJL/8onZ5HbXj8vJlslRGNMyDi2ItRS2pS5M8vY2X6Ku0VmhtE1srI\nk+hHAYkXzhWdk8xyM6mzo0h4UxB+IyJ2H0IbwoYOTGv2A0FiFCGG+7I1VyY9\nn5rNsASrfRHXAFlfiZIqORHuyueGcK3Vx0N3vn2iJXsIMyUpUaxL7VU58cMs\nEOmo\r\n=YgL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/focus-ring":"14.0.0-canary.e00181e59.0","@material/touch-target":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.e00181e59.0_1644523630231_0.6585516528690136","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/checkbox","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.037285f9b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3510adeb579a2025123f12b6b18d1e325a77695b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.037285f9b.0.tgz","fileCount":42,"integrity":"sha512-Utzk0u9bV5TcX9acJypeXFhOWQae6RsB2WQcIfYzDiqvPr9Ozq+eHYe4R3mi7bZBxIrybdz0nBRZhSSvEn11KA==","signatures":[{"sig":"MEUCIFat/i/lf4mCUd0JpP/ERXamxvQwU7nlJyHQoV0EmKhIAiEAy511UysXno0KxFIKzMRcMVslAhqSOgZTZBXupkmMUAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqswCRA9TVsSAnZWagAA9yAP/A9ppVCh8QRStKp/uapH\ngAhMx3Ue0JZa85qMSG1YvN8a5S3SvpZldCFk1/ArEg310hz7SErHUDsvq/9J\nPcvhcLtFbjmWJRMxdaCoWeL2zl64IlBCfSof8HHmQEZY6vQcFA4poA/OuCWi\ni3rFO5hmw48sozg8GFkOmYpZg9jxE7eBnIAaa7xCxLyynjU0v6aJNUo1bUj5\noM7h5gnulWATvNNk2q68VjrrUiR0co/oCF5jwPwdbIV6BCF4aiXNpVzXYnsf\na0iDchf13URzaeqIhmXcfTBFhODAMHkCWPgW/CngMf27zjk0Z4UnZBZ+THT0\nILwmaszdRGZrmyeu92rxq4DcMOZcTBeHsVyLBT1F0x43WQ+ZuBMqKhvt/yFv\ni+Z8HOTbHNFTrsSMZujxGcJ33MmBqFLP4PICMBczQ3B8tiLnhxDsUlV2D7T/\nWnj46QeQQ+iYUUSN03L1exmnKG+LpX3r2r5qHPG4vyuuhGmZswdCzjorhM1x\nYjM6Ib0dyouJKl6+4cyl9YY8VG9gE/1vhifkNJVWozTOgdmN5ZgA6HzbTiZC\nxpR0GBfMhV/UXbHX20fQ54/efGnxE2CNBl3wif/9IhtlRV5kZHZD8Q1+qf0D\nArsdKJhOc3dXgYpJU8BFGRffb1ckjmkzuvc1Xqe9bcONG0324QHxvu8aloaI\nZ2jj\r\n=MBQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/focus-ring":"14.0.0-canary.037285f9b.0","@material/touch-target":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.037285f9b.0_1644604208346_0.5481959074235507","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/checkbox","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8d4295e619d19a9f60c82b73b5f02926fcf61ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.1aaa68dda.0.tgz","fileCount":42,"integrity":"sha512-X4jHQJEuOAH1Ap6doo66KEzKtOOuk00avK1Kn6UIg+T8GEACwCl8t112qZ707I2IgH2PIvmRatcvRPm5ZAl91A==","signatures":[{"sig":"MEYCIQDCnJ2ZH9eJZzXaJ3a/YDNVH4JeAT57o25/RoJa4h0EUgIhAJXhOimxeluFSx0+O4thw9CkRVzjlh7lTqclvEPFVc2s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVRCRA9TVsSAnZWagAA3voP/2Sh/Ed0BTarCSAG/Lrc\ng+duZZ0adJSVAEnLSqk37XQVAIxWBFEU5Nh7zbIudjrarSbiH4yjqRY/idB7\n9EjQXl3ghXfVd6zQVpylKvkHJm/R/+EIxc+jq4ZV1fmeENCJhvzybj2Zcb+F\nAwnT7kVW3cVR2vs+7hmdOBsL+TzlfvgzBKQueCodwktJTht0Vunb113d6pTo\n57Nqp8yeTLqGZl9DuEDlq06s9J0/uuJXspLzjZ3CFdS1CZikkt7gOXdYBJm4\nyD6jooCmkqbRTIDNGA5UT58RAoh349ovfcxRcMtA/Ab0xW2sRL2ffYTKT0tf\n1IC1fl9CYjARbvNll9f2eT1MHoP8/PGTsr7q7tHVb9Bcm0of3tBcBVMl5RYj\noZYDp5HVWI5rsoqVyqQzufBlx5Wi7gyGje8JUMGygJObXZ1UsedP7SR72DoP\nB+Agl2xOFJcFZ9jR77wsTmEKDPBOAdiYYEh5hgKq7wGW75j1r+I2tAdhZSYp\njawwxMUwyBDjC5HQyUl0gf8TPtdCw9Hm7w0o6DX6ycl8BZXilYJup1xoMxU/\nl+y55Ul91PEmAYxmVgc8R9L2+zUaw1qjmHpAZHa6lSNTzEagY7Ej8eHsdVw9\n28Vp1SiqqlJiRoK2HNBEhfrznauqCeRXb6Sah+84FCVEBqlCYaw0mh2fy0Re\n1b3D\r\n=eRBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/focus-ring":"14.0.0-canary.1aaa68dda.0","@material/touch-target":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.1aaa68dda.0_1645040977490_0.5183566576898462","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/checkbox","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"120a8d8dafb585f7e6b3b0937110facf7b3affc3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.ab4aba1af.0.tgz","fileCount":42,"integrity":"sha512-9Vafk0oK7gcCu0p0XvOFBs2GLFx7tAyIxTbDsI7afrbSXl3NA1s458CgHvkUEuCRfhGsww/myys/L9oJMCskpA==","signatures":[{"sig":"MEUCIDaw0/tSYHvfQP96QNGM1w5LYR/ZAQ6F8n+caOVoouLCAiEA9eBZeodL5lvxdyIaVtrjx5d+6l5SbmbDZJxIpKbZq/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdtA/+JubBU5nOM9zqfeRxU8ELBK+0TcGIuIprBsumujQbDSaUsweZ\r\nyHCpJvuUKtO9tyGXgu/SB1wtHa5rXLqm0od81lvhzSWwk/bj94ldrw/Y4UbC\r\ni9zEjoKIIyHa79BBnDK4cRIZr4hyJ/BN3/L5mU8WbuAHmpShNDm0/PwruOhe\r\n7uAAioVqo1Hd1Rm/oUQCWcCpVam0ZozdNFUquEudJXVG2pLepTHSH7RtMVXv\r\nUarnyZZG0vd26xdV77U+pjmO4PUe4LXSuxvaYD3T3rYJPIM9k+zg9ekQN/04\r\nGFM4E6eS3dLjyg/spPPAXrAnkDZXzsbeyeCMSZCUVT3fRLowS18kGKvkc+i2\r\n+i7vJaM9ZhRlz5WsSB0YWcMsfjxOeJwh370s8BbKOGpNo0CIHIJeGPtjHw97\r\nKZNU1W716O16mJLoDQ7InEtnKv8D0WUorD7yT+RjX+h91iN2wMES+lzK48ud\r\nrqg9QofUgZmn8GGvG2GtsN+jNYFgKffSRnxh6tRg+Sy3IPe8P4KqPZEVrT57\r\n5lwTsZySpJdg3YoWhsN42o6hf3sSJF7mZ7R4NJ2ibLqu+ZYcS3iumzBzu3j5\r\n0oqk7bScj1X0EnoAZ+rA8MaYPnINxNvlPSdnzxrcobO39Al/S8DkgC4RFpnk\r\nzlzusQpaq27vz74jkxz8OwNGxaPoIayu0hE=\r\n=T7cL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/focus-ring":"14.0.0-canary.ab4aba1af.0","@material/touch-target":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.ab4aba1af.0_1645121812250_0.32554481556550763","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/checkbox","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c05835830c3accf1497ecf8a9dd0f6335de998a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.e58552c6e.0.tgz","fileCount":42,"integrity":"sha512-plVuKimiuKICmuiemmzEePnwTMKhPS9mbheazGwd9VVNJBsco9gUKLe3B/2y4InGTv/lZJB2LyPT37zk0jqVHw==","signatures":[{"sig":"MEUCIQCX8zKdG4gf3a/kigR4GGnbntG3zJX2IbmpFnM+XoYG4gIgWXvmvD9UabtcM9A5O0F+MAy8kKAJXH69ShGH8kYLUCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5NhAAkiR+lK0aSRug2tPkP+1nNt3zr/xEUmcpwrYpkBu07gZAy4/m\r\nuJPn7H37WYhScA4uE3p1Rd6VADTXJMfHOBHTpUjfCXhwvmIQ/NMzWx8JdxER\r\n9OyTLQi2bC+8ORKdrKpfTzJEJ0bfolYwQUcGO17hurd0bjlsQq7fuslDH/ge\r\nVALn/KUWPpXClm6+fU9HU+DyTF2Bn9KXPavBe+lREI3QJVhJ1qpFPPXVu1QM\r\nF8pJMM+YGUDZUs12w82a0tnFOTZjYXoJRTdvhwJa/BNImfrlWVZ4PL9iDtP2\r\no2o0WVbchHmfK/2l1pTUsm0JaDk6sMggO0zVPbS2b8Yai0X2avZ/FBvpvQEv\r\nWzcqaWJgEbzGafzrfZ366H5yCzA9134/r8dKSYrfbrWJzm6EuR40BbOxNY6X\r\njQFE7S42qtv7bD/PLN2xX/wv6EcDp7JwEbQoq2M+1SuOnJxp848lHsTLBu+s\r\nfkx/aARQv1hvAQhrTxhu9JIOpbwUgavppg1HO2FxgsBqSGczECSZUXqkB9hN\r\n0U6X6tUVwbUCqwFtmPmUmzum6pjHOAvH/Cr4gMqMn/X1TjlstE4P1VoN1OEP\r\nARc6cswX0yaE2ohB+NiVtnfWLD/55Tk/NkEPXa7pdRYauJ7UEaE+NJJPx5nV\r\n3Yy7pt/NI1roWyk8NUxdg1/gB/Xw3m9EkBw=\r\n=734z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/focus-ring":"14.0.0-canary.e58552c6e.0","@material/touch-target":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.e58552c6e.0_1645207478992_0.25980428169789005","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/checkbox","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.868793776.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63bba67ca72fdbcb21d4acb75d7b640aee32c2a9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.868793776.0.tgz","fileCount":42,"integrity":"sha512-GcJZxGn+i6/sHI86YdCjzugkFZolEr64tfU134HK1qFPRAlcFEzrFmc3Kmykyau3INQHYrbTvQMr8vCnApos1g==","signatures":[{"sig":"MEQCIHw47hbPc26HlINHTwBde+tLwL9JTmcmQ08M5Sa4bAnxAiAKHb37aACce23X9N4pWpsnREg8VDvXrTczw0KdfFcKTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTstACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC5A/8DiJQfWvVqKr5B1uWQkwgMVMNZvvBIQLOlwkUvfxNzj/LFCaC\r\nQWl0YmslL/qNx0k+Ps13VauxNoB7xjkkH8StPCBomCUUNVljQ6tHsalHywvO\r\nA+tzj9dKlakekHgw+T5gDQO4UzZh6BsF91s5ImbmVZWcSufi8jGkoPhGlrGJ\r\ntm1o45iXv5pX+KDtF9hkbG+jme6V4Y/t1YFy2AYcs9q/d4ls8p+xkSMBBkRI\r\nbJgDVTyCFIEeeTsvXGp+v5BQPG5pHOTnuzWDRDFMEQO2PO4Iw4iogbQD2P9D\r\nWbuxEaSs32KmcO/2S5mUowIaCqHz25/CUCC/qERFWWdkbjbOihjsytnVNOsW\r\nABq3skZ64+9hq8+6EsMH07HBEi1TkEQJOYD665khJ5NNW36ePvAnN0PpGSuQ\r\nGizPSa1y7ePbpNADSdCnxcWnE8h5MLl/W2HaRAKF6q4Wam4kOWklfcMPZhGh\r\nIEpTu8XBLsmnkyLFvWKyjCBkY+tsiXnUlJGZu0n+6zxS8E2WyBp1n92nEvAX\r\nRvtHby9Bb65pJ0hjRgfQliE8OU+MGai+YSLkT+7i/UkzJYHJJw2+yatDFDWT\r\nBAypGGRLPAcCiKkEWn3HueCVwYL92NOz7neBQ8spZ+uOeSeVuPBFkEfKCS6R\r\nOEc3a9DaztDUDyc/TAhUSToi0TwmhK3KOrA=\r\n=T3HB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/focus-ring":"14.0.0-canary.868793776.0","@material/touch-target":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.868793776.0_1645558573775_0.9640343758367818","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/checkbox","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"093c6a8260c3b93d56d6218ad3002d7c5cdcafc8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.fdc37a445.0.tgz","fileCount":42,"integrity":"sha512-VfkoojL6C/nu5VPt7SGvcTj4aXO+CE1gSFZ8ZijN14ZJ/tDKqKJ8Zr1+zu0ISQBtJ7w944YI5hpVQN5/lfXfRw==","signatures":[{"sig":"MEUCIG8SaqK62EjWme7IFM6d24HuYchFOekfQQ/6BYK0MI8+AiEAo0W05Cp+hoSUAu/CRipf4eH9upD/gNzc/eRRVjqmkJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRiQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqUw/+KULSltPd+/3LF1xFlbZGti+JjGajq9mrSl6ZPAGfDgGyuPc+\r\nlpjIY+9U7pNzKPl3hcvCphQ+P6PzjDK9AjRXXT4PlzgpFJwOo/GoBu9SNKMU\r\nBfa5uoa25l5kpU0booRGvoo/gY+OhSD8Uf4cB4JlYiI6fA+SYefFT4EkmtDG\r\nyO4mfpUbEyobudizk79swCN94GRhDAl03NCZg25w3agFXokxXMzlz59O2Muq\r\nk0bd/dF3idm1B57bvPYS1TRfT7JR0kXaI4RIYqQIY7tzu3KWXaFGGmVf+/2o\r\nCszSP4gyAaG3sj7hR4FRIxj8DINNj9984r8OazPMrlypKi3OLX0t7iPsYsd2\r\nxlBPQtSrTJOoDtwA146QnUJZZJ/DnIhz6d0Qb3/NSTnNowTo16kpQ8n8xJOZ\r\nwVn1pXe7aFY0i/EYLbALiNvkLojEWdcKwk6JAW4KNB0+t2uWveJg0eDGxG1M\r\nrgei58B1wsRUMTTpOPNh8yF8MeooJm5+IT2SM6YeA2x3gbFlEGlHxfBVtdRO\r\ngCeVS1ZHE+pUBlbhX7lU9ubQdFnHhKNjSm7ZerGPc9yNuIGhujjYcgILmrtk\r\nZKLxKlyqi5F72JuKRVIOwKvDqg7cnZc8JtNZRCoOGzaKgW0aE5178akbAloX\r\nOnSNJxlI3nTrkNZFxb0JoTL3mdYV1+JKvFQ=\r\n=YY/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/focus-ring":"14.0.0-canary.fdc37a445.0","@material/touch-target":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.fdc37a445.0_1646073999923_0.9546128117792747","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/checkbox","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8d7ef4b10d822471151285b0f2fad9e8be47d4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.43c7d87dc.0.tgz","fileCount":42,"integrity":"sha512-iT0mKMvFLOGoMIrhMgSYRQ6N0rYutY8rlGWzWCzO5hC+IHNDLx8xTfi45c1NBDuYaH/RdlmZY3cbYE19WxFFNw==","signatures":[{"sig":"MEQCIAVGIRv+bt49aVMNoMTNhZdYEqLdrSla1rEDA90ZlGKyAiBHbD4eSzeCluDXDztmBMqtY6zPEy6Khv/IDLXfwbZ0ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovKA/+JfIxEkpjEGWhe7xihi+VBQZl1FoBmvUNc+w46wEwATMNH7+H\r\n3d5xa6KpIJ00i+NBHVopGDAlpTzK5xnQFUS14gby6xWcRix1fVGat9pva691\r\nox36DbCUJU7fTPMiu96CwyT2j4+3QIlgVCR2fBFbo9H2+uDP3Xg4CPI3rdbp\r\nc35ixiEUEjGjc+fXtLOSiRX3j7sJrWELogH5TC4lgKPFm2mczC7M2kc+j2sg\r\nJZXYrMZptjXjgPe/Jy7rxERrjy9mV7qoUePIuerLPm6cfYj5bS+C/QxcFfUj\r\nQUW1mlqHzVnSSMtFfXd77R2p/AJgUD/VZOnNvT2TgCQbcdijvKXyvBvgkgGR\r\ndWVRZzIPxAIfSrFKVC0gj3TaEIiy4MRXh4e518Xtt8sW+E0jOyYpWpOiZmgh\r\nX5bF0HB7OpUglyY1NpMEP7he3b0MtqbDqimsB9dsji+FYDIJ2S26Pl/4Mqto\r\nofOF2P1FEWCWGdqzPmxOuI0WZ+hfJL2fPfSAU9dTT/FzacqM8jtuVdzKvcnP\r\n082YFZXxAelmM3a8zHv1dIXcdIXu14dNsPh5De/8u3IbFRxaG2XlAumiBRv5\r\n+m53GYM8cOuG6xgqVi0i/0wvdXezlpxn0LSGxGgmTmg42ad+kGwTPzfkOhU+\r\neGL/xMs5KkOzpelQicn6+rQV+xUb+lIUO0s=\r\n=L0Dz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/focus-ring":"14.0.0-canary.43c7d87dc.0","@material/touch-target":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.43c7d87dc.0_1646148820358_0.24557087876748418","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/checkbox","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.23043acd0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f88c56672eb8024f1f37f98da54c11cb3b38ab2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.23043acd0.0.tgz","fileCount":42,"integrity":"sha512-sPhMci1r5W3eKIvvkMvpi10vnyma6Yr3ytWgU//Lcltcw7yzrv5rIBdH67+68zQeT9Ck2Bo7F8bFPV8AN6HGEA==","signatures":[{"sig":"MEYCIQDB19PNuPfzZl5+45XRlrDrJY2Lt4Ndc5Ol0mJoKvp0UgIhAIXC/mePNkDsaFGPZb29Cy3lqGfFBBLmvBPMStWvimDP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpoew//aOdD+xTXgwZho3TV8U1lnwWoE5IZk7n0j7GSGHLLT5La5k/Q\r\n+/JYtcnHuA+F0WmNWO54WQcuagPDrsP9R7RfHHYVbn74FhNRnun6+AqFDzVE\r\nN4ANRUAYs2HDaNbgrmigVNygj6i93eBLH9/cqh9j6OuVfEslZSDsp4ESDJ6t\r\nEcBq6ybHAn3ve+uAQNnydodGwMN7ZZQwwp+O4jgPxwE8oqJLZEFc2ogECLYQ\r\nX3acj+cuI+J45dZRhVoHCu4GHBfB+qqNZABCEr6kT7t4gVFFS9FVsp9qhSjG\r\n/XgCgT61swV8jebgu6mrddrPqVuKXWTQglRvDMdXzB390lpxht2/qsgP+Zna\r\ngizeGhDCTbB3piwR056LNZi8ecpsJ2oSIAxNV3cMyyMQfxUDQ/r20Fg95r1N\r\nP2GId8mAfpyj9cd67Qp2MGd1hxY6pueE574BU3+UQbApvXt+RbwfkJA7ioMI\r\n44E1tF2aN6P5JZzmLWLM+YWCWAgk7D2gSFBYm2T2OgW8EIJcDYmbvyf3urI1\r\nAs5x93hmZod7g78FXJpNTY2qU69i8gm8TWvxAlKjYPuBAXU3eN7+YMIyiGIQ\r\ncFiisB9e1CbWH2nG+21zAKlaSzCtWAhWb/Y1hrcVJmPvGY7AZB0kpxeAQqc3\r\nsbl8Mpddzl4LR/AwgWH5wT5ywN8o6azDFtM=\r\n=SEbI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/focus-ring":"14.0.0-canary.23043acd0.0","@material/touch-target":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.23043acd0.0_1646252875067_0.20221419701398946","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/checkbox","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b96d64f4739d30b221bee04bdd4d0c33fcc837c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.6505e61c5.0.tgz","fileCount":42,"integrity":"sha512-225LAekAOPZPdR7kh03zunYffJgsFLpMjjyoFyRic3goERcsJyQf/z5HWySflx8CQht5wS/QC2eONQua9eOiDw==","signatures":[{"sig":"MEYCIQCHBSL0LB6XHJuQyF8FF98cCVrM6Aaasy6cVHWrKdemDQIhAOfJdiiUvUK70rjbmz6nOq710KzIHvHbX9WoIllDDB4Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmotag//QScVj+mEql2SdQSgPwjhCk0VlUWRxYAiuF8mYFFy1IgvO+y9\r\n40b7sToj4lsYmw6XIjPy4ahA7f0PdxQBQTwXRarH+6qYLREO93MtPVh/vEL6\r\nilDR/yu1sAz3ZGIXM8rN8t6ljGKTMm72eyX0nGHF7yJH4zdncElbOXG62cf5\r\nbm6gZ0GWfd5xWHO433W+lFtaZDH/gISxUBkwfR9SKbVf8BBtTQYi0DSdmnKO\r\n8pPK7uAlPCvh3gcBawdJ4LKhzt42BQe2b0AiI0JWZSfDCAeLbnRVIm2aC/0o\r\nW0uJhQGb9kd+Is6DVcLPfzAGlfcHPkAB82PYbLPkOJTBcTxEo4D5kH1p4TjY\r\n43JNqpfVwPjlbZy0kMRTi9MhoAWAaaOJD3XKrteWzFGVRJbR5xMi0U1BywkU\r\njzJa9LIHGtZfGXXc/S0sZqS7JksVNU9o0/1J8xyKb7QwNFr1KuSGHW74ZBfF\r\nnlOrFrRrGJZ6RSBJ4/+LQdaX2OhVuTRa1Xf/puqN8CXjQ7PdlnsYUvun3/jL\r\nDRqfB6HYRO2E+rC9UV+U/3v+lZjkv82V6Kyg/6mq63m/bIdG0W/p2NDNEZND\r\nRHuSV3Hs4wzSuEvgqTChOvndbBamMROLaQ1/wQo7PVKFZFzdLMI7Oksuob2Q\r\ngx6qNNeTuSRmM9fxe1QhN3qRpyTPlRr/nwQ=\r\n=uslS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/focus-ring":"14.0.0-canary.6505e61c5.0","@material/touch-target":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.6505e61c5.0_1646337672148_0.2305306582965958","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/checkbox","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.16c166154.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4f3a0073336bbd8bf8133f1f5fbedb0fb9d76a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.16c166154.0.tgz","fileCount":42,"integrity":"sha512-KxIBEEMnywXDfcUmS+PwvXsSAzx1mevZYDIorQYy6ru/GBWXBaga+H0HT+3Y/zhFf8Nkso3dQgs/5KenWO9u1A==","signatures":[{"sig":"MEQCIA6NVOqqwdVTrPuoZQtCXYaUjcTdG9WHRYCd3E3QPxFKAiAbfXEewHun0EyXwhESw+CRdzGkWur/GmBwJcH/ZncOHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN+g//eQXrIGJNalXVKBzjXbg0AS0tinVyRigjYohID4EEINYl/Xgb\r\nGxPiD+JmbxDkVSBY3aZllzBhQKDkoi2o3JsdGEwg0BMruuxAQncRm7E84B7q\r\nP5hsggjWFSGSlJS3M3I7V8qo6FAh+11ZkhpTkK8t7NLzKNallYloG0k9KGmB\r\njTjYPKpJYJMobngX6wYReCa5PWQtWDKV/8WFyxSXfSmb3w57zcZDqaNIxIJO\r\nwj1KMkj0Bfq1doy003e2nsSvOvOVsHU3ezZL1fhmou+i/VvTlbrP0p6bY8qn\r\numg2nUN89uToxMXudtiMZXKeYKpbGwYpFqBzVeQt2K966IPX0/nqJQB0lUhH\r\nPlR+9Hokd7DPlrZkoCFHxShFgtwLpRzvRg5mlXRyPsCNLOf1fw5oK0+1ypek\r\nfuRpVV8LA68Df84CaAG5MZ6rKcxy1HUDL2MfBj2w02QFuOkMRav89hLNwflx\r\nKxLeGLNYAEvd0AuvMXt1H1tDh5xjA6DpCEwazccd8zMI0LXRS4ATkk5LqdwM\r\n4wUEKFXAn63/rsMoAjE/NCDnz5oxB1yElhzyKK9IkElCnRA1SfMn09v7Ldlr\r\n/nW9AOIuV36DReLChgfs7yqqiFOafpfIgPPjAWN00Fk/whknFjy3z2LjeyS3\r\nvrfWbE/k+S5pj7ZpzynArbZtPS7sCAQTXrk=\r\n=+8aF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/focus-ring":"14.0.0-canary.16c166154.0","@material/touch-target":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.16c166154.0_1646781771465_0.18966375211263875","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/checkbox","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bd69452b40af0b9e713600ee3131d0213aa82f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.bdf1d3771.0.tgz","fileCount":42,"integrity":"sha512-TvsGf6HPZIJYBh6GrYWSjF+OXSf1f//doShDgJcIO9xNyvb3e/d84JhdnsMLcUHdLZpbJNc8GR3VXSp+NW5ohQ==","signatures":[{"sig":"MEUCIE9Z/K1KqOVaxDWTBL1ctLRyl3PLWGNu4pQPZraXKjuFAiEAzNsSDQgPIQzzpOR8OBLVwnylk1dXqberUMpR47gOO5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1EyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKVhAAmjZWorrlDm3x9y9cFlZRQxnYjmUyx6JB9AoxahprSvwx9hzW\r\noV8aBuZv4k9aA60zaiDy0bZwV1G4KQTp8ktjANrLywlybglJ0xc11p7pXlWJ\r\nDJmkM628yAAC04tlEB+u79BjqKJKY4TNc4RPtBzywSzaW9WOz9NCi8D2e4BI\r\nxPUNWZexeMyTTbiyS6WUelstmxORnzPuY/7XJ/CsmK2x0fYuTS3gzg4utpzE\r\nzh+uiczzp7hEaEVb7WgyNavmSf6vp4y+oLw3an2E2Ny02Hl7ie/Kbs0CWLgg\r\nZOf2DA3xv0PHr3iVkg3UcotPwGFoMcNb5Di5GS+xPNEHtbsOh99eqtuvJfwH\r\nIAIjzoF0qGEUKtx2MbdeR77dT0tBgti7z6DgJLj1NUSD2KYzlRfJ8DPL9h8O\r\nrdJEQO58DXqqTZYbSpFS79rr8f679EObGHuVoJKrMXIJccVpn6YWDHbtyXpC\r\ncw8TxPVvBk7QH5/12XpmHAoO24JgDvjY52e/T+gz3emPzwMxCV4kY/2hp44s\r\nsOWzsxci6HhVKlj3A5ZFKZoc34BtopKZ7VpdiVPo/yteU0KmTsASsFLTdZnb\r\nKc95/U+38ECUa9lyvzJRRdkf934JqrO9UdIFkpjwyRCpM2KN+GB6MPQgfuxw\r\nabXwhLE2sgXzLU5IAEUgj69PiZbfajWP79g=\r\n=FlNf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/focus-ring":"14.0.0-canary.bdf1d3771.0","@material/touch-target":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.bdf1d3771.0_1647268146102_0.15281171581997732","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/checkbox","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.cf4292778.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3aa8c0a922cbc4d17db514da8bf4f5a011ef68b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.cf4292778.0.tgz","fileCount":42,"integrity":"sha512-arMCBBhLCg4dh3DTH2RnHZ1m4q2obFQqALpd3HrghvdRhqhYXwfQ/FIBkY7uagGi+aBlUYaGJokoPPGz1EBEyw==","signatures":[{"sig":"MEUCIAc69BmqYPIy7n3n43nZsx1pHLWWWOsEowIZe5NqPoFCAiEApeuYE5HS2XdRoV8pgx3HKlwFjOfTdQ6qstbsS7071Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCcA/+KVZ+jVRUAey4Wejsi3DZxngwW1d+jdQAKglO70pQkDN3Klhg\r\n1C+pUyEViyhDSXBw92xvssetns3kwgQD0D/ZbZ+gYoMKfZr53tPKsIIqGt/x\r\ndYdkA9il0pj/WzFtb1zMRvLN5Inqld368pnwP1KMpmjm4Y6vGv0of3YtGshW\r\nbgeie0ruC8mBMiT4PVYVmVoWTAylVn1bT5sdIaeg2RNGaaKeUqGH4hbE+6cN\r\n/ZL4J+eTdSFbvYWzgP3X3CvMjE4gis2ilbAD59W6RCCQt+BHyXs8eXLyh8c0\r\n4mNUmPlEKh5okV2vE2WX0ceLFONDy+WtnEXpBvXw1ukaCK3y+S60sPl/5giO\r\nLPEUXq/9SXH975mY5h0PXEdEfNFS4q6kpScx+KfJwul12Pzb77NZy/Rq+Lmq\r\nDRyJEgzq+gnn/K49LR/yzZ2pwzdj779MYTaAywfH9noiKda1+Lopu/w6NsvV\r\nUwZXxlevgPUrju/DnlHWgMltoTgFO2j0y6PQbUgGrpxw0yp14AqmzGit/tXg\r\nWyh+4rWv2BGYfFk3Ha2tSrJ1ezrCITN5t/QAO4rq4BtupbSYsPe+P4HLj6kt\r\nTxy30GTzC979CrZul3dafnIQc5helkIWEWpjX8YG8pZtgRJIDUX6zwuL/vLs\r\nxXBX+/pIgbcLvl4QP/oANrJ8+aooMrlOmog=\r\n=8cLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/focus-ring":"14.0.0-canary.cf4292778.0","@material/touch-target":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.cf4292778.0_1647304205508_0.3219165957822725","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/checkbox","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40a841013c796a787b520ce91c47d271ef593912","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":42,"integrity":"sha512-vXMM4kdqOTTEuuvsyWYA/keowVVZDABtJo9pL6gIglDAxbIb8MnYwb9isy2IpTdOCbh0FwTpGxBqBgO5Yww6lA==","signatures":[{"sig":"MEQCIAt5v4AyqnsG8B6Xh2ndMMv+JK87P0iawFxK55YAT5tgAiABZx+fE4z1briValUj085l42xO/oHnXjihJyNUfnDzKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeVw//dCjvo8KukZOZhCBjlVNc1OUCOVd/6nOSN5ELN23+sagWcmej\r\niFl2QJR/nCjyr8815OoXoYnqLhbHf+y4hFh4qNTYU9ccp3sLQ/8z4nhQ0gEI\r\n2iAi8QOnIgLHAGyVQwMLJqNxr7A5eZCLiJ9yS9GQwSEdy7FXYB/ATKuYKIxL\r\nbvjGZYSALtyGjej/7gR4TB4DVBqFwNX4CqBBY5nmN6T2nmw6lry32+JEdnqI\r\n/jVwrzKNC9t4x5nlCsRMlYXzV/xE/q27ocFibshPmznmS/MLM5Y+sh2RKhhO\r\no0SNDheh9Uz7SnlD2v4URAz6yacEO07+BXFkwSEEfj8ibZzADVJMOwkVEJBF\r\niLyRAI2D2w6n70Q1T00DA4Pvi6Ys10tmWTiyDrSwhTzlKdQW7aS8eUh+10CX\r\nBr31VxHJV890pWznD6WcuaLOjSV6M0Ez9KODAsaY6gbXjY/NrthTVIUpQ/oF\r\nMJasHlI5LRHDmC6Bowfz/N7f72tCoGOyFE6btIi5icNDB9QQ8t9YAeekMMZy\r\nsb9GNEvKwp8AwB3RUvtQsdO0Fm+k4Dcb94asJsJwScdxrCXLDmPqoQKaxyxp\r\nFYdbxHrwKMqxb/yaXR4xlsqFQGoBYvs7vEsECNcowutgETYaP6zZZDicfgbR\r\nnlynLmKTeWigY76aQlUBrjnRTznh2Uz45Gw=\r\n=Glrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/focus-ring":"14.0.0-canary.bbd43e0e0.0","@material/touch-target":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.bbd43e0e0.0_1647463833014_0.6335023815032195","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/checkbox","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e4b403b6ad9817dd4cf2bbdc91ed2242864ac27","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.1b6afad86.0.tgz","fileCount":42,"integrity":"sha512-MFJ1GU6BAbS7QVxafF5g1bXjrkiHSqH7Cs6uMjiJsLNRbbzamruuSBOY1DGfHD/7QrUzSHEj3dlb8BaZa3fRGw==","signatures":[{"sig":"MEQCIBCjg6uiZ59CI+02Mxt5Q841y35HBlMsXUzXnvYA7A5cAiBWlx4nkT+a7BGAwm6lEG0zBxgvQnSQDJuNIoP/pm0sTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSgQ/+JbKITF+qztg4WqODHmebq9jAkzIdF6tDROy/pj9/cZYkhKk7\r\nUyycCYD3IWPBqU33042NYgiwUWSj5AKNcx6Q1HvUNW87pxg8iXHD2W/jIMZA\r\nME1PxkAd9FskkwprtPJmrtYUsYtWntBK4FB7iyNWFtAGX3yuapqVOnWRtwcX\r\nbAbQEPZccU8xwjJsPQ5lUrh2TuHXuhfHWOIQEMQuVH72fqDQaUO9ogWaBGGb\r\nsUD6b5Y/Opk1wsYJilPOmlMIq+w5cuxx6pnZFOC2tHTNau+GUrHgDNc4Pgd2\r\nf5iN014TW3axy4UNhpkPqLM/ka0eaymKbpvuFFooytv8hB3XGEfY1qy8eBEa\r\noE1+gZmTw3RzVjnCJHC4jEdvcX0pv7khoB33r66o3Ptf+2TLj2qpP8KCXrsE\r\nd964qf6UgX8Tv+g7ABUOyTCBzH7GDfLRlvkLAXKPVCmiPuv72r2p2Psry6YL\r\nALYJ5QEYRkgtbO+wUBFeAYr2LSDqZckmqad2pkhtIqJ7ALAvoUj1cDzXyOA3\r\n4NP9yfUT9gmfPLz4aWU2CetVxP55DiRAtCi76JKRpE4SYu7nV13AAco5tB2Z\r\nlr7b01mKQ6RaBGRM0Jk8+XXdVEk8E+d/d2cENh477YXZ9IkmfZc+098zmZvP\r\nM5F5G6sblwATyrrlyNlc8VjNdqNo4vOesgI=\r\n=UVCx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/focus-ring":"14.0.0-canary.1b6afad86.0","@material/touch-target":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.1b6afad86.0_1647464644624_0.5049769192572469","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/checkbox","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d31f405d55ceb9de8dbe2b49c90ddc3d9c89203a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":42,"integrity":"sha512-XRG3qys5LWRVn9swbMOfrjpqM5M4zKEgvSvYz8vXlfJhswU/VeqNjOrZ5SE2M9dCGcdD0DLDOlpPcXcxk78kwQ==","signatures":[{"sig":"MEQCIF+6wXPRqjnCLwWTJYzAcSwRU/lIU80oec6Xfm6C39diAiAYJbTYTCWiBqLaPZEkJfvKGgQ4UX4Qfmaej8h2E8zD2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO/BAAjXgd+rl0j4JPqmq8urbzf+S/4fjzqaQIgRt7MrCzsATwy/ZR\r\n1vvLIiKbniyZyhcTVMhpdIEfNiuGK0wUUL8qC1Y/6gzcgTEsOWIGS967gcaL\r\nYw3/u0/2eKguAcIEudTFHTK3saNZ0/3sYjqp4wSsQpLSeXUmCbTUdl4WTNXn\r\n16GnJQMNyOCsrTmV2gMKBvvVnEli2GYDREfQom/5BHJ94BbJKYziHSLra1DF\r\nIVjzHfhMYv2ddnLGmm73NOENgumpiL4rgdMX02axf9kJdT6aas2AWNo6jHuZ\r\nTaNMPqWKkP9edfV8DwJBRVs9RIQ12I0oFq4TVZ59JytaJeUVY40IeCPHWiyu\r\nFvKD2P1+UZ5T+8wJZ6PgIMrFwW37oDCwFh88JpLNk+kj6YuKMc9EOI8nIne7\r\n5f+FNJv5AEZScVCkTA4GeqrkXdLf9oaiRUujYibhHTJPnwgU7z7hQ9F70Dbn\r\ns2jcPrdZ4vz/pH1cqakuZzFgHFZeDbYZI+mgjgbTgTKC7Q4zYK/3vW4YD7ih\r\nBbaJt5/eXbNHJPtYMWZ0FHaO/zfC9eAvcmSpCWq7oytnyjzeMSj3QtoanxWz\r\nl/bDOvxs2wK9StxyEer6w7pDw+Czw+IlWE6IVWFjGUv6/4wPt8AEcmsSJEQA\r\nYnA2pU9sERHsXSDsGXKU5LQNvmKowrx8L9I=\r\n=Jq9Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/focus-ring":"14.0.0-canary.bdf9d4af9.0","@material/touch-target":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.bdf9d4af9.0_1647465500629_0.856511995733582","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/checkbox","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.32b391398.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f2c186447806bfb810d61a442404913d778363","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.32b391398.0.tgz","fileCount":42,"integrity":"sha512-/qwvyflTErp+4IIkgyz5DW4XMeJ9VhQxhgR3ZoEX5npqsuGR+vl5FCPioZsMvXDH56b2QFe8c1yQLE31rvqBeA==","signatures":[{"sig":"MEUCIEj4OrbjZqWmCrnbQZQTlW3X5kEitCiE5qeQ7BEy3VehAiEAnxWZqyfzBBY8OyGyJ7/BVMlMW6kbeIF9fyA6Yvu62i0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq04w/+OTw1pIvj4LBt0AHiLvsroCilGVmgxCmE/rhu3fTKeLoLdURz\r\nBJZVWqYpEqv1P31g/zWNeOssxSV3588l2V22RgN9vhBh0s0dftUEt7pRZl6P\r\n/w+eHskb3ZLpfuDpokZ2EygQrhSy/9v9Vt0b50wiPzHfvZ/8Y6pmvRDfqA8d\r\nxrSHoZPORy98BLOzG+9ZYlfoLpbyBxA/6ZNBZYGf8FEoVk9kolOrlSVRvhQl\r\nTw0r+q10pZJ3k/FF5udpc29LnxzwKCB8PDjdRZxM/7IF9nJQR9rV4M0AVdEd\r\nOGg8FBHMNXP2NWoA0PsipL19SYyfNVbWu+MtVcRUsz5xI9tA3kWbj02Xk81z\r\nYbANFef53KgmxW01pyyakr0OcEF9yhxF0QRHihbkyEEJ8j4ycPfbs/Iew/Pd\r\nw4rCzq0h3eOyTk1e+y1PQBcmiGmTx0ndPOC2IcQCidNBGjnD0ym1nFpPbSb8\r\nBzelFbwEBLsIZKHzvU9hb6o5Ub0mVKkZcjuMPr4Zw7t21CQotxnufxwOeU+V\r\nUTZGUlWPOpGFg2jCUYCDKnionqFeFJJ7GKMY3/YaxyGPBDuvH8Btvxq9Q1pt\r\nsUm8IGT3WM1t+u5CG6jkYKwtItOm6kAexzctiLijg9EuE4iLEvho8he7D25c\r\nmyQ6LbXVkv9f4EkP93jHQ6XXZ1ikyMIQn/o=\r\n=D4Ku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/focus-ring":"14.0.0-canary.32b391398.0","@material/touch-target":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.32b391398.0_1647539984971_0.26069674322267056","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/checkbox","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0365b0061c826694f6180252892943d70950dff1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":42,"integrity":"sha512-5p/8j86TY/6ei1plQv0YU9qIfnFWV5whAObjGLqf3LNtc18UX/si10lD6iepuxekxuQ+7zaWukp/gU2f9xBOcA==","signatures":[{"sig":"MEUCIDETj3IGXXdTnGj9ZkEJaNoZJ7EjakuaO4frE9fEvg3RAiEAuml0V5jOEkoFnyWuV4HQ/lXlNZwj4YgF/PfPYjX7SVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAixAAkvGCtwrhYyTsVqBTy8GSgnQjNOm8PSoE11QmR2seDj/2oXTP\r\neUF6fJJVgZAqW7QRRnBDvcHS+Uk9MuWP/eQOXQopLpheRGkyOr7rfskwCyPd\r\naFUKvldX9NbUT5lYZEN1VGxxx0VPAOlVHObBOIlZTQwRtUMwuGjGUOsMLEPY\r\nGMmLaae1/XqzQ2D+s6jlpzpoCGwKOS8SJoCLWVJTBbts1mr+n8fOD88u2/wJ\r\n4S/WJdG4dEG1y/vGNqqdnKkZye6d5NlUwbCdVPik7hQvoTFmt/hqZcvKq3hG\r\nqt1eHA5OLxiQ5PHRv33CLOKOlr++/QJWV6En4/n8pto2wyiW8zQbC0Iq1aUE\r\niN7ivRZhIZGcttyAU1idaEWKvQzyejyryFUFeyEXKLojLyo6k38T7zIw3y/4\r\nlXIx+BYRanf8p2SqUMEpFKId/pJU0+DZvaSK8GvmjG4F7l2Zvwgnw3piQ4mW\r\nIanLllv04YxKn5RUwciqScPWGb3CODG1jILoG3K5YP7GkCOtiaVC1EIZHgNx\r\nqh5vY9ye3991lxQV7m5dvmhsHIaFZxBpmmKzix+KUMY1WSgf02Eq+e5KzDxo\r\nDABhokE5LdF1pi66j0dHVDrmKHoTfZyMKd9FkAQJ2ga9KIOxCFm2gY3/7aQf\r\ncLR88+l2ws4hieckIkvwXu1C6dyJ1x+cxTs=\r\n=IMFt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/focus-ring":"14.0.0-canary.ae8a6a3a3.0","@material/touch-target":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.ae8a6a3a3.0_1647621584233_0.08311753854572723","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/checkbox","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"220a6114d06e78c3879b85eb57a5e4d7ed728e39","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.cbd9358a6.0.tgz","fileCount":42,"integrity":"sha512-pXkSxhAM61bv6qo3xX7Y93Mw+9Mz7hXGWZEkC6NrbSuhVZKplknsSosx9ZUI/zuHbCP3hRTmM/vXwLACMCCj8A==","signatures":[{"sig":"MEUCIQD320p5NLYam6LfTQvpnD8PFyj2JqDMIY5OtLghgi6hFAIgDYLDqGN68HhQq+MeUnInoyle6QIzT6sB1/gi/cAj8YA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ0uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL4A//YQko/v40O0brf0nfuzlRq7Go7PXNpABI6mp1OtShwVB9AMtv\r\ngYUVjV9s6A8Wo0cJBonTymwPctFn721WQLAuIztibxcrJqYfuGkA15x91CFz\r\nV8Cr7HLNisXis+1L7GFvnlkcXl6LrSEzFDSP4GaZT3vrfOkQN5Syi3BdHqgF\r\nA5lwkE/rVEZ40RRVxR/OoW8cM6i0Qw8HFSZIvFiG8WDd315DNMrg/BL41rhr\r\nPFxmiN+VnNGs2EFaIlt7Pvx2XsAEPm8OT9UgEr9nN1sjoSNH89dI3+IxU5yK\r\nO/CD4777U9wJp4gyoxyBOwZaPLZyRBp0A2Oa4qJz+YW2oPNQNHHDsp39wgM6\r\nEsl5zcm8gMB/5g3zmi2xPxjLu4T+Qqc2QzZOg1lRnOE+LQls1HLYNfE5L/fT\r\nOYYiJiaD1W6olRpKXVyzWkZ3buvBq2n5lErgwDGJQQQ4QssizergraCrdgx0\r\nfNpr4RSUXhHE1wkkNDxPJNBDZ5yONkw8H6wj8IBZQ+pgXmqRZ4KZJfVUfiJf\r\nyTjQcgdz9uLgA58fcuVzXyhtWBql1wg4LEMJSmAAVcdzXQgdDGCE/fqm0opl\r\nzrelxM9hnCSh7uSnondYIUPHsxHpmuSaowKC0EvGbq4UqMH/9fX68Mr+b/LQ\r\nS4Wn690IuoixvUMFf76o6+bhzkOObUeHXtQ=\r\n=U8lw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/focus-ring":"14.0.0-canary.cbd9358a6.0","@material/touch-target":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.cbd9358a6.0_1647643950154_0.5462677855641813","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/checkbox","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"104bd07952461ca777ad91f58c3915a8f606817e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.dcfe49c98.0.tgz","fileCount":42,"integrity":"sha512-056n2CpTGL0Cw5hxJy6KIl6zAzuw2Z8kgVNlYZva87TDq/EZ3MhxywmQY6ZZiUKJAHih3KktdwgIxWaYaDqSlQ==","signatures":[{"sig":"MEUCICVps4G9aEtUPquir5FMm170ou+kjDOn5Bma+wp4gVdzAiEAy8x0tab7K7cNUEBGx8zsCQ6gTBhFD3Ko8boRF3cN9cA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq1w/8DT5P/TRZ8g2SdBVREyBreHv0gimA48E1odpSboWAueTjUC9s\r\nM1+bZFiUo8nmg7pJnymCWNfrmu8ev/CeCXOsTaYgGudfk1Ixwtb9oFA6gKQn\r\nvS4w+IrsmWqcZOY6krvCuNxxg2ObNpvmpP5v7nJH4hWdHgP7ouIq5YTwgJwr\r\nk2VA51PFShNnwSvXnvmhohzli/geWMPLus+/A0TPmrBZ6vjNk6toPBbrbO9c\r\nZ4dKZWgXfEkcli8Yvd5ZZRRoTRz1MZKw2fU8zVBXVTti/P9i3ehW39fNWTJc\r\n/Lm+9xSdQa9nA+AkQwS36fkdHfAGXy7NSlEFiS6Hz1tz0ol0iVrwpiJO9puK\r\nW7K3vMKqNO9cn0tSvXRuhrF+vqEWcClEQiAVobcGg/Ksc5pmv4w71cPiScw2\r\n+uhT5HyhWXRnadAwKUP1v29Y873OpsVFWD2LP/0accxMjkMVA1ML2l2H2jKF\r\nGoO154BuAvQjP9zqEfBu4fhvNJF/oqjnXmEXVz/4ILyOS3PGFTY1wKv8Io0y\r\ndfe3ybVApDRA/Dt73BOOKRK6xqbiktNTxfmFO0FXvZwGhPQ+FYFT1RMAwAgW\r\nw9GGBJw4csl+jZMwcSo/A+GNPbTHo2G65435nTPaGN/uJwyjU8XrHsj6+E8R\r\nKUEIaUtdmcFZu/ntN5zdbF8uVk4cfIJH0As=\r\n=sDG/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/focus-ring":"14.0.0-canary.dcfe49c98.0","@material/touch-target":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.dcfe49c98.0_1647888273634_0.2700881395128023","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/checkbox","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a040d187eb38b214a60de0205db1a8877fa527","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.f31a833fa.0.tgz","fileCount":42,"integrity":"sha512-anMHZocc2jkw0Bclif7YevABx5PZErlKc7FDfjsp8fgFYTgHuulJtmfQLTECkNopPKydrxEBJ9ZXgkiZI0gNDA==","signatures":[{"sig":"MEUCIQDsja96q2XEgZZ7Afz3eFBJOVrTLkgX/62cBuKSEemO/AIgaaQF8SczVkYYa6YLF2m/snrS/Ku3u43LsKp0inRVwv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Qw/9GtoYpGYkL79RTE6IrGYs2NpK+jnfhkkvZA5NamCIIJJjlfuS\r\nM4+2yj5/1HdsdqkTUlNlEqORU2EO7r9sDvQrJXFNJIYrvRgRwhbDcZUpt15m\r\neTqoMoqllFEida5q6cSKfv8Er18nZhwl6OkMNp7PYyu0DgIFcY1tGzELuBr2\r\nW/Uq6GtuKytkJI9PDgDKn5d/HEDVAmqQ5xyXVxM8O4pcjltaBSbjuM6y5NTU\r\nC0opDI7jmyC01Y5SmI+V0C9iw/suz0xeubL8W0Dq6OH5H9HqYgixHL3nYNuL\r\niz0cgYYVtIEQyp08qDWTv8GeAsLcKLOaiIpamibRe+70dierYu/yWaDUOCHM\r\nmLYiO2Mb6LyxqtrvWXigSkd8/XDxJ5m+ILanjslTsa1VJ0V8HNagSbXr3Hvg\r\nTY3xTQ0Ib6X2YK/6VypCeweyIjEUnVK+SfJzVXG5UUivtpVZYq19KQs5oIxQ\r\nGd67HSCndV0l7jN9HEYTaMybncKyckPu19IIHf1q8vSZWnwVx8aqstXbdjFG\r\nM8zFPP/4Bf6/daNHNKwjsouGOuIHE7Kuyd0tX13KACSrbr2dqsL8BeFA5FUx\r\nJ9e3wwf51tPA1yS9waek/qeiBIRJTMc4z+wde9nKYuuUAZeTfMtuSUMJ02Dv\r\n+mpYegctlsy4yOi9HIJ2TtICyRAMJtYFHIE=\r\n=6l6L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/focus-ring":"14.0.0-canary.f31a833fa.0","@material/touch-target":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.f31a833fa.0_1647996675310_0.8551466691978269","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/checkbox","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3bdd2724896934d0833ffe2a8f31b5c646811b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.4b92e210a.0.tgz","fileCount":42,"integrity":"sha512-76BwnAqMSO3kFDM5mNt4Oe+degzJBqCBIR9d0elyEBHCql0gIsabJW5opiE1vaW9Z2H8jiyHf3CbxNyXnoQ08A==","signatures":[{"sig":"MEYCIQCIYFcAdYGa5x1Cs/cJzVB3or3idJIeSOMx2GTED/0iJQIhAJD1opzdXKG4SjwaAqIuXZEXmR5A6UDISXU8RHoaWqjO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNI2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOlA/8DR9GZUvQLueP+t0vGvCC8xK4lqaMHJ09gtt+h83g6Kw9xCMR\r\nBGMrUQw6a/srXkgYiM0tPqZzJt8Q8CMUb65sAmyCwWDyWZoyUxY7FJ+gpSi7\r\nr1VQPoGlVWROZxLMzjqyQVkoEcYnFUSFKbHEZFbsDFViWUv4Qgk9GXGyhTWW\r\nLjxwuEcitf5Xa5jyWxldzDO5LJukg02mFFWKrzbWldqDaVBSNC8M4vkAn3Lu\r\n6wKkxjzK39DKtHWZNqjHHiUwjkHzRSb3IeJhcRVuOVzvZFZGtRfaBApO9gkg\r\nhahgNp0THKlfBeoAEvvJ1MZliqnujczFf4nyLgrI5CVzB0XhN+FOxkfu43Qx\r\nYBeRmWWPXE5NOebpCAnnet3MSqvS2EAfH2MurEiPT8cpOvijUsTqgMJfv5pV\r\nMAktQNkc+B6pQrpVQ5/68EMspvIwGS34cZAQISw5e76FEYK7tVXGoam4CRbr\r\n2UUB71fpTExCYZOkYrKRsk+JBvr35Yxn0v1UAFb3Kv6pHMscaisWcalcsn/w\r\nB0sGk4BJIOFwnfoGFBW5+8Ywf1ZCpcttVXiG7FKDVq/3WJSna+y9qXy9XgRg\r\ngk1ipoBmTDXLn22bMiQ32o79AalT2Y2LR5LbrbyCZaQ4/dnrEQmclpNlE5Ea\r\n/mhLV8oSmcSM8y7ROHPNPK5D9yxhDTUdL5Q=\r\n=nKmp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/focus-ring":"14.0.0-canary.4b92e210a.0","@material/touch-target":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.4b92e210a.0_1648153142372_0.3739474670488372","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/checkbox","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.a657abb61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc44130a00be679d49dcdade6ede22aabc817300","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.a657abb61.0.tgz","fileCount":42,"integrity":"sha512-8oqyO4AH2RyCbS+tUOAaLpFTtKN6B3ux1IH8q8hMQhofpD3di9LUzh5GiRizfnCIfHNHiTS1b+0W95u/oAzO2w==","signatures":[{"sig":"MEUCIQDDDAc4cPph6xFHzqUcTnigTT4omuKpQ/+THs5yX5sbgQIgY31tVWvYhMP7Al76mnd5kdZ9lAJfrOKXzjj8VvxWnME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNc5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqlzg/+O2ebGzpcdCmi1RFwstorq7xlxWylT4VnD2qlu0GNdSkqeFVD\r\nnjMNGlvcgQi+QiDi1+plD+Mj1m8ptRvsXbSP5smyyv9K1sAyVSxH1W7F1ofp\r\nVcF/PDhTtarSfcjLdI3e1SlFBXQ5aCUOak8/pX49n2NtZqPYwJiDv3LhSBt2\r\nlj8Fxv1vXH+pR+tJQMJvupzWDMpJ4YcPanqrZ4VwSLJoCXkkePkHf3Yyf9kT\r\n3xqTOsV58vi2/mxphFA12LyHsPIJnNYwwiww419EQqnEZsqQheshXu2y694P\r\nUgyU+8hIvWHmLcWLDtAksqqhbpxWGwXfYpo1YOk5H4UiZur3kkjktAfeMWOI\r\nglXhzya67kJLVXAp+MdKdwtAT7dONV0irtFuyCRobrCDpy5jUpjdReYUL1hy\r\nZDuMv1Nd5A75gSlPDPw44NI+aacf6wG2mxeqs2cRlI0cqxBwpqxudPKkhzuI\r\nyvXbIBuDbetFBLueg/avkKqEVKHGzLgLNEBwzEDixUGaIW2XfM0HY6JiF8G6\r\nhnadpOT+9atM9QTJVVuVM4ev1vZx9dM1JzLTAQa3vU7O/lvche5PvI6FxXh9\r\nVhiBacwxq1J/tZCyq8m71fazxmf6wlK8U58ezmqL0WFJGbp5u9tUCe79U94m\r\nrVdcPT54Gw3+c04/Mre99QV+9mcaPRc31Ag=\r\n=KjwK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/focus-ring":"14.0.0-canary.a657abb61.0","@material/touch-target":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.a657abb61.0_1648154425248_0.9627280818428101","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/checkbox","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.443f63f50.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"661592d4531f41160f599c70aed0f71ced560ec0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.443f63f50.0.tgz","fileCount":42,"integrity":"sha512-KeRNWinuVKJCTKr4LgU3hLP7GsrMX8GSS5ohLj8ftZQt22oiz+PaFA4uZ567OWD2OFOk9rHApCoHdzo0dQDjXA==","signatures":[{"sig":"MEUCIGiiNwSHk4suViQuP5SKWGzpRZNzWLUFSs72LLRhpOT4AiEAv+jxTi6iLR/btokaoHzPfspKYR3yeyYZKBfwkL22r70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg4g/+OqGmNZIqty5UJDiU2cNpVLfXcEsXRNJUewqx3iN88bu3hV3J\r\n1ygQo19bShmIivMWdN2KzVRribPQEFZLLdPLYzyp24sAlPJOUxLo4wLThAvN\r\nAMb9PRWxkWKs8opol2SQuv+dt8B0hpLimP5mGzkDWLpNFhqHlC84dPvh2sGo\r\nHcdA8D6OCN0C8d1DfHy1RgbAxYBYIELjk2TkUgcX+xbGGwnXUp1jVBwXG6de\r\nhgWQSNd1yMRhWxUgfq8o27kn/tbLAq79nMm6ATTOqLsyhlmPMWgBxlhv5tml\r\ncRQdRY7g5k39LBvzQs/c9xr/mKaq4mY0A4+q9XZwW7JBZFH19JRTPWtXlDQk\r\nqYEVG9PfSb0iM2gQEA8+5CN49eV4nNx7rvoqTazlm8TWNYnijc2n6qLy+3NF\r\nBNMnOa88r0UaO6NOz+IIU5NaqdH33p15AphzlZlaImmwE7a4SxJJz9UsULcn\r\nJiaTFH+otwL492Q0Ydxh7tXbIuDSdsh0TsTyAvQSd4qBQjJEM+HySnNz/Vpr\r\nHyiDq19Z1LKI1NlGpUgJO3Kb1KJgYX4QK3rItW+Sbc7DwgT8gnciMS4DjnBU\r\nPPLuaC1F1KJ7cAWQ4m0zlDn2Y/kO0dxWYHs0KT8hX2OQQd7LKXikPGFhKlVK\r\nJbnQ1EZ0Y6l+CC3lGqWJrAhJsgBc4a4LjbY=\r\n=UuAB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/focus-ring":"14.0.0-canary.443f63f50.0","@material/touch-target":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.443f63f50.0_1648249505665_0.20808492679786084","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/checkbox","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.eb382f318.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb25508f7bdebdbe4ad1929491df44d5d653a0e8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.eb382f318.0.tgz","fileCount":42,"integrity":"sha512-9frAwh0wVNktzi8GKPOSYq0C+9783lbMltzgHuDDzgK+3th5z1k2PS27jRVycHYbvTyd7ahWl5VPKEAwcgtqgw==","signatures":[{"sig":"MEUCIDASpeKdLYH9e1ZdnaYJGeEE5al35jClKL29UsIScM+8AiEAo/moJSHGlzdSdfll7iWVyk+17lwyjEmCvTg+9RXQ+xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxWw//eLpXMnO/3Xz/mG6FRGjjFkAsqyCV9j6XAjwCtye8aCZv8JWI\r\nElWmylk2px2LnYcswk5o4JyWXyY454FN9E5DI577dYPN6uAwD3sb0qib/66u\r\nGQiTwAWypeRiBde1B0Da3Yq646wiEPLqfuedhxEtVpYDPNZAxYuvjfVg6WQj\r\nfLmBQlRT0gjLrdOitSu7c6DVCGN3XT1VpjFhkScfy7vE5KV1ynFuv+dzAOS+\r\n5SqV6vbjIRlYZCO/2r4QRyyru7cdiaIpDxw8+1M0Wrx0o3BnZY9oFFRNu8ws\r\n9DkZuuYez2vwIwTGSXo4h6kTY1BAVI3HroqABp3B8jyUV3cWA0jTE3+ta+iX\r\noN14Av9IYe7aVVvWBowe4zra0aEcTOTohTogAA6fM09xTnd+Utu+aL+WZZO6\r\ny+WP+/v01ee9W6NnqnKV9RcXlXpv+pOGF62PbCfS5A5RjP7gATvmlYJUlT6E\r\n92F8wFDl53/NLrjCqARD07+ZUmd4/9XQXX6ikxQ6oNERthNvzt35u5gtiHgQ\r\nmbRVeq9gm2+rbkMTqqNbp3Flv1VX30vkct2Pj5F2MZOkEnbW5QV5x0SV7XfS\r\n/sjwhWi/k9VcAfPfGw1V/QYiEpzNEgPpZFoAk+rParSnAKfcDTi6O8tEfiZy\r\nowmVr1tYXSHiu/SZqGg8TsWR/F602xnamwo=\r\n=l03J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/focus-ring":"14.0.0-canary.eb382f318.0","@material/touch-target":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.eb382f318.0_1648575325096_0.44431657591982865","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/checkbox","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.344d52823.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70e113ce064c53f816c13f2f8690ffd37bbe8d71","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.344d52823.0.tgz","fileCount":42,"integrity":"sha512-54JmE5BZTwsBtcCYs4kTdesAM1SOgHH/+v6gIhLIFitN7ySGG3lTE6N/kkdC8yDyBpayW+ml07t/serODcqaRQ==","signatures":[{"sig":"MEQCIGfNvzZY2s0ZPovGLpbHNWlm5iwz45+ivJEuy2C1uEbFAiBfv8bnwTZMqnttLnVVu0PwBvB/jCIRP2FrRDMZmFARjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3KA//a5a/Vz5XTeYGUmOeKGc3kf/uLJNUigGHZv2ZeR04ei4mwJ14\r\nlyma2Nq5jKbkaLglZhiJbjbPxuUSlCbtX7fCmmC2lMlHzFYBGfxLx1sh4Pcq\r\ntf/URagWbB2S4Ra5fqfnDDbzYmGo6N/Sw49ezmoqk+/L+xHhMFrR+WqW/6ML\r\nE3MWWyAtV1iL+8wpHs3MwfJ9e0kuuO2mcYKe/L2kVulbt4OdjGMI8s3+jyMt\r\n0EGFWYUbPnXp2F6u7HcP7wABkeQGRX8nbUGWNha8YfSU3md/aHlwzTvbtbYX\r\nbbSDHPlKiw5WVTCmUT+wf3xMlxPja1AZ03QaKdgRyge/JFnEcp6TvdA7qASV\r\nIOlzfwRfyld4QM2l8Ez+JO7nA6TdMZwMGr8DK/jN2vdcfHT0xqmbPbDqMcHJ\r\nuHZJgMnugE7ABvRl7oUmJF2BN8+u7b49AXc0qcshyXrx3Fi56+9+er8ClubG\r\nMuWmCzytCaEFQ6UE33Hwti/Uvqw4n+eoV94rlnBlSJ9vHj+AkXoafooHU3TD\r\nolPrE4y1JaPePlrqU6kpkkBryjTjX/pNn90Z0IsI4oSRuCmaKmOCQqGy3BiU\r\nLJn5y7m8HZRxiBwZaxw2xB6fqR1kGqRBNHiXn2q+A8SNFqWEnp0Vvl7WMOBR\r\nC0AKn6+nofaKgqyi1ewCqzVwF2qqJ3INyqQ=\r\n=hqaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/focus-ring":"14.0.0-canary.344d52823.0","@material/touch-target":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.344d52823.0_1648579425427_0.15802018381125404","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/checkbox","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ee4b213848c685931f6a662e824e3d33df06166","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.4e372fb49.0.tgz","fileCount":42,"integrity":"sha512-Os9EWN+p2ML7SAcKzPsBp3+scncq5tvOPghUurBRT6YrZp8285Jb54KIaAjNu2Nxk0TveEg8U1DoWKdSOIUPRg==","signatures":[{"sig":"MEUCIEM0MCvUTllvE92UMxax2QdQYf7OpuT4wYoSy/STTONpAiEAvNHFPAsde3fxttdGnb4cz+7KBF7xdUF6swOR9lq4csw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAuBAAiOUbv6vv377H8B23Udg2R29cGbJXUa1rgoQDW30eUpMHCyCZ\r\nRQVFU0u90yzI5f/lmbrqLnJFt+a7HpgGwoFjPLgL1wsNRlT6+ds+4G8UhsFC\r\n7glUvYI2lUoSxpMP+uGC/SdrHDXIul9sPZwYo2FO/4IoDsXfo7SAhHNFhzst\r\nmXyxFIWGkhWT8MjOhDXZnnlX82bel+71LKbr2IQYjloHaWJw/WSeX1Ca7w2d\r\nDkewagDknUxEGwvbssZt/scG8Z0x3QlreZ0Vv+nSMvqDZqHRixe5n34pXgGO\r\nAj40VvUnMConN0VQsuATk/l4/Ks6afIhiUv6HlMNyJ/gq/Z8YYXaHZjaufgX\r\n74FW/CV7oomDv/R8z0p6G2+6LKqDHCaBtfKSGDKSvcoU+BZ8KY6Omdn2GpfL\r\nGtCCc6iIdoDK431AQO7vmfNheSapJnUbt3/Nh+axoz2o8SKn/ecaqarmG6vs\r\nN/Pyp5Yak0flgbvwKdne5umYSYLgmQ9bq9tQrhkl0mFK3g8fVX8BsAvP0SWF\r\nsqMOWu28BeK3aLPvU2CW6SsX3xXHUz1LJYeYrf0gMegxPWU6Eri4c1z5Xe5t\r\ncukiIr6IOTzi5QoMkzs6FVlKjJTs2cbBvnO2hQfbyHTZEEqIDhZMa8nEG8ZR\r\nmjd/2uz9oiKFTMITS7iMA7k2GU/M10GN5gw=\r\n=4V3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/focus-ring":"14.0.0-canary.4e372fb49.0","@material/touch-target":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.4e372fb49.0_1649363606116_0.17271661578302533","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/checkbox","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63429b7ff823b7e5e9e02e4c74465d7f42b4f506","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.3e30054fb.0.tgz","fileCount":42,"integrity":"sha512-PdeC0ltHvEVAXvVt7Utu9y+1wZ4qmeU4IGoq8EN7d25tnevNGBKcaHyTqCGNuS2rgGRdc+oUWKPpHbR76e6NZg==","signatures":[{"sig":"MEYCIQDgHYfT0LMFjtkxyIvOZpGc1MDluEhJVQ1Z/xv5y9OxmAIhAJQQG92n+N7QRqUDSQQvLtEinbpueBWler2Pjmv+Bmnn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraqg/+MMCYhDKBsYuyzneTsBiACXqvsKPInQuE+jxvsvhynPjpCAlH\r\n61CBCvCsqQsB8Pmrfti5dmRzFsqQAKuagLGrA2bzV/sL9SMtUMbDHiaYKFvi\r\n2CHCWeP+GzhwPM93hF66Rzp4MwV/+m3rzl7JPC1csvmnxUQTmBUPcUc2E5Tm\r\n88ZvpAV8mXT16LNAxpBFWjAXzvFizw8avMk6tRf7jr/c+ww6WHF5aSfGOwNM\r\nJG0n3XONyl4tf4sKz0wW2EkHHeD+sAMV3YFpQsa8x3zHYCjxNVOondhnx9an\r\ntqAgJ3yVWBA5ayzqMWxPESRjeKOo/hhL9gPM7PHB3jctINvFRbwGrBtXSRkt\r\nTjpjMX+87aoTaUhPmwyn/6BbRAQHTmISCVZ3hQNkIk/duBChC6h89MlKZnvM\r\nfxU66yg0e40ulBbwH1eAn0tIxvHSFGtZspTZ6oVaNP88yZ+0j0QgedhEmqDg\r\ncPiqQQCULXTamtv8EQOB4y7bEhOdjzghansCTnqos7gXYh4ZWz0yM3913idd\r\ntxXtuAkgvnyLhbsPsUU0tK6zz9u+cUaaWzHxR83kyJRe42MH7uo/lcWTVmQO\r\nm/hgr0oTaDDmbIRvnmPezSRzAJVKpCPDjLae/W9U1q6MfuJS9MDyEEhIHexp\r\nc1igGmLzWbs3AHIH9R3uEWjZpgTuW+pYiPo=\r\n=600u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/focus-ring":"14.0.0-canary.3e30054fb.0","@material/touch-target":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.3e30054fb.0_1649888083657_0.9291133707320378","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/checkbox","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b88a608e7208c6f011b93d0026f276668eb4e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.8c4da223a.0.tgz","fileCount":42,"integrity":"sha512-NVkcjT0DF/vOWoG2es8s2X/Dsm1yak9XqrI5P6IXY9tYglRJIlCRGVGAz082S0bC0rXHLgZyhxo8s3ByrJO9Zg==","signatures":[{"sig":"MEYCIQCSpk4yUtPBFgoGrIH0x7WUs1egm/rSHUxQNdLmeujFjwIhAOpmLCSVV83K1KIywE08pB8PXYb5SgWz7jCq70n0MCUm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":759641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtQ6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNRw/+JGZtbBvkObRPmwRNOobpGslFvRFxOtV3tTrNoSij1507y8tK\r\nXReYxjZXjSAWkgzXTQtIf4lSM+21Sm4/OE3lTjYrpo1nrS+59b390V32flrO\r\nV+MIrPBnLVnQDQrJLuE8JyQAfBMKmpJX7DsyvFU14KVOrzn+UBBR7ktVQiCd\r\ncHwkYVw1WHETCAhJ7SfFEK+JFp7Ec+37cQwk0DsH381+WV8xOsYjKkRBomLM\r\nB6213MK3x4nsWSIhXJ6wxgvWGsAefZShPfl9/Zg02cT8kVYrzk498Qdxr9rB\r\nPKnpigZHe04GhHJoPfsXWGFU/PYLSB9F/8VhaATlC20dlxgs+S9O+o1/3xQA\r\nJKhGKPfK2fRs12u9ecxwnu5sIHZUFLYdamDHCmeWzFWA78/iZbAg6dedgGiq\r\nobtn0w3bS/Agq9GwmwIJoGLCK/BoIwm0GMAHnLVLG0ztRcSfH+h7ONEpaF+c\r\nPlGgstbLpV/b472yanZ5G4heM81lTpLi+8mnMDgvVbgbSwmZFPw0xsAWFwU7\r\njpSc8RWGEuSqfSGINntqJC6njHvoYrCN0dMc8lXlfTVoawm5AVOHJlWPLHZZ\r\niKg2vonnWRxWlgYxdZ67QIDDlB4iiM1NPZ7cAsTo8qZB7RU+2rMdyCV71jeW\r\nrGalBw0cOqFhSjWLL+rp4748GFdwv/R+a4k=\r\n=SpJr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/focus-ring":"14.0.0-canary.8c4da223a.0","@material/touch-target":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.8c4da223a.0_1650381882107_0.213063409120126","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/checkbox","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a085c5c0b9222ed14a9bf70f9088f1f6732dc3cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.7de8965cc.0.tgz","fileCount":42,"integrity":"sha512-8pUr+M7kbbi9sl03iYvouqn8B4dNqqiIFqXbonOKnTm4xmNCsxFhbk85zSjZjGLWm2DyesB5CBlslnU+SfCN9g==","signatures":[{"sig":"MEUCIQDzAj83y9JeFPIi5hBVULcBrh7nvV0ixzvYMWtrjXtwLAIgbGPk19OkKnCYp2DTPyG9+LQEC3fIrWg6Sl5U4axWmSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":759641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmplfw/7BNPT4h6fNGMLDANl6y/Ea9KrUm5Sfho5ESMuh4T7aTUnptmt\r\nU0ODdm7E3W9ylR3447dcLJFWqqx8A92/Osf0KDtoKPD4fabH8d5hlepyYjze\r\npjotksG9VXXJpfNzaitMALQp7brSlMm2EroywrDtDb3EjR1Ijk+VqV3R8XB5\r\nm9x0DBvY23gFZ4unbLxHMpO6g8xEGJM/nQYxkPkaUH948QPxREl9FCW/Cvx0\r\n3Xr21pISkJUObU9Mh0T/Jgp5UStM93bRew8NOeokjXQWwpGHU+YyDVn37T62\r\nDeavKbpNDjAMupm4icnd5aswUPewQYLx4nlvLCqih5a247nI6ed/v/6a9/bD\r\n9RLuznQbtt3vv7HtHaVy4vInygH/ShEAwERQOmCTIFRT6dLODIvZqjZ+4JJC\r\nG4UQ3fXIErrWcmHZXPKj8s0QuqYskW+HtUkxsXh9MBd0JIbM44HvmpHHqewa\r\nqYoxxnllCpMlzL13ipp2rroFkrXDX9ZOswpzYSZR86jBjwclWy9qxXmwnpcj\r\npPAYrcISVjLb+cZ1fv+JG0hq3H0BrH/h89yrV0y+5423USWuV1nEO1xieYql\r\nJ75qd0fjYaAy4HswXBQeKqH9zW+vo443nsJhR3vch/XDqu3wvBSdba1B7PKI\r\nCSbuVD34gBhYWfRWu4kH0RTxphh3IBGdL38=\r\n=zzQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/focus-ring":"14.0.0-canary.7de8965cc.0","@material/touch-target":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.7de8965cc.0_1650399833325_0.6439448175643234","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/checkbox","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.641ed0851.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7e11cfd25f99d71139ca4c7240fe6ed0e709e0e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.641ed0851.0.tgz","fileCount":42,"integrity":"sha512-J1AhQz2B1g+8Eqd8EIB9/T1jX9yh7Flw03rd6pN4ywbTCObfcUqKbH4h7THAQRzLvlOhZ0xihZVUKr5PrEEAeQ==","signatures":[{"sig":"MEUCIDdFwtTgslNe2+Nlke/OJVBA49R3acsjMvt42BnFIlVVAiEAzC/90hr7mnPtdL/CBcIy5fZ7eHYWnRancHZ3Jc0pIB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":760483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC90ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrInA/+LFTW1+zTdQDDZJsV4128unakOWS7DulqpcaJ0hpyMbBQFDZV\r\nHjt3ygQnvxhZb/AGN/IhZPPg/OT4WeLV6goFRAzKCxmDD10QutwBm6LjPKof\r\nx6bwyBNe/L0wgO6O/pQLOWDnaThxBmbqjNAuXc/d7uV3m+LuVL/eDLpAKeQj\r\nRAGjWYi4PeSMbIUPvj70/CRvY/xgHr2InHiRdoZF77buZHOtbvSPL8xFadZs\r\nSBBTAje/8VnKGXot2WtQPe+n1fj598Z+r1E9IIWaBHcbRM81kQSv6WHR8iUZ\r\nXgDRetfbp9GQAGWNgZWdeoh6W9YXUQ52cruZZCb6IWCQsrQnaVaGTShdmNTi\r\nTXuCl/1e6QTIBSgwOH2mWcLnuJXxq1ODsdMbjd+LtDHAVMJ2SOK7jChntOfC\r\nTBpyiKMXLK7GPIMks+MtGT51jRKEZ4B12DhPILchrtrTQMQCyATFvnKbgaGB\r\naGctB+qGH9BSwggTzhaHhJe1/6c1PNnF94GhJpWRLBJsEj/4Qf2S0O6Xw9Oo\r\ncmdWvb+chdIsyrdNBLrtzaFhS2tecJPweKt5JjHWweZodgULpP4LGkoPLvOa\r\nw3rtfN5QILmjo9sLub/YebfEMSfmaqcz6ICdrr9kwnD5OCN+LiKZmYp25IvW\r\nqjkiFwqO1Q3BMjBm7LnLLBOw3Ww39skoDzM=\r\n=NvWR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/focus-ring":"14.0.0-canary.641ed0851.0","@material/touch-target":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.641ed0851.0_1650470772684_0.5951101716628358","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/checkbox","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.e88f83024.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af785e18247aa47b5449ea0688cf1602f02b3643","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.e88f83024.0.tgz","fileCount":42,"integrity":"sha512-fJcYvJOAtI/XtOKOMBvMrr540ZGcrbjLcuVpOLGVx388H17GpalTdCy5FirZW6qDH9N2nX+m56i9bUFBrdPwCw==","signatures":[{"sig":"MEQCIDJrA8+x/upYFR2wDzMHnIaqlw5IDb2sHXWcJ6UrCB1/AiAW0uCKn4VtIK+FZwW08/L9nMgWKNjgtO0W2dLY3uRnIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":760855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2qQ//TLiZt/M/8F8FOBu969IJxH6KEpXB4prso9ISCT5Lvxbjzk2E\r\nHNNFuKTbnWWK3WUZac4ieEM4tWvgACqh/uXY0Ozwu5G+9XpcgewAPSj+e+cf\r\nrB6JZB0PrgoUOvNXVQqICp4Gq5eHUsp2oUfSqdMshPYQp3chccuJZYAU/vd9\r\n3cK0wzDtpP3oAOTN37qze+Zd5fQTQmOZq5dTqKHxAQp91Hg8Ets69tUQSWpk\r\nXZxGPsnkR3/tW5zMXr+qtRztHq/Om96mOXLzextD0yF2A1nrDzKmcpED3dvZ\r\necPvvL6cNh7B+wfD94LgPI2ljxYh7qKjf13060k9X4oqQJ6Y6Re6aXIQmfS6\r\nFBVr46NDkkVviKcNH8GxMEeLP/JkN1TrFW8aPwv1BYpHV0MwNEOD4wOPOvRD\r\nGeT4MhRsY0imQ1Y79d2XY4L8YmJnGIxwFViffbwJ0FKhkVOb9/q3WCUkUyq9\r\nlL5K85jaXToCvAFKbTRkVTGWnAjo4RmtPQymWA1Rj1r1pHtKxd9kUB+Hcem6\r\n1vGVGOrt1qg3rcKHhl1Tnk09RP6MNIh0ByC6OU3qo1gAJXrEmKWcCBKE41+h\r\nkSA1J8xSXI4oyWZXJiqesDnPlXYej/OoFeNt1Kb1rmYLV6A6fz+lYmuWzkYu\r\nUgyMPI2xJElFeDHOEJDDi3E4Crxp/LsKeIE=\r\n=187M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/focus-ring":"14.0.0-canary.e88f83024.0","@material/touch-target":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.e88f83024.0_1650476891917_0.37524065238612203","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/checkbox","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.7321d6254.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf8187d03678230869e5e6ddea9e26b193cff4fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.7321d6254.0.tgz","fileCount":42,"integrity":"sha512-apx6hPTeeioM7YJ9yHzdTQWrgbq2mSErbN/UZOwh/2jVUzKv79S+uCemhGlGbQQvH11CnsvmbEGksx7w0w46dg==","signatures":[{"sig":"MEUCIQCzaHGXtbYWD5nTwxN5aVkkF5/DD04mMFqtDudV5K2gVAIgN6JC5XF5GRW3hIpSO9+7dkZRP5YNUbGbL91nYTELKqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj7hAAndgDrJjmp7RTPHyMTCK48FnTdeT8tJWMzZwuWzeWpLaUz2Sz\r\nLxXwNhqC6yk0mXlnwyyxZ4XfGeophjye3BCtfPWYF3qIRxH883DH7Y5FtvDU\r\nxXYazwugnwjrHv8jQvcvSzqTOMlwbPCif32OLTat5qBkUfSWXCW1RNjwkYjl\r\naxTVm8JHwrfRakR62cMS4uhuLL/lbkeh7CTC8Ky9iyLH8BMr64IHQJOJHPnw\r\n7o6dIa99ilG8e2OMm1bU+yKUXcyG7rMp4JLpEUKmVL715TQiV+QVpbKV/5Tb\r\nUpBeCVMxh9QYrKgM99ha0u2yi5uGsYTQNJL99EEqc8zqgmro6jd0v4qLqiRG\r\nnJ+cOF/hcZ8tjwOY/5aThYajow4oe7/G0F2caHby6J2ZzR3mfavFjx9kTVnB\r\nUBl/5ghYDdbh5nWbVsImcXAz4PdijnpTblybDIzqp5DuuXr1ZSue+7k9d0Y4\r\n3EsdsL3OJTa60EHdZTWhp93HaulVEuQPH3WqARigTOA3R21O2udUvZ17QQVi\r\nVyIXotJfARw9PNGUZFbHP2h0VYDMgchaTtB1Og7ZJ5dcB8h5aId+yStehBPy\r\nwf6aMiigKIsOtFP00beKTVIaBJ2KxE/+ZDS8OWHt08aS3PUwAmLkPYjWuC/3\r\nRQZwEymS2aumVZMdCNtTvHxfeKUtzSOp7xU=\r\n=mv5w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/focus-ring":"14.0.0-canary.7321d6254.0","@material/touch-target":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.7321d6254.0_1650485508223_0.6342872188990725","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/checkbox","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.3ab956515.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d50113c129db7a1248198c03beb532a07728cae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.3ab956515.0.tgz","fileCount":42,"integrity":"sha512-ZMdO8zRM4cTPuNZWhSbWMQRpJMp68PRND9l9mmkOf7jjnhb6/HeB2P0I2O2aZNrs2V7m6MVEgGPvlPo5iNNcSQ==","signatures":[{"sig":"MEUCIBDc0uTdIJo7NoINeczufrk4iL2pAkXFfPyqVxYHzQg5AiEA1um+XdtOPIt9OAJXKwshfL75vKpGas0QJjYc+WeCHo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrf/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjGw//b/WjTRaXXeUrC5MErZwbucLCamw3JCcIPFOPGvLuFxp3lImA\r\n3ZOlHDAHQU7yVPSuwa/2kXBin7EQudXNChkj50IDS7f2/3+ugSAgKAzrouh6\r\n86/EQ6lXojPmTkPqWTnaY3EqAeO9Y6leqJwmCfIlOgJk9aztmvI9Usz742fv\r\nLADly5Cg++Kp3vNB4PVCM8TrCrZVWf7wlIHGHa9+jU0D9hbPwjeHa8zZPJkG\r\nm23mRd7f0+su7N/fnX95ckPGJooiRFqdBE1z2pFctjy85wrd33ODnLJyzck1\r\ndLYv8HbG/ImvTt8u5acAUsTIEGRHy/agqbLYa0cZKttViFEf/o3ctf911tbF\r\n+pogv58La9ugE3kuu4wls5bW9O7Rea8vDwDqGSWrGpk0KcbdlM6SkZrTMcy5\r\nZgBN/LJev6zmghEWp13l18dr8ERotgEiw5FaNJu7t24sQRMyvYMB6+nfSC5j\r\n6WDDTG+Fs4T8qdhpXB2NhBoQcDYjA8Qphvg2YKuu7C7qOkFayhcmT1fjF40X\r\n5XIkCsKvDdovPws+LdmyRnledIVUZRkMXXJjfSiKalF81AEhTLV5LHN664CJ\r\nxdibpK4QCfNRKdPxlRSCU46erKwgTp5PDb0nDNz1M2EWm0gBM9+u05ioJtjq\r\nLyIxBQ+T4eM54Corh607So4r1w0R5CBF+Tg=\r\n=p9dP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/focus-ring":"14.0.0-canary.3ab956515.0","@material/touch-target":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.3ab956515.0_1650898943584_0.8909673471434578","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/checkbox","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf2c506e7adb8322087c8b6c228740acb8749c64","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0-canary.53b3cad2f.0.tgz","fileCount":42,"integrity":"sha512-AiI73bbGMAUDz72wQ9QnJaAdjPhvKqnyc1w8QF62hyQO83qgxenK0TvqXQ1yKCvyklwop9MYe41UK/HD8e6Qlg==","signatures":[{"sig":"MEUCIQC8FQlOmYVDm758I8z3B7bCkcOG+NX2hC6XMVwtF5O0DQIgXB6HizF/5nBSSlYtLVele2JCGG3/dGAdfJ9x9/TutbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFkA//a9S+VDp6ZiPkytTPxlrhOMKOjVedtkNeQS8OuX8Z6dH4lS2z\r\nQTLrqg7XzfYpTWGIxD5fcGriCDf1xwlhj7ofhWYgYkgvuxWnyBLG4mP0xmbq\r\nlkA099/9bEmne7D7AzktISnsbzCCnlH5t80JpxXuUkY0HDDMawamWPd4T/yh\r\nMKlp2VzZ8Ik6fgmcgfY9z3oHLVd9Mp+wGs3EcOg4LhFDyYJH9/eDi+N64SXh\r\n9IDECc1lYFNp2okgcKcT6BECbgJUvt+ZSVVFk9Gcd2CZhK9KgYNSAVcitLyV\r\nrZkxmCWp1T5G9eA2J7a1TUvVXU/vM3Vmjzyepyb7OMzZ5T84Dea86N2kulLa\r\nBzuL4Nd0NhkOpPHRYlSViw2j9uKN9rLCZur2IOXfLpJUCiqwnM9oqC6uMcVM\r\nzpvIqAdAGAly2u08vvNZPs/vFhm1yKEslpEyB8oOZRH9NbU6t4GVjUi6Pz75\r\n0vP/bETen9Cw6cl3FnoCCUBT2Vbmelv4Cd4y3c4R8Df+jijC2LkiSTdnFcID\r\n4HUZM6lU3wE6QypCK+QvQA4MXnhoHdwVbHVoHh9mjrY3OxRBPfKeRuscaoQv\r\nZ/Yor2zVi28ABulQqyTN92ACeNSAgDOOimRCjcdZIl1+WTwpQXb8o5r0QgGV\r\niaIf3wlz8TNEuHUNC/udHAqI9n2NxqBIO/k=\r\n=CiUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/focus-ring":"14.0.0-canary.53b3cad2f.0","@material/touch-target":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0-canary.53b3cad2f.0_1651063552899_0.28057407254269506","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/checkbox","version":"14.0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@14.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a28915d297b07052d9286cb429af28c725441b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-14.0.0.tgz","fileCount":41,"integrity":"sha512-OoqwysCqvj1d0cRmEwVWPvg5OqYAiCFpE6Wng6me/Cahfe4xgRxSPa37WWqsClw20W7PG/5RrYRCBtc6bUUUZA==","signatures":[{"sig":"MEUCIDipmLJE6Xe6g9ioEvKVfCyQtfaaup2PX/CR6gKwS1fAAiEA7DwpI8KT6PqxnAFt+Vx8RM7cs3a5KN0kAulPArXN6+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasc7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphNQ/+PPLUlatg8Rfn74g9hgc6f4BZlDzZ4rdM6WVDkSKo3zbeY4bw\r\nhu2XtvF6oyWJ3i76nH6aEpSwv3wrT6htdX3Oh3IR/98HBRWYMPFxhhmJ8HE2\r\nmk6uxnux2DsqSFQ3m7ujCfNhNXzRrFKs8hf1LiT8XZro9P8RLoVu5eIwka76\r\n6sQvhzJ1LbEsexLzfHVGeAmDuk6VZaDX0EHKHQHucAFiR1luHNeLc8XleICg\r\nqOOmeYRetCndKlstkaj0BONmWrSWHJZe41UikxpaZyQJthI3ZGMJYYw60uU+\r\n67g6vlfRgli/cvxWhEya3t2XYPT3vu7wxJyiQctVtIbHcV/lFimgxv0V08In\r\nq4B/ECT0VEhxv9z+qWxOdpsOEKn17Cvbji+tbj2GlMUVbYA0HukYB8URuI16\r\ntpvwI/1ueVGkCTZf7niup61tpO8p+1PtmuSusJCMQOSCyKvphDtell8f/wBa\r\nFe2d5Ppsp/VDjh0+NC9dpETHcQ2E39/9V1F3/133gozIAHMF8nAz9yhsTh4D\r\nSjU6MRP52uGbEZ2ucqHAVGrlzCvAH79fwE+SfqRUhg6pzmDieQT1XL5JzFWv\r\neJo5c9MpS2FtGhn2GZeawV3rYayD4I/ismsrF7iAlmF3edpAIxYTisLxW1CX\r\ngYbd2FiDtZAjr4RX3AiEUi0BwMXwSlR8u4A=\r\n=HTTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/density":"^14.0.0","@material/animation":"^14.0.0","@material/focus-ring":"^14.0.0","@material/touch-target":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkbox_14.0.0_1651164987430_0.9297702022299275","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/checkbox","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.432c815e5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"720f8d647228845014f3910c8ae8be2751089845","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.432c815e5.0.tgz","fileCount":42,"integrity":"sha512-paU5jPOiMSDZd44CuUGY+12JV/DfyUxkIKNEts3i0hr/0bnx8AaQthSQI5J4Ol6M57YfzO9woKq8jmZ+WUsBKA==","signatures":[{"sig":"MEUCIQCbnU561XTtpDiSX1L6yUEn+Bf6Wt0c4qrjoTC0iNMcugIgPL3dWqeQDyoKq3yEuB0KOMcxX+Kt7LrMQtfH/gQtQt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasd9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1vRAAmnFmKJW/mfgEuQNQKPs4rAw86lmSajgV2wyu2L8nSglWPWBF\r\nj9lcY3Tsn2tFNP0NEQeaD9ZuOhF/lF5I4fP+5/0JtuB2/dUAk7VZ4WBL31zY\r\nPV4oDhu/5I7sjRNqZT9HvAFMQeQgJHaj/6t7hcBxZS+iTxl3EtNiPJXomHuC\r\nyafqsVc6XHkG+G+uLsD1EKbyFMwQndMMWmf3j3avk9iKCMqpR5j8FaoXp6bM\r\n93lltmfNVihGUlCemR+fhPq2tii7EEg7ROZX6DrwgH8AXze52TwtcY8dUnx5\r\n/ZQiYJ/gGJ8AwN0YwVq0QR9Z9gY70hxJ16/xM6SoYk1pg+wg0SWGwKaIDEp5\r\nCZN+/3Ugtwzrfgx4xQLlVbPr6pMQjtGGkQ93qvPAukMhCYVZ1auu2W9/uTC8\r\n6Gi4Dxl8nW0pi1rPSybFENGP9PLqpbSAm5RcYGBXp3+qKOx6BBbmnrv4aiBP\r\nYzypw5ZZHenzSsskYooCIO1DVnhHZoNtv5421XncvZ4EFWYpF5GHsNuYXcsm\r\nMtZfTZx06B6Dr7XJ4w4WeiA5EZE1jADjKYnOxKxYDaNadidClgES78q8FLIJ\r\n6RrdTkaPXLj/hyXuM6FRjCqTqbh/xx3T9kJxR0lpjSdrMElFKse5gHwIa0We\r\n0hpgQXJtEtXHPlQ+QDmNwcZ2MPpzlxvPeBU=\r\n=K5w0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/focus-ring":"15.0.0-canary.432c815e5.0","@material/touch-target":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.432c815e5.0_1651165053000_0.8491244683361445","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/checkbox","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"438a895b7a0206f2fe772e0d216cc75b82410e62","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a0f01f669.0.tgz","fileCount":42,"integrity":"sha512-Gkh4it0pyafRYmw+cbCrniFDl32E9ETu4r6+FQ1HBWWBZnIxe3s/BcZiwv+WRrz/ogEYPe4SQnG4XFHliBMFkw==","signatures":[{"sig":"MEQCIGlfhu2W0G+2vqAlIeiyLYAMgWVLEvQ9lZZwDEj/dR+XAiBPHml72RFHoYWcjvSbkYZfyIEx/xs6cqD+4cSABq6yAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR9A/+LF2uZofwEn91+SqPm1r6x+ZxlnJKES/X8z4jbiPLK1SkjKnB\r\nygDnCbTSLC/WAS/xLU1O2hOjuChY9mWF0Ak69CBYaiS5k3n+t+++ktRoC6yL\r\nTpSTze2Cb8OXB7ulzXvWko6MH5E8V6xcZpEt3TkTXoIKp481XKJZr5TqMnfm\r\nCELmK/WczGy0wcGFMCgjL19kCY+AOUSQy72sv06HbhCtjZB65YILvhxOBWkG\r\nGjvHtBw/05h8XZHyUONT7eWXz42XzT+f8I1fvIsNVrqUjk1uPX59OnB5IhQm\r\n5ECqo4wkcyvq2QXiFnxtZkmAc9jidlPO1pTd4TSYDz71lObcLgbPHnkanm9l\r\n4juzs3EIiKl2KrxmxKXtzTeINPM/is/tdCcXlcex2PCWqBVNkyEUmDOeQhY5\r\n4JYn5Ujr1gP86H91mn2wPX9TSfgEd4stHL98/Bt7MXjKYf71G+zxkdbjXsKg\r\nfHuF/MMtSBReAyoNzqoWRDSM5+gc23u/eRcMEfhaLc1+x+MAoHer0k+WZJo0\r\nuwr8n8vPjfKIf6/hr+HijYyPkJp9OiQ+mRQADhS62sArXDbFncFnqwzj+2Rh\r\n6s0aYb1AxRCD9bLX/VM2PWSpUOwS2tH2iJ2gPGb7tIlbHiRIF254dx8x/nAq\r\nfLsSULjFzjsMmvX+5DCxj4vHS9fvJmIf59o=\r\n=PycZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/focus-ring":"15.0.0-canary.a0f01f669.0","@material/touch-target":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a0f01f669.0_1651868110197_0.4732914403260968","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/checkbox","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6fa7e8ff7ee7fef8aea9e9878e3c25cb0ab9c96","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.276cb39a4.0.tgz","fileCount":42,"integrity":"sha512-UULbGTfqWc8TMpe4WA863NosjJnUfjfFeAD6Sxq0ljUz32jW2q3bhkHwivRrY3JOeax2YIKvfMA8oiRIHHmZjw==","signatures":[{"sig":"MEUCIFHI2iIw9OvaBiLUoSrDWE6WvCEG9x73GGOnpgIWJjVlAiEAgTacWeitTCw/Y2fB5h9i0UbR/1lkfFkC4XLyHIIykJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqyqw/8DmvvznkbAxWZIRlWx1nCf29hv0M1pGJW8zO0rrA3rdGAeZMh\r\nYtjphX1hN18bp9CyLX1QRgF3niB7zrebWi7KeVHM6usW8/CKOSPRSeAKSvh/\r\nzkMZKIAu59BJNVBeNM44T5DzrSszJG87Fsd9zJKhT7G4iZlbkOEPousuVevb\r\niKv8HIBbORvjhTV21r7bEJ7KBn6ZRaHyZKikHp5Vz76B6g7GMRZCz4Bdtbbz\r\n5I7uioQEnBF+WQ5E2YJO8XQ290NKNuUi1npSSIsUza5Y9DGWePpql9lgu0Rg\r\nqQpPRGC6Xs6HpZYvKKcM6XZSAakbGSQfYKBuPJKJDM2U67ci+4RN/yZiyVCp\r\n17Tl+p5IlK3qBGQagTc2TlFfwKy65GLNTVKH6LFkKCPmlQDXtGhhKFxtQl0Q\r\naf0WkQb2Z4rKE23NXas4OPASDMLZVGSS906UIXy+MdZzCBngm+lCI68sh178\r\n3+4oGjaRexPJlUCHDZXqYAfTMHR7RoQ7UWvKAR2PjYpL99Ddq54c2mBR9vSS\r\n6nVjSvR3/5gie60G0IMwUL6sYgtpHLe3xNDSi3sQ+comXQvs5B2w1zXj1YcB\r\nSdtTQEG6EWxZ/BOvUbEy660fJdEcNlbOjt8H0LmwVrAqOTgdjyOGtbEZtmL4\r\nRJwNnzfyphmT3ZGuUkULKtasR1av0ld9iFw=\r\n=QO0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/focus-ring":"15.0.0-canary.276cb39a4.0","@material/touch-target":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.276cb39a4.0_1651872720968_0.3063759761365443","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/checkbox","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf3292363acb453ed8b8de545eed63a18460aa14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4fe98ed70.0.tgz","fileCount":42,"integrity":"sha512-d/LbZLUpeJhGKHGHU4CTZ3Uf2vo7e8VB83patA3SJAXHROVyCYlMguXvxMKtGft6I4zhZ2jTvULsEQdwQWVEwg==","signatures":[{"sig":"MEUCIHHN4bhno/+7CCyXheLh14ZS0uniq0WQhQiOytxKxeIvAiEA/aCkKqmnQziub+4ZU0eh5GXy77ZdEzpgMAncIA26TgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/Gw/9ExGiS15uheqeT0bCjId1jdfhsnUcaI1DqVKr8TKXrc/Nz+tr\r\nLXurHijDG8n82Bhk4Oi6+efYjowvQfRkn6WDruwdghnqFvBlphPhwHYN+Fjw\r\noNZS0SfnXePwPM63+y5wyQIJx005mtVP3Uj1SG0CaN9L0f3xKBDsnMPG9d/G\r\n+2kYComRPPVdJ84sl7qoI9XuyTUxR3d0U/Wwj9QhN5rl4gqdWK3rqAcKY5m0\r\n6FpFuE2SIe3c16Elm4e6lnU58v39rtaYtrg8AAPvyEtf5a4eLgF2TdZ9w/Z6\r\nHEgCB9wYvnH7TKeBhtJm7Prlr8JhFfLhpqxmxG+Y4cCkrEZobs7FN4bGm6v9\r\nScUQv5lpxS/zbr4lismc7mYcB96mk+tfr0asopn6c3e/2YwRLkzmWHubQP/a\r\nRyKxb7fFlGpJEZUlFq/QFtzi0KweckEpmuvqHo3QK/qPPn7cZ3mXQ1weIoh0\r\nW32KMpj78nx5n/4rVioC1NFymhubm2RdxxG9ps1L1t5OmaavmXQP/9CsT0Gs\r\n5V9h6uxPPySdZxWcHLthFZoCYXs8pidch0klXXjkZvplOnKNszZgLNTfojVs\r\nN9aAwql9ctGZOlfdaWDjmBPPGMD1on6cYXsHvsP7mDGt9zvmeOUivBXGSR3y\r\nDCujL7TfeZoc1HXBklFJFqZr+/UElo8rgtY=\r\n=nG06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/focus-ring":"15.0.0-canary.4fe98ed70.0","@material/touch-target":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4fe98ed70.0_1651874191507_0.8394252759097427","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/checkbox","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13845eb140181f83c41612f390411738f6b1bb4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.58b130a3d.0.tgz","fileCount":42,"integrity":"sha512-dwmdUTa1/RJgH3tkK/wCuP47Fo66/1RnIxunoNsAr8AYpLEXmB/lt8yt8uDFMcxQLYTzbwNoxctBOo/xaCq7Sw==","signatures":[{"sig":"MEYCIQD5zJCcyxrZ33FVs6fXl7/5yGipjj1cXVAtRidVDWfD7gIhAIbLVYt4QNNlGaodbpoIF05RimN7YU1WnWHa2//waiYJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLqA//c6sea6wNpDMo0Ni1jovx+0YAzokbrHf2pGUmUrJoUbOl97sM\r\nVuRKJcaSYgUMhM5TZ2XPshiznICBV8YROZJrtzoKfKjwykTQtHOowk0woExN\r\nO+LOXHeOYmI4/4/vivyEdcNCHbi4m6gncVwSJieRDzKuHx/ouTWpuPoEcW/B\r\n1ROhbHMd6R/UTbXRPDBX94nPI2F3KCGGlY3fxSOV1vpnyEcMnTdnNSs7wOcM\r\n+APXxa+MJQxvjeR3SlWr1Jvdz5rygjbAfQhZKPWlNsSDXctgSTt2BpHvwZA4\r\nSZLw6XBcGKPFGeQMghyv3Xmor2n9a9lBK9UH8mlgnlLdDKBFDAJpOPCOZHsg\r\nw/vfpb7b2HRaJyiHUoQ6oQITGDSblJwkMOXoHjZD26/ob8s86CxYxcEfWsYa\r\nhnT8voCeIVzu6be3Ic4S19eArvfkRxJ/COMa6onuzXstvXL5B/3TNYuFe9LY\r\nmSY6g4Pr5Ef5izKsyB1rJMzF76WZVYwFFJzIv75h0d2/Poa2eAi+LSDWaIur\r\nhnCnfWqJAlb0MHOIUW7Q8YdlzxEvtPmDriNY28Dq3iwQ/8ulm5pofVWCz8Pc\r\nPPQwYx9JdJPlhRZCcL85o5wS7kbxbO4RbPkgYQ0tkaOvNSMyhPkdUwqDJ8Bm\r\nfYCTCM/IpRRv1hiWLdOrmhrpWjE6vfH/K88=\r\n=X38P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/focus-ring":"15.0.0-canary.58b130a3d.0","@material/touch-target":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.58b130a3d.0_1651874331963_0.192593872670759","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/checkbox","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51d4980536024554919e1f5d1266475b400c10ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ae278a2fe.0.tgz","fileCount":42,"integrity":"sha512-bir8w75064NBEJUOlsoQ3qE6ssjYIbCC/uOw4A8KRTGFYFzhiRybb1BXH5ewkYWBpsavgX2mAnuBdaup17undw==","signatures":[{"sig":"MEUCID6At0GLTbHms/DS+kBhC7rbI2AVHP2SG8P/8Ze0aRz6AiEAjPZOKh/leYWTMY4Mq0Kxivo3yhrXCYECWvniM2KG2tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM0A/8DO0zp4PWU61pgpAKBUH4v6GcVE+I3LVEXeVRZnkbmxJEW3+V\r\nDH5SkBTOnLyKfybjKbYyKJ/psBpJFkMJXeNAQCw8QeRNBFQwZWwzLyfDTpbD\r\ngGf0q+hGdlwgWFbS/xdWDdPA+pHE8iKDZP03Oiqjgv5+hwRAvcyL4xHW1ghP\r\n30eaaXJaldxYX9sshDbUb5s0eswg2wyYeYfQoFvW/DBAaouYMByxqX7tHrt5\r\nB6frswFIDfen47R/4K2wQzKVN65F4EIuU8ozHabqp2VgK3kl+uCRyuVm81m9\r\nVIdl7XFogKLtfXRiJuRZtZdFhqscLFdG3VKfKfRo/0jb6Ax8jFWfrOGQf5dR\r\n8UK8xN1VC3xuXEztk5zFtiEGGlB4H55xc5IPo6AiUTrc5GpI8y/qw57mvB7T\r\niK/6GmT4LhvaMS095Ob1F/vgU7eaRTTE6SIsjcLQuQkEjATNsTf4wU5CAtSV\r\nSgit27Kkg9NL2MyW1pYvDJJ60OZdHlC6ncK1XMbNktwRExrbNz9AD+5RUxlq\r\nKs8h2q0XxhuakN4tnwQxOx4abS89sV+lQhZi2fBV5cCGXX6q+XUKJNSn/suy\r\nR8lxbRTv3Yu9G4h4ozqFjlI1A8ujpKh96hHEWXAMcmmdumeGRn4Opw5pgAUy\r\nLUa0L/pT1dbipBo5j2nVmEyiGFvahnOSfpY=\r\n=E0Il\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/focus-ring":"15.0.0-canary.ae278a2fe.0","@material/touch-target":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ae278a2fe.0_1652109923346_0.13397757531364052","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/checkbox","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15872cee882e6ede15761894766170c90280893","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":42,"integrity":"sha512-y4l7EsbLBQMimPZ/cTQAW+oNqIuoFg/Be9He8gMooSI8TGX6Vu9/881aidWUJojNOrQXiLqX27UMUDBVvoULxw==","signatures":[{"sig":"MEQCIGA78Aa/IjD6dZncSqmOtiInkS8RB/3h8ovIY+637TW3AiAZoaAL4tD26Ak/+ce9GnkPkU3+UfB9S3ed0fTKpTlXEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyIzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopIQ//YfErJOSTolxA8epu2ZTqXruLBS8rghJbOrLQqfnKdN3wWrtE\r\nPdqj2y8+zsHns1FndrRKPdtQO9Hnlv5nZIjyEOBXtyxUtWac3cEG1uaQ0mKT\r\nxvzhRi7EK3ocXHqGePFVuCOIfp9Cd11QflvVsCa260nx7G/0qAV0iNEmwImq\r\nXw12gKb6RY9KA7e4t6MF1Fa5eIyA9vERDgOPv40FtauhUxb3h9OBiGZUBMwl\r\nKtvRwUI7IGc0cpjrTW3FqboVyictCx1Q9CvSWMPUXHA2/BJbgMl+KucfNwb+\r\n5HqNHM64LLzvdHcJ4sPC44e0vmuXLk/laOFOa5JbNrdXfM4LHCNhVqjhHLhr\r\nEKIBGwwDYXhD8zJ9FZluddT4H9YadTmrulUl+7wqL/Bo2t7mMbSoqdtl6yT7\r\nTJVUW+DJxZH7HIQp024G4TojIsZoE/0xKQnVlcmpnJs8LgfyZX00INs8E08S\r\nlp+GmkDWdw3Q6hmYAq8/oGIQufln9PDUq1qME87A69Ip39/2zUtR0qnJBTPr\r\n6wknCtV/Mbpduy/SCmIrqHRD2wIIX5H4+CwA7iGFK3cWqb9dgnXrQuojGMgI\r\nfG8TIZ62u45m8r03Gegsr2seSfnTxG63zQiYUiEJndhypQcK270mO5LH6ySG\r\nFStZFozY+FdfoM+bxE4PKDG4LMPT+YC5oVs=\r\n=s1la\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/focus-ring":"15.0.0-canary.bebf5bfdf.0","@material/touch-target":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bebf5bfdf.0_1652236850967_0.29480813058309696","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/checkbox","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b119a68c0ef3a27951bac74ed7b7e8ce7ff9658","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e6072cd6a.0.tgz","fileCount":42,"integrity":"sha512-rwaC3UWLEQ7srSE4jKnjAamAvNENW5rZxVXDNyOAxiP+mQnYDhlATKniUXpx6Ehc42RaabVhUIVJdL8gBHDiTQ==","signatures":[{"sig":"MEYCIQD78YaD48irOqIONXZ+Wyv3oyykzkHjiTLNWmg+Ott+UwIhAPPh3TlmQLSLcoHGw2TR57fX91sGSScViX7rL3scG2W7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBoyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOyA/+Of+uDe/1rOsEhFDJK52q8s+rbK1AUdc/nDU21fzwssAPqsFM\r\n6e6Lidnd/mzJtUM/oa2vts69icr3znHMeWOsFUFGELDQflGm15DzKsFv6V1X\r\nmIGdzcBHhKTps6q6GInE4SfsM2TAYq39RvDQdZgoYOBekEsR5rBoc1tvFl7h\r\nTrUwt7/P/DBbDS1QC/VH10Zv7jShRl/RmCEqw1bPDGQsfB/mDBpJ9NGlDVeM\r\nxbYFDME52CznOrwsukiTmUzhiA98Gj4g/CoCHLpCkIBSNkCzShSJABahY4xj\r\nA1RuJ6pFy7GFBSlyBU6QB53ctGkhkcsPymfYGiEYwfp/yUBRa17XXf3gtScV\r\n0/SvCAb1sAk6Wh2Gz2LfPqSblu4NtJN6c8F56O3UXNPL0rdzPbGFsDvdx0lx\r\nWY7BFZ0cl6M8h+Dtjo4QWTsctgK82wHkZkPNawxdGR2/RpxBKwIHzuw9V8uW\r\noSuRT54dcb0iQstKApGxtLu5aBtHNu7HY0qNRyuL8wbvaajs5v4dFlWtwZ1w\r\nmD0NxVYV8SiWE4qe3ouA7k5vUQBZi448MCPV3DCLpAQkSQQ3eQIZcXq9glMc\r\nnxKK0xD1dJG/clXEr7D3ZfM7HKa2FXg+unrBX7LuJjY4IAu8pzsgo0wz73fA\r\nxNg06RL//4/DQQPBeTwBIVX/cuYO69xsET0=\r\n=MZou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/focus-ring":"15.0.0-canary.e6072cd6a.0","@material/touch-target":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e6072cd6a.0_1652300338688_0.8452633115971249","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/checkbox","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87916fc72e7700dcbe9fd33cbf8cae6ffc4eca73","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5b40eb988.0.tgz","fileCount":42,"integrity":"sha512-jtBKMFVD7ZTzPqkroltO2CFnShyIJWaOJm8x2PTNthVuKNYyeHpTfVp8znLVoXSZRtwAcnbPxAtKRP1rZCanDg==","signatures":[{"sig":"MEYCIQCEIfnFrNCL6fdJcWcZn9Yo2VNNhfjVj7V5qCdr1zSnCQIhAOPQx2HNk9np91m40bXNKojq4nl0dIOHFWQJkclBTETe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZIg//Y12Kc+/ap7eZPsmdZ1TSKtIAyCYm3+uXzlq8fg80uRPS914B\r\nk5siS3VDOkKbHvj5P/8Kjf20Azl59FtnlfkcD6UBxlu9Q5aj4AlJRWK41fDb\r\n3m8Dq9rWSJAgnoEEIiBUwq3elgkjoxADsoJpoUFf90rRAp8IfIY6Mqeixw6t\r\nwe/rZivWQAIwL4Gx+Qw/mp8reinNB2GqBpkHcthNgUTDvDjU/RVxmQgdH0tm\r\n311uwnDW9Fxn/ktxZX33HGV8/uzs8BsTTnoNWo5I80fHSW8Nykix+RBR432v\r\n6oMSOzFcuoMpO4/OeVeJpKNMiTw3t5S9BMrGXl3k/xD/8GYKJ1TLe0uesyYT\r\nlRV5P6MXaYD6nHrpFesgcL1no70oi41RTjZNYdO60t2/nka2S1gYXnizNoa/\r\nu8YYW84yWMfTW6HmzP4/w4XqquOQ4zJhnjmj9CIeDA/q4BEktSmaJWA6EmN0\r\n84M8FYBXr/aHc7kXgbnDcS7WgdjTVGar3OnRwerI9C3Dy4viJCtlkuPri5c/\r\nsVR/wKGxJM3fg29sGNrwm79GNFHhnTu4LT452ar+FPT2LQRDUQEa8UN1chpC\r\nPD7kELjIYrEdKwOFM2dy7cmoCKVvKgfpdHfn+YHfSn9yZAzxCzo55CteX/k/\r\nI0QOdEAf/EhOHEeZmHi69RGwHxJ0rkrg+Rw=\r\n=95sC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/focus-ring":"15.0.0-canary.5b40eb988.0","@material/touch-target":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5b40eb988.0_1652323486169_0.21118978928633836","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/checkbox","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"301b549f7a04048d63af8326f6c8449da7f0e766","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6a61d62f6.0.tgz","fileCount":42,"integrity":"sha512-NFqyvLvaghV2Y+TBOiFBkJuY0lt/GiUZHbRKzXzeP80ONnKQU42MqKVtdOrYCeuJwMyqfN3lMGuJ9LQMYJHrqQ==","signatures":[{"sig":"MEUCIQCftd8jGY4XK938acA6iWxkvCFfa9Okss1+cJjDlDVvBQIgfnIDRgKYBdFtH3f0KOoNo0tpAxVUcp1C47t9JMApoGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW2rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmperxAAnQen1ytXRZJrHyYTqmv17k1c6zDWB03nMcMdsAW044Ye18Pc\r\nfxnj8yNy3JoJReIz3+XX5ufAR7WwYVCCtNLI2xv2Lpplm4kf8c4PzoB9t/mT\r\n2znJV3slfoK14JKBsam/1wbANvpqvg5XYaTMP0QOAwKTgnPv/eOMQMt34qeP\r\ns9LM6O2FLFasP15DGWnfaRSZ4Jn0febDSZWWmcPeFpVogDB/DfWazDkt+2VV\r\nb2Qil4HmysE+TMsUjyM3AXGyyKrNnIeY2va357Spp3AAjg8S0N2YNxBTucgZ\r\nId8UF7yhhgiI6qx7KDGzdYCHzClbsl+7KEEqqDKBCIXINtf25xpFt3JJLo81\r\n4iH7qR44YmYnrlsRIsSgBu5AaPkYMXRRcxQqhxpfU5aQwnr3WYTfT/HxOxrp\r\nan5Bffj0CMK+IOkEeLJMtirW1hkv0ObAZz6dAiJE1Re96SjKfmksXfYp7Z+V\r\niP7PlBXlOnFzRrrpZx9wLSNDyHS4Mb6JuYn/00w/PZ6mLCU6CI0deglQJ1la\r\nwFtdXjyJFy7Sl1kJj2eySSVsLfnbHfY37sk9IunLkcRvQrxnmXdOxzaeIEhj\r\n9SXPtrLWFNuGCUQ+jas7KzK3R6VPzajqAXjHFKb+KMQCbZP9uC8HdLAHicXH\r\nbDowD7rsFu2CchBuRyaxnCtDPZ7mfLxVTq4=\r\n=B3Vs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/focus-ring":"15.0.0-canary.6a61d62f6.0","@material/touch-target":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6a61d62f6.0_1652387242725_0.7834888327961513","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/checkbox","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.05930a453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ebc7f7e19da1a11e770cecf16e08ec83f15cbf9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.05930a453.0.tgz","fileCount":42,"integrity":"sha512-MI2enxOtoGMUOwJqJBiQXsVOBZsfVjAlAYVf6MEOu+17x0UWBO2xwVMrqOBQWLGtqRgRbwySQ0HjKg3A94PIeA==","signatures":[{"sig":"MEQCIFc+4l/E94+NvjwCptoTN7UtpHraX6wb/lnLiXfKpJguAiAulJpC5fEIjcCyi4Y5NN5DpssqHqAeqa2iAA+rmAeRbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr9Q//XQxNTRFuNIZA3AT6cR/BGQVaTjGJsd8PJtO/p6aYPbTWUApf\r\nh0RNU7iqdqf4uOHIJEtRBldz/zNV8WpQmdg1AA0MUTn6KHaBQqGaMb2FN7m+\r\nD4UEHeXJZrTi6HPre//dBzyinN2dX3UhoOhNASsIEG5u/KNlOBKaRuTq4QPO\r\n+DrRcI3nzgGEIENkkzqSp/ZhIWMQdFKmvLQpc4bQaEHtHSyM+Y5n23nGwgnQ\r\nUf7VWd+iEREmoGrYKIMYIEYe7Dd9FuVWul/6E/lkyta/fyTH4BU0FQXErlgP\r\noSJ4lSVfSalqQ9xuLk0fHL19c5KJ7Dvh31Y9pFW6QAFRR1ZSZhAmQphJ/fBZ\r\neuj4CaD30gNi4xyVstPMl/4I/sGPhNZePJy9Cb8qJRIiKaFpcXO9MQZ4e6C3\r\nWFjIJE34FdWQZIhUSKEwLrGXJFs1wuGAMeEWTkVIVsZtNWEQaJQphOnooafD\r\nEuSDZ6N1nk/gtw4eGf7Hr3FRcAlY7nN8Z+qMymPstxlzWchuDkmFItciOFkL\r\ncesmvfPamq2HtLHr+gx3LH4Mmf9Wj8dejBCqp2+rojShsNLsdW/L5uTg4g5m\r\nyQb3nZgCc5rBYjPwPYFmjlRsLqBAycAyzqApuiubdGbrw0zlXe3RWu7d+rYz\r\nMMJ2LKupmT2tok0BNXZHFE6Ik+pF1xzoPQw=\r\n=VZev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/focus-ring":"15.0.0-canary.05930a453.0","@material/touch-target":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.05930a453.0_1652467680339_0.21934710441072047","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/checkbox","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a358c44f57a6d8685ac61f13b138a8091aa3d256","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":42,"integrity":"sha512-Df2dQoBIA9bTkykNJHuaDdyHeKgqyhcjR5cQrfS3UkL7rY4G0+z58f7KHHNMTd43cbVQdYMRb53F8JAeW3OqmQ==","signatures":[{"sig":"MEUCIBBimbWI+xq9qu9b9lIVNEy9R4FyWbkNPYSgO0qV61CPAiEA5YzW0WjINoUfgWSnhaeZo99pl/G4wHtMaDc18fxkhbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWy7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRyA/8CDcxYR4h/pHkOfMa8uJCkIvWIiWGApk7BelJOxkvesH4hCST\r\nZ22eS05jQzQanKPISNqPZGO4PoGT3ki/0FQYjCpUCn213P1EGXfgn3FonmpO\r\n2AYYJlvUkFfZH+dq5Xs/XnsAiWh0oN6xEuu/ZQHaRh3AW1fEOiWLE0gQtMwB\r\n24Wb2dATCd0wPMv3hrH+F/RBWgNWW4iV4tiUA+1atbWSvzSuHK/f+cNzV1P2\r\n7OFv063b+kjHx8D2++UaegQr3rRVS9PaZvKxoaj3Dduv6iPaRsmCoFvEU//g\r\nuwzPs0cP0ZDJ7SyBu9W+iU2XJ1jKGUJbVR/mEcBMW4MrZKfpIQmOq3pbwgRN\r\ndB+reGscfinvQ+kf9zpfRmhGzLx65Kbwz9iiNCzgiU0M7rZ9n0MdG4kyV0lS\r\nziW2GDNbuVlniNoGfFXe4FnQ8yY8GYh/X9MlU/3hEK0ZAM363YAWAAw/wbTp\r\n8YrOJ+BxGuypN1nVMXT8OhtGx0GlQmbJwKR44Arn1XpLRAHBgmw196m+hwvq\r\ny/YRZShaLjn8KF6DjAQnf0gG41vNVJDFC8G1lx2ddnUdt2Xl480u+l9eZdPI\r\ns5H2dnNRAOd8IJA2rFLafBqvqRTZjk6k0FeGwerQQKwRrG1iS1KcPVNKzDkW\r\nCdDZOenTIqywRr2sIO0A9B1DCzVAMrXA1tY=\r\n=xoUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/focus-ring":"15.0.0-canary.c0a11ef0d.0","@material/touch-target":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c0a11ef0d.0_1652911291582_0.34940003291284283","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/checkbox","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecacc8f29d660e29b6c5e7ddb120c9b6f462d220","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2f9b268c0.0.tgz","fileCount":42,"integrity":"sha512-v45qkXj+I61d7Iix8o340XuS8YK+NW9RddFxcFW+nE0I7vH8JYOzSy0PE/R5MovtkJFO1J1VEBYzdkhO9sNpFw==","signatures":[{"sig":"MEUCIQDE38n+EiH6Ri/q35LtqSSEnbnov9KG02kUKvuMhgUU7gIgTcwMnOIaKKA3udSFhZcTX1TSy0tejmJIIa5D1YVZUT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+z5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+KRAAm9+Ie+eMtT7vIifj/zw0306oMAH8iNc+vEjXmtefAZNE3nKz\r\n5JF0xMTNcgbOI6archnxGtvkk8kakL0gVtx2gsUKUi3WMw8y3Bh0aEwI3Hw7\r\nc4pe5KCPQ27K01/NWZKKpT6q9Ulo9+KvLhG7a3iVvg3y8G0p7qrDZyL5+dpI\r\n9NoAKM1Dm5wbu49d9saqROzUbysqTio995kRt7dWsjBLWtc+O+ZYv3kcfDmW\r\nRcuf9yrveRuyVDBJpLfP1WsTcWj6ueQEExE0t8UlqBA/ceevR7Y3GKHUUWdw\r\nt+ukajM3CRosAUyt0r6QIThGNgHNBBq85o4dX6ood+gA3rRyQAGUWodQ9Y6y\r\nfCWY0NT1BMtlvWfuoyXxxJ9EaVv7Wps/nxoPOTVMliE7zAE4USti+TgWCexC\r\nPzxddQ3W5xGkv+GgmuUuWRqCDAIGhyqXwoudFULeAy2bjTPoyAR8OeFD6F6F\r\n05z1ui+jkIViRy/zFM0w+982rjG4DJda7EmHlz67WGZ0OloAfe0yPpaBIjiM\r\nHJ4Yt82Z8QKu1UpStwegkPDYigVs19oaSe0kDkfRfmmGOTfnbDrOVgF+/qEz\r\nnCAXavrtv2ipKKxupE8PErpcxq2r2RoLmvqiMemDKBtp3lS1zD/cUFMyZxIz\r\ndpd7oEwtPFEpqU0EDxYEy6Jqissf+YqU0sM=\r\n=5Pn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/focus-ring":"15.0.0-canary.2f9b268c0.0","@material/touch-target":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2f9b268c0.0_1653075193550_0.0887012919694532","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/checkbox","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7741345b8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b698ffe4d53a8e6f521dd7ed9ce0c39eb1627949","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7741345b8.0.tgz","fileCount":42,"integrity":"sha512-pDGt2AqmoXQFvCQPTgi2ua74Ruv+P6bf5/zAHJ0NBOSMPzNcnybcYia1+Q1chrZ471kLYsRm4mCoTfJWwB8jVA==","signatures":[{"sig":"MEUCIHUN4J30XuHuro4v4pKyFgYz+So0sLjjcgtxoyPZNDR4AiEAj3DNSKJ+JB6uEQOVJvHDuveRhYCkKwDrb9AKWJm5eDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohEA//SUTaIsmIgoAmY4hkJz/aqGhnfd33/TSM/BPk9nYTXML7xNd3\r\n/z0m0qj9HVv8hd1SLezCnzAW/qtBva/rh/NBJMMW1c71j6xPC6Cuyikz9X5M\r\nWe73+wLyBYFP7DoN9kogjXFiiuzaWX13Ul7u/wq+cSec4ppVe/FZdIrUoUq+\r\neifeZdAaTMfn3QTWuAA2JpvuL5loQ6mgkUo9HYcUzb02g74lPsslvurBAHwA\r\n+EuM8e9LhN4SqK8P2Oup1eL2qBBjkszBaSJ87ffhcgO7sVXwZuBOIhbeP7zY\r\nV1LAbq6jU7kr11XxbAtGRjypl+12bVgvg+edFsJCEzdT1wq8bRWXMd2JTp9k\r\ntwpZXV+OGKTd/VZgfZ3Cf+PmncvRlhRCYe5pvRtcavTMWVbI+b1dBNmeHwq/\r\nOFy65PF7bkVpji5NafwbRkGK6pskjW0RVhoUEXS8qigdrp2byd9aPjl1UuDW\r\naz4etKZbjrGAu1FBARzn3PbTiLz+JAHFz1oGDUIHBisDryZZdiTTIZBvuVSS\r\neK5+CImGWHdy051pYRIiq82kUCyp3kuC7b95IZiCqWD9/stsLIQ4tetHc8EH\r\naDXPP9Ob27VJmfiJB0bno13ugaSWI6lQPm5Rj2Shf/+YAu2fseM/e/XDXNwg\r\n9EjFKymvNvtp0LwjLzqF7vi8k9T3aNXHMaw=\r\n=jH+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/focus-ring":"15.0.0-canary.7741345b8.0","@material/touch-target":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7741345b8.0_1653076997674_0.648190520932733","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/checkbox","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f807e793f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56737e2eaa79b046a78e1cb558e092d5d62d8b7c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f807e793f.0.tgz","fileCount":42,"integrity":"sha512-RdcKxHep7FZTJ6kmp18lb2mF/vatObAMOyEVOiOMWQZOv+tgBobdyg4sk9arkXtiY9bHflGg0qJ3mocml/MkEA==","signatures":[{"sig":"MEYCIQDH0eQ2BBRMAacoLnwyHkW1xfEUUVfZaHcmJqHU4+AD4QIhAIrdDoDb4nXsLld6xd2LWIvKJKKv+jBhTF9TL/ztPBKn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV3hAAjL873VE7s1TBGwTir2+jI4aGHtId7X4bNxGGU554FKxMg9bP\r\n7nGxKhk8pKLFyOhzwQD6D+IEJSCgG948tFR6BsjMg7wcy2BFv0anOUKloHTy\r\npv6Uds3nQDOVG5/DxUDz21bjL7tq/VIAqLbwGwWBpfkAqpU9tA/lfeajwDQ9\r\nncWkYe8MELtBfUXbZ3au5Emb8rzH7G2A7q0HZBkvVRxqwwkOcPhYLCdCiFu/\r\nEHx+3i32bAc4RFFlNvFXEa40yWBgglMyLd0QO7oALgADP7+R9FXPOaIIaEP3\r\nf1dv12UUcaA5DJ1hffN8sfMWtaL3EH9+GzYncRKE/8wFn9dNpcuDFvRULQVv\r\nToY02vBMiyxENUNjsnKrjB+tz/UuWvztXZVtTm+qbd/lNSydq0e3t5qffQAM\r\nG2oRIN+WTXQUX+Eyhx/GnA6dQF622TL/1DOGVeFNDe3GqyU9Xz0aY3ujWJsk\r\n/5eW4dNr90TxSgfiJBwYILvJLl1oY8OxBoH3gyURZCFDYTIlz1RDqxR5Odjf\r\nYrgT0S8ZUgKjbvQ/QFsre8XGYUag60Mm058cChHXyonRoSJ6OczVGqaJvY2+\r\nPcerhbpaEyEj76jqYYo1Dj4cATADeTHf0eFOLKiepfzsWS64Uz2dP7agzEbL\r\nTWrdWoKcPu8+J2kD6SOt0Ph+5OLnvHywpW8=\r\n=PRVG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/focus-ring":"15.0.0-canary.f807e793f.0","@material/touch-target":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f807e793f.0_1653085341462_0.9132500261304792","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/checkbox","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b08cf098da7093752bd75aa3ec7b9ba27d71788","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":42,"integrity":"sha512-6ERdOjnXecO8RQ77itYqf3xjfSBtV1lEK1a6XZPAtAcL4B6u0vAyvUFV2RCo+MLnsVpSXFQuaHjbsUEAVOBEtg==","signatures":[{"sig":"MEUCIAmQ1KASjT1uLgvQA8oufgNB60mPoUQVYhiQaSs8Si1PAiEAzT18hVctQkEQE5K3r2u0OBLYKcNG+Dj2tskiC5yoPJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6ELACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR9w//VNUUTLW7oAw33aikuXk/ZhTLspDJYHL9vSDb3YJNj0itLdo6\r\nqqUT+MXV9w0RHY4KU1UIzK5rxvF2Ug654LqpxAHA8ehaGbcXZzKM5OkN7r1v\r\n9BMmLEny1I5doib7oQT9VPgv593yRHvLek5Rz+vOocfwOW+fNDIasVFvzCCI\r\nA5MuZ8Choxl+H6zqvW+7/QwqTICjR25HP/tuRfMSg2E5ClMSLo8RupKc2irU\r\nQ5dfPOK9YB9/xojoNkVxuYED6eTLPJO3Vssw1GGLu3p81mzAdIkUHgvz8B7D\r\nWik2D7/iM3QwUs0+94qg7ZY0zBxReHMohcTh/WVQ25V15N3xXlKMp3p/PT27\r\nF/iZBZ4m5XTFDWa5pwhki5dItn+XmcggRiYCUJD09L/xi6pkjRYrSZrkvrHt\r\nXcNKY6o3JXgs+fpkfrK7EBKripFBftb9SCe24dzfCBTCoPHJM6QBZ2r3uyyS\r\neCggR7cd4WjJEUBl5re/ZFpNOpLvj1lO7LjTLm9N0SU090xXyOlmC1tR8oY+\r\nilMfCb6iGS2/NiFtkm6b/1tH82H1RTV+46tQJJwM+7o4afGdtrV1uJVOfuoE\r\n6D/OKyVqDjdu1qjjlqwhxpX4Fq0hTpBz+raqSt2vpAFhgFchpI7L3HXY7uul\r\nR27MJ+iihADUjfunn49V3DDCefA0nZvfsDU=\r\n=dJ2B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/focus-ring":"15.0.0-canary.9f53d4a8a.0","@material/touch-target":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9f53d4a8a.0_1653317898820_0.009795953761539744","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/checkbox","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b64320761f5fb9dec279ee2f9aff5e95ca1cf01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.77cf00e37.0.tgz","fileCount":42,"integrity":"sha512-V0X61XtXUSfsyTyzT9h/MDAJomXieoZe7cGDRxK3jYu0dUvaGCHtfPdu22KohTiN6tQ2dSdn7e1evtO57ZLFIw==","signatures":[{"sig":"MEUCIHf5yAS/N45S5jK+Ji2uhUfmpgSApaTK+ddl2M+mWc3sAiEA/uei2m3j+TpD6aDf/rzezELd5GFGtayA0rA5t52PNiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkUQ//WgBzYllHAyyCCVkFGZl0PQFoeOyGIxirsyUOUti3QB+MYjBf\r\nH5XGzFB760nfUC+PQqV1qWL0rjaZisDMbAtAcXGUvDvA+/KDYIKM3BVQ+X+b\r\nqU8DjHPRwB5Orlawu4EYPqWuwbKt9ppvwBdqdq7F3lf9si6Sp5r3c5+dm3fB\r\nfVP2wGTGIviVrKsUzCyCRKSFmcv3aOyKQPiNG5QwlR//pXF0hOXQdp6X9Yo+\r\nCWXzvtXsiogU4I3sA/PenKs2uu5k+BleXRsz26FuK2jzTkz7Y9JfLKjCyElf\r\nAndD65bYD8Kb5BmM44XqSVJ05/E74ENGFgV2YxSrIjpxyD5EhVGMN5zFVjaD\r\nYB06g7LaUlVXQytvfy7XRjoIGmWL/dav2HoGo5I/b2h9VqTqwab6byN8Wn5T\r\neau7JvTIyWGo8+mtGwghdeSqpv+sSSFdfrzoeLcnQrZNruJpTzGU0GOpEyrU\r\ncTeZabn9np4Vm+y4nugzemCKFimMVeKdELP6YueL6dr+qzGciTmV2IkOWtUg\r\nBRuDXnVVtUBhkIg9VDfyxwpa23F414p4T1K5O+1yjYeymD8hk6d0iKXCt4Pd\r\noEqTbS8XojPjNiHjU/tf59oZKkCW/Um+1AU4xGcs92rMolxhASA+Hx54Xemz\r\n0d0ITHbKDL1GIBJDQvsZv+bHqEXXdshFOQI=\r\n=25Ql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/focus-ring":"15.0.0-canary.77cf00e37.0","@material/touch-target":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.77cf00e37.0_1654018836307_0.6208029765753091","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/checkbox","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8a865b59ae362af07489d32c3afef878e1942b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3c7b844c2.0.tgz","fileCount":42,"integrity":"sha512-cq88eRIPj6QfjaubuGzOabXzqOLroXDcu5TDO37oMG58HpcC0f0VI/sNhKzq7xATVoqb1o3iTrZFC5wsjDSPtg==","signatures":[{"sig":"MEQCIFGBAjcVxlmiPSCgJnk3SwEQpEQ481ZRfMyc2ped+PwZAiAQly7Ntpo/l9+jSHlKCGcFDmDjaKZnukcEebSXsAxkJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin89xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDIQ//eNjAwbl+Y1psse9+FMtV+EE+vKJYL1KXQrrpgeHTG2xmPt0p\r\npN72pnDxhDCpTAsRjbcn4+px5hxySTWAd/vm81FYKef6SARg0H/kCKG2pBhb\r\nnJ/92Hu1BpV5TygLTEOiJa8M9iGEZ7JbGMmpazhf1MhsrE0x1td38CW3Jf1N\r\nTuoHh68Fl1g2v6eeKBzdgDxD2EaUfoZR/njVEfY7Ibg3l5bYlqSM/e1FoJ5+\r\nkyBsT4PwnLz/stG9C8l/BWbA9T6NovB0ZYwOPIf5u8IhTORhZ9IJVD1gaaUk\r\nx8JSMeUmlNQXYsHXmF876DhEV9OOXvRZB61X2p+TrqTBBhUGAHb/MlEtXGdy\r\nBXPMSLnTfrD0cb2TvdkLRK6Z9LnJVeyURKjceWF6lipT2V2iyQXEDjOWDGWO\r\nRAY5t2VnfLwFy4x06dSu+vrxs/tk6C8NMGRdEBcV/0dxQxyARmN5M8RAZUvr\r\n8xlY3cHcfdivlzGJS+4HQXwL/3Im75AjLqs6Wep9psUxadBoUzltM9hspcnp\r\nWUHDzs+phC/Oe/ic9y9YOe4jrDriF9pG+FcEE7hPmmYw61jQAMpbC5uQ9iJW\r\nGvaSx/0Cp9omlYrWZT8J9NiYIy7G4Lg2RpyH5wnNK3AsYHeZcC5uP8Azd8M6\r\nsHwNk/sZulnIKgyM3BkbHDDgSlf0G1uFfBo=\r\n=R86p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/focus-ring":"15.0.0-canary.3c7b844c2.0","@material/touch-target":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3c7b844c2.0_1654640496787_0.46785984508296785","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/checkbox","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.df47894db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c87d2f4ec5e5b91f6e5e39eba921cea9460dac5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.df47894db.0.tgz","fileCount":42,"integrity":"sha512-MeQqNtH2U6YM1fhFZT05rwQrF9p5hLHnWycuVmrjrKCFs8nrQWJ35DmM665bH3s+mYJcBMpo1CsItKLw0CkMIg==","signatures":[{"sig":"MEYCIQDUPNt9YmnsMpwEF/GTXKQwIynGGxuU9/iwwEUhok0WVAIhAJhFMjBtEcJdKDAGDq1FiWoNxre2psuLqnd9AlWTJpa9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip28vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMVA//QXHusUHDdUKZOTdW7ba4dolBCpIA0cV6cwS1NWVmKIzGUXzJ\r\nBWavhBX+OADOTlVmijYXXFG/xAwicRAxh5Z55p0+Ab6yP/5I5WnZk3M92sVS\r\n/W/hisDGYxNifg05tZFglWQSZj3w7JMCAFMHGfquNkkq8zhfp5HFmEZUN/yl\r\nQ2mPLVMli8R/DmDuxymcsTcHQSkzvVdWkwGjLk1RJIu9sSahF6kSRQ6RyFxZ\r\nPHLywd6vhRO6bFMI7nt0Qn7tWmxDoTBAy6jvrIG6leovQUD1qToUM65h68yt\r\nTdQS9Avxe4V2+8Z4PV2ZGM7zfKPqugq3K/3/omL5CJLS8dZ9VV6J7llZCiFz\r\nCkARP7byXwSUVGfnkmpZZKGWA8H9l8b8rx4Y+mzwN0lqApH8Wos+1lk7naqH\r\nhfQ230CUyKccVz02Qey98thitIsZRNaZEHBZLRo6o9Qaz4LTOviAoO5E1bol\r\nQR4GAVusDeke5DTA3pWlDaF/Uojwqv/7pmcSlZlyYR9NitE/YCEsibSzPnY5\r\nGuU3GhY8jbWaWYyerJzrvV/cR6IkyPUk66zusbtIziQpJItM5VKkLkZl7g3g\r\n1xvKe/xdcvNz2mG5diKVl2ieJu0s/RBdq6AfWt61XWQJMoha9eUHUPX4klOe\r\nmWAoW7wv6VK3/vFBdW5rw7534eZ8ChZl46k=\r\n=YXRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/focus-ring":"15.0.0-canary.df47894db.0","@material/touch-target":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.df47894db.0_1655140143615_0.8806110801495646","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/checkbox","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d96e563c63cc4b3ac7139c45d339346303ddac14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b18a873dc.0.tgz","fileCount":42,"integrity":"sha512-S9eTppyZmAKeEwSY5h9jT2k8XHdkLIdrm3TwnSFV1rQXmfi66E49dk+xcH62MkPn+bAM2ucBm2bNxoUavVfePA==","signatures":[{"sig":"MEYCIQC35hyVkfQF7Uvq+cBWEOwDt/7cbAjTlCXK2SEU9IuH/QIhANIiZIxo8NnEpP2TztxfRAs3PIaT1cB6zB2ZMwM321ax","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1BQ//dwGnIx5FxheuguUKWYTLImFnTerOdzB0JwNXc0VMqxGYBwN7\r\nAhBtW8HffLhj1nS8igO6A1yiQSnR9ZL9izoh5M/TyDptKFHKVPe2fKLrCylA\r\nv5pAvUvxwUMEkeiwJd+H3oxT7l74mHpN6aOd1ZvgeRPekQKBF9f3A6mXPt4+\r\nxEEYwRWu5FJXxJGl24qzezfaG4cSTl0H9nXtg1DQ7ByNFhnwdyo2FwSKQAym\r\nl88aJz9NaiMDJh0ZuoiPz3ip4uZWAcHIG0lKJPxzceyGdXLftpnfYZ9mJNck\r\n7ObZdK0ccfAMgdQdz82guwfFfFjPX8x9me51gAk8LhCnULEbbo0IubhVFrQm\r\n/uTH/8VM8X/xmKX74Oo3al/jitixdtGT24LRDcEWSlAqMgWImOPvfHwKMu7o\r\nSyw8M2VrzhcJWcxxh5uXSnCrf8X1IwKbQsNBwEd9LwIbbR7nldZtH8EogkUA\r\nCuZ9VhWTnPJkxV0Lcn2wbqO3/Wm4qgyZCrSJ2lIVods0N0D77eQYm44TCb++\r\nNAtlo34VSkTUGhwZfeOXCuZVbp9nxIj1/wd6oXmwKw9pbbLJiEkIk7XMaL3y\r\nI8IEISxQA95DOhrEbcLidxQ8as4hHce2vD2YR/gboLe/Vfjx63afzjOZ/Fk0\r\n3bKoQ611PnaeLD8TWkoLlAU331gdltnN1Ws=\r\n=wnli\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/focus-ring":"15.0.0-canary.b18a873dc.0","@material/touch-target":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b18a873dc.0_1655188215635_0.7269670977999958","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/checkbox","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e219937686310e2fdc9a1cd71c60367a3941de7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ba9c29637.0.tgz","fileCount":42,"integrity":"sha512-nG0PQVlJMJCjc34xPRQxeS/9cdzcl6wunCKzhREFzEBhSrJCgWEFlCFvcICzoXXg07+Un3LoQEhWrawS0KUX6w==","signatures":[{"sig":"MEUCIQC09/0a46fW+r/Pu6lxlwMFgWUn+eN+FdGTkojwPuCNGAIgOXb8AgicWX325dfssRYqs554+fYITIP+u/kkXyqPUlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNoxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsJA/9G1JvmkQeoauNeoxP4Tgh7BB/5glUOmVXqmzHnWoz1Egl44Co\r\n17m95Q7LthNWZ64ijwYaVTEcyDgYVHif5LvFCzH8iiB2EhZmE+oAvZv3yfPh\r\nIAayTmKNFaP0W3M8LL0c1087SUoN9XcGnSXVqKA37L5wLCrTdAb6fIWLvkho\r\njBaWDEWndbgndIqR0GwZV1IfXKOljkvqDd6c25YmF7pB1g08Fs4bYxHntyvg\r\n3tU7pCOPuA1nzLKFgLzrLdC20F5a1z0dsunRHGlJPp2SAlKOpAxcR2F63vOz\r\nvGUTLYbJj+2j3Tj8zmEvIQ5Zy4LEssbTtdVHT3HfW5c8lUND9Y952mjH9+ic\r\nG6iAOtOS8Y+EOJSKUOrG3Qv51sON6YSu4Siod6b9og9kpM0CmnBX2EgnNwQi\r\nwGPuWLwmOGSnDNwrC3MJTXjTk2UizW2Xu0NfzfJklebK73xjmh3LXaxfUgGR\r\nTzv64FqyowK4PyseqWCrTORM8mOqdrhsvXAy37/tlptCZ3Q07N50xFc3NOmI\r\nI+FmsJUBxI6Fcc8kem02TdqpIlDCw2ObBGeEnZYf9XSmVnlfdTOErlUmViYb\r\nhn4JJ+lnqC+/7N8e0v7RDW1lrpNbK/evSxUH7neMFWrM0DrghdiqySJwUFP5\r\nhU6cQxSjavXP0CSB0vCUaBVKyb/mEd/Rgmk=\r\n=lrSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/focus-ring":"15.0.0-canary.ba9c29637.0","@material/touch-target":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ba9c29637.0_1655233073259_0.978481719817722","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/checkbox","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd43734e50ef7c99d5b1fdcf371253772641cc84","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9bfd12f01.0.tgz","fileCount":42,"integrity":"sha512-E5AKWoQPGLmMa0PWKmQ6XPuWzgIxBZzhg/dOL2imTusSUmGfFapky4FU5y/J6+ZmazX2b/mSioC5qqmBOS8n4Q==","signatures":[{"sig":"MEUCIDlFENOmP3+MXJGN0u0rS7XOmaiyq6aYtZuUuqJujCZvAiEAv43Yecytm8CQt6Y4YQOEciUXQN0SqZeyCUjE6nBxbns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpibA/8CoXKteJkyUXgbNDyDDHOuH3fr7BsHmB7sjNACQ7v0i6Pbffd\r\noPUASEfzAHp461JxfcxthC5zb4Q7X14uJOpQviCoFSmGHq5upS1DarUmS/Dl\r\nbU6/FlgOPUV/1bOFE6/vn+TaAtcrKgE4gYdZQEDDjZTvN/ZxazcRFkG+Le+L\r\nw5wJJAnApHIX1Wiu8M4IzTswCnhHmPj3Du4tTLT2a0YZmdCeb5XFCGP2JbxJ\r\nk/uU90qlaW8cl2Cg1z9p5KCSh+HuX09lFtaA5EHthDkfURxcuCelAfvOjN13\r\nfkoq1/U/u1MHRe0ObJA1/hhnW/mqXN9eK8nDepgpnCeiwoHyhY+IWiMMQ6uL\r\nTKQ4uvpSPUP6Jbr99tIhQZ9W7b9lnVWYmY84pePT9f45TIAn/xuFa9xF75mP\r\nhWIhm7/0S5FCDidka3wuUMiZrXlLmTkbhOkCgOgUHenewHZaV8b3MCm/03co\r\nLJm2J1wooQF5V1tddX+p7V8WMu/B696HYCGOM7lm0NvZ1wXHCvLG598ZqNEW\r\nb4oCFtikFmoBmuzYvypyhtFnbm1s2UhVL1ZfjVLDD5audk+luOjee5iy0Ncr\r\nOMXHOXnh7KjyrTwMUis/pdPxEd3YYZffhE1yR1zwu4FTPQ6KJ/bin4FCLePW\r\nx/ZZfhzNdACO0FljTrzazNnUrGXVR1c0Ab8=\r\n=FwTK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/focus-ring":"15.0.0-canary.9bfd12f01.0","@material/touch-target":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9bfd12f01.0_1655925782484_0.3182335607356883","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/checkbox","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.764de225d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b172a72c986427e72f8afb6b6be82d8deb033887","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.764de225d.0.tgz","fileCount":42,"integrity":"sha512-k+xD4LicMJPh67Mg28Pv4oGaDkHOT1aYmh8EuJ7aZ8cpa4XxsJdfMemkLD9Nk234SYPCSc1WvcDi8BZ2b9wG2w==","signatures":[{"sig":"MEYCIQC6kLZZLkzLntn+sYjgnRw+i6OI05AQRyN4tF1eI+e6vQIhAKLZCQFWAhFVp7JPcKqHD/bhRQIOrUw5faHIku6KhpAz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH11ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokUQ/+PW2paq8ss7fmTPuPcwOoWKY9uYSzDyp0TUD8w8U2r9q9GMFx\r\nwpi7i/a43hVQQ4gbNJL9Gs63Pjrjsnj9QfNGYMR901eh7Qolwz2TzOsRm8do\r\ncFeXAhwXw7/+v4QjUDnKgMc6wMKx4o2Jy6SEtI7iTh1cqT0phAa5/WpD4B19\r\ngIOB3xmaF28JkX4TJnIapppRbFDUIcJSTdfZNxd5TzdScsIxHsNb1V0sDiPa\r\nHydI9yI2Oyz+21HlnRWmgww80pE2LyCdKwbMAyxPoA9I+QxEeh4JSpGfdzFF\r\n465w6cjQ1mdf/WCyaw9Srd3vd+NP1E4QvuDmWs/Vh4uMYZAHDYa9J8GJYAzu\r\n2O7DgOFhtKDMLmf2vm0ACEvIp1uetn2I8DPb16kCHcNiAIm6AJg49q6eDEG7\r\n/hqzYzwViF4HE+VOVkoDElPYEfT0G5sDn7LgVyWzUMbRCZtENA2Luq6yfCDB\r\nCzwkgcUYsz2mkd1Led7kfd/S7O3f3YFtnQKp7mXBFH29FOkpgBYbSltxL9R7\r\npOKpw47vYVlX9+zLzTypI9YUd7Gh2BVpCt22xK42wTlr725CWPyAFD4blUnv\r\n0M0VlJlPSZNdgKXS9vimLpllGZA64TNllLDFoyZgY8payWRbxwZr07zKREIx\r\n5UgI7nouSHGmh1ng3s008q0Jm0Ikzd8FPmU=\r\n=aNMv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/focus-ring":"15.0.0-canary.764de225d.0","@material/touch-target":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.764de225d.0_1656520053114_0.4808042634149594","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/checkbox","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.31e517cea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d475622cdb796ee48effcbf4826aeb01cf61a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.31e517cea.0.tgz","fileCount":42,"integrity":"sha512-0+SV6IuFE60dXkFqjpAIRBOzcVgXF9vqUQunJwcofm6EXrkkiN+lk9WOe1JQAyu1vA/lno6AeiLlKDCGehaamQ==","signatures":[{"sig":"MEQCIBWwodA6YzbgObQm+HbqqseUF7RqNdg7oemAKQfTKVo7AiBZe/cOITq60m5TOr1ijZQBpdNebvZOUW4UVT1ez0YTAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxwQ/9Hrw3Wv/hzTAnv8yDk0+tkt4dNCjvMsBd27baq0ER22fXVo6e\r\nOqot8acVgJXHR6MkK2ctt41fgCyiUq53M4+DZr16n4z/lrk56Vy+S8y9AFfH\r\nW5jxu7Z2jDrk5e+UiDT3JUm2uaY1gF0aG+bm/xysCrmVXa03IMq9qa48I5ts\r\ntImMWMA08LJqOe25dXktY3idYy+O2f4iqyfLFmVjFoRj334WSZ/SJIUVZbTW\r\nwaqPJNouFGhX9qRVTS63C0i18xNPdUuFG9zlpZZf0Oy55/BngnAIAUIZsxxM\r\n7177DmRcVP2iS+bNw+9/l1lCub5LjTnDBsQBFDa5FjT09msaXEzIdH3HOMWu\r\nelur6z9AvnnKasx4GJXjr+16yNTE9/IKchcTFl3jZqvNS/sUZkc26JV7ZVFJ\r\nLYGHw2tJDQLbRwbAtfrOHWt6LB5c0osfoinBSS01/HVSpTQmeXUmzthEn/xZ\r\njc2qGfe54OM6HGiRVIQc3szGFF32hmJjJO5OO39lDnb4panrQ+KQDyB0+zsR\r\nFYHvKJtMeTQ2e2k7Z+yLSZ2ZLenSfdxWyRShycJ7Vl64xgMqDoc/0vmoMuIH\r\n6Jo4J1RrERyw17rxzRyHF0jF6WHtekDQE5FSLRo0Gcl7XK+dZhFYB54N6QF+\r\nvjxB8hCSSSNJc0bTQa8Hx5RGNNQX1Z3P0G0=\r\n=GLfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/focus-ring":"15.0.0-canary.31e517cea.0","@material/touch-target":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.31e517cea.0_1656700133453_0.4337147149634717","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/checkbox","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2863b934af49ac49df57ba2b46a7ee260416be8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":42,"integrity":"sha512-QJA/lUnOFEGYAr4xWbqjcXHzQPTbOU8p62FuJC1/jze/py4UP9HViLZlRtZHISNqpS0J6fDWzkIlIdT/C6wC7g==","signatures":[{"sig":"MEQCIFW7bgMnkAsEYcui1DLYV4+9e/1wCeVKPQNrxdAeMjHGAiAj+C1rP3N+LPr8njs28KK43hP40qiQd6QGpi2xUKUAYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDvA/+Jfw3oxCnuwPnGfR2lc2Z8V7ZjhT6IP2gHBdQNz3sv7kH8iZ6\r\nO53gvco78ROj0O6zSK1JOPr1WHvDFjYxu5Kj+dguqIEw6M/Xh1zDaLAFB3cM\r\nFiNK46Rck7eJcSzYxdZM2dY1nm1fR1f2f2frhkig4tHmJyuP+1yicQVSw2sA\r\nxsFw6GYp0os999HVzBiBm6jTQVRK3kSKp4MADybocoKL+3zxGvEvVeEDRjEW\r\noCPbbdLj2fWrjdmVVmpUH0X78I3w71n6xhnUBuhEr1So/0rOxTO/peS3H3tj\r\nx9HB3yuJHL5T7jxWEshtyygcqQ3E5hoPzLf2EVeyG++uj3x5D2AXPtGXSsTL\r\nFp5rFXhTaqxiyFRqi0rITNtc3isbtYaO5gQswuwJQBkx/VWkw/rACjPbJ8pa\r\nqWuHPkF1CYWDcKafTmgU4gtDu//XI1um4q26BIEDtnUyAD5G0VNetUTOkrDA\r\nqUc0bGA5f8x8fUpBYKhCBUVOJk7VgB2p8kpn0uD2rH2vX4U1oSbJzUW1+FUK\r\n1noSzrepUJ8yXnTb5VJG3UdSpgHrQl8pxgMJqrBwKc68UNBEk9Ri3nlGXkO0\r\nvv2hf+zhRqfj36QjQ3EGEWE2wYHX7NG3Fc1YuY3ra/99RtdWSayPgWuFCyxb\r\nQaIYc/374J0dPCwJUcMoqERGaUWeUVELA5o=\r\n=foYB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/focus-ring":"15.0.0-canary.9ea4e8e9c.0","@material/touch-target":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9ea4e8e9c.0_1656716128649_0.7160265436354873","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/checkbox","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61457e256ae481f7ead7179fdd85cdcaafbdda3e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cd5bafabb.0.tgz","fileCount":42,"integrity":"sha512-9t9s1vTWCVZMOIesVUE+JW8RZ6iV/T0ct5cuhuZUR7w8UlulZXNdKCn3ZhK1w+Nw1EubN3VXzD/uQDT/pDCNqQ==","signatures":[{"sig":"MEYCIQDgO9elDN8X2nP4nylOq2D9eCeAUkNIgTIknpfGKGzqGwIhAJ4XDOMjsTqkWzBm91JkH9FyC/IWep2wpNVrWyCLhrvL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcxvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPZg/7BK2bsnD46dFN+olf8biJTPNKiaV6Hpa42XP9HmZQHIpNMyzQ\r\ndVYJeYh+P/eF80PSxQZ1nNc5jd2r6FjYmSi7iyA2blKxLvTqMgEne8NJGX8R\r\nlFdXbrWYRuwcFkbtwAm+PkyAxv5PCP6zkXKemEmcSQ55DfWP6ilC90geGQpl\r\nHcT00tYCUbY5E1JobkWMAKLIYZcqa8ez3hGZHOzE7s5xmJFvpyvMuzpwnxVb\r\nVPoCT6cGhE0TWRDoD829bbfJeVC4xxQzC4F1VCtCoOZHtreuGtUQ6J+zy+v7\r\nvcD1FQYjQhbVwoOaTaDzFv+1U6WYNC5pCzF+lhpY8ZGwOWfuSDEj/Ge3IqNU\r\nq1/NqEyHz91WDVO4NJmIbJ7U6nyFY4qFdv7WWsQuM8VMxAgkO1HX00b4yO6q\r\nhrvC6OKIrt+F6EKvlYbRn5btO/J3PMWjnj/E9K0MnGE99ovisUzaE0bbvaR7\r\nnM+nycg/RvmnX9Bb7WsukkbfGXbpihNDchZdGiESqZfEZldI1mZo+5iFEoyJ\r\n0HrR9eTXOaPIfuWAoMDKu8D8ZiKLtbPtOeKf9P7pyFruAefbi98ZALG1+MwT\r\nefPWrqKYdF7z4tjjlmTI6hubqVlJ/eqpQB1xKM2rpg+P66czrehqSpd8l6Gu\r\nlPEgrKMSkbv/ug+0bQuR7kVsxsidcXT2k/I=\r\n=D7Xp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/focus-ring":"15.0.0-canary.cd5bafabb.0","@material/touch-target":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cd5bafabb.0_1657130095368_0.21112438899655572","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/checkbox","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cbb7142122f8ddf1aa1b09a78cfeef174b8a755","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a02fe49d3.0.tgz","fileCount":42,"integrity":"sha512-iupLhSmBZr5ILXk9KDpqCO61fA0J0Ak8GMRPidTU4AfsPpiIdOiPGW6fbFYhsOQ3c38nzx1tDtQGDTgYx+8lzQ==","signatures":[{"sig":"MEYCIQCFiR3XKwl8xIAs8IuzqdreoE1VtmfnA7r1FvqBp2oYdgIhALFzj9hsL7HlYnMg9iWeKKd9ahE4eECc8MiU0jleVb+6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdm3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Iw/8CvYfOrvF3/vUEDfMRv4M4zZEsudPaEod+eT1CdDUYB3KNVhs\r\nZGuBtdkCFqjEo6hk0COtdPdqgzMK15cbU3+od6MsaOgcpvUDpIZtre3PJ07i\r\nRFr3VFwEptQGJvrPksSegt+F18Ca48A1yB0XmzgyAfCyksQND/v1DqEPgNGD\r\nL2KHj6Y6m3YQM6eN9rb6IwbqYEWM7E/E/NmJ9F7KIWBcCYEUktYOn/6FI6on\r\n2EZyv8HG8IyvfSMSEbzCJ0YYQp3+uZynFKlebMFnnYpaSDCye4WNWLTXdVPO\r\nqvCgCCkCQDJpVkkaKE213sFj5ZD/AX7rDZVOwQnaSPr09/8YhIVeqQQ7P0Vb\r\nhtnhcTQvn03ZzXYoCPe9KaQ9aTb+DXaIC/KuQhdOOMH4wVwdbcOqgpClON7M\r\n6TvvDLox1u8PvBLyFRSy6jGN4KndvzVp8GnD3WXTHY2Xblj/9gWEO4rZr6EX\r\n71yWD4br4r1c5jJmZWoDwANsifFToyMuesX1NIw+SWoB2A9FK36TlJkVHYjR\r\nk4dCgXYbRhjaE54i9g+q7xz8Wj4zne/qvQaLSSCLs1uAGkgHytVFuOYn0MwB\r\nmMuFw6XkqJlu170wZFiSaC0Pyjwfbm4Crz8Rww5PS9Cm++7q6U2uqWZImdOU\r\nI/ggbqok0vjkmEEKk+K0IQoWbFb2f3wCGOs=\r\n=8Qa9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/focus-ring":"15.0.0-canary.a02fe49d3.0","@material/touch-target":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a02fe49d3.0_1657133494857_0.9633865792705518","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/checkbox","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908e7a15048b6d45b32369799c63c508c7cc42c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.826a3d8be.0.tgz","fileCount":42,"integrity":"sha512-LX02wc+UjhdTgW3eRKRsiDQl5cWdzVZmhJaTRg4LbHG/JCSbfHnojinP2qtRMaJmjNzZkLazOH57bUQheFr/fQ==","signatures":[{"sig":"MEUCIQCLLXOmDH6RloZ8dOmbOAzNGxvt2SDmlIEy8fjZ/dAAdgIge9ThV+CegRTSfdtqwL0PUhhM4AD1Z82+Eb8ED8tEOzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFVA//ZztX/K/j+/LEJaR5PyMR2y+eTkg5dcPIXcjj1A30Zw+gPAL5\r\n/vtraer4HLuEUIRy6ZkW8L24E+waWqisEZLate950I1XjgXtqu9UlQh+QPbk\r\ntPBn7qcaXJod5ib38kUB1uzCtTeSzJSGmIgWbSRrxJy33oL5irhmCcs7SGJ3\r\nBv2SrVoj+bJBUUnbEKiAkKufv428avZLGeJ+f8loDMnWWhv2z8P8YxC7H7Ym\r\nphI6GNsfeawSjAEVrETEo/055bP2QkL+Kj4J/PFuDxk/83n3p4DRaIK5XR6I\r\nv1/5u9oFZuJa7xLmDixp3sSmHh7pjAOEyFAM8S/r3T5o6aNy80JB3tqcvoLU\r\nunZN/qoqHXqzSfTDVVgLAwVe+7UK8KmGi5oOykOBhjFdUC0weTmE8DtSl7Yr\r\n8JDdurcuIeh078a4NZbFwG8gWkVG6VQDnwalRaYOgXN4oLvcVg7Vtk3EBXiI\r\nncaKwickafXl+nmBgyeEz81VCApMj37nbUZIyiqhHrBsvNlRwF3ePtKHGHuQ\r\nE1TJ8rh2MDDLbrUk1QnEkOhDHeMIE79CokWJqm2LwqjtMABD0z2ZQSyZ+iXY\r\nXZNhel2zTxTMK+JXEC005Abi+qdJhJ/0ws1StHaHfRaoG/vJK6p0R5mdEt+e\r\nJiD2zwaejgcgX2brBlfI3OHDJTPSsphBnH4=\r\n=PWqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/focus-ring":"15.0.0-canary.826a3d8be.0","@material/touch-target":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.826a3d8be.0_1657135891259_0.4204252359181373","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/checkbox","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20228eb59d5a7512cf6524861e028966091b16e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ef276aa93.0.tgz","fileCount":42,"integrity":"sha512-h1nxbIjR5FqOVGoMnxXeAGOXmHoygJd1+LwzngiOu7AdqsvEnvVXC5cIsgYVcZji0YsAsmCxb+nqvGQdfLhOYw==","signatures":[{"sig":"MEYCIQCXfim4PDNeYaJj4/U3zbTPVYshtxAGbM3L5ffO6qcYBAIhALv//Xn+kFTFQnGOStoomUdFQtX6wu4iGHaNyrYsjalM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro4Q/8COzeWd3GeONt7Vm9vWdys0T2EugrAZ/IvXoWPY4cCLEVbiIm\r\nUxb9I4cpyQn2nR1pwu+g2FjQgN1XtbXmbddpvbbBXnjnAuzwVSj8CXZ+vHva\r\nWWi/yUrxbyXlcezg2+4U245gJ84Gkpgo1buapk+vlvdUDzF3TcPha82K+agE\r\ngoVGC1mdapO+wKuX7T5sr5vz1AnOlMFek89WSTMf8kEl7Fu6H21YnVJwRaXn\r\nz7wHO4OE5xC+i4o6iuhLtzsLGsPs/6oEoSOEYQCRHTewf5AZFWHBvgQbsvjI\r\nNkoyvsxsUfs7F5xjUgJvtIYnab0RUmfDqn2cWmBO1EGp5B6za+7BYH3FctGU\r\nlDrD4jFMBkYfw0lUb/z+6YcMOTViVeJvX65LxQDBDB0tMbVetin7hM9gK2EC\r\nxIM2OVcuQFmDJPqS4C4YUUVQll1QyRgBJ4AJnUnFIMT1DRH68o0JwTyNpUSV\r\n0xdR9ziz/q//jMi/A6zIpIBh9px+I8W+2QoTH4kiKtIwxec8BTpmYOECQ+bJ\r\nh8d7kKBDKpYKvLRWQkVjmzjHD3WNy7scX01ZUbiYvOd/2aES3dnw6nkZhdvW\r\neZbL25zMutKerKDs7Yt8aqcpmSZnKwstnoPnpXnOpAsZi9xn6D7rjO42SLU8\r\n4qPtm0N1XPkb999owGWEuj10aq2puRA/R20=\r\n=yUnX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/focus-ring":"15.0.0-canary.ef276aa93.0","@material/touch-target":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ef276aa93.0_1657213388954_0.27294812310572003","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/checkbox","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9391a4d7a5cee522b7d6c05917d6a5e7f2cdbd4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.59cf61d6b.0.tgz","fileCount":42,"integrity":"sha512-22GN9L0BwoZP3rRBWR7SXPbuFiCTHL2ZcGUsRUDJnT6N4VvIlODugqinBrq8kteutTfeyyscUF8vIWxukUnqrQ==","signatures":[{"sig":"MEYCIQCWaC9DNuDrfRIU0+FgLDmEDPT2OzE/oR1XfVIcJD8qlgIhAIx707AOswQOz4Ia243zRSrLTgfnlwAbC0TS7Q+mEnLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNcxAAhx4AqxamoYJ24QSjVoY8ysc+Hlzs0ShYO9hJoA+2yyf0nAaI\r\nPIafUmA039mRArPyJsxp3fOX1HXBVj5GTqXyWyr2qjZcoLA4ZZYtrynxwlA5\r\nmzsAwLsCJh9dS/Aul//2r8JCg8NR6GF+F3SGJNQeiS/9ao+cQzRelfDRPBCL\r\nGs5dA8jqCD+fTsKHZA8WUZ7e/fxJaJ2sTvw62Zrx5NzCxBtaESSDn3d+3Miz\r\nQnYwnMELAscqX3+29BNwHLrIxS8zTk6xHJGFfGKs0G9MvfpzLQre2MYVLyUq\r\nPoCP57VYgHSy2EclOUwsNuN+BIuFZo+nj2GdHUbEoQ9eEX94Rkf9afq0y+Hv\r\nuJrXAVxeBpmPlkIeXh80qBHGqkNN/p/O4Lb89Z3HzF3WJat3u1j3xVmC+CTW\r\n4gHtzima4nx4wng04HtbR8jXbNJKgnICeDU40E/6KDGxT7ovbXb8ePUJaJqs\r\nKSUBUOnj7WW+7EcBaiFlqgAK8y8wzYyXycPPzYr81MT98qwdzzokMqucZmj3\r\nOLz/IT0tLYzSbYl0GxgSL5HRtHLowEy4h/1pDZXKYfHfPp21Yzf7NLA9QxH7\r\nEiY1+CniyvOxHIe2d94Ysf6YPr7JNiUiVEqLam7E6CJXRmTelNevYnlIcFEh\r\nZh1vPeUGa9tqpq8I2rroEPeQdm2AHu4qJwk=\r\n=MxwT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/focus-ring":"15.0.0-canary.59cf61d6b.0","@material/touch-target":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.59cf61d6b.0_1657215115651_0.05037890412974977","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/checkbox","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8647092f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8c4ffb0d5b4697fa5c5f2dfe84cc329d575c183","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8647092f7.0.tgz","fileCount":42,"integrity":"sha512-FN0qV0QLur39cYPK2bkM/nc5u/nwIeS6jHnf9UxARyAUwaDY+c7tXZ3D5aJNcQgjybQYvnuvTUItYNtoIyKFSw==","signatures":[{"sig":"MEUCIEpBEG8wkzWGuW8CCHscbQ5FKSX+3RjEbaDK9Dwdm8YzAiEAqci4CuoVLqC2tvhXMZfwKl/XQzk8jq3XbIJAqTIJpBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0RsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO+Q/+MqGsc2XvdFvZw8BZryUXAJNfuRrdycrnPBU/VvPQjNl/uk0r\r\nNu6kCsAmEOj52MK5ZEdgIpA5n76bms2GTnXBG4Koo30wOn8ssNtbe8JsdJ3H\r\n4VwDSXMiAKhX3LQDMMI5bM72sBhl8rHkYA8On9dy3OZiZRYnfWMOrBa1cvMt\r\n37NxcKfgzAZhg7X0fHMeXNlIWSMZAmGinOwRH6NKXyDMsFqTN+WQlzRqUFAr\r\nxc0gKnsOl3Jw3Hc9o1IyOD5YHaa1LCbj/0Psj0xomUyTxYOoWjSJ+2JabMG1\r\nGhNZo247HsEQnrV7yEZ5yi6jKTw6/XKwdbBGOPh/RJ8dZXAJPmgHnbdqIfxq\r\nptlAURrjVJO3tmXJwGVr2xfTFjCEuJ6dOHVjeUOpBP/SRz3wyR5lEDwqWwJj\r\naSCyspqfajdTk52sm1lIBKNEMl8P8mf+n0mXWHNqNvhMy8vjb6f+LDatmg6T\r\ncPY+RPAmRKN3GdoVBhfyUKeu65BI6OelzDx2eX2yob9mISn4dBizdBSrrpvB\r\niW0q074fhOKj3KEJCwbagxqt2+jqvO+BrwMq8uFoZbPuXi2mnUssjwQA+LOC\r\nxfzd9/mcnYoqZ9VNOmV3xda7mGJVcLbXfGlnULLur3PFt6jzvfapzntJsLbW\r\nC1rp1ax1yLtbVBhlpYLK95v9iaOXc2cyZEY=\r\n=rPrR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/focus-ring":"15.0.0-canary.8647092f7.0","@material/touch-target":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8647092f7.0_1657226347825_0.9879324775127893","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/checkbox","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65e0ef9f39e1291a967796dba174d3aeb6e3ffdc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.02ecd4d85.0.tgz","fileCount":42,"integrity":"sha512-93sT56tIuGmxbAqYPLzZ62QyFqlHzpv472FL+60YrEvPaqBwncc8TeiFg5XI9kNkrXjwsdw6h2MGPsz2S4ctlw==","signatures":[{"sig":"MEUCIQDhpsnUbPT5oOQGoSYELA1WnIGKZim1x2yPMq93YoL1KwIgZ/mMrdQiLiqmITaee8wnQ3v0frfwGHF5HMg6ldiLTx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":761672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA1w/+JM9u9z+SgQRciZc8YkPVkV2IlI/rCap+8h7h8C5x5pOiKBiI\r\n/lWuuUlW/f/wfDUGGEqxqINgHa8kyKPFg+RzSTDP9wqvI1g2B6lWXamfeih0\r\npzSVejPK+g9oA+eyjJAzmGwxrYJvssp981JcZQSu8F5SpT1xmLw4ICTyCNyv\r\nROZakR2EiTINfIOXZcwL+Scwcxta+f/PCd7G7Xz/jmtYBgnpkRlf355aGGIK\r\n0qMamCoBbMrMeeqzIIqmeYEY7FA9iOpcVYshLu4CyoGbBVnJ5ClT/go9UXho\r\nkXwjVkzdng/JNxxDTICUL9DgXVmvFf1bTgO8UGrYYoYiGZhoxHZSFxuMusUO\r\nJ9VxSsExP1fEvR7kCMwwkE8Z8gPNzwfBKlEp/hwGCqCDyZ2m6yi85kHJ4XzD\r\nq/m73MAjlVDG78NYQeeoaINrsOYCU7BfF8BE2Pg4Sda0XkZK0NgmOCgTFKE0\r\nSjQn2LPFFyLaM+4ffvoK6Am+LBTxGYWzd8ozKhL/3DKgEM032lAZldLVph0l\r\nPSZjGet2HU5/qQdaFwPj7bhZoa48KbySe44gPyAyahbjKHi/n0YlIvLJp5Sh\r\nyQ+Ga1rlXsA1iavq2/O55Moi19DOrOtC+Pc0p/mivUhiRZIZqaXLJ1O5XO8I\r\nanE0qvpWPxUx5fqe3RAW+TVPnVi4b+FaK2o=\r\n=LC90\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/focus-ring":"15.0.0-canary.02ecd4d85.0","@material/touch-target":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.02ecd4d85.0_1657557588587_0.9865583918391652","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/checkbox","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7a16c7445abb5603ff7bf17837c5b998a540656","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.63d3a146e.0.tgz","fileCount":42,"integrity":"sha512-kS7tl0xH9b7Hs8cJ6Q5i69fPNP1Ue29Ifglq7KYXiy7o+/YVijjivMOK3UTsU3nst6jGX4v1CQCWGfF9zA+ZCg==","signatures":[{"sig":"MEUCID/x9bZJYttaDMm////ADT3OBVu/iHe7t7j4DWsGQDCiAiEAo3ax82uWDSTQckChpcVFYZwG+8fTrRw88HDYoauGe9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVz+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRvQ//Q1mBa/jG0wzaaER0+itIog94y7bww0oyOVy7dxFTm3uKxpGL\r\nefSMVhIb66Blo5ItqbjekU/X1vf0hu0BcxVBphm3NIY3Ex1wUn9lnTSZVO+r\r\nE7VH/eJ4r2OuBu9YqD5clyeQiFx3fTHy56WBWvB/zSPAKMi5fvySS1g/iKm3\r\nSJVPHpOCgq/GVI29gB0eIjUF3dX8YJzdnSfEZyWUrjL6iSXvdOirH129avP/\r\n7MDSP844fOoK3yCxTXQcGBZ7lHc+folrGkqij59g6so6tDQei4nvZVo4+Ytk\r\nGdWXX8ny3/MiECIkMyrqpHGNKeCRrnCcrCK1M5l8ToivAG1AtfeofAsBJa0Q\r\nDWvTNoCao0nBuHKh/rS0nGaLokDniYMUHpXTPjEMiPfDuE7cbsYBt8xAZfVk\r\nLVOdnvNR+O7SGUebPg0L745h4ZWhS7UN848wDOlcoo9mYvR8ZBNTh9SlmCT1\r\nOvUxpbFVZDECFcpd0x7j6my8EesB++cUs70wzCy9naFy/jgEg5OVU/ZFloDP\r\nqmqW2L6XF1ax+oP2gu5nIE8m+5s3FbRgILHbfUHXmeaGtLlVYP15B4HYf31i\r\n9SRjqCGhny/RLnMnlA+JQgwNKY0uTccgnDOopGILSopR2EwpRlA5A6EOpJqr\r\nq2t/lrKI7PIqdF8xhMgJBDEB2GRxZaAW8oA=\r\n=RT7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/focus-ring":"15.0.0-canary.63d3a146e.0","@material/touch-target":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.63d3a146e.0_1657625853723_0.5931301144531131","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/checkbox","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.88db01990.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded8fe6d89da2b0543e37498822a615e4b0440c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.88db01990.0.tgz","fileCount":42,"integrity":"sha512-TRXnG6q6C6s5PaIzM8zr66CYSwvF6qD/BrFCblfDxZGTil4p9sspGydmgvdeH+Wjvr4Z5ZQFixeDi4LFlOmmog==","signatures":[{"sig":"MEQCIGgX06NNJUABG2Q8ZrVN9+E8YFX5RodS7Oa+vP3E+EfOAiBy0ANomHcCSwyDOS8ggqzmi9BvKywXWddAeSwodHPRJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV2yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Ng//am7mcXfLqXXwnc+ZZfQCSzypui3D7rrXGC8ouvYelUdrEhmH\r\np3o8+4ewHgF8TmXeFcLbTKKwjGNDPWuBQVI0PeqC+5zJURq11zsqm8jeDXfJ\r\nyKVze1ccRqyk0JZVgy1vZgSuE5AsUFFFKogf/7B4VkQiZMUj5b1E98ff0wWH\r\nLXuQy3RikxervBUGvg96jIiYv42nLlSshMqHhzlO1L5se1CXlnOerlFwWFxE\r\nCAQ0E8lvq7dLYtqNXIxEsEy4yyHJTGT417/4EE7XENtVohd9uf190yncp3cS\r\nWRLzs8yB7XAu2MHeXqRRLHshuAYtJry0hlymXKXi1SUREP4nXztc3BNIAG3A\r\nJ/anXhPuB/3V2xzZmefDQaz4/DDJZniZjYad5PBZvoEfX1xLVvJ3FVsK7UPg\r\nTEyaP3k3pewzYGvRDoWtWDpjUPpi8YhL1ssLWdKyREqZAzTo6CJno5ZtpyP/\r\nZdF9+DwKxRB3EFNztz63SakS4st2NpRJpOCBNk6ZnqdEiHiBQOAuVC3J1wXE\r\ncQWZ2zFWiPWOD1qdMDrkovb6TjWeFQFuAyPd6njeSvXgz4k60BtN3VAm+RD/\r\nmilqf6BHVmj4KCon5e5DWI/WtXzf/Ns3LexchCN+9RokruOpYdkzy4JWOR4f\r\nfL1iQ//GI0HJHf7Bau1MXz4+l3jfJLHu6VU=\r\n=7Ieg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/focus-ring":"15.0.0-canary.88db01990.0","@material/touch-target":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.88db01990.0_1657626034237_0.5370172799749098","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/checkbox","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c089b847da08bf90f3f525b8395c5b8c6c6f5d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6432d8fd7.0.tgz","fileCount":42,"integrity":"sha512-NpSKQE3t8eeE2B0Qzxl/DUdf/2475oxRLHxEvmHl75BWB9/xqe0xDnxhck5DAzCiffZKQJPnNFyx/q+DyBa6GQ==","signatures":[{"sig":"MEQCIAKP+fNPY2gwQyXsFfAR7VOEkgPs6t5zTXZmZSMH06h+AiA0LxLIXfTwCPVVDtFWAEbjVE78zZapEfGlHzQPq3edvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD5BAAms3wF4EjgK2m8Uh4mNali5B3Gt3Q2vkpKZJ6RhhsBKfU+zQZ\r\nDaeOYYVOJzUYSN+2EMitLVNsA3iOQsrW/fmAsRygjSYl8QWJPLYSVRRTJbpo\r\nS04vnMoP8p8r4dzn8Wghfx1w0BOaVM2X5ai0Ov+Rfd9dmtIgpVwFfTWGCswU\r\na9GZC34dpHo4XlkLRZNGXeZE8zMvgJPLGV9XeSHhwdW8fzwOUMj5wBW/jt5h\r\nwU0fBXoJEJN3oX5StyS6PhkhkhCcHSY/nk3cmDNa3L+tKD+e3CPe5o3uD+Hz\r\nyJSCXO98pNri66VZi9voCycXNDrJUoaQKs0NVww6CS330Kfe50UXNqwBOzeI\r\nEUQMzaWepq+S8wqm3XfYZxjJ7yL2jF09mUJB0alkYMdLsCexBZimMp6xdD5e\r\nq9FzrqrO9DTGLuu4brYktA60RlmQO33pwRv6xaRBCYGeoSquWd7BQ53TJNXv\r\nQODxs4p4lFS7O+IXFtI9oWqmal4E5U8Hm1ceQ0FP+PQbX46Zzvjv5H06KDyd\r\n9egjwxLbne5NPc75J6Ls0ajmBo4bx+aNFgd68rTzhA4XsEH5ACFNNGjG74V7\r\nXeDadN6iNjIwsbml2kjBfGU8a/84PbsAJeIfGhgjz+WMzqwF2sOWf3028iz6\r\nJu/ccOfsmxmTe6zPqhn2J8fpliQRQL03ZrM=\r\n=v3ck\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/focus-ring":"15.0.0-canary.6432d8fd7.0","@material/touch-target":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6432d8fd7.0_1657783766382_0.4868581643300476","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/checkbox","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"931233c7479447dd10ee9e7346ec5b52b7107058","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.085f9b25c.0.tgz","fileCount":42,"integrity":"sha512-eLhKGOiioBslDuSMrUG3reKyBqlv1CYj3O5rrCEuBHw01q52ihNccVzGLBt+UEzRtc15dXx2LsEG6JLhd/dD3g==","signatures":[{"sig":"MEQCIH3A7seKlvHDZO1OwvSxkRXmX0x7C+70Ig5+iA8sGC/jAiAXGzgOrYXiSsp4DznmC5zGw1sTxc5KyKuIMac80LJehw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/pQ//Yd+35CSVGZshC4VsMTNuduwsmz9y2U9gQEU0Jut1HzrW1RFG\r\nGnmXVA8Iae93I37//uGPih2DmQFAuihhH6LyzqjSyAuSQ3XQF05qGIA1D+dB\r\nhb7KM0mz/l39yXW0GordhW4RFYP/escEXJa8RE86O8HUIEx0w62VWvoLh+dx\r\n802dfgdQgz3Y/iIrWI8YNOT+PVn3LiXganMkgu6MrPNd8YXLfsUWtopYaTGd\r\nj+SyWNNLtXNW6JCa37VUtX7HYNOkqaHpNjja/PnFnC2obV2mNM3A2Qq1T6ED\r\nVxPSdmwVZEGZD6GjMwhx5iglj7P3jPTD+4AkX0QMtj3SR3ku1Z1hYdWJpYbf\r\n8F80zBHT9qiH454hPjyDFoIVxbOpMufoSYQ5AiwATC6AYT36n0wGzdR4I+AF\r\nNuZ53j4HO00HYT+3sp5bA4AY8PIFlUWZuNzqrYWi6FxakNgBJSPd7cs+7yUZ\r\n9VajMkeCbVB2nGZPICoUa3ce4Br0D0NrLMObZ7++KEaecpZgvzaJu+2Rrb2O\r\nPcZ/yqdWaGOfgeD9l7R+e5jU0of4SHPKkAxjHrswNaUG2UulYwbU9tbinlaI\r\nbnfjzJnahoKm/RnnA0L+xKokRIiGFuQlChUNDaL1zcKlWD/4f7ujQ5V68NGN\r\nYiIiv50Xd0otwraKQuRciMaLIFVwXvmixq8=\r\n=OW1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/focus-ring":"15.0.0-canary.085f9b25c.0","@material/touch-target":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.085f9b25c.0_1657816527930_0.1355832409124169","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/checkbox","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c2479c6119effea1b14ebee010fd4da91d9b13","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.39f9424b3.0.tgz","fileCount":42,"integrity":"sha512-EEk6hPYCYNj75PDpVeV3bY9YVWbwFNkDqrAETBXokshPoLh6Mj7dMpPf22g37nGgJlDZ53q3cWuE6HRMefQ7FQ==","signatures":[{"sig":"MEQCIBov1P4YAgMkbDVx2JnhFTR5Bk3qF4ukl5TcwQEYb6dGAiBxKBQ1mpAGWpLIQFsrdJ68NtoNMXkfUhHCViAHsvuWyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz+BAAmAShKi5skPKfjaX0lBT+t2dQKRz8JO896YXpN8oqiBtZVJPt\r\nLpLuo6dWs4lSGly65MHQIz6co7zo/gZcyvrGtB4fONEoVspdaSU8M0DvVDQJ\r\nersF/yL8IgFLib4qJ2UugCZjA/9hW9VMmYkrpvwBKzCRozwT4vvVKTnhZjEB\r\ndsziwhcQJlDiDYGG278/fEH9hep/HVJF10325a/IeffHkA+qtATR0tgDp5R7\r\n6T6rurY5rzUUAQR86eDBO95f8h839m8sxlVT6tRcTWanfpuAGeXgLQViWy7x\r\nYeESnOvP5zKrQutOC5CjxUTJFHr/9FwLpS9pw95Us4qP+2Oz3Ub88bdO46yk\r\nbHUQnAs/W8lk7ZOoheOo8fQUpIguTXQww8V2bDdnfsOVnLv4faJtWvQW7Ffy\r\nKJQOwckbEa2+cKGj5PrwEqtWrE6fOBWy16zjHJJiGcV+mmsKK7x0mYJCwvbP\r\nq/3GT35bUl/iuNq9SMqR6JzPuENWjJ02PPA6mbLq7B5EjOupVzvs73gZP9Mf\r\nZG/Q8Xgxb1oDB0DPfPbMSOzXvaI9tRaMwHB4BLPxGNbZ6MrK+oWpOSc8j1hV\r\n0fDNqga8scq+Wm29eN1xko699Cuyc15MHFHkouL48reoYnWbU8YCCiBNll2X\r\nOMSEwV1KOAJpzoASJ7//Djo8oT8lv6w0aVo=\r\n=Z+jJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/focus-ring":"15.0.0-canary.39f9424b3.0","@material/touch-target":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.39f9424b3.0_1657818346451_0.34516356589164743","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/checkbox","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53127a239b2ae7276e05c047a5235cac768b8ccd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ae9fce587.0.tgz","fileCount":42,"integrity":"sha512-SRJ9UlAkr0Fp6h+IfroGqTp9xlf2HT+rI+yTKOGmHpBl3WC0GGI4xU17DPw1uW3sGUGlQVMVzMo2ApKHpqmsMA==","signatures":[{"sig":"MEQCIA6kGfn76Br5cJzPxoHYAkrly48kCCE0tKB+NpmIcWjDAiA3gBGOsOon0ihZGXubrYxsDQWD/CttiFlV28ceg5kS9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FumACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU4BAAj1n/fs3UQ9h03vnH7fZDg0Lr7OzEuZFtLdWottAeDgIpp0mL\r\nOQ4ggovvFWWWlCQ6srQefpbGqwjNW2jVLfVXWZpn1MEAWpR8CgO0L26/NIcc\r\nsdvtfk1MYmkvv0N699vK0MmXCuHL4oU3hVrlVGCxP2X8LT9W0+UvCG6k6yEr\r\n0QyEUp0MoYUuA02xnb0NhaCQQQRy4lc0EJoyxANCmy/tIrL1AbuEPl68AYZP\r\nGtLoP21wGJAMYhy6VfVlqEPGRlXZjZuhRMSzAZH/IlXsFqfba/qnTW+WBdDw\r\n9WJH3U2RVko7sNq60L8j8N6arjqWq56BnPk6rDSuOfuHI5h3Bpc3bi7hWvR8\r\nQuRG8mYRbGWTkscxMWoKNUxXEIQKMOg52OzBscld83W9gpEChgg6it0CY4VX\r\nP9fwEdWt5hjpbyHBJ2+BUe2NxlPNZW6buDKdwp+7ol+ckHF2qB3GO/FfutaI\r\nbYJhkaU3d+Gn086Dk4cFzdBZhE2G6MzZnmHxSee69PvwVsOIC2e6HjkiuhFy\r\nzpQerdiFjulDMCujpOwdewN6C20MUvt1vouFftTVbq6zKY9r/R998+UPJy6M\r\npExt76RjxGQHSyHLb0a+AwIquuvBwA2tAtsftKuFYufGv0q4vBkhQniZiJq2\r\nN9+lftY4BwwFd3MqP9geJfkF1CkGin/86fY=\r\n=Rv5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/focus-ring":"15.0.0-canary.ae9fce587.0","@material/touch-target":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ae9fce587.0_1657822117924_0.9024398275046457","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/checkbox","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7915bcfaa493bb90da11a3621e4db451e44a48c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1ebddc343.0.tgz","fileCount":42,"integrity":"sha512-su+5RiHZbJQUy4Wxir+aEgJMIVZZmfVVfYyQz2CHb1UlqLLHDzrO/SnsVaj4LztYqNgrzPj+6+e9o5ZevaEiMA==","signatures":[{"sig":"MEYCIQDM+dLPopIUx7klsdSeXJU/smgT9Lf8nBDlhDmFvDRkpAIhANi+79yu/m7ubVh3/uB2Mi5sdRltmgfAmKgBrSUA5cSm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz5Q//UpvffNcdt+26Vm45O1hfnwnyhcz5qrfBIG2PfWDGkEUMIjcq\r\nOnF3EcOFvmTA+UuYMAzk2M6S3WmsUQN1GSDWeO2eGhUbyJnvLWZcmPEmZTYY\r\nlaHWvyrKwfHtZBRMt9mkYLBkK4rQbbkhI2mu8M/ccmRCtyFfgDlll8AtCsTx\r\nVfojWSkY8AgYzYJm8DgMI+YzbnmDwqAfakGGpmF3Motoueb6ZCdK8AuaH86c\r\niJvez6l5Hxptxd7tAb2xBFCDSn0D4cfDU+24jOs7fM4xgjbRrup3pFIIyZRE\r\n1lv7OgIZlbcABdCpl61xcgG8o+r8LeLXqBZwySFD/CFjPkjveFhD72PBqoPB\r\noUdCJZojQ0VxUg5oEkXMuFwD1M3ZQVB0LOUJDHDZF6r3A3oDpHd49scM2o4L\r\njuM4vWdD5sOx6xfknrt02GgFa1lwsBkE3S1kvFHhYy8ly+y8sxONZ+s1Gywj\r\njv5DK2iXCVWu3Y2Yr3hodP8cG+k5WiZlMUL4Tn/nUJcREAVFh3GHMXJrszch\r\n2gP3k9xauosyak6Udhi0mSQqOo+gwCL4EVLwbD5YI0LCSZ0qSOPW+1jKnwvw\r\nqXuFpaLLyaE64OloUI5+VPpkeARTn+Z6gnBR6+08YlScLUWiIcESXh+qmQVV\r\n2MyvsSbv9LMX9FoYA0UqcBRuOxFMyXdico8=\r\n=gkkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/focus-ring":"15.0.0-canary.1ebddc343.0","@material/touch-target":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1ebddc343.0_1657874990219_0.1232524870128231","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/checkbox","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c5018840c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f63e23bd803caee807af47443573c4c67c606fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c5018840c.0.tgz","fileCount":42,"integrity":"sha512-sBQ78zn2tP61wd149kkbNGyaFXS4u9HcScXesf89lfW8AWq1ah+PpcvQCfjU9CgV9eKz2TCIGexbGqK6m8DrIA==","signatures":[{"sig":"MEUCIQDQYXNEhy1/Nu6AUstH9kX0oXqQDh9InYPmIwBnVp3A7gIgOnPWYCZpnfmacaRqhegwTqh7zWdupS2G+HXP0m0eieQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR4w/6A2vUiZuweX1ne8TRzRMJ8yFCWuhi3ST4bIYSnfg+MbUaqYRE\r\n5SRNr51jprpPqnfo2SW50zh2MwBjrO05CUmfgrE8iE+4KkUv31he4POt+4Si\r\nefgNA8cc2Sxi1yB1UBuBMggRSFDUDXvHkVITLCDAbjalzcCQ8dlJ6dStRXe6\r\ncDYoCcjGCbTlgRh1vkkE4VWfkM2s6nknJj0zkBY47E2/85t6AaeLhvOIp2Th\r\nxf9col2gE1oXFor+4PeQKUh7gZ6bkNeqDIB6kCIR77KgjaqfRj1ceWLIna0P\r\n5qGHmUhoBdBCqBJhLQSQ+N+G/0ZUXZ7A7DrxzPBYyv9aqLbg/5J0XIEnWjaq\r\nA2DFWSU3WJH6LjLaaJMjbKdWqdV4A2TqXRgER99MM1iVTc5TjuI796IzZ+SD\r\nz3o2vK3qXF/Mxyh4ykbXAzeFZlycnLseUmhaMbZdDsXSbzOXf5N0dOUWHg9B\r\nTlZSN7p66ovBUiYl/muaUVrizEljnUNwL7Hz9kn81rypUAcNVkfwcFCukS2n\r\nDYz6zQzre3gRQ1MEh8YJK/MRTwmcvXiPqntxM5Chx26/afQ12o3uGsMDp7g8\r\nhyyA2VSy9veIHnLyJNaOc8BHJ8OOqjbHIFwPgA9K+4nAvElzhY2cZuCgP76U\r\nXZKgmdZ3MyAWmTIQEb3EaBYiiYkx8oVOyCo=\r\n=HJCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/focus-ring":"15.0.0-canary.c5018840c.0","@material/touch-target":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c5018840c.0_1658137419354_0.6912543333455561","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/checkbox","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.551b40d18.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b93ddffeccf25e958cd4ad2e65473337cd5772c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.551b40d18.0.tgz","fileCount":42,"integrity":"sha512-tmxfHr7asK3WQYB7rbT4YGw8lOJ8GxyCKnEv7v10BBBxAQk55WqLACuBNtNQJMbDPrx/U5/rqmVgC4IFS0IemQ==","signatures":[{"sig":"MEQCICnvL5Da3K01OMaolmANa2wLnW3xvdPnRnPh2JqPBu7/AiALx4P+y3dK8f4EQ2rUzEM3VTvfFDO+FFqutuF1LxhaHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S9/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrAg//Z35/BoJfj3Eue2DRV2FGfqWIyYW0hAlQctjURUjshZ8fHak9\r\nS8hMSBTH7Rvw7kNeI4Fo2NUs8FLUWxH7qJkW/97YLoS7EJRZ0D6HYS4yS4G7\r\nhA35VE2ULkKbR3HmPgGBmSHW9ZEM+Hgj0oTE3tKyWP8YYQLs2dHTk0O6zlmC\r\n9eoJsdkHxF9WcTC4LZBIBhfNcdAG1rNPeQ/uZdFaoGuo6EETQaapXIQ6L0qK\r\n3LaOyyjSx/pyIgAHM2HDYFAK3KmHNd/8E+k2EbrXaNUXRlXtWYVHcqB3mor2\r\nzHRJW3yhwNUp7x53ET4jIRDFwctYOS5pdKUFqUGbepflHWXp/ZpAjijQld/8\r\nG7P/lvcvQPoDK6uosGM76KJYHigsfdTRbGasFFEnXRbECsk4TF6K498X3ZnW\r\nXavpChR0DlY6omMHT+X/gM6D15cyNFHzTekSsI1iFwi3at5d5RbuYKlmXi04\r\nYDr48BnBf4J7RCbMayjGMNsLuAgiV6CjDDqke35rj1q7Kuqm5k+KlSWmE1xk\r\nqwKH+IoiHljjTb3gwo/T61ofAWJz2CgApVPlk/8eKHHPvDfaUYH8/YzsUvc2\r\ngdZULQyAqiYG9Mga6ijVmqD75xgxpi2wnnZxcGF9E3Gbt2YdH9MX7uAz+rvl\r\nAv3cEoMTcjab1KiropCuXtI1rha+RFVmf70=\r\n=rw6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/focus-ring":"15.0.0-canary.551b40d18.0","@material/touch-target":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.551b40d18.0_1658138494750_0.04358239749993009","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/checkbox","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77bff76ec3d92df0031ef3edd815f89bbf4c03c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cf9f12371.0.tgz","fileCount":42,"integrity":"sha512-mqvznWBziCKcPMakmWjAq8kyea+qvPFhaD7QQzU1ht+0p1f5MHzA6PVtTWgjbitUpbnh8GmLBva6N4glPZ6Iag==","signatures":[{"sig":"MEUCIQDS63Dlk1Kv6uWCPhNqsvm6GRHYUX6HnELYEQhe/QvJ+QIgC/B2iD/MMIhLexsmRfhz+uqA5ijq89PtBtTA0EAmsVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TBtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP2g/+KeT4Z6plM6Q3way6WA6rEpbYlTiJnL51CPsKAxsZNXwRjq9T\r\nLpBIcyNGe7UcNXeeXaYx46ID+e36jp/yYQuKOH778sHhGonB3Oxj+1QNsNlx\r\n3lFcehLM5fIjrfKLCBy8gqPmJnmCuPyO9yebZHpFh4/DZ/rh/lnP5LK61h1t\r\nCw4sE9yrYESZJJwOnwUB9umB9IKr7h9Hfm0Sl/b2/X4z1uZKVy5fapwB8Nwg\r\n9lC8cWHHKVCzWaFvSzpS0x/XHqMNfzuHcXnYIzYWOdWglI/Jm8SjenR5rKSD\r\ndPpjunp+nvklMkhgZmbOBc8zZAuZ8qeCYxTy7ALFOzw+QuThi6gRlUwFiI9n\r\nouKJRsyFxrWU42XKG+gT/vuIgHJJkOGeTvkjaZbmnmqCZJHoHoyQOosEDMVS\r\ncQL7PEjM0DA2mqL5oePVKOaSz1gPaeXwVVOMC4Rl5jOzGpowN2PoBsOEmOCn\r\n28J++bIG8Fe50nhGi8ENDppnNQr0dg0NHmpHxfvQXK8tNE/QI/t3ma5JX5g2\r\npAELYlL3RMX6Y+EHcIAe0U5nQC3p8YDuMvvGE+3PMGSPV9osetl0NVBLkNJz\r\naMwDkfwNOe8bYpTu4IvV4Fw5t0tG3miuRAEanrj7js+Bchk/PEDtFKNrfBn9\r\ntK0yEnYS92QimoGDdflWurqins6RoRQTuec=\r\n=qSGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/focus-ring":"15.0.0-canary.cf9f12371.0","@material/touch-target":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cf9f12371.0_1658138733701_0.8505146113722657","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/checkbox","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e0d72d3e69e3622865412d7032cb7e0af9f4a46","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2797ff8b6.0.tgz","fileCount":42,"integrity":"sha512-ugHYokaJi1R6++TDNTBe7rxIQvtbvSgkPHSb9S+7uSJanm0gOQVndv63+wmD48jgJ+qOnzvvYOa7LYvArgZ3xw==","signatures":[{"sig":"MEUCIEvxedEY8ozjFTx7sKr0/Glws+G7Wa+jNjuh5yBGRKp4AiEAuESheLrr9KzjsDoTgxo5RrH1X0fI5FR9ucMlea7Yvfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPIg/9Ej+VNO7ljVTkJ3zQP/Q8QYOyJnuPhFtLpHJD4D5lzgwY9JUs\r\n9BXkINFMJ00lMbUbepPLSQVrP20vjiNf4QZJQCCCg/EmJvaybcjIyAnBjk8n\r\n4DJY2eqke129670C9XMYf75SQTbndwuzMt2+mNsDDRIcVPovBSE6AAwkVdQa\r\nwoxPvq1c9z2hF8L4pQ6tGAUYwlHpFcvbIZvVkIpV2K4UYjBzaEJa5IDpA7wm\r\no3ywGejHBIS8BQqOVM3FeF/NrAXFYSYweHUBgfF61/PMc23ciI3uq6src0X9\r\n4TxheJwKU4QT3JPB7FYykC1IEk3XDyl1oI/IfeJYh7L9yWh54fZ73Cxmo0iW\r\na8F8cO00LYPJmBggbyyek70trHbM4P7wDatviAgSA+AK7+0ChISt+4UYlf4z\r\nS8L6ZRQaFdYDrG8uwxG5oh/KHI35+U8A/xBvrNNvG56JMHjYtOnINsCgBCWd\r\nV/5FceH+IpCObCz1De+xjHK2BoTMZ1OvzxMeRg0WSP2MsT/jOnWugBnmEcR5\r\n31aKlIaNGFjpYhKL3zNZhSYP+L/vzztcG1ACCGTyOTPf9c0wF83IomWAVV5q\r\nWbSrIFAv+kMv3BABjjBhjd3mv0Tec26ZavZ9xf0tzEvYiCgLHW88/kVHD1qM\r\nahEDe1Ke74zMuF0TnCKoActDjWfe55xUBcI=\r\n=rfnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/focus-ring":"15.0.0-canary.2797ff8b6.0","@material/touch-target":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2797ff8b6.0_1658190280114_0.8305552958454092","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/checkbox","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.110fafa17.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3915aaaaa6e3f350f3e34808c7df8a106ca4883e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.110fafa17.0.tgz","fileCount":42,"integrity":"sha512-SZJLpzX9xgrxDy17lfjY+io+9mbZ0RxIaRlNxAvfGr0JGMx+Em6MGw+FiiEJUcJRM/HOrqiftaes+lG8feuAoA==","signatures":[{"sig":"MEYCIQCgpGwvHw1H+5p/XV/T05RReCYYVnoDOPFCXhq2YpoZIQIhAIn8Ix4b14WVHzuQ1XuQUBnwYKNEKRUsKYwFD/s0Y7hZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjeA//eNGOpW7aUA/5tJZQUSfGk5faoRZyCfq60+8HB2wv3+82X6mr\r\nUfnawVlSNd0XsyGXtZSoVCjoxenGRjeZSidLFjQMgIR8uPC5ZOp0gulFIFV2\r\nreyiSdtUos1i3N/lW8bh1c2nY9ZZW7zYcoOWMB2X/kP5dFJDU8L8DW7OqFrY\r\nKWDBoHi8TavcXQfXNBsTUbpgNf/UvGYGM30No+wJ+edAFRJxvk/O+NudvdEm\r\nfLbe31ikdFTTuV5Ravv/N3dwCOvwinnImmOCu/oRwF0E9NI2jtTysvazUcBU\r\nMu2j/7NIyIbKHMt73LKkfjV+Kx/gkzd9Yl+oejmAK1mi4LOrqTRy/2hBBj71\r\ncmVEhiqI/pF+zVKRQiONXeiL6AdsPbhAM4jVPxBQlyH9NDXE8E1OnhYeQrUH\r\nOL+kKTtnRzuzBrwbhHmLGZfSjl3h++BUvT6q6A1yJ7xJXe+glc1pX3DtRDJy\r\nCYW27HjbOxTU8D5jS0e0dp1oSC8NFbDqnkv+LdtNr37mHruYuAZ49hGcQZ0l\r\nYP0uTFmw5Fiym+S5hGtnt3u66bnJnLhQw2HEPgkEQyPrhyP81C/ByvmHww0P\r\nYsFQkiajGUxaAYbTI5nrqwODDALHR8jJi3LQIaiCrcKaRAaLnvfV3eOqRKCk\r\nKWLnwlBO5uCM1T/nwdrQas5NibGnCeB54Ik=\r\n=Jo2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/focus-ring":"15.0.0-canary.110fafa17.0","@material/touch-target":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.110fafa17.0_1658303232959_0.9578265674531383","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/checkbox","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5880aa31368f9cac0d31c25f2014bb5c04b22183","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.386ef1d2f.0.tgz","fileCount":42,"integrity":"sha512-//b3kJIlijpJ3T55iI6VPXBCAZrlklGGHzux9yDsfqOEAyYMnN/1VVCCQn3A16Fs5jCJqWqmlfC5wUmSL67GQw==","signatures":[{"sig":"MEQCICLyZGQh9q+JPrfBE9I0X/qfM3pR3B516IHdY9d1GpnQAiBnIotF+vePgbgEyx3MNwpI31HEhxC/mbEixWaQEAt5Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomoA/+O0nrbNXW00/ws7kS7/+AyXzwxlbWF7wsaxPHb0fLJYCPFbCd\r\n7f8d00nZifAKkwQWvhXKkeCLNUMbXuFqWOm6R8gmjCAGcfMv7JlR49jM01IL\r\ns7Zdg3mmkreR4ean73GYz6SuBdylx+Yy+osNP2zfxTadfZfCZ87BhDGX4Mbo\r\nx5rE4DLbEPCMHDsfGm0aLLdWr+6r9HJnybLB+nhTv5zMbdXBRyhYc28oOeag\r\nmaZu84f6+P07rWam+ViRRCEr7Sgah7QLVG6titQVkmCP++t2FoAdBWNa+Rkl\r\nLYJe9PhJLR8ztfKx9Uf7blh6DERt4qy1ZwsnK2+xMfak/AFFb3jVUNSerGMs\r\ntWmxKopweR2jbqp4pE3o5ESDBGE2wkJ32JOwdKiY+N7gv7hM/VhhPzq0yFLG\r\nrHO7l0aE/EIfS6ziwu2cu8hVl9xV+9vmdWfg9ghj5NU/j/0XA3wGNJG3gpTe\r\nGHZ5ZnLfhvzIVhdmIpa/I8nCJLOaWEzuY73vawGmT3arbK/dXMPDntnEIlOw\r\nr7+ipWo0T7R9zboru4QFHqh4Y5OGNkshw3x+4Y3D033bXtXvxP+7NlqgTBtj\r\n8drJopYjoZ6KLaLfI4kaRHfSeRZf9LrhdI9LwEU0ol/WF8+pMdaRyUwlefNI\r\nkAwTmnckvAF9DSEIbi43l+MGww1IghffoD8=\r\n=jw9Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/focus-ring":"15.0.0-canary.386ef1d2f.0","@material/touch-target":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.386ef1d2f.0_1658341219420_0.3821005250713485","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/checkbox","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c3924efef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4bd5327f94f87fb7a420583665882cb58c8bb8b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c3924efef.0.tgz","fileCount":42,"integrity":"sha512-3jMqgexs+UKl5LqtWWdgFUEcsxK+/+m0ahsm/lEBIF1gKbNf0YScRE1BBJUkYjJveGF3XnRzr3n1X5kaTIg2aw==","signatures":[{"sig":"MEYCIQDc1Yijx4V2uV1OVdpwDc054A4w5gJgcuNW/ymxWr0F2wIhAP3pJLltBd5ReZVDxwJRQul4h0owRQRn6cRaXodbZge2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EmzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw5w//QYc2nqFghudJKTPgc+QZJmd7dE0dnbtu+q48WfRjTwFxpd3w\r\nWG0RuXR5mZ1+qUSm+e8ci4LqsJb31mDCJydNJ0/ym5PT4pw/W7Zxup0KT18C\r\nWUKM/kQVEt6DryY1+YeZ2QWt+NIPSIuAqdxgQZygBkSdF7FGJxuB77BDnyGx\r\neN5XsTs4q66TVxyjnwErQvVWho6BxVatGUzDBrws0iQE1CR08hWCMV9W4Whs\r\n8D79u6OmresQ8MBK+GdPbGKQHQbkZN9Xjd1pCbtpnBF+MZtQmDd9A36MCJVL\r\nH3fcFZe4TCXJRB6U7t9KAOzKyKpHCrTLZo+D+yH2Wm4EJi0Cpxj5fvxLSWba\r\ndEBdB/vtjf6Ccsy0zwt659RsBvHKyCk/DbVARoS9Ohnrs9vvf+NtEJYMmQ28\r\nFxYUS5w6zOIbT86AhtJE+3F2o/owD5jCD496PAUi1SnuZwY+TB969HTsI8iC\r\nlD8Wlg3TSh461XMMzdAGsBLdAFaV1UEauwWsXT0ofaghFwRaKiBKn98qJ3AD\r\nR/unGfLJPfyeZ8sxJnfWCUnaWqYnBzK7AbO7O5IsE8ATO823QxgkdQ/kDKGV\r\nGdI2PhrdbuxOO4yfLvvCyRWRu/JM+3SH8zSQKZudmKWHZ7zo+djBC9pkwhni\r\nMVDvKr9PXsPK6gpKpBHfXgVEuWPjHFvvy28=\r\n=K0X5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/focus-ring":"15.0.0-canary.c3924efef.0","@material/touch-target":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c3924efef.0_1658341811076_0.1333886856302351","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/checkbox","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bfd3c3451a7693440cfbbf60de55c5d6e3423ab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cf5c5907c.0.tgz","fileCount":42,"integrity":"sha512-PjaX1PRXg86J+C0OyWVk8gIyzF7xmYSaagP+MMfSLz8b60fnHcmtCziS+W6XXD7tevmJLm/+YyYntBBDobu3sA==","signatures":[{"sig":"MEUCIQDutwfrij4GOvOPzSzqrDDNesGuKxYLY0F6hIS3S5MbxAIgMYSJcfSQ7Se5QjV3CS5R95xxb/1Z8IRdr/XDikZiF34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo04BAAnkpA6T85bFO+PvKA8787eaAIaukwtkv0/TucOad3q2RfuJnI\r\nnUqJ4SQoZWgWWHzyd89tDhBv7YqHHUp9w7X4nVhx5/SxUSZhlVKuxsz7MhSW\r\ncjaunIAlp5c+dPNBkLMxuUR3yASJ47WNu9tuQ2VP4X2PJaE8K2BEQgnAy/x8\r\nxRRaeHnGd2MWAulDj7m8J9Uy6nUKhpZvpaKMbj+Lkh7uAfqQiOfJBEbaQcDL\r\nU9/MJFXUKnueLDDrUjGJrWAPzJI8WjdoyRumV/dE9HXYBBYeDspcj+NcLBXh\r\neLgNn9jXIMWvOBsSsc2RWPDb5MXIVTVySzv7zuEIR50VEWxNP+YPanr+Qjh/\r\nGktvG4l+0NM3ZC2o11MN9kvGkFIN5WcfLsOpNmsj/IWPpBtsrl+vbX5r9mVA\r\nUoA+AKqKxsJW8dphq35/6DU3ILy7rY1T3K3AATR2+PEv3fjR+Q4exJn33NbF\r\nKqXt7T+96y2SjWBk4Jd/hmbQ5qejCGqdQeYq66K7dJ07JDs186dxwHDQtF9c\r\niLK/wZmKI2FRCX2ZPjNAUP9O3xlxHq9qc7v+vR5TV+hEMF1nRNQq59KRkiMb\r\ngQnkqB+EeXwdsMPYXh1OzwTgBRr2wt9TMS1R+aCs+IbAsYoYJxqnmHIttwHm\r\nHRSUla7fsr8ioXo1FPg05c4idqF5QbgKn9A=\r\n=hThM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/focus-ring":"15.0.0-canary.cf5c5907c.0","@material/touch-target":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cf5c5907c.0_1658352138437_0.09374865569373947","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/checkbox","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0617e2319.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1eab445ea7dfdd470b9baa48d90cb610a22a0f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0617e2319.0.tgz","fileCount":42,"integrity":"sha512-w+TiFRpi1om6IfAVQaGc3MksvFn6qnIz3D6EAzZo6TizrVkFNUusOihZRhW0URjdmUNX93gIE1uG7phOH568lg==","signatures":[{"sig":"MEUCIFbdMuCxBTIw/cUJrBQVL7WJJ4E+KYCEKYKBjeAHnvpaAiEAutbVkAdf+7vgtSPHcUNCvQqghCYjxE2tPu3m/p3UUos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkfg/+OTftGjYrPs03rao3CIjusBm3e5oBMEXV2dY5J3Z2r4SCIN2C\r\nPDPQKyceLh98vNKR3z+0eKIIKnWgMsF4zgeO0E+oeNapeQV4PM9G7CyVGmNb\r\nFSSIcVppgu78SN898134n12WIjExclIykwF8+SzPB8NMYLZ2MSvZ+Ac8e9jS\r\ndGkhmx8gC0WzYnWWAquG0g2vF/Q+/b4dZ68mCEZGcqg+kqZ68q3DBV1zZqJw\r\np970oNRT5ccyAyjborLpr9TNe3yuNVyoV44NYbcAF+TORl8n96zgYS/YFW4B\r\nZuX8ONZPbM364R97LLD0paMpQWqVUEVCaR6VkS1jmyHMjx/9fDyGNCJOL6GC\r\nvdFwgzwMQ7Lt7TtieGyuj2R3D41NBdyqAoaL4jIOrCftfkOx8vcbqsOi/q5P\r\nLU401IK8OKe68mFNkzgQtfbwkqn4Shc8eh21lF3lxcHZMZQ3WjUQhrzxutwk\r\nHoYj23ualDu33nFVKoUKXwrHCsex9LnOcGFvIqJuyKCu9hseU3MYoIHnP0db\r\ne4WatwD4YcJUPaH1SjCEz4R0Vj5vuV+bHRFteAEiboYFvOsv0GXB576whxFa\r\ndM4Kj5GQ+CIALaCiNLlpj9aGlHJMkXrO38FbFx2fhzjBk+rQVe9WgTJfS53g\r\nBqZ6d7BgQtirP7bRyMr0IXCtamippE+W0Lg=\r\n=nnvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/focus-ring":"15.0.0-canary.0617e2319.0","@material/touch-target":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0617e2319.0_1658353236247_0.7722814558203599","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/checkbox","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a743b7967.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb8c7f6d14c3937a1dd3a533ea787daf1e11511","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a743b7967.0.tgz","fileCount":42,"integrity":"sha512-mdaRXuhGA53dkxmZ91M82kBa8Wh2PJlOlEn4HEopzH9cZK5QtVcvY6WpqBaZPkZYOjS64CKzjp26upqe2pq8TA==","signatures":[{"sig":"MEUCIEh2TtUT0pNTl2ejkbRqsUxkuKGk4cv1kL4yceJ/hO+QAiEAu5HzbCq76ekOR36njTApOmbT3MzBg2qWaVF8rbCP92Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHGxAAhMZs39cpZDktE25ZreSQAd24gn8LlIhu3MIBSIi2CKixxb8+\r\n39HF0eQPP30S1hO/5fKMCrO9a1Ua2U6mYRWtYmcJIyiSpNnoKdS8KhWYqEAf\r\ngutfZW9tE6tFkBvDoa7P9pyPL0apRR7cGCUIne+6q6TTjI3d+P1qFfa4FLxM\r\nraz1lquSFEII0OsTxZijICbIrUyR6QiUENGFVy781W87SCZSx8NIQMVfpPZ+\r\nAwzyYxGbUiR7gffV98XPuhzXZ9ZA8bxGLbVcYRpNmCRVFrfNHSXEjDCLCoFE\r\nk6nusx21QPquoq8AWUSx7Px45H+eDdrIbUii5n5hFN6EQqLkt/s3jn7oCWGS\r\ntCPAhuvn+VgmBnzYZSM/1BrkfTT6qmK/8F15P9JJSiao51hOBqJ6PIfqxsNW\r\nbZHBWTrfG4YKT89vQrZjZAC+WO1jCFPWox7dJ1mkrUOb820fhxzg0Ru2s2x+\r\nDvq+F0JQOIU+xDMZkB1JYN+v3XtINdGeLPeYeet6rxjHPpvC4SZdVznRlvMg\r\nzTVBTJsseyVDM5KutInJbIU+Il1sfu9mS7sSYHjEKm+DLxynJeeCCbn29wqn\r\nBEzIvwkKagqCBLsTHY1yX6p+jlmg6sYpzsuIKrRc/9xBcY19e7YtWifG9YuK\r\nbY5AfdJvSdkJR8ZRnPq+UzdSH7GPk72WgOY=\r\n=iIAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/focus-ring":"15.0.0-canary.a743b7967.0","@material/touch-target":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a743b7967.0_1658354256673_0.8220116296017814","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/checkbox","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed966b9b0de5d6daf190a4e4e2b99757dcf68b64","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.69fd619d0.0.tgz","fileCount":42,"integrity":"sha512-X1U0RO/9OPd+Chhnd+bkc0Nm7smgDrzp9WnQNnsdYq7xbv2xPWliHwP1nIPmhZjwftt3GsxanRKqZPhqZrdrSQ==","signatures":[{"sig":"MEQCIEhE+PYjDPVg0EP1Xn7b2/rAO/OReiYEzpaK8yJrI2h5AiA0wLbaTp57Ld0bfxoclv4N/KEIUEc3f2/hUCVG6ZRCVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTeg//biEG441RydlBANX8DvRr8NXTOO97WtI+plXLTaJhG3WnDNx9\r\nh3DJzkM8iGMw3d2s/uKO9whFUWqEzpRcTLvoJoF61Fun6hUEqJLqxgae5mfR\r\nkZtcg6e9Di3G9UbhKDpPslxQE4T9ePjMRDLi8ugF77HscfZ/uVF6j9Ua+0dK\r\nVuVHqDzOPkEGyxur4/o6zoP9WCWRFg0fNbhYZ+zi58kFFZim0ngJcG+OPXhW\r\nD3pWflVTFh6l5iK0HQng1NL3P4+oGlTJRJiMyasREPny2OcRrlhlb1w1rJj2\r\n023+/QHv3Gf+yrPby97yCITdLtC1z9fgGRfP0I9Xni7hI8OnTs1K4ZOaz3dc\r\nfEnxiQUanA2zEntSdOr0U99ixW4R5jNkRGKTvg4QceDGI7xVt0uUV6QRhMDA\r\nFWfInzYqcaRasbkRVfXZgYR5w3jXvXpl9/0aYiuclUE2jlqP25UPtMAZ+DcM\r\n+HE0Se9D2EJRnOdKOdSsWdi7U7PLCKzYtb9QrOpjpkMaSqSOqj7vAxx9N8zv\r\nDEaNd0TJqAUTjA34y88JHO0hV0VX2VHidTFvnCdfUeTbbt+sDnyzesE0mOWw\r\nnhYZnQ2c/jkfY7CPZQwNn/Oulu7vIL10OqVXMgTPVNV16i4PgbPc94958Eck\r\nwWW4g57rNg4ut3Xps/Qe1Jkx2ntU+F6ttv0=\r\n=4q8M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/focus-ring":"15.0.0-canary.69fd619d0.0","@material/touch-target":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.69fd619d0.0_1658354982831_0.44137040577911013","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/checkbox","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee965dde8949ff0fefbffe9a1696325062e582e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":42,"integrity":"sha512-jGQS8Bc5BW5Ydw79/7XjzA63Y9wq5Zew1kDeP5U6xhckXMV8j0sJfH8wsw8DmUrgNCgMRA4C8+ejqwqq9Hnf7Q==","signatures":[{"sig":"MEQCIFYfVezl/yvWBIvlQRBQx2ZsqukKQB3U8kxiAtF1/UVXAiB0fUulvHBLkao32zu4QMlduXUDrGfH7o7Q4NmShyZPRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AUwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGWw//WnZlLUvqv465G0GiFHO4tYrjw/g7+YrNv0ZCtur2XW5Xd2F5\r\nlBcnilZycX+hrdVwVQHhNgn9/0N7+VgRdG53EwUW9FJA/+DKInV0+MrNGPMN\r\n64uyopVPx5kX0U9trhqkch8m25g6OuJRnAcB4723ibU6Gj/uGYufHkXd3mw8\r\ncGYJIFqsClz+Im+ol9xJkK7Rse01B4YJkQxzPP/i1J4HLNdVnFcTp5CfK4bJ\r\nP7OOqZm6JOj/aY/brWasUcbX05/NwBh5g/tfP25ulPs6xo7vgAiYoevcKYph\r\ngSCAGtqMvPim1NSVsdAIQsquMQD3cLmxZLJ2KFEqmRL8TDc584r5s4qlboGH\r\n2w7r0pEfGqZnTuLZF4DgIojOQpUNN939e31aUQwiS7ToumA6ldqVP2ZNV/YQ\r\nbjawvXHwJfxQSC60IbevgWqEbNwMK17xqfS7on3ttywOcdry3W0/O9B0R0UY\r\nPLwEQHzNqXKw7rAD7/SNkWcC8eU6LMl+BcpTpa48hXdgbG/zdhKjFuvs3/t2\r\nNe/CUg6aF4NpfE1Go0LGRjo3EmryjXDeTsGFWk4/cPg/7jO4X76gWPrgry32\r\nfiXFmFKm2Ba3GRVfC9hUV9QHPuF1USg3wIAn6VxF0Vr7y3e4o+lKiq28aAzp\r\ntyhGBKIeU0vWasdl/nEpgj3M4oM3Zm1OW60=\r\n=BXBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/focus-ring":"15.0.0-canary.2a6ddc1cf.0","@material/touch-target":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2a6ddc1cf.0_1659110704642_0.5882342294243301","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/checkbox","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f167a5b15fdf0ad3c5569c4ee7f392237c15ee6e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.86efd56f6.0.tgz","fileCount":42,"integrity":"sha512-+mq6HMvyXg6Xo60Pl8gF37xwRKWLkmiy58IXetUc4wSHcrJcYAumxbWfgwvk5Cljiuc0UwZ1PAima4zB4XJDUA==","signatures":[{"sig":"MEUCIQDBwV9nzULODKNa66gA/V9KlUc+mYhBe+kScnRMx6yXCQIgaE8rGbu/EnDYWrRzIYjjXraCZQfzl6ignuVw/9pnC50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TitACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoROw//SgnQoZahmyyIJyT1y3geYBBL2rtxkuDEoLPA/Lde1XJxDt/2\r\netXeguhOW0nLUM0XIvYMwbopWDqMQBipjtpCPRIx8Ye7jvnaC94WVcMkoWsb\r\n+JfcjDYTqm3fF+7i5GK8xJUzLapvxmjgI7yVUGFoT88H0x68pbW4mP6QRURW\r\nVEuWD64haOCitLVhI1nq39NHNOTyaDO9rsloZ9HLfP2rrSImxkhqduUAybNJ\r\nbUkbyoEoYTxevcG/RkIFhKmOfS/QG7VG9zuKnfc0K3jnnyV7o3VPGeFU87fX\r\nZ/Nj7haeMCaXFD67Q+7v+SSv+ZCSxcTWpxhcmcIR41fz7iyxpkVPlxlM1ZSv\r\nSUrs1gCnfq5igyJia3UcYB75rVqEOcmZh5WEyj9nV2OiuSIc5gKfEGNzmiVu\r\n1h0I0BZ72MYTYi7yNorFCFT/768d0o4zDH1t+fYkymQQptF6+woqyFu8z7CT\r\nG1aRWqGMCjLpaa0t9WEnR3Pob/EHtmNbCwPk6FeILen51p4vyaYc5uJ+Murb\r\nbg10NSZ7oPutLK3poTO1DHr6I2lvYieDmif0sDRf26uvDAlBOVesApj8V8JN\r\nJ7Jp17bY0ufq5yZb6GEfxtGeY8r5PqByUAqU8L+bDwL3hF46IdhRT/tCn9tx\r\ns3wGIGKv4d1k1O4P+n5+vViwaF0YQt17HgU=\r\n=LPTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/focus-ring":"15.0.0-canary.86efd56f6.0","@material/touch-target":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.86efd56f6.0_1659451564950_0.5362570364479502","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/checkbox","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87e7f50a36c79f7bb14bf746e0ebd4faf09d145c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ccfc24d19.0.tgz","fileCount":42,"integrity":"sha512-o8JbYwSb4cZ+DqH3i0SydJoSCbZhsTOdkcEiOSzVhAGindjiLXRv75db4AKt0L5D+4Owu2BE94Ots2q1M5/XAQ==","signatures":[{"sig":"MEUCIQCHGvgpImUEMNlpnogXJwj6DVSupPvpWiAtNoyluX5hHgIgGR/M3T8OkhtwYUDqObxQrl4bKqytRxkKQnVm/mLQKug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rroACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJtQ/8CpwVvuVSjY/k3C9oWWpLv0FrM+cR0mGhNTqjtte17HN3ehu1\r\nzw5lgX6y2jrNzTFtmsnzBLX7u6q1sRvOW4F/cBgbLW8uirliOj7/l75F3+Zj\r\nTlBFu3fdD9mQu8Wsd7ihwhoOZu2sEYT8Zu84bUGDHrSjxYf3TCrgQDJIByH8\r\nC+VZkhw7JGBEp8sg2aNzxCLfq1xnjRQ4F7E3ocLDzlL77z6XxD3dBNV+pYbw\r\nsONwufpMxiQqJEN0cV+E+a5w8ZHOX43v6HsE1v+KCCAlJmyBw1nZTrhzVjz3\r\nkbvEt7wEQBvpyLt0ESPpjoHNp4zCE4NnE12iu++EobNSJ6aUDxt0mZkTyc8g\r\n0RzWb4805sXB/Xn+XeXxh8pQZzu4p0xzLWZANxckIfoPJeBrXmJQFZvRVWIU\r\nnbQa55SVlSWKvOKeJVEcsL6ubVgw7PsWeLwC/N3Mj86OiG9kmJZ8rfCZkNbJ\r\ntRF/pzLNz0urzhlBHqkinypee6wIiXf7GXa4Iy5oeqs/ibaFm+wBevAzMTVx\r\nYxBe995dnO/RSJ42MNd9H6EZGL1VS4yDcODsQ/i595lGhwOkdOin58czd7GE\r\nwnCrGWSw2OQAqNjAU4OxKG5mOfvi5Q7XrTTaLE4XSlN6ZBe1ApvT8EXVlXH8\r\nVTrHqj1JmicQ7r6YLLimLdVdDG3+0CAAPfo=\r\n=PbGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/focus-ring":"15.0.0-canary.ccfc24d19.0","@material/touch-target":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ccfc24d19.0_1659550440468_0.9470372867208958","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/checkbox","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e4570146f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d16298d49f9215244544ef02435e2c9f1eae92d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e4570146f.0.tgz","fileCount":42,"integrity":"sha512-kzgXMhQ7UCK5ecYN+E6Vsj7J4xkSKH2hD5hmJ2e9QvryyqJGkkn1fjRO/aPGcwHSonfeJbQcurW+qrREx6URrQ==","signatures":[{"sig":"MEUCIQCUFiv8e9h55xpyJtrE0MrBHZ+OlXVj/uOTaaYHv3CdYwIgdRukoBQS4PAOVlA103f3EogFmaNjHAnl2OrvJRd3kPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmSQ/8D9EEc8691/LWRO2SL3bqF3SFBNsYnbHBhZMB7SKkLfwX5ues\r\ncQEeKuE8zqYPZeUa/xBSXiorh4GIPbH3JetUtIrfM5IiEvKd/ESLcb1HQ8OX\r\nwHO0AlXQ9jjUv4PohW0EwFpCPoeZW2qV2F1FyO0uIXo2mZqBh0q3sXwePM0G\r\nJWoZzVVxjCvghuqTAG5pCcgQMCfa3eFQOKmfCWymT5r26HpFdt2dBlPn0WCL\r\nriUKG9UqDwp++9JboIGO26fobSB5hPrkVNOzG9qzJfRxS4++1jOO4sPQZDpk\r\nsyQEXV8YdOzSI5wc/Epo6q9GNVG2B/Yy9QE+rfrHwaz4mUYlPnrjf/evg1J7\r\nGOY9SERCkVdd079Xeboju7E6kxxmFAiTrHj7+hjQDCIovJ+stD9pMTTBRbXC\r\n344xljPuCBSQPNtFu77op2xWlpk+n65u4uXTzrfvX4Smemb3k29apYZFK3IW\r\nG3CtPc19ZVyocqD9uziCALsMwfDxKl104L7PCDzJxQrc5DRKbdwcOsPMJT4j\r\n2OnUp2ijuJFTvYN5ApQOElOr2L/pWjITTvANvBag6xzigVD9OzK3gVl/AtE4\r\nsBXy82D84IT9gR2CMpB/751rdP2jp9NZhIVaXBb8mt6dtnASlz7SDpb+y3RV\r\nwsPaxEKhzNDkEwasfz6hAh6FtLknvvHpVsw=\r\n=4llp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/focus-ring":"15.0.0-canary.e4570146f.0","@material/touch-target":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e4570146f.0_1659552071181_0.5590904526340739","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/checkbox","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb3b43a7ebc4b04d8a023648e821e7771aaa16e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6683a36cb.0.tgz","fileCount":42,"integrity":"sha512-K6F6Y8Y8dMnpUfo+rXFikjSaj5uwESUka0pZWccjjhpXpEt06VpBEAK3HPfiQ+Yismc9tuTWvsMUzAANbcEZEw==","signatures":[{"sig":"MEQCIHgmbg63hD/09wW4GIYadDILFCPSZJUnuUFWO/2kEqdUAiB5Rq4ImLUZGogkGw9pIbEa5xh+uASOb1L793UDy7kv1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sqpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIRA//XqGe8vOW4Vko8pJVW0FfTHEwLtElkU+3OcQ8ttkVvqJjEulK\r\n0TQJGyOCORweI6n2/appTr5gOQnnTnxsRBlcrNNlMOLBTusyyU0rWQgmwgKZ\r\njJ7VrfsOuUWhUikgS6K04FuPtT+RlFPBrhFEnMmjiSxVCb1ZMVw/AQYLLAYw\r\nN05Fvfkg76LwRV0IDIyJ/MK3//WXpxENKLknYzq2k6YHkrE9uB5a1/cwmhJl\r\nJM7E3vqU7vjTiUgcBUwYhi16fdyFoLzhmApIjnzdqc72caQXUS3wto8aWU0P\r\ne/9NAohk95gtDcJbz366wTzGqR2E55OaMM+m+hv7unlLzM0DpUe3ybWGxOOR\r\neThg3mEgT1xzxowlicWDpdTVDiyGVxz5Z/JuXF73j5QNgnuXjRJum3ZLbwMd\r\ndjIUKgf7vsJSofSrfo+jPBKztpz36z0TbOLDBrieJJAjlJGI/nDLjjCp0m0h\r\n1QaiOoiNyFvJjbVZe0LGVSth8s6X9LuJG8ZKL/Ag7WAy6sL+vgj0PbPw1Pv2\r\nTYb6CWVAFGViOGK8rHQ99iQCIa34AzW9PsFa9Eltc5jUqoivVbHbg8MhLwym\r\nMdVx1p3YzZG/s0ncs85v/74RrcbczB+To5wbsj1kO6QnTw/lXAy5qBb6rrgl\r\n97PInRCQb0jsmOlQvojI3CaZ9AE5Zw/MHe4=\r\n=+poR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/focus-ring":"15.0.0-canary.6683a36cb.0","@material/touch-target":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6683a36cb.0_1659554472989_0.616198692429659","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/checkbox","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.10196647d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f319bb2dfb0db1e30e0a3f26354240068c222fc9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.10196647d.0.tgz","fileCount":42,"integrity":"sha512-LXyPnDzbG0rhGEoQhHS8RC7xB1QqoCAKV/KUStofY5XsiKfXkrm11YvtYPQ631Pf81i2no49bKpnd48GeiUAYg==","signatures":[{"sig":"MEQCIGOHhUtnEeIDTLv0FfEwdVw7AcPAeaStiPJUla6gOIEMAiBU9VCYrDUHnnPA5ruzUMeuPzQjueOK6N+gz9Sza78XzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov6Q//ZZxkS1r/UeZloFcVjfCV6usvXIiUvxzd3kR36h2VKUXMb6Zw\r\nYOGs4N/V8j4tH38JszpcqBHgqDRl3I8Dz7qomj7X1leNavJecUdgqlC7ElIk\r\ndNyF/gRiSjAUqDKYm3JM8eCpe2+LsTosMgkfTmPrpFDt8hDJANlBI8NtyAKM\r\nGdIwqosfuovUjNnFAV6SlK39EJi/6dSyLTjZjP3C4TV4zmrBKfbMwCGrjy97\r\nPEflglegbJRASb3GbktehmqkTEo2TCRsogs8ZuxYVpVj7X97h4PvDe3U4u2U\r\nbWGKdLSQZtdNG3AIIeSzr93rOCIz6VFcDhwky3oXOp+IfCiBAaKqoWEwVebK\r\n7+6esI14jSQwqpeKOqFZQWBQH+l2DcOp6qx7bQzy9x1ZbgyqPcbok3Duc+7x\r\nocTh/T4RqqKjXom7MwG5IE4My273XO/L73VAJyh6r8q9G7tNjM3TipHcVbzA\r\nxIj58M5uDzXCzP4gqYPeEAxG41TFokv3ucX5Q3sXK1ZUh8Nd9aUblir7kt0x\r\nKcYpAMV9NWKZ+8SSuDdyy9zFOFhcLkj37PpLgMgiyhmRLShtChJsAfW1ykW4\r\nsaFpvmMc2DqzGXT+il0586TGXv/wtOTd6dEzknurZ3FwBeQfuT8kjs+BVqhK\r\npCCS4yYwsoYApviJMwVSIVEReV/ce+TlnRs=\r\n=K3wk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/focus-ring":"15.0.0-canary.10196647d.0","@material/touch-target":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.10196647d.0_1659563650072_0.5892137335787648","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/checkbox","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc08aba0f302ead688ca5b44755df9b72d8a2b0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b20d3d73c.0.tgz","fileCount":42,"integrity":"sha512-+OtQ1h4CvCbc9V4Gdz5ukgH0BK3YaIcEeNZ0l+9BmtKG+76pUyzzFNxbyGEQ0RCTOgc5jKfwm59Zh+7EDY1dlQ==","signatures":[{"sig":"MEYCIQCe9NSu8YoRAQ87zy4ky7NRs8sZsw2ie0PbL9iHQ5UCqAIhANc3lp8aP0j2EvXUGBVOoVy2PC0y9/FLnkih2Zw1wQfj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4KA/+OIpFDwA60LXhPo0IrX0iiXvoSLIPJ2mvOjf1QNwB7GEmfNT/\r\ncJBIvo0vv+hwmZ7Dfcya+Ad1MEcIGMgV9LadKS/DjhawHHmLB3KMHsWS9DDV\r\nWeyaoBqQ+5fAvuegz5AWzcwgwytA2Gwyi1DKgU0vp6fs7Hxe6uEEV22Ski6U\r\nhrQkLN3bNl/jkLSmODJtKvwszUYCJJZkQi7MQnuFvMsbZJKDD9PZNA5W20YP\r\n27NmzqCoc5/jr2ddn6hgtzXF062W7FM3XaNyCxrU0ALjUl/MYpwBHNkiA6XI\r\nKu1zqI95i+LfO6vqlGHJrNRHJwhodOIP4gJvHWC5w918DN2s35HrrPIkujUZ\r\nVHdqRZt4kBnKvONtSbURkpYXbjpta43doHkqWt2cs2kxUmT8zwuUoamXI297\r\n9k+t5FI5fWRCmrLiFpvDBtEwLLtHvpdtHaEhkNRN3a0diqswzZF/+4arhAtL\r\nalxtk3i1qrrBzTfOMj2m5vnjWBDijzwMweYDfYQSYrQH9L3Cjo0ClWR0LrxY\r\np1O2mGZ+H+6TwKQ/U70djBQQGIMQ/1wQJmGkkdhMCmhW5FSel0KZkX/zob1b\r\n1v8ZPcf5LhXJIrEBwAJ8Xq6s92w6ulvCvD0QuWm4NtW89BSrGCcJMHHlJNlR\r\n2G8M0L4UJTgK6wJKE6eAcfgKnMTFyErQApg=\r\n=4/yb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/focus-ring":"15.0.0-canary.b20d3d73c.0","@material/touch-target":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b20d3d73c.0_1659653003068_0.9573309883563985","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/checkbox","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b6f1303bce6b74476b5245513d40ee38b071c5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":42,"integrity":"sha512-zdce+GFBKKX16OL0f7fqP8UrNE/uJZ/LVZRtWBwkGb/h0eynZApb+StJ2LbXiWGaW43ZozPfSohneuPeqMAx/A==","signatures":[{"sig":"MEUCIGFE6TyC1N9ub/51AitstwPo/rgEtlHIhmriixqBQNMmAiEAmcwBnzWn8FhXqHdXPSPDrVNhptLkBHrNvfExoKjx6sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/xA//RVIZVdwCpGvAaFoQY1mDob/31J8JTikSYtdOBwRruYCV0Eve\r\neITjwXXvxtR8CQbmXQ3SN0dmC7YDn5cC2vhfK2NSuHjqk8tT1iG+FUKoSvng\r\nGb4TfAHROjQHF1n32srsuLI8mWMp3kKD4gV+FNIxBmjQT3zJwDiTXV3pBFwl\r\niBsc6CFGJkK8axTR6p9hDZy4DN9mQIryutd0Myx5/wS91IwRTMCV2KYefcx3\r\nWOTJPO9rFZNLR2fpc1NzDbFKsLXDlAEckteD2icv6AzwmZYTZ1lRCevjdWeu\r\nCwIrXeZVxM1rHZiC4zfKpxbakP4QCWTp32wV2R0yULSC1UrtznruuPAQSNnW\r\nPhc40FdwC8K0NZcK945hFzIB4DBcaruXiJSJkDTOE5SVEXGg6kS6TCZHqXbc\r\nU5GzJmxOfN7VJjEAHPRhSzIFYYGY2sgGtxoWDCZLdqkzfU+U/u0WCImvgUvW\r\nVRzU+3V4yv8/kb1SPrTW0svSW0G+Jmyx3HY+lnSK9SH0bPLDDryrPk+6rpqJ\r\njpL3glAtXYdn5iEH+3ogjKRswZAgV+n6oMN5orH3I8YMPbNa/6gFFyW3XT2r\r\nO33R+9wSsKE5uUa5LY4W+c09G1hFg1zu3C0IT6RRfZaRQmal8R+YdwGQ6I4J\r\nVMlHJZ9onJZUeBJUv13OD4ppX/TP0kcYi+k=\r\n=XTW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/focus-ring":"15.0.0-canary.47c0c6b1e.0","@material/touch-target":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.47c0c6b1e.0_1660058465928_0.580380782177879","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/checkbox","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ead757e01671e78d0f80c3731305981dbb76c89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":42,"integrity":"sha512-fDiuNQsXU83Vc+DKosmSm09DVKc6+lQpxCQxV5cQOfdXMXTtYxuddIf6vg6S90SoahmWiFwoRRR2uxXBwq7FbQ==","signatures":[{"sig":"MEQCIBu9O8GP3ZvpYA3iTXC1BvtTIThCym+aqyJMGtmbCUyiAiA/ueVIWtRXTQm68v+b/ruBVATb/yudF37UlPnO7ptc4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJLA/8Ds40frdGgG1F5CHovCJ5EPEh8SqPdkeT+3jPRhEqqcZuLNNA\r\ndnsOhaAD0kIOHT4C3xtOzIu+OaAGBdWGnphbksCHYEQq4EEistOnsrDqs0lh\r\nJ3bcyKoFO477XP31Xb2CdPiXzAgR1rud1eFZJzxcc9zqVFI3LS/DXoA/47WI\r\ndrTAwKQ7627JqdVPTS24LF17CiTWqPdzA2iUkIzo9m4RSQCqP51+iYSMdR8c\r\nZOcJolN22jyY0R/Zb7zIjn8p6L5DqNn0W19YjgRlWgspCDJadUid83tFn1+C\r\nELV8LfTCQfV9IVbtELDFtEMPjV42Qn2AlXeblYQ3F5MQPUNfLxxHeOIE0b0G\r\n+bc5f9s8rHxGyDfbOODhLpyuN5k9qC/bQNjX407CoRTQ5siJbzwpCDxiW1DX\r\nFQAWITwcKfXBsSlM8xWjrWA5s7Gg8FqFCc+4QQVFSHv0HkI2bx2eJpln3j4/\r\nz9d/6rJ02bLWHzDw1RfswVk8SA/8CnheYlrAQ6n7+Zdaekz7oZEqKdsMkMMN\r\nicRE88NCSvWI1hkP5D7rvZWK18MERp4yAPfW3TOO6ATpkdcLQC3njO6S8UZH\r\nlIs5TQBgxMIQA06D+ZmlnrMeq0bEkgCwVxV3KEcconPuoXRq9NMNGVFvFJBt\r\nX8gXc5bwtP+dWX8+garmbuJcRql1wi8qCdM=\r\n=wdrR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/focus-ring":"15.0.0-canary.0e3dc8e38.0","@material/touch-target":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0e3dc8e38.0_1660243583044_0.41423348770225465","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/checkbox","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33d86bd54fde28a4f638ec54738d69598a193cfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":42,"integrity":"sha512-izf3llyRRoSveq9EMAe1Bb0dSt2JP7aJHlN/ObqYhvHCdTcZ/GR7q1Rvhuq8nxgr7tzwkT7xDemfaA/vcLuLog==","signatures":[{"sig":"MEUCIQC0kMtzET6PQfz7jqpq2DMmOYrl38ZW9XCHP1oTyRGFzQIgDSRVl8PqwxDFF/B1o7+BDuW5C0sq73rV4PX6YpI97zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol4w/5ASwjwu/5qacuLpBm5jyJzajggMOWMAy0TEwfixmJfU3oMs78\r\nkn4xKmK23o7oao3CXQc2elbGmoDarqYbY6Z7C5gO0Z45/hjAY9s7wNCqWulp\r\nSae078ZC9DVm/6TUnbTO+xGqPmb1bcq/FLcncSH2yfKAH1NqGOYqYQFRX7XO\r\n+qHQOsXoLTw1bsrtUxnYyITq7s4jRgGM4Hcb1NrT03VgwTBgoVTHwys7mniY\r\nhit2K4ymTZsFTSipqRz3+pUZ7S+LQdqAi4TDZJGfLZ8eCmDhnq0wStq9ifj8\r\n9BsjJ2aW2Rnj5y+Pmf4HyvcZoZ38iZOLDMkPttND9cEOGx+oeCIC8cPu46pt\r\ntSihM4wVoGnsP1KMCKTYUL4WO7xJJvtfa7n5j/GQuh1mdDw2eNEBFDewmj1s\r\nVl2xrV2iFPY8llmKtgtVlIaTVYlzextthdULyQhzKDy7IILQbLryZIBy3BcV\r\nTnD0EoUzDG90aqGRjswLlQE4ZkJoqRY9RngTlNIdYLyoIIIKn2c3UJuzhTNa\r\nF1v2XhLKem766sNPUsZgmiVjWADwtOx+GkwGRIb6Cgq2kzxHzg9ksLlHxdOz\r\n5sZ2zgnQhzOVvpYOTy3dYXIvlyp0+XD5dU90c8BX2K4nmF6RfoKVYIjwl+pn\r\nM+jNPyNEOeLVIs0SlzlY71Hd5to4x9aRCME=\r\n=EOdg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/focus-ring":"15.0.0-canary.d5a11f1c8.0","@material/touch-target":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d5a11f1c8.0_1661900504728_0.3483389644410262","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/checkbox","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bac992a95.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b764f9662e70440962450f209a6b5d42e68b1ba4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bac992a95.0.tgz","fileCount":42,"integrity":"sha512-PkFXhLq+u/iBP9G7Z7QLX8aVABI6hyPvy6WVGtIu6mtWKYPU3QtYD9CVl5nsGQ+6YqOsDEb4G4dYYb4Y05yytA==","signatures":[{"sig":"MEQCIEXUvNGzZoPyj9aJ4tMuhGyJ6lPQ541bjxc1NhU0GTnsAiBoZBOTfQEi+Iqr3OxKDflHUGRMPqa8DXjGFPDLcKyeZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXHQ/+KTMsoodMFRQH3nj1MgeUaJo27y5FHBI47ewtyVIhRBY7oanx\r\nqyY5a4KWo+G4YwZc1PZM6KyPC+o9RZwI7mqBM/dzPKpXd7IP0ADTxren1xuK\r\nGdEDNktsoIryF2bd685N6T92M1g2k3CeIXq1y0tp12rb+SDNHQ4gLyKNkTGV\r\nPVqwfFV+HvEEaGl8yg2+fwU1ejJPSyfsboCQgMAd3AgQwV97wO8DEx0aK73O\r\neITlPI2VOR2M09prQYUTBF+ExuIR+ipHlSt0JewFokYIdPDQY5E3v+blrAbX\r\nCwVV0xRhB1p7VR41imhlltcKShTaAoUT0xSGBEGGPrHTqzYraDZphJuPTj3A\r\nKwOsWjBh9q1SnJEtwiU5FMZwOv7Sb7N+mU3xOZwAxm46GUzG+nHOiK2OG+XJ\r\nMdHGWlag2AJ6HbdbNH6cSgqYzr/ZDJ+eZzsnaR8XGm7pCb8RbPJ0RQD8RH6W\r\nCO+/SfTHJiQwjy21GXNB8CTz7DgLWmzqsBwH5+nytfhHyyxAKLpPZTf0OXm2\r\ncLuB0JLe9gsd3qvkggK9271dRJt++rKehabnN6B5CxHlyUM2B+AjNcIb2446\r\nZ8qpA/x4NnR1r7PB/4byy7ujbrGnQ55qjV2CYIPPaMh0IfLACswCL3IDkTeV\r\n3/vMANEGkPLZHd99UmCECm+lme4jzQI6iQQ=\r\n=1lXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/focus-ring":"15.0.0-canary.bac992a95.0","@material/touch-target":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bac992a95.0_1662015968386_0.7446635848302321","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/checkbox","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da263e78c59b2cd5df4cd4793ef9d9a9fba35ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d25f3404c.0.tgz","fileCount":42,"integrity":"sha512-TNKfKK714h0QHtF2uRlTui/r6etUgOyMvu6h85bunpi8m6kX3D11hQ+Wc3daMdmVkRAy2Y83aAl711vMk2qAsg==","signatures":[{"sig":"MEUCIQD+5rMHmMu05lxYSZ/UhMUrhqsvsjUiKIl1zqkdyh3FsQIgeMu0EOBpj5SPY+O13yi+oZEAzQ3t1IegPW8Pq8MF39c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH8gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokVg//bifNtgUxZXAL8tlvCqAixgtz5zkbDNhllG95s2bZF9rnDQRg\r\nazzwNR8DyhZPJQiLOK2pl3RIlsKCgqwsl5rlEnVoQSrekapjlHPxQRjyhAP1\r\n7A6S6P/sGtgWhPJGfkpiiOScFPFP4X5ayVaIbVzsxhzpsRnf4NpbWJuY4Awm\r\njX8goOYod5aLV0CsYT2+3Btsqvdxue1XS5KYciBWPMzFLnARdXWGDH8RykYA\r\n4WlIeQz5nom2dS3vzCpZ6L2onbTdHA/onT5XcoY3nGe8DxJD00+jRGK/M5PO\r\n2Gq17Msl8X2iGRiqhB+RNVrbv3aVsI/f4TaHIFyxtPy3RFzHNGeembAoMRZS\r\ntsj+weW9sb99kVGwjyIIgJ8D/KDRt9xI+FanBT5VWRsJNk4Tv8P9lhb+2Ozs\r\npPH2C7up7ADiEBlLzZntiZ9H9qTRvDReNDeUModNLBAw/r2QZvSgO1EobXO4\r\nRGzfRleeQxpkJ8YPyjGc5eHcRP6oq8ez2rldyEyMKS9bCkUCtvGBf2u5Y4wN\r\nsmJD/cpUZ6RyVDFELG9NK7f8Sblx5xTCzmnLwU6ED+40iFo1JGUKXljkiV6q\r\nE37klWYKm18KLTr1zLnoM/7OTkK/PADSvsTf36svGl1hYZ1O3eA0ACSHJxBQ\r\naIlVfHyj8evKXO6pGIqcXxGwzIEfQ0tDVPc=\r\n=nQOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/focus-ring":"15.0.0-canary.d25f3404c.0","@material/touch-target":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d25f3404c.0_1662025503823_0.7782553267116772","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/checkbox","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bcca30864488e69a0a0b8ce86ca7015ebe72da2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.920d8a79e.0.tgz","fileCount":42,"integrity":"sha512-nXkgmUqgy7xZ9Fcou2XWRSRdAhM64XUzKHvubMkGb4xMy8Krgz5oNv9D0fPDhBBkP3GtzLAPMF99h/kDz1Fs/A==","signatures":[{"sig":"MEYCIQDmpv1yCabxiBjciscr7EQP7uAKe7IbTTuP0ItXJQtThwIhAIoX6ZVK25t0MZPgXgsA/u6qnSiaV4yh9WyFwF1rDles","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6+A//eKQwbHt4e6VDF8wdvl9/wiZ+t2XE+xXKQ4hv6PDNTtmPPO2p\r\nr5ILUKvlHPvoa6cUlNQo/1vDqbAQMNyvBy0SpTkstcLKxnc3lpl8dD0ZqBP3\r\neOgOZ9PEQljCziPkEL+WOG0aKegZTmtY7H+iAVbgoTJKIWlfZJQAKjqTCLFO\r\ncUlt5TVwFrJrZooxb+82GTlWrdusX9p6sauYqOUS+tDVSJq+Nb8k+jWttiYC\r\nTXUbceK9l7Vz8w8ub3MdfI7T9TM/NXX7vyPJaxAGk3gy58+i2QKN6/EkWuII\r\n7JT5Ls4j2s51cGMG+GWMz9l8XXQH7HrmZ5gOnfj+XqbJHFOTh+w/GZ1G+ytd\r\npRiB7zrHlZC28Fn7ezbvv4SNv0uwGvI2uAwA+knIvuV2za/yEPQz01ZFHEaF\r\nYuUaMU+zXAMEpuEr09K6SdPqigbeI2yuO/36P8on6D5R56oUE0uaO/ZYnmsz\r\nCdsdtk1WaiWC3idLWkdVlsLoSDW/76dKibWkIBcTK7DwaCAs7pqRdPHFkjPF\r\n+RkX2gDAuu5T7atQxLfbx1+6jXNP+UbEw1vZ7bMgoWng7F1ARMMtRkVifzYM\r\nL61h70T5BGh7CegN33uoZBAVDJgB5HbtQKbdLdlKktZhRXgk/QeGsrAISsud\r\ndEZav5ImjUUnqRzPxfcGY0jUG2jWaKZJsic=\r\n=2FE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/focus-ring":"15.0.0-canary.920d8a79e.0","@material/touch-target":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.920d8a79e.0_1662063687412_0.8421988950276242","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/checkbox","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c363f267b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbfd664613fe5c2365fa7ac8cc416053fa6d9143","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c363f267b.0.tgz","fileCount":42,"integrity":"sha512-4iffy/N3ecfBM2EZ/fDL1EavGdKkA8k9FhWvQo4eXEIab1ZBo/ru45oo9NQ52E9pnicOvSSG0ugT4wfHVryrlQ==","signatures":[{"sig":"MEUCIHILZEJJ88oKK2tFFkz5L3qcdjFRdqa+LSEVWnz17eauAiEA6h1nFfbk22u2wpXt1Opf2nlLQ4Jns8lzZeXDC8LykqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESGzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYsw//ZDSy+Lm3doBvdt9nV+ZsTyyJRR8nBsW7mQHxnjpaa1n5HW7G\r\nYGzHtXG2+WX6SKKlh1A+ZyoeZdWSKjToq+t+geAXe3SqssfSifdUKxMOKrqM\r\nyd3nX/Sngks1oZNTxkVRJu+qkjuriSSGGaxOgOZIAAgwtNTFuVEaX2kldjTa\r\ngb5owl73FNw+LcoBV2br9CUxp5auP6P5VgNXS1VFOLn/E+5cnPV2C7SQxumj\r\nTmWQJquuR8ocMfhbj74afpvetzmGq2l+kpKsn7wAANlP7joNYTa+UgIU2X/f\r\nIovuo8E/WqthWSg8TPmKRYqVl20R6SFpBynvB8QINJJz3fhJBvN53NByhlMZ\r\nxHcoawKLIoYZwvTqF/NAWELhRD68Zz/Czjy2QF+Fr4MYBD8yLYG8RsMfFwFx\r\nC5wjx7Dm9bUbS/Z3IniwbxnwG06+itGbZGFXCMAzet5rNRShqrZA+z5OSmqf\r\naY1O7DtpawGXjp9ev6K86WZ9ogbe3J9r8EkEivV9qCmvF+URQzKDH1LsKdmv\r\n3Ip2/QEAyunVSTzwN17J0YbzXNwCUteLrnane5pCVZ9OP9baUpdEKMp2rL+J\r\nTM6IkV2mZSgJHBMmOjUjoF2ZVEYsgcEdgoRO0KkQBFGUC3Z+h1AbdR68RasK\r\nnCu5F8eiYtJaOvSWjwPgQuMaoWiVqbLgj/k=\r\n=Mwdx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/focus-ring":"15.0.0-canary.c363f267b.0","@material/touch-target":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c363f267b.0_1662067123573_0.29050359124373637","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/checkbox","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bec35465720f017eb367e688f1309504a94e0a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a4eb4937a.0.tgz","fileCount":42,"integrity":"sha512-NYR2eTXwUH4ejyZYaEycGmibTJZoJp2lNC12Vc4OwcYS/h8DjcNanZXcnx6q4D1ts793hzNg22bHER2aueK6Bg==","signatures":[{"sig":"MEQCIHKu1AyLIkU/VIJMrbpe3Ids4wedtSKSvafkxaAk3edoAiAPCgSNkz7wlshY/ZuG2g18Kzjao+tmZSsdR+vKl2ontA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqx8g//SiCwblhUcgUjpkBhk4187xElgPk2eBQxMtEytgqWcXE3WMyu\r\nUKpQDVnKFQOUegJnT1JjDD7FuE42T4gicZROijPHsHC/s/jpTLc5glNVWESA\r\nkUAPjtq4vJ7VL0qz3WyWArsOUAfENWeGqr55OT0oaKIrVKpCyqeC4LHMhCZO\r\nfXqSoZKirSleYo8IyDROxt9hGKnc3yMgk+esgyUFvLLKZ6SbH27V9LN5flGL\r\nATbUfDvQLamlffwtLuaS939q4cccjBJSqIVsTH3r/6x5gbjZIZhV5ISCxZq5\r\ncL7+hNTLkLlFjshjxviXD6olOSj7mg0N27zOETlQmP47Nz1JmPvS1ppUB6hk\r\nTWeGC3BYdwih+GTcflM3EX+7xbyWv3q475ChXvZPY4poCNv+irCFrQPp6bg6\r\nywEJQ48OUh3SeP97xl0il7aRveZOXZ2viKL7ZhB0+zTbyMIgajHo4YSgUoQE\r\nJoPVQPjcEiyVJa7JJcW598AzfKpdoZzuouJb9+FSLNRbETTCnYvtCJ7oIhK4\r\nb6eFxabZm4qJhOaSpb1QQ9CYUW6xClL+TYL2Frgph0PKxnP082ypsFAqGMLL\r\nnZPkeoTKkSpD2zWpiruZkt1EgAWzzWkcrMnnmDdZCU07kOXgA9HLJeUzPo4d\r\nT5uD4EbwJ5qrCwR1c7VQpW4EWZ71ygFNORE=\r\n=cj2x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/focus-ring":"15.0.0-canary.a4eb4937a.0","@material/touch-target":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a4eb4937a.0_1662488413167_0.7874592938300988","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/checkbox","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4299717da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"006d249fdd6925e595a5793a8240dfdd0f27db1e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4299717da.0.tgz","fileCount":42,"integrity":"sha512-jTXbfsl/ivvKMH9oCc6V/ebQ+ZKWDphbOkLR+nPsLm4cJG1+8jjk0DCXfFwgOfmOSXE48h9uaCruMTh/YpkD4w==","signatures":[{"sig":"MEYCIQCxGpEAeAkecIys5FSlv8n+iVeO21I4S+YbGEIUczV5AAIhAKP7G70SntRbqISbo2Ta7YfU5P+L5+auBPVC5lWrZe9F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlsg/+Kl8IIidXuskRQ+9GAFzie4uWn2JHYBiGCHoYsCUrnJt2YCrm\r\nMFDZQ2cDhYqsaGLfGxh5+SyITzUiux5PfAPVUUTPB8iI1WCxRZVpmodql9Aw\r\nr6V/5akxWvXZwuztt6zSc4y4wF2MyHyPRdrFGcRs8St4DGDyw8ZTofdrx786\r\nh3zdyWfC7+1zQ2IyhFKwlyosiAMgqzZLmfR01k8ZXSEUeS/dIpByAlNhFiA/\r\nSx+48yQ5U6oA3ncwn8/GicVS+VAtvF/zGIdRlHfoynRFhrQg2KTV9rkEETr1\r\n9u9WYf6Yy2swhTzBpUeQrIautixhQylg7okwyffSq8NJ5YfMjDS1RSxBAshi\r\nDLt/AEhC4Rw5wOoWubNoXm/6A1c71nUbmEOPziJH/upN5Tkq44/AIT9rR2We\r\nDIODcTA1aNC1vqpzPQjVq6zUnR74Wh69KU6YSNTN1HRxR4OnllEL5a7ZnOv3\r\nMQHqCjcFIm6/RGICiNyXfyRVnSvk2YN7g74RRVCF9qc81lMnTphmnvynf8kM\r\n1Hk/HngU1K+pPOYncNJ1+2H18RGekqZWhE9RLY3NuYPBEVmDoQJm9irD5pV9\r\nXdgwHb+43G6Y5q1PGH+3Q/aNqqzPyHbOWLgEn074q1yGl6wbdEnvf3/AC23d\r\ncxn8YIk0bhlHfZPzoVll9M317O2djMB1AGM=\r\n=RpdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/focus-ring":"15.0.0-canary.4299717da.0","@material/touch-target":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4299717da.0_1662567366890_0.21320219963390863","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/checkbox","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba1d2a261737faabddccbeff9f3d4558d901dc56","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":42,"integrity":"sha512-EWPiWwRfElEkeFu7SabtfA70HfE1z64N+hVVDmBDJqvitvR3wcGrr1YmQ4hAabdd+6KJO879to/mG+hvXCWNJw==","signatures":[{"sig":"MEQCIG2alVjpIKRpUY2PSBf9BWtkWZwDbphOzcO62HklvU9gAiAP3vINzt6IkT+A0UdZNE2DeAuIBjchr49n6QH2/XyAGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO65ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8og//U74btk8kx7D6L2pXaB3iqHgTep7+JlEmaEaPgSUF0P+jkith\r\no1KzqcJwULshiu5RB9dLgoOBcLd/zlkOdYHaIfKMgGUF7MENAXokIErCcscS\r\n1thcsVR2bg1DRniw4YsQ1I6/Cj2tHszzpWSQFu/X0m8PMSdP/X0W92OFY1uI\r\nH71sdg7cE8HBxh54cwiWwvVEi0v53UeumDk9eVHxePQN13bH/2sE1WL29Byd\r\n3LRennrhklCiK/AVThyaiEu14RGMzhdnDv6W6WnKv0A1snykFCR224UowWHu\r\nO1jBmb5ldrFgkMspZ0tfbe5Hok5wtqEUUytYITKMo/ActtiVwwmcOYqBaveW\r\nIgK2xz1LNW3NM3XfrV1xqZg+fQXVydBE+94kM80jpMlhIZv5dn+7Go6KJ2TT\r\nX1b2qghIssxAUP1iH7AzLkUnsI5Somvv85cA03B+V6di2ysQhD9EMZScS4RZ\r\ngE1PNjwAyl4w62SlCzzDfJbv2LxjcZqKmexHvjj0O3g34uy5E/ZLIb0nmQKv\r\nJbyh/BVHWm+VqSaH6vSp+VZ3cFXkHrX9VCLI22S+ogxCZ0XZrFsw9djJz09B\r\nbh0RRjFqelsC8UfPsl7eCxgonH4o28M3U+oOBZSfJZZNd7R1PNCFlKZ39ceB\r\nyQ3JgnjFjIRRH8RzD3EIIUdKjKJec+DR9/A=\r\n=vbDP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/focus-ring":"15.0.0-canary.fa7d8d44b.0","@material/touch-target":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fa7d8d44b.0_1662578361725_0.22413878858499592","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/checkbox","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bdc9fc9ebfb24b966f33ad72cdec6cb31f2d1d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a40e3c768.0.tgz","fileCount":42,"integrity":"sha512-AGACxgdSihziC+lpnuZ9ARywGvNLFazHGdJLIysO591WbhtygklZakD+j6A4WZNZl2/zHb524Pi1+MFLczp0RQ==","signatures":[{"sig":"MEQCIBbQ9WtNbUIr4hEu9qZOn6t1knD8H1CbcssxY+pVvsUpAiAaImD6uQGq2t1aR6D1bvQYZx5Fhghfr/KVxrusOeyNVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLUQ//WVTnMKEj++JCjshYfAbG+DDvHvam+b3W/MhdelpYH9slif/y\r\nHF06EacJK9iANBXiSc/ItQT/QCQ54puaq02j4n+LC4qpG1euE+abR2cOKMjW\r\nMkuCKMnZlawPUbRycbN8dAIqhy1xiVU9UL7MP6lNqoo2yT4lzyaNt9KSgP3e\r\nF6ZT8xd4QHwhsL7gQ/pfDMgq8Br1E8dLZeiOKF2VuX2Wz9y6knSm292pDLkZ\r\n8lZzwcwy4L7nhmCYvT89L6Jqu6nOG0tcdhudvYY4yg7CySjYfwEsKUMP3XHV\r\nJQTbXJa79yWokUZ+9xtwq1n+Sy6eohwm8LZhlWF+J2G4HV8KYsF5kWUuNJgC\r\nBsoPir00UTX2Q8cQtP7lFbJXmpz+y8uqIhg3nHyrMa0pFuTc36D1Ww0/pvJr\r\nPe6P2iNqv5YTkVaRzku4vuWGpTef6ItHtEhmzJINF5/kP4TaOXki+dUiXoj7\r\nPCXNHQdjM2bJn7325yUl8XQe8JhCyl+dJWwUGZbRd2RZc70vZBFn8rkbvfar\r\n4iIPimbFkumbJk++6DMMfAv3y30kknwzqUy+am+bRRRb2W5wpwQwN165luNe\r\nbmlVajTCnAX95a2gA9f8V4Wc2WdHeFukMQ90GdOhTVFM+zxcgShVckKQNrzJ\r\nsy/YmXUbI+uEqunnsm6Ketd+MVXX6+BHJcs=\r\n=LmJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/focus-ring":"15.0.0-canary.a40e3c768.0","@material/touch-target":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a40e3c768.0_1662753862500_0.45372508104552267","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/checkbox","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fc2a49127051408cf77e34f0207d33dfbc8cc1b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.18cdc9a00.0.tgz","fileCount":42,"integrity":"sha512-JRPMCnEKBVSrr6+6PwCyyNXRsAY7IhhBPzXIQ2YgvRSRI4H0xMJ+eibHx2rJqi3j/bDKRBFXW0JeY30k3OdpNw==","signatures":[{"sig":"MEUCIEIbkDN3SXbalCY+B2FWoDvOb6FOR25Grk2xwWX5tx4tAiEAsEDWS/xyDmJo34bLH/tNrAySoU7r0MzmEuWctko2u6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeoBAAiztomgUoBTX0eKUr2zZJgpnLP5NInEBCozTTTbTR6nXPf0sU\r\nHt56E7/K5T9DALWEOTVTi26C407XbzZU2nOdwdInesQqaMT5r65Lay7Tvnop\r\nx5yyY6GQfXpjVyMyX6eEirygN3l8t9oN5FsgW+zQHT/PbGurXsHrQ3iW8NDf\r\nPGwdNhhf5yrowIM82gg79PCM+UIsCGp7MuhIOtaMNxFDHApQI/obNLLQh9gD\r\nbLMRyZjUuCpfoN/khrEqzAju3XSWzMOJ41hl7I1htwQbN5uBdozyWR5No9p1\r\nT1UeM/4GOzfFXSFuPlA7LhpOtzHQVhvf3/QFa90aQs76sD5o2h7HlUnj2dnN\r\nttiTO6WBwCs71Q8KGOcdoc7mzkuzzSbCrAMLzPCZX3o/uj1nEnZmRRDKDHF9\r\nMGOhGwd3+t+uahaL77c3Au/GZYDojCwg8RLYHTCsrBD+LZjG6UdmBl/eHWq5\r\n16Ox9IO64QsXCD2574NQBygrDlAecvcnvVyGJ4XV9Jzif2SKG/VwTqLqLZDe\r\nzFwkQU9U5LOoFLx8m4kXvM0Q9r2/uJ7cialeotmTiMz9AIJHDo1pidOAKk+6\r\nLznPNyY0qHyo193vPIvDuWw5PU6xIB6iqrUbyM4jESv6npnAayKJ3svELqNK\r\nFaHmqz3NXJ0z69SdWMziAhwY0UXzkujuRfc=\r\n=OqX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/focus-ring":"15.0.0-canary.18cdc9a00.0","@material/touch-target":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.18cdc9a00.0_1663016605870_0.3723968014322858","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/checkbox","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3186c044737f09e530c1b8e78c4390293db7aa3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":42,"integrity":"sha512-tYcBwucMftVZ9rDzhiPpyPRTQUO+xXQh39fPrLCuy3HSQ/81z7kqFBTqNtj+VUtinNDSx5acntJJYbO4OhNnpg==","signatures":[{"sig":"MEUCIQDKiiAVAOE0a1o1nZ0tXCuKv9jKCPzG9SJwVZkQwhCysAIgDwO+371pAXxCutzmKPVKvmHh53aE22DBnmjPAhHcEyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQarACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH/g//VlmnQ+1N7Nzqg7PPPT3O41LkraWNpu0A9q+qlH+FaMAlvAkl\r\nLFGnwzP9tMBH01P55F8Oulj1uezMX5wziJIf3n5+H1SXev9qQdysZ5gj8RpA\r\nYVlZGHh451C1EQM5NkCByb+gK/Iwei/l23/76pEPvQBz7nGlej2LyjHFIVkb\r\ng/vaFuLDvMTz0a+EsvDHM/XxBmfWbKq08PnJWjBHFSVJULNp5dBl3cWl9m//\r\nH56YNRnmYleaF+ek7hmuNN0Zucx+kkgPjIZwHLWH0v3LAeLbzMtLxs756Seb\r\nf1utkOgob/WzoHfnS3mrkHp7mKokA6eXKuWRhfqDiwCLdMeT/OdmmQL9MzUG\r\nsNiaQXZ4a0+Cy+oOSvg5uuIxt/SPMDV1CQmmz9qX7aCeAq7P5r+nK3w9gkJV\r\nn7fObVyI/w87D05k/9AAbeHjVKyljFT6RCrrbYFTliV4O9A2bmyMQSsNGWeU\r\nw1ktmT48Uu6xdqGbriDzyIJ121gGr2wuCT+gvQZfYAPtqqp/PZcXpkkytFjb\r\noVfw5aarOeEfcnkdPvo1E1YXYTKwC02FTUywi2G+fVt/bdbrsfDHsK+YVMX9\r\ncVGYyTerp18bky9A4nugwstayChsGAKehSJrUd7z8A4hJQ4jbEOawXI8uUU1\r\n2czGYHk3I0dZCIRBcKs7icVtoGd12wBU4/E=\r\n=SfjD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/focus-ring":"15.0.0-canary.7ab3cd3c8.0","@material/touch-target":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7ab3cd3c8.0_1663108778908_0.9684920753790536","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/checkbox","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2860d244d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d7fe99841df7e97759b780379ccb386e9b49c24","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2860d244d.0.tgz","fileCount":42,"integrity":"sha512-NOL4La548l5JvlAiCg06Z1MCyulRk0dcZVMIUfH8qchWTvcnIqkrEFRAB6CdwL6XT1qZavXG3YnstGzGQ8ZAkA==","signatures":[{"sig":"MEYCIQCGqINha/l8agIoe7WOzMm3s7/RLXRijdvs7fARxSaAEQIhAJp9LmiNTq1u+6MsVZ1oD2sdVuAX//IbjODI05mzGUEc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNlBAAm7JDO+/F4VeZl1IREYGKZ68naa6KP3ooAGsu5Uss7RASKMB4\r\nKJBFH8nQSWbWp0E1lxdVlISld20usSo3e+dq5NuUKQlVYacsEzEzvm+wmBR7\r\nGEC69bNHYaT1Wh32jLddbGoXnuEkD0CCqdopvz6v33fDIZlwQpz/2B6goypt\r\n3u7dx/+znmPeT98d/J+ukeCHIFYAF2Pfcl+jiwaXtzwB2UCdynbTn5Dzl+le\r\noGK7HKawz/eafoTOMF9GW9FXGrDPBol3gFxuWnFCOY/XFAcAzslAgMB1QpBM\r\n/TrgHX1/XbHIkUpeR0J3RrwC1xVox/yEUvwxJX5n6tbAsjQrNS9iFHcJSixe\r\nC4euRH20BdHon8GZLAH7Ht0KLNVaxw7x0JdeURO7yRHhGVP0kS91AaDN7TwI\r\n4mk9pIjzGTGdzWWBdMOXNp3fZ0ksK1SSHDHBIVIu1TZYYhI/NMsHzdGADi2Q\r\ntkRzHfRA5DRI4oPaqtUHCD/pQzuFnAv0rZMBZH6CfBgq+tx7tr/j3LEkv9ur\r\n2p8SKvOSmfmECZuzvw1FrBtWN1nRz9K1Mzhc/lbwzqG8zQzj1eb+dUCbN33o\r\niSZebttfAJrzJnQZUQnCZ0Sd1YDi7ON+tBgBwTq64nTivLxp3hcy9rOTkHTc\r\nw9sG/i1znavb81YF7k57J5rTu/x+xYHjuqQ=\r\n=L5jv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/focus-ring":"15.0.0-canary.2860d244d.0","@material/touch-target":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2860d244d.0_1663368917134_0.6500272762932158","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/checkbox","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e8726533c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b61bffed9a1825fb269f62ed15a498134c1a619c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e8726533c.0.tgz","fileCount":42,"integrity":"sha512-h1BCOy/t+Bhell/H16g8BHTr5ZPLJmE4tVMfmcAugfUETzCI8AH32fHH4OIa/3k20Uuj8i5mWUY9uTI96iXIMQ==","signatures":[{"sig":"MEQCIFFgqJ51UKH1bE1ePTMaoh630EmKE0liw5wOSDljPAVtAiATgNaRb/EYvBSge8VQAjtyK9uS1v6LqwpFvk+VbdKghw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiACACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3uRAAhk3EqM3dikv0t2hb82OkR7jWsKV2HXvhJuy90kMjX1m6Ta1n\r\ngcU+gg/L9v+yQ4QhAFyEKNKP1jqsbswLnr8GkyDxnlTDIERl94x5p2fOgibn\r\nzHStbxi8YLp7YNFDN3V+9kmCSS3AnkiP+4y+/fqP9xZAMGA8+xccVPi/0uZd\r\nADjx1EQU9NbvL8sINhiHam+VH03PE3ubgTXBd2m8cNeooo/lFVqiOI0jRSq2\r\nri51wVD1nq1yq/ZBSlFLITXd7sRCLN7uviGdhy1/np1tnOVfXLG29+CVXgsw\r\nXO3sk3EvBrBwkKk63pKc/WXR5InWaLZwA8x8AzfQHnj1XCLqSnCXZabjRoi3\r\njOrxrScRbkpJ0RQ6oBN3xf2wIL7WjxQBgzgdVXO1fBMdwT4Dp1Tk56wTQt13\r\nR6uOlw/70v088L8rR0UihSsSp71DB6L3NMSDt18HopwKdCXPUscs/mSolzm5\r\n/Ore2s8FYxVvFznitLs/JOFksaj5AryfpACCpNV1uuMNtbr5tIqZG74/eIkV\r\nFu17IjJxo8VSnAFPIsep0sTs8dbxht56pak2oUPuzRiX0fgPLqTUt5MXH3uD\r\nsojmAGdWmRtvs7ABWAmWGjG9KEX3tijsAl414ppUYOG8iVvVnKTKjTdTN+Ti\r\npltiPIivAsZiRXvTKVHEjM+rzBblFwXvsXo=\r\n=zbPC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/focus-ring":"15.0.0-canary.e8726533c.0","@material/touch-target":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e8726533c.0_1663705090475_0.5614464159988819","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/checkbox","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ab54c1065e5d88416525905508e9e16dc4ebc2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.00d8de0aa.0.tgz","fileCount":42,"integrity":"sha512-fZhWKfgA9fdsvGM+GqJsStI79jqGfizrATw0rnwnFK4zsf9LHpJRLhFTEtHcEJBo3UODvJs7XaC9ZnMIeXyFiA==","signatures":[{"sig":"MEUCICp0E3gPYPfsgxBf+g7m6y/Zjwe1fBdDxFeBhmmWnA6wAiEAv+MUrjNBCVGlZxlKYEQHTeSZ97q+vxrvZ0Rz6V+jFe0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQeA/7BwpCx2AVnX3NmFMUxdvMoU+oSnt19NYbcukcv7GIPZu1qLgx\r\nHuHeY76BQgdULXPoSKy2WgDed7cs1UIM/dgHnUYNGNM2VpiMN/dSTumX+2Aa\r\n1bYkusSRVyBZK//qvLxwWxccX5VVqxKpoFP+PYtWeqBHgUFBtrMIxOgjGWI0\r\nJAsHFaGVL48Qx0Ty+ud0cYyeKeHCPgO9FTbZKIfBrgEDLKeP9IWTpRFQ+3zp\r\nisF3znG+Cr5HJX3XXTeQ3kQ84jSwu3ERuEZTOzMfQ9Z+ahP5b8n8mUOLpHH3\r\n1EizeBBrCARcZQTwq8i/AW6OmPAJwXUvA8Aq9QtcejVUvVWm0ntWsc5KdMN/\r\noUYR14tPHzSllDhE4xDT5JWqTXMhSvFgbHDXQXRZwbRiU9PfNUV79BtHfC3A\r\nG9iKk6bMVP50Zu+Kju9c9CwZO7lAS40+3LvjgD+qiSmKbzPc+vId4g271pSW\r\nsKgZf9nlCte68C8VmBt0J55zkYdi6Dea8FcHOTNHb3ikHq4gp/mnvHnUTqHi\r\nOzs8/7LMfTjQQ2bp7oRuoMZgbbU/bKWuLvr7Jl5yuMGmNP3KHwEXhNpCW8zA\r\ndArQfgn2hdHjZulLMUtlDh+x/zVkdZ9gg7pCQulC96ncdjZEBkiQ0+gpwRnM\r\nXYFu7Q2PGl7KGv/126XVJQPksjkEwK5eW94=\r\n=lzi+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/focus-ring":"15.0.0-canary.00d8de0aa.0","@material/touch-target":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.00d8de0aa.0_1663773652918_0.7897590527732641","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/checkbox","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.271aedc30.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d58699d7c40f36df4be690dc05a0da7cac8c3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.271aedc30.0.tgz","fileCount":42,"integrity":"sha512-fGG1+693EffplswaKZXE0cXG7mmB26WnVL+fl/a5kvFTfCADWuaDeeDim1XSQ1W7PHT56Z1vwvvMliS7VjY9Cg==","signatures":[{"sig":"MEYCIQCVCzRDSQAI6bLIVU6mw/C3sVJkbH7DHb3ZEpO11TnvhAIhAKmyqzfzWPn5F1VwhSAH7SD9VHxB34o2bPy85lJQXJ2F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyCw/9F4Siz4IyeDIz8ReAaqGUnZjd6prHkZnWwEXzn/8mEVKtw4ie\r\ntr06rJH5/EzD8xq0of1KRrmMdwRxpi6qlqS/PrDuTynBqAGb34212hPTCcXJ\r\nd771oiJe1eKo3tGqNPPrqWEJrXrX7QF9cp3uVVbZYl+/GQiQeMlIjySPa+sp\r\nYkdxGjWyOAVAh5/4UvAguaswAU3wt8qtdrJVPsQqQRSbVAuA7IiP38cNWhY0\r\nN5Bq0A3EHUzm7c0J20vIRJh9r6o6hJhUrIDDp700nbQpZxyF2AryV/tlhD6a\r\nqsOQi3qeOusrd95qxYctMUKbHRyZwcdGkpaRJ4FlxKi6lKAl0UIOAvQtlL8f\r\nBzWWALoAVNadVSv4ly7HIUKEe/BuWT3kU0HVlEmoYWVrBlg/grB/UZw4gib2\r\nMT1RrVOsTXX1jfZ/vCDsSvrTT1o5j2gLLkRkeN6gIe5uWpmNYzwD9bJWCV3Z\r\np08ECvkE3ak/5bNa2PyNy5jBfTIZfP2bzUSqn36r6DGFiWrGS7R9o8a1UP64\r\nSSGWCmMTq8xCBEWZlPloUssHJwJlV4HRmsjSR/dysHTEkH6A7jNr+IdmM27L\r\ns9lIrStlt0tf3s3GCtG9sfvUshEgpWfQj+iuAQNkfQHJA3HXuoUINNm2spzd\r\nf7k26nbXkxoGLFEzOkSYYRx63il+BAF9GZc=\r\n=x4ko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/focus-ring":"15.0.0-canary.271aedc30.0","@material/touch-target":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.271aedc30.0_1663774587697_0.7280975728764565","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/checkbox","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833c7325d6d70086852662484f65de4440e438db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":42,"integrity":"sha512-wyLU2cyJM8gX1na+bSxHe8hT5zko0f7WMh5yDpxypm7jvUMFk7DfgZetZOGxkhYaRW7kdb4x+fRNFCrb/D/dPg==","signatures":[{"sig":"MEYCIQDrhiEE7moz+rEq0ypUoVWwV8RH8h4ZKatflNIdmRW21gIhAKjEcuTX4dWEWLSiS/r34AL7cxd5U4qkXmq8ETaGM63C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1MuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouoA//dPHjQtXKIOUlfDFDnbfNthIaUj/BMfe/5xn8cnSgdmm3Dcrh\r\nrvuqr0xuv//lQG0PcVyHmn7uZOl0q3mg/pZS1eslioFrMZ8FA+55b3tFuIrg\r\nF8T8qNd8SveKi5qe5QEvL51HpLFD2LuOk7MmeMdwasDo55pu5TeiKEPAHPrT\r\nwRkMvfOrH/TvEBygYHSQZFtiaaLJy7m4d2V4iNFmTg5eAkja+UUuLb4vKSpz\r\nDxib15f3YoHtbbDDAFwk4v/sbDucuMvHPHs2I1xfnpxL/kSA4WeoZS2o6LDZ\r\nykD66Oin2fMT6urt6tC2rTdRQ6lG3btAIH3xpkgw5sJtIQx32741XpshyYFO\r\nh/0j1aY4IAiitQ18ukHb3GklGXPM92ZzaDOGwSL3n2oEDNCdHJ4FhkHcfbwF\r\neAmb823N/vK7IH+NCweadt5hJGDwQpoWSWbyXeA/f/qW+DQ4NVKlUWuvhBZW\r\nZEEQQHGAuZr2YMytQMtWrYZPUH31ebQ5vMm6oYL6J449Pg7Jkt+2uipT8FRa\r\nZN3lr724XvcvMTmcBmpqdoNqK6NUM/oC0/FKHm3xrDdVP0j6Cpfdf38G2l/F\r\napZTyf3KSig/TPB6tdLdP1FxPUsgGjDWkWfd7OPJnBp65CCP5iDmHA5mOVw8\r\n96+84iQmfw8j7SiDVdpYVkZuHZU/J1FgxD8=\r\n=rpZb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.9f17ff2cb.0","@material/animation":"15.0.0-canary.9f17ff2cb.0","@material/focus-ring":"15.0.0-canary.9f17ff2cb.0","@material/touch-target":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9f17ff2cb.0_1663783726178_0.15085277843986145","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/checkbox","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0f2cc0c0172bfa936606f9f20e0f7c31c1b003","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d3344c16f.0.tgz","fileCount":42,"integrity":"sha512-TY51FpmNw4lA92QmktmNpwy10t1zSQYYaA+QzW1rZ+fHIv5nk30DUmKXuhiAjPytuDsoMcgWP+coQ5vVurk77A==","signatures":[{"sig":"MEYCIQD+scmW59q4t+qkxOsHsK1YEdQ0STY02PTbtSz3h3oo3AIhALXNfmD1aRDrogiXmWQ7u9LovJooOsVeTA5yYpm2j8K3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCnmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+nw//e2H1iWzDcv3BFnt11c5JRYmoVFRrqnlhssAVvcRRelD4phvW\r\nsx+JXfZFORKaTNdEZC/VNwzlehV/WTr1snRbgFkWZAzRURYMxf3FrM0o92rg\r\nPGXNLKgQJQkVJSvNDXCoLMtFfEoI1jWuGMIpNZ91TT+0NjmjI10ZhgrwEHQH\r\nxYg5pXrxRCesjXqBXPHiioFVshYvLFb20Qf2J/WhqrI3m0xW6kDklWyH/72C\r\nfMEI6ssDxmmK6bxf9uuU+hMboF1h41DhLE0Y7JHQoWXAPwmHVhOuzAMq+ylL\r\npIYBnue2LsYk79XKl8Dhb2Z4T7B4z6ygW4GQa5qXUJU53FNQjd+b1Muvb+qR\r\nQ2Rf2vD56qO+lcgXxXVsb1SaBkUAJMTmKrcTAWnrJtsHTAXSgnREJ6aFVrMl\r\nCHSDn45E/b3AuZhNCMMsIzWMKh/NoU8LHF5U4dQhzW8olmsZuMma7xSE3V9m\r\nep1aUvL3Lw5Yb0Luucn4b5Fyz4FdTh0zEC5ZxzbFa1aR8fZU9mI5tuIY/Op+\r\ndj8055irgT7J9KXsqPlwpPgr2xOEycqJ3xxQBRmkVqjWA41fw5KHf7iz5EBv\r\n2C3bAhpLUdUtESSjX7aK59ZcwczIZwYepqpXmSyH6pZcjJ+sjKIiwfWTwrQ3\r\n7lbIJ0ORjh3G8+HCmIxBIzEAN0dssOh8FQU=\r\n=xrfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/focus-ring":"15.0.0-canary.d3344c16f.0","@material/touch-target":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d3344c16f.0_1663838693700_0.41174986865990215","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/checkbox","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"589caf1394d772827ef06df770be4a26c2f36f02","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.94f20ccb8.0.tgz","fileCount":42,"integrity":"sha512-sJEun6DUp7RbFi8AYJPAbln1fBHGLPw7qvBdISRyUGK1bd22BerH+rL+G9UUM1choIPGHLBIZy3BZgrXHV5PDQ==","signatures":[{"sig":"MEQCICk3sKyL2X6CmsdhFPZ9tCaXq061BVuTlAsmJIRO0LH2AiBSkeyV/T9WvHK0QqBuapitSh6xgybAre/YZeg+u9yiuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqogw//QvWip/eNzWMuQ1S8eG0MJNfi6P2/HWik2sd7fGRO/kZ+qGPx\r\ny7ey2IiTwjIVnJ/HWiMEyLZ5n4S6+cefgMKIcJeJk6uQJ5a4+cw+uoM6Vd5K\r\nTD9/Q+EXg52vIpfGfZNxZ3AWfI/Dq3vG/vB0lqyOOf0mI/9YGgw5P8+wyDSr\r\nMTdBwc3nzYVcXfU0oBj6GnT9v7aqlui++y/vk8wUtjoH8B2+DMBJzug55EAV\r\nGS4YGzTIO5ROR+NsknDC5ZxbE9FBAuTb9C1TM035A8t29i3qH8hew5kJjtnI\r\nzzKsim7Wb3x8oXzxN8bQPsajudmGPIMXHOb5SKvsITWQfK+M39PHBoT74GOQ\r\nvi6WmSEXG5Ju/FXCiJTen/tEX136taY+O1gul540VNDRDXYUYc+Yji1LiHQ9\r\nQ1T/AiCR6s7Rytb81sQm+J4+4pUYJCN2RykZTfqxLGjINIzCrkrgfcjTyDBl\r\nehwvbin/w/nYyK0svwikaPiz9rNX8KaLR7qonIXi6Tt6TYW2iggoHRcvrmxw\r\n0CNy1VLKoJq8m3GsTMzTjizHt9Sj/RBlDDQ7l8CgaXlJ0Ox8sUHNSQhaEc29\r\nwgfX3qcWMz0zQ/1sLWYUncy+S9aP0GU8RQqxhu6jSCvYVrs7HLTRasbaJR6Y\r\nFWJBzf6mO/cLjgbNxJ/JJNrP1zKeDDQsPvY=\r\n=sscL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/focus-ring":"15.0.0-canary.94f20ccb8.0","@material/touch-target":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.94f20ccb8.0_1663879688965_0.6498731726403915","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/checkbox","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e254b1eae501b5473b9419174a5bfe55c1553b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":42,"integrity":"sha512-l665+cmFvZuDmrU6ZhXXbJfVJZpgrcvUz2DtvlmlPNAAM3ziyDo9RvbmMXSED4kG+4LmGUAePvx2YJSW0J10uQ==","signatures":[{"sig":"MEUCIQCiGfjC3R6YBpsKgKkeaNB9wfG7fnjPFo9VtXomHwDaKAIgX1F4me1dAEfUr6R/4YUM3sp1VYK9IOGcUbDz7XvILx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcvvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryWg//anp59vF+EDzY65DYO0vIqeIiPxUqahxUonrtW0ZX9Lf0H99x\r\n0RcJ0Ks3BVFR1lGkoMeYTC5zDo1fhk55m6bYNa8OtCjNMMQJ6NYwwYa/0Qfq\r\nuosg/IimjL4VlhrBnb25cBUZVSEefR2jHDH5rwhCmLaYX47FjVJvM3fhPsT2\r\nTBWt+nV9gSxpeAQ58u5QXjd4cSqdU0e8UL3Y1sK4fJBEOKgyYbLikaQrY+yS\r\nGulqxYKS/od1ot52ryN/T2uTWEQkYyitulMmOUCWpzTyCtAaRTwX11PRtmHQ\r\nTUfEaGl8yuG9LRq+c/nluxKIHlDF6DHmDUm/SIAE8ohZ6viSO7VHX+g1BoSM\r\neGontCFUo8kvieBWA54pXliPSPlwhrxb7z4y2+gxSB8kvXRbTi1HpefMH+nG\r\nsbiMAj0BmsUuVtaFhaoEnz4huh9fTUhwjPAFDufEIho4F8M/vND05FyukRBz\r\nwPraZK6tRHLKEUHrps+t6fsZVEAgPZyBt8e80R5anYICW94NPF5R7KkbH1Gy\r\njeVKPiKLj1LmwgtaSsJCHhfvhYibFOfAQWkRmcQ/QHbCD5Sg4tcZ7iS8Xw0O\r\n/ZMe35o8TxUXoAU6wZHyMwIz+8PFaoX0rcDm6OfjqOkBGznWvDHjptc2mpCs\r\nkj1Qsj7sAi5X1DLrkdiuRkFiffYvk425IoQ=\r\n=E0WV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/focus-ring":"15.0.0-canary.81e4cb7b2.0","@material/touch-target":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.81e4cb7b2.0_1663945710728_0.24100019148281793","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/checkbox","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96554d5adca6330bd993d35551b7701737afe47f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.aa85f9413.0.tgz","fileCount":42,"integrity":"sha512-wrrB6Da+4zwZ1aYabx2QA1ymGf0NyjtBrMFK3ohi8Xaett4OzQ4dlBI3inwJotFsFzyoi9HReY+I20vhWCpuyw==","signatures":[{"sig":"MEUCIQDia1NQSKGhYr9NKB/b5GUrXSqZAQGp8WX5itCEoSt5cAIgHCTkvPWOUxKcgxVNjgLNFn8vaq0Yy6ZBjaNRJZcLIx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3DA//bnBF8x3k1JteWxF5ztRHdodOd1aCPqmfizOkqL4qv2sNxizH\r\n0/KvL5lIHY5F85PcAeRDDZH+u4b8nikWi/v5v6vJJCRWjd3U76keAsghqFFq\r\ni/CWYJTBASHnjyxV5Kg9336CTZUX9/srE4Jt1PSJZLgjDTKBRquggrso/+Gg\r\nEkaLH+aNSmA8oWUf3bmAZo3Avtcld22N4k75UorahrhMwUwtCZ0JeB0i1ipl\r\n4GVMmnRsNXdQMEzEt7V+iZMzvsXQbV1RMSrNMhFi/4smK3htpC/OOn1sKKID\r\nRbi3MhUxdg/2Da53NyiaK8gkC+LCgT7unevomnYDibm+4rxOpT9jEo7MR0Hn\r\n6fVfFTHp8weca6I4vpWPkdMWjLO3yFoTD52SOuRTS9g6Y1Nq0fYhLa4nha89\r\nFZiKGpRfkA/4HmGUDIpa+FSYcpG7O2rs/TnnyGJ+5gJu2vGVO2kPwfNI4tL2\r\n+exhPAMkmRSuySt33qam/cS7PkdbARDpUlaCQuokYhUjeuM8u0TUUqzEdb1C\r\ni40AkczLzAVhufLGbW4m46UCFRuRfdBosMfvlF88p5mafLLnUDyKqsEi97zS\r\nlV8Zel0uVwKLLYzWsbPcL22h3f91x82K8Z95X2dyHfG89lss6Gwqrked+p/u\r\nKK4RaOiA6MqzkdqfMkROT+0LtSJp4uM58p0=\r\n=sgvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/focus-ring":"15.0.0-canary.aa85f9413.0","@material/touch-target":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.aa85f9413.0_1664215004342_0.6975059140967435","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/checkbox","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7134a7752.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d771ef17d5cc98cb92b7c3ad4b2e16e89f5e7b0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7134a7752.0.tgz","fileCount":42,"integrity":"sha512-5wFXKOayiXRVpPk6Cwgxx3eKGPSidn3g9ts40iRLjSZ8HZhHA2XfMrj3hRbCE7FfkRO4Tu7foPRndvk/BKE9zQ==","signatures":[{"sig":"MEQCICxm5Z6z1whIATXOwBvzANIqR3iq5xjyMCmAJsk26xHtAiB5muySV2AW36mmopRJQbzX8uwzXLxyFYkQXHgwriVAmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiBlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiRA//coLf2yUDAvTJ7vKXDdaWwf4HKE0Sp42Hm+WhKTeeZoK1AKr5\r\nyby7hjcyJ7MMNhDCgLnAd/9lFHYMb4D3Pth74kJZCDwL6p9FrF2Kn5QvpOt5\r\n89qYfkr/YbD5OqZGw1YXZgWRXa/LAqkF+hHXuoQYaw6+CfJqdX/B9u6jftu1\r\n2YD0hPRmIcPvvACqOPYCfy1QbDC0LNAaNIGJLcm+1E1VJubPf7LiH9g1mXPy\r\n4+xhzb2BOU/jlGmPlmIceQSp+++yysubkg0QBQyGaqko/kblDro2f+iEWKa7\r\na1YLjdt9uWnQoWuYkFAxvias0O/27egWiq/y04d9IsfVebNFapdh8Wx/vg4B\r\n9N3ltyyk7Tf3jmD+mrCZ6x5j88fdd9mm9PS9b3bsUzHWtleGEt5q/9sHsG06\r\nmqA3xFz/xbncGtc6ozTIX5/5kyXryedt7m4bt0wBUjSVKioq1IV1fGJewMpe\r\nsSBP5Fk4Nj8Q1vePE4us3Runk4Y+Ne8mslbME6Ln6GgL/OGikpxtBgagzHPv\r\nJqt4shxE2FWAv7f07P25L/vRU1h5nEpXJoKrA8lhXwpNa2QSoNcVDCrA3sZ3\r\noqQqKenKROGrXSXiy2p4S62MSmgYEgpA912pkB0PKrGAv5AsZxp1S2/ONuFS\r\nOT8XINY+wOsOhC8L1fqnK4JGw4Tn39uE+O4=\r\n=3z+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/focus-ring":"15.0.0-canary.7134a7752.0","@material/touch-target":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7134a7752.0_1664229476968_0.3573988057437627","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/checkbox","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03be561f948574da6df741ac9815f35c0baafd3b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.70b8ac16e.0.tgz","fileCount":42,"integrity":"sha512-1Lf/Hi5hEZlAc+nVzwYc240CBWT5ei84bajKFprrH4fBbdAJPLuYY/pJpG2axUR+622SDbwORoTc4sQxUQbHLw==","signatures":[{"sig":"MEUCIDn0v/jXiUroDR9UdT/EIjAvB85zSLM5jQVQbrcHYKgmAiEA0lyjRoJRNCOQrcaQ9te/pCvayCueJ40nivKbl+uOfaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3z4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKRA//aotagiMv/RXbKTZ1A7j5iEqhA0ZiS7jwbGCd6WkpvwsuOOyE\r\n3IZ4sVGV1W4uwVtnWN255+f2PrGfhp8+1p+TjhyYGXxyTd+jISUvb/mATZYm\r\nT6k0N5LNZxdKxlCSiwkuPgLco+ERVyMDapOjrAuRspxvoiSLgT6ezyAUFIHT\r\nlWUmF1jxwVHwzm4VnVqrrMa9++JR9oNU9t3XUFgSAN97e+3YvHiImAiWTW/C\r\npAAJUgspxC5izCiiYTFRHmE6fnSsSRkFQYYekRGThGAsQRrr60uoJ1kEOSVA\r\ni8ySloZPf1mTuOK4+N3uLbW8R4vCO+yTf7Oe8zvU63TqhtTfMwnB2OeHvvI1\r\nNxI/G1MP9AUo2jj0gvpe+YgJPrPCfHSt95SBiG7O3tLs+geQ4dhSEmKdATGt\r\nlkCaQFbR0Je4TbEjFOBjCIpXu6xDRntLHs3J64sPzNefnMKnfpGmrXV/7o5l\r\n2Zn980NrWMLq5n5hTWyGMZEZXIwhaDUmx7QWuHFbjbI/4BoKYZD7dokxkMib\r\ncJ0oiCiWd3HpkVqiUAa2IYUysgXYlRaBgn+PkCX6qJeY4eFs5cYBMtkgfue1\r\nSnPHltoSvN2JoLvpRCay58ODtBZrn9LO9lKg8Hx8vExgVQZW0VRiqvX67+Dg\r\n4WkhfZy6QDQiNra93eyAeyP05QBthQ+8ucA=\r\n=7sq5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/focus-ring":"15.0.0-canary.70b8ac16e.0","@material/touch-target":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.70b8ac16e.0_1664318712396_0.5848403609247221","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/checkbox","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c20d74405.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1dc914f5233655389c4f2d4dcfc94ca7ea8565b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c20d74405.0.tgz","fileCount":42,"integrity":"sha512-rylGBZqwtmkdGuVe5FpmauxNVcMR9KdfWo15EiAjQS5vFm46eA5xRbriUQC+WXMclOHUEtf8GrFuvvinSVvvXw==","signatures":[{"sig":"MEUCIQDxUaudXw6FbcGFEouNjFy1y0UNr4B+Y4xrmJFIhn5YDAIgLGx9qu3Z5JLwy0bJAkseDhbjIWPo5Auf7qxqiwGucWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4fWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYfxAAgO5s0FtSXzEl52Xi65oe6rDRLLfNjkHc08TkFmn4R/rLGxxE\r\nBI07XIDE+t5lgwBsGIPFYQ/je3bu49GknOuz70qbkTwsOOvBdVBp8s6v6pvK\r\n6CVbgrJOp83oCtA6xS32PbgqFNBng4qi/XsgMt/MB4R9U3WHtJKPfzW5jRiN\r\n5/cOpnnY2HyGKAO6i6vCe2fddUvGBQjgVT9aJh1ptya8QUNkyhmeeaVYEfQO\r\nYb/vIG4mzd26QPZKywFQoAfJwcPpoWoauLqUG1yBWmDLGZIn9pQyj3B19IX4\r\nU60RjgXwL/Jeuy9X4IHtf+zJjDNcIFVWTGF0mQIgzWzIDRM2AjevKEI6cOKX\r\nLcRmoFm0MsmlER6RejgrWHSZQM2x5NSx+0a+XsAfP90vQJugnviEymyD1/2G\r\n6EL9jwqzT1ytYyPvqPDQWZaq3gj+FW3tLKyTHVMtN5onf6qT1bZ9HrOdN46x\r\nFgYNzbp3RQZ80m2gIgJMvkug4v9oLs1lXFcdp8eMXq9tDKchQVUja5UX26oC\r\ncADE9t4/pNelSLvqOb5flXWsCEiwxYsHxdathROaHPQvS+7i8vxM0GW5JlAG\r\nViVNb4Yc+8bjG+txrES/VC3AgRIUXmFvnzhG8lL/wrS1xgSCXmvQEVc2oJMx\r\ndZ3dUVhbnMzZqLXupmr6dkvd1D1sdFiW64k=\r\n=OEIY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/focus-ring":"15.0.0-canary.c20d74405.0","@material/touch-target":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c20d74405.0_1664321493791_0.9428099323598818","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/checkbox","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ec0e7bd1b2432dd56df0ec6f0bcf8199668c86b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f033fc8d1.0.tgz","fileCount":42,"integrity":"sha512-76Q1+VaenezJz7bnFK80qs9ZkePQ9E+1mj8kHWPp9m6LKWPdlgK//CIzwTxcLviQdAlWvKhFehnjQF8mk6u/lg==","signatures":[{"sig":"MEUCICbr3nClqzEQK+oroMqYZGdiG55c7ioPXdvX8RMvpOyoAiEA9hCRcOjEXMzDtvhjwAdNz+JgpCw5yofvJfICnjzFD/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM433ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUtw//YM78BT3s6WMTo+W3ddNEMDFUEpwSksfpGSfZVb5cbRRwpnGO\r\nZ6/NVhqf4rBiigXvffSMYF/OKTlXnA6ShxYS64ocPxworOFT38nYUtBnE/4U\r\nWf1eNkj035mT66GFfO0S5aCNg0arAG7tFw5PzCZh5s52Oa0zUkMauh+w/3+3\r\n0ang0lkbhHTyt/5Zr7/f27jpuPReHbikgMM0/YpvE3rsFWJIKhl389LMoM74\r\nutlP//iUhVh7k8UKOuew84ScuQukIC8d79V90C7K5wJxs5aSTMULbW9V55TP\r\nxLCks5k+FiTfFbkDKFBFSB1mRM980WKFyDuStkgAQNabXAZHNOl0/Lu6dVlb\r\nLLMC9yyvKlji8HFQyu5KNESs7UKxw+Op6wVKVqmLNa7iYKgScXaCKPPDZXpO\r\nufeVnuP0QxwrjNfO9O6Hx4QIbRi6v0wxMG/LW/0CVKb5LLhQYqoLnUHWu8yT\r\nTvKEd/39rBzHw+qgKw0BGidXkbIeUaQtdtFq6iHox0+2WcK7BJJODvnQRuEk\r\nNHLBzTMCNBh+vSnms9aJ7msf+9n2gffLH+TkesQWbZtCvYd/N+9cL+QgztRB\r\nsMGOcAo7io9PzB7AGY6upoMyu2kKFi9uRmqY1N5RtbQJXOcFOTycseYr2Fal\r\nirPPKHjFgd4RCyL7xqNy02bl3piuzKixoaA=\r\n=BrAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/focus-ring":"15.0.0-canary.f033fc8d1.0","@material/touch-target":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f033fc8d1.0_1664323062863_0.42749351276622694","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/checkbox","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6426cae8e9c48f0cbf095fff9498931fab51476","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8d7ae912a.0.tgz","fileCount":42,"integrity":"sha512-hrrm9KjLEN3GDb7l2pyOUXB6oQUC9QlopDAQlGmBayJlH/HfFZKOMAjYKIgkccfNmS3YLbfcLn8FJL4WT2sGCA==","signatures":[{"sig":"MEYCIQCnmsYGG2IudCuUYGy9pCCZiyZal9z7M+xFBHdSvJ17ZAIhAKlyxzOf6DhFe/vE1kJQ4ywY59Xmgyt8r1G7zQcsNeQX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLng/9G8rV+1RHzWKfbvDOZIExQk1bSEh2AdYqM7QjPAnpYTVmXtej\r\nUQUud7+TDiW2s+12C00oD3h4WQb1WtNNrOn5+4v66+nd5hEHVpPouTxNqbVB\r\nxJEVdhOU7mkF77rih6nH+e5C/iNOpOkpwVRikHNUZ6DHh70M4FmSoSQ9rM0V\r\nXXnsCdpbzWvh46X28/t+h02xNPm4feM3sH58aX/Pam53HBTQ62nPZlBuqaRV\r\nD1eCjEo3MOPElJKXXjr+hGCSmBwT9ilAa4NhqVfoTaiw4Z3bM1Z9Htrx9FVE\r\nnbwR+Y8cUZqTUN3TQRxL29/a/t1mzCBTwpTfw3EVJI9D1cwg/dNpBBy880Hv\r\np4PwGqJI22iNlz2Idpxy8YUgukVkKe5LJLAbQ6jdx53t3IsJN1yNjjjkwIFi\r\nzZzmd54scbgVpr5uPEqB0JqwC0JGH9P2YF2sOax7Qvhq0tGtBI4hQQ7b5sFw\r\nPGWvZfcPzDCsXlvUd/F3UMM+Ao7SgEKkGi2TJ5V3FWSUJmEGbPKre9Yc9X+3\r\n6+IKoaEqgf3W3ocbp9OxSJW41EX4MY0SiqJ8QMWP4qlPqkqMlzlpjNMXHKfo\r\n6rjSRKvRxbpClKzHdIUJ+9TiA9uBpQLPzg4EYl2LBcm1ZwwuA9R0OVOyBubw\r\nl6RFz9JhJR96tsI9bSF5sB1+sy8qlIRoaTI=\r\n=9y72\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/focus-ring":"15.0.0-canary.8d7ae912a.0","@material/touch-target":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8d7ae912a.0_1664351784094_0.0873697632993764","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/checkbox","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.db414b864.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98515df36c84d85b99332720728c1f67a0203609","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.db414b864.0.tgz","fileCount":42,"integrity":"sha512-KAsfyb7iPhgOdQkxpAbgxFPF7mgMYkXXHFxOZTIY/LE8Xni5HM6Hz3XXMFOy88VPCHLjM41tOuH0zLhcEDK/PA==","signatures":[{"sig":"MEUCIHXy8vucoVKSNYeaanTMKS+o7kURbA2/sgY9snDdfOcgAiEAg3vIg9yslyAPLYZE7VF2Bk43oEgw2BeAZM1Te2nM7k8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy2g/9GZPt1aWmK3gdf6wn0/dryjUQKCMdZaV5rFqNOnvj31Lp9BJH\r\nYEchbY+5AsUwNyPRBtctSER1UIWg5aigd9PuzcCmJ9BOZwxqBIk03MGZF0mw\r\ncuijQh2qQeAxNqrRs7pHlpivRjM2YnFJ6bytMou/pZ3NkAvUUzqBoFiZZMBL\r\nC3bg2NJndPFHx8V+OSXfJgvL2GVef4XpSbBncycTyUxXT8c1jiCwvl1wKt4I\r\n/KMkGZZxAcFUXvqk8DiwW4cARGvNGjyZiLL4+RRKQQfrZy16lsdkm4NXbb9y\r\nJXzNcKzZZPl+QO4qYRfrm94QECb4tXURFl2BsK1Jiw/E5/Ln2hP0Xnxja+WI\r\nR1C6LbUIPDJCwwQYZXpZUblRB97i5SIrc5vFOmgRJ5jxipK+1tk+0zh/+COa\r\njLGPuvhKYRgqkPu//3JD99x6MmoOlNK4iwQwJYX1Xxoj0FtapKChoMd7SB8k\r\nTS2JWw3IQMCdas9tm47ig1pNn/qk+tTkYq626gdOz7ZHC9+ll2IBjY3exmac\r\nCqKP2rkLc3lOizmp2qAkBZlixQ5sfD1OPtg/3AcPy9q736LIH039gvTa6n8C\r\nIM5rNS2+pANdGlbFLc9utn7PXkVS9SbcN98ul1PNbdnCoQJdUMuhqkKx61Gu\r\nd7b7lSCnis9DJ/Gg/HTldko5VmaLLlqGLf8=\r\n=WxYj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/focus-ring":"15.0.0-canary.db414b864.0","@material/touch-target":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.db414b864.0_1664376782595_0.9198849802862192","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/checkbox","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df12d660fdb1dbd17fa194748be92e7e4cff61cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.28cc6791f.0.tgz","fileCount":42,"integrity":"sha512-kTH0OYfaCJVhx3DNhQmTSSYO9FlJPq2uE9a1A9uk0HtbIt0yhXr80WOGdjat32QapY/uGolrmx6MUgA2uYv3EA==","signatures":[{"sig":"MEUCIEp+nBce7OLwf7Agnly2ggHMu2oVCD1CUCszmu0Vy8d6AiEA1LIaz1tPwyq2dXiyn49bUIWA7RYd3TezjaZ2VXUGgpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvbw//fDIFZbImXPzagRTyWfuXSthClMGho4S5fMPo45M7oNsGqA4/\r\nDnOeWu5Khm7WOyZ4PtyoYr+YKRL6HPOVMklNCzTQJPWnSbaky3dO9GukHHR2\r\n9106ijtH3cNSDXrny3HlO95P2YjGjqJHGpf0lu9SsYEKp/1YqrzJcPHMQmEp\r\njNqpK3QeH431HBz2nq24w2gfpfO9MpKn/ymknvUmqvZ9zNV8PT/TobCbm52x\r\nWXKcijc0W6jVR2v0iYUD0aS3tXifmZS8/b5TH0KpW5rg1fdGmDUQSJ8bT0oL\r\nBmlfdR3eGAI26k+UWA15DkCC6wBQnfbSgV2so66+JLmbWDjhCVpjTEWvNe8J\r\nz7D3CXufsWeAQDlWJEYsxrMleo2ecJyYik1jzK4561F8XVbe/6lco6bMlCsK\r\nN6YhVOujubUg/wO3QdHruV3/SUoFbkBOygG3mJmPQ4OtFhXeviQGKan0rHSe\r\nOII/pW5Sa+BbZ5bNHSmm9BM9bfO7TpwvIR8DNZ0LmA2Ypo54QGT1Rvh47MWz\r\nAPF4Ny5UgJt1+i1LJLcesWKrGQoMPrGgSqUkaYeD0kGRLaJVq1fynhGNU1/K\r\nc59b0c882mAYmlAog6p5kpT48Tpa9kAmi5hvnxU1D1cBVCtCerLKOkM7AvaJ\r\nUvLa5IAGj0/Z6Ats8+w1jNKCxXMkRvimNaQ=\r\n=v6G4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/focus-ring":"15.0.0-canary.28cc6791f.0","@material/touch-target":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.28cc6791f.0_1664388436967_0.3630180875014062","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/checkbox","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa9d4e9b987c135b621702b1e573c6527d11b1ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a515a2d18.0.tgz","fileCount":42,"integrity":"sha512-DWHhgZHDDpk2BVWB4TU/BUMdOZd4If3SketJRjJ3tJqJhUSGbuA5HnOaoveejBIFmCR8LgTQh4Oht7lGvmZcAw==","signatures":[{"sig":"MEYCIQDDlngufF6rKRzs5nnCRPWIhqMrCM0tEEW0HO7F5+5WhwIhAPzlI2MeJB5YW+5EMKgrMOwZFjvnaopxZ1KblRwu/tKj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq++w/+LbQa5pqujQLLNVx4ranF9lriMuBJOIp6f3OzLuJB9eLn+6os\r\nuItD1mpWAhFyMV2JAJu5fcUTLpKvo3oo5e+fE57HPOw6eEH4iuLTQeiXJZva\r\nwMD3GLCf9HD11XcOdz+unuVlIEgNSfJHQB7TSSRsTD3KhYi257ST7AJhbEQr\r\norNO4/COnZQX4ea1nx8VSFwtoWSDYRZBQbGdxlHfneoHTC5UScYZkkxDzKu3\r\nQxhGOWryCgMz74TEkBk8r/zoyliwesbOC3XILauFvM1ExaZjgVcTDvtGVARh\r\ngmnzgCkZXuYqJ6Yb319e+3Jsr5RTgtP8Dl4awI5Y4F20qEGze8yOpBTLhAPQ\r\nH8bfxdQpOIazICgrQ4/cKOwPFcOcKKTMJ1Sxj6ktG35iGYBKFr50QcSUIfSg\r\njzlmrBXMVJ+yUciGHnALvUZgHlb8FptFDlbQ7XHcPoDtnMQM8IzsjsVGAzzD\r\nerL2XlZMsHlHdNL25/lGupcAmYFdyBsSWONd6cYthJ1BvpIMpd+mANSKaRd1\r\n4M4D2AmrtsLSDsO8yJx2R94xGui6CpMCytU3YXiTj0uLZuKjphL+EyMCuRqc\r\n5ksFZhioGc64fXQpDvPZw2u/QyQKR+OzYhUf4PmEWOxvNYiCYUiHavO+XYLA\r\nzI0JD/6X6cwU+quKr4J8SJ6GE9Tsfgi66as=\r\n=6/dz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/focus-ring":"15.0.0-canary.a515a2d18.0","@material/touch-target":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a515a2d18.0_1664391366414_0.7938054701941595","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/checkbox","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ce9523167.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60671227e6305de464737c92f9aa451fc5960953","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ce9523167.0.tgz","fileCount":42,"integrity":"sha512-nu1k7W8JWL+5we28umcYbj727j7Eu007J4XRDSYBr90lABntstyu0xyZSBV6zbCeYODf0qF4CbzpNEP5MxU76Q==","signatures":[{"sig":"MEUCIAbrh7ByuskcEsnQEgJRjeAO1PPwxxo0E+apLdwNKLVVAiEAj6He5khPUKIadCw+/lrr6vgnKIx1+QqueNI9yvlGYPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXGBAAnG3WZxfwXYvBUT/3Uhzs2gXVzNwHYYqSsJL5uqv35TVKW7YK\r\nSDo/VLNBxtp54cKyochkGVopWi6JbA6UbDke0DqcpoZW9NWrqhSIaPxaXk9W\r\nCNHrIxf4F6ZfmZoaIR5DvEnoiuc1rdnyfMSQF3aOKIDZm2E4PRUd23oUhcHL\r\nPIXVKnmQksh22qwPA8uRTXV3hMjP25q4FloQy64eTILg3a1vJ0kzPu24ASlI\r\nG1OVGVNIO7dZGdWpbi1pO0Uv2/ErersrxIkKKbZxLAMaODjzmtY8nqABfqeb\r\nGvzYNkING+TnDRyEGg1gpxJlYXuFmoaorv1SQWVCqQqtTZ0uiUXrNm7Njr3P\r\nW9sm0C8laGpdSqy3N714KifF95I6akgGoXFCYj4lOTTDkjcNsdoPi0B0KN/L\r\nvyMT/lLa0OODvN0OCI/D1tneVBs0bsBe19N9RGQF8QODZzHzsmPkDee2hJxy\r\nPbILb8MpGdtet/ueVTEJmXVExRRcC4SYIfV2TCqjm8CCUfAF/sb4qnDiJKwn\r\nQauYrv2jsbjN1Uu9s9k5pm+KAX7/DEXy8nbUjbRvttJJvgSMnlhKo5c4depq\r\nUprN++8137LWIXWJu1dVv0t1cRzh8uMUkhuNFBeLII4Ory0ISyleZXE/4x8z\r\nsC9B0Xr9BtE2hpaUsjHuRPd0HUhcDL+dokE=\r\n=JWX7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/focus-ring":"15.0.0-canary.ce9523167.0","@material/touch-target":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ce9523167.0_1664483491786_0.22869717305305293","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/checkbox","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11331a9a61c7a5b4602b62817a333bdfb515abbc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b2310f7dc.0.tgz","fileCount":42,"integrity":"sha512-DQLSFYEi0A/odQG1WUammahmIfJ3VSJHIXAnPeu4uaeLXR+Z/3OG1is6z9wZUlX6NzKDAlQBs1IOfqHX0MWc6A==","signatures":[{"sig":"MEUCIQDnBoH6dR4Jh/Dd3/7gOiiOo6bN5u3rdITrCVJqWBnsTQIgECaPJ5FPQT8tYhyja2haeF2lBn1CNTeGkH73yKb+3Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3FA//YiIrmNK1l4Zx29K6H7XKK7cgIRRvvfRYP04GlKdbhNNgrm6I\r\nuH29OpYXlQndAP7N1AU8humQtnP0jsoNUjb7DYtSD4cbissXDlOo3Jfg9F4C\r\nY4kn8vRBAPsnyvNFpxVkSTjlVFSWcydIDAx8Tx1OfmWlF0D/W4QBKt4jOEd+\r\ntg2tKTI6mpcv0kzPR4pZGdpkEClSHHrvRiuK1+iWp8eHI8ODv9eMgIywX6gP\r\naAVR1mvNUzaGJ7A29a6XoFymSyuTYJ2wODqIydPVZJmBXYzM01b+bb3iHgYV\r\nV5/GkjtVWA7ZTgwpQBXILk5LWg5RBjkshKRxRm3YWke0zHLw+NHxMBXtsxXS\r\nFdlIEsInW7GqLRk0raxBy0lDzjginwaySlExBWjD4HeFHk0O8vgIPFKg64bX\r\nBkuELfd4xNTWbMt60Wm5OxZy0c1Tc3tw1cg9vgUuDMPx21g+RKUsD4iiZMbD\r\nbCXAT8mGWXIVUCqD/LPJuOUmlWMnJ7ip6pF3TZ2T8B6wUhvPtChqaFH/iOHV\r\nuqsnw9UmbkBkKCLFGvqS83Z7gEiBEihWGKNvKMi5yFXK74ASeMTvSJJ5r4wh\r\nNT8M4TcaScpmD7VdQ7UCBEROCxE/7/A5ODr8AedoP+5/HJ0jvOMW6mo7Z50R\r\nBkJdjfuJjXvhWR3GFr6udrGHfuADt01Y5Qc=\r\n=lSdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/focus-ring":"15.0.0-canary.b2310f7dc.0","@material/touch-target":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b2310f7dc.0_1664496848614_0.29035508707354674","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/checkbox","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a44241e54.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56220c5d23c5f5928d68b5cc442eed766c87d92c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a44241e54.0.tgz","fileCount":42,"integrity":"sha512-yJ7KQLSUlhsPhQ0ALBdnu6fjjlqPIfL41GCkz0W/bxhvYX2XqThlAfK55wrPqljoynOMV9vQKALsqr5wTX/CSw==","signatures":[{"sig":"MEUCIFtHCWwVyqLTMEpuljqreH7nantc2XJMNL1HD4++KQRNAiEAvcryDbPxk5tdCGi3xVqprM8oyMpgi0R7g/ZDHzfEoSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkxg//Qph/dFTjn+D9jEvE7GTvOBQFv5apPO/lwumFaYpqfNuoSZKq\r\nMW9ZM5za5cgCoFUid/2XnaUf6ITRVkEJEC8Vd7GUzujOfx+X29DZJ9PcssJc\r\nrGQZbyl9pQTHMgsNwdiUd0e8WgEFvHxkAIl1C/q3J2G6FyCRE6f4qsbDELCb\r\nhSG8u4ryXf8vQo+fTsP7OO+OitItnTyBEgj9ujuX98wxQiV30az3bQbRGb/8\r\nozGOfNuLwl0tAiRwaAPZ7PNNVGB8S0s4PnyimFHGNEvSkRhdKZnEf3FsCp8A\r\nr5aNfgVXV8Qd9uVKqo+kofa598+db39gIfSghnkhwCqNttHOx0fmyq0vLWlf\r\njauqO4x9nKevF1Rj/GuG0/6HDJbWovP/SBSfb1m15A+9YUFbf+o8uPYMprsf\r\nVYFKbDTS059MUHyKluJyoyjLvN8rpjgehevxgQj3rEdUMaT6UnaRpvxR2MKm\r\niT9UTIS+gzKwyGlEJ6EqcDqcqbz08+9fLWKwOKK9m67ux+6bxG4TvHatjvai\r\ndTjaFzLXLfIgVgL5UKbkh+49TcMB2ci8kVC4DwL9U2nBMkEOVlbUGXXliPH6\r\nxpuMpC0SuZ4AlEKJQBTbxd7bS+XZ+jtXOgZzVsXd2pElaYfpCVp1WWQqDKFB\r\n7rd5U9ZAojWBBX6L/b8B9XAD9mLdxcRKTSY=\r\n=N5o9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/focus-ring":"15.0.0-canary.a44241e54.0","@material/touch-target":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a44241e54.0_1664526084866_0.9913086326693799","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/checkbox","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be2f85fadc521737fd0e8488bfae9a16d13a29b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0ce81e115.0.tgz","fileCount":42,"integrity":"sha512-B75MG2l6vUnht49LDy9JtNyDvoKvnRimTi4ppYJ1DcmdrlcvGz2JybekMMPBWlJ5b9rEptmnY7kv3ddP6fDT0g==","signatures":[{"sig":"MEYCIQDIxt+dasN7BhQsg4JczsAOAO05rFuwyNF17cjl9YZunAIhANU4Jt1jrafA1yVdU8jAc/YD9cOi4OOgO3c7N0HnfD/e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzL1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdghAAgygJPBlClwXb5Qi9uqP0KnBvOOPZoJHQEEML5GgIy0W2DZ5L\r\njqMYo1mNfjfj1OE5qvLRquuSs1dGJkaYdjdKJGKgPEgFBjHzZxv07qBpwtCz\r\nNnZninJR2AvZkoTTcRR8wGbestKTY5Q6uPo340oGHbHh3xzT5HNeOd/CC0CJ\r\nlDNb/F3Y6Tfhu5mD4ZhWtMypFmsreXuSd2z0DM66glmb6gSY84LV3xZRIcYV\r\nLgslkBP7a9WZqIaADe7PdZqTHHip7hOcnjcR2ickC6mPEP+BM5OnkLOwrCff\r\nuchBCEz97ZuUJMPgqO/iRSkPsFv6XgppzQz2RnVozcoSSRkUT7QOLsQqj4K8\r\n/ceX7CCn1TdBKM6vwif+Ob05ojlv4eUBjQmw9UaGV19p9+JonwIdCLt5665f\r\n2UK0CBM4TXYW1HOZn8Q6cUoX7MgmgXuiuYOspFCsZYIOfr6pGCivlSB7tDw+\r\nq5yLPOiPjE1ORc6ajxtUT7DSXkapuBarprdGwEnrs3zQVdjagLM9Xihs2ktR\r\n1gOEVbgRZ76JuqxG6JDi6XL2wuthWsWrfgmxgQ/IaO9AWELridLJgWOlUAU+\r\nh7rsDTjprZCS60wnOZOFp4N4wF9kkCYBObw/NEYedyzLlANRLLz2xDfSoj5x\r\njITiOSFiNIcq0tyiP5D/9x0KTFVTUCbaJtU=\r\n=TKEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/focus-ring":"15.0.0-canary.0ce81e115.0","@material/touch-target":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0ce81e115.0_1664561909486_0.7323612281763388","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/checkbox","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e940786f1255855f807db7b3ff4dad8bf598f1b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":42,"integrity":"sha512-mmlC8zONRUHK3PBzaCDbnTKOcvGImAmNgGoAjYtNlk6bqxzMBFP8anR2fFuMNbyEZWPWaztn3BTgVevPNb0sfw==","signatures":[{"sig":"MEYCIQCXExInsIiRmLRcRd3QHYIkkiBzMQfq0IcyF52986PfTwIhANPhHJMjvZ+hQaHcz6KF0OIGT3bon0gUjKq8JGabB8iT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGssACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoaQ//bnklTN4p1jVNQ0Fkoa7AK4z0kY+C2kR5rdkoMwUw5qpAEWRB\r\nKZMwMRL8rOWYTFziMLSNgrEzY1evlGkQo/w6puyTLGA3q/H783EFbXqFNC8S\r\nsq+boS2S2enifsWNkJLEq+qyrcfsZe0KHa+UOafNeiL8kwmDIjFRM0e8q1TW\r\nCnsTyKPkQKaIRb+/D0yupW2L9oUMHIKOBLiBNOzjpgNeGyMbFLlT+QYHDQKu\r\n8G3FWG84YQi/feEXjUPPAg4YItyHtOZOrbrx/toEr/RY5nK9tL1c43H1AsFR\r\nah+/VZSsVJzPlN6/rIWK3ZFYNoNmUgvHUcOg8dA5YewFVVxD7DlWq5iFIMac\r\ne342k3hKH59dz24LcsOqTQR4BeNDNGYjPL/sG4jQalCU6+zp9EYsdHIt1CJ2\r\nA2Fyeh10sG8bKYwu90rGwdDW1XHO3UsGrhdaWoiOU9dVUWb+4UJZGwjfYUO1\r\nvZ+o3piaiPczBNzPWhdaPybHD+TURMrMTftXql2wE9yzkPSHKvWCIHbwIEtd\r\na4noBO3SF1TrfYA1Ir9tARVZ5e0o6e/XghGuWxNZLOdjF0twEjUR4SUR2vPm\r\n1V+SoWUxJeshgQn/7ueHyrHNZwhRKAiPj96wl17UjZh7yGBO5uf8vKTCF8iJ\r\nNDU+ju1z1UaUhNBCqlUZxsCe9x9fe1RE0Zw=\r\n=Bdvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/focus-ring":"15.0.0-canary.3cc30f6ad.0","@material/touch-target":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3cc30f6ad.0_1664903979871_0.7357073761380357","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/checkbox","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5ccae1911bcb32db4957bf7b08906e806301d9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d9cf98e60.0.tgz","fileCount":42,"integrity":"sha512-T5STvIcP6b3BYNtEnT2wB5NjNiYqyJzfBWj4gLJdCyqZQX1hdrsJooRX4F8omgDFKjjJ6vTjFocrymQxVb4ShA==","signatures":[{"sig":"MEUCIH95KgcL/GiDo87+WAFY8uDPwizr2nUVaCzcWYQDDasXAiEApy/F1v3iMoPV6+akbazYMELbNHq4gFPJCiwY/6koaaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIOiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeDg/9Gi3WBiXvNFHe8L3XI8j9lwuD+HLJVMl8sj2JccBS/bHK5awl\r\nv5Nz+Rvbc6rMne1TT1DhZe8iiRvURQlcXz3Kws55RC7F1C9cfd17qTmyhypa\r\ntaQrJJISjXJ/p0AS6uTOVvgUa+do2ex3f1BklAI/5z0QOxWd6772LhvsEBzk\r\nUkDo6PITNHSxCOXXjK3YbUWENkZ8tEXEJIuQ95n6YJq8qArjnstJvCnsIaFY\r\nycGQeFoNWs5Ike9tiOAXAUXagatB20N1JVommtOanejayB6UYnnBPvrgoS4Z\r\n82QZtfnBdA7zShzelb4Ue3tJqoxP1neK55/XQbvhJdWCvWM4uCYdocfmtet1\r\nrW/QOtftJytGtXpMvVbL2EQgJkZVNpKY8Um3dL/2FlmnlZycD/6I4IrxUuRj\r\n4WtJIZbfrwg/6JBT890kK/p/QxxWhdL+oc2ygzXo5cKls/SFk5iM/k8SGtck\r\nw8ITwPS6fAR5NxK3gdQapBI1wJhU7BgIE8iwcKQiVadg/JZ/OBYxwNTE3ZOS\r\nSURgM2ECzyoqayMsebAggz97+JvMuL+wH7ez05VuVSwCnvnHeKkE/iY5yfjn\r\nHnlltHDyd1Q/C40xkYQ3Udf7FfZzHquwZZxLa3+EDG0DeeHH4AzQQGQPyUNl\r\nbFFZiEFDEzR1n96q+8RHFJ5mCv3nbfh+8d0=\r\n=cT60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/focus-ring":"15.0.0-canary.d9cf98e60.0","@material/touch-target":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d9cf98e60.0_1664910242320_0.9920427306414457","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/checkbox","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d223fe9ba08b6ce178fbd0ffd845115789b5bc7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d71935c8b.0.tgz","fileCount":42,"integrity":"sha512-FIIQnNUUE7w7rSN1Hp17c0IegqPr8GH/aKBbh4b4MuhJFty/ZnqDnYDSP7FtcIaNmDJPBRAjL1r4JJDtQukY5Q==","signatures":[{"sig":"MEYCIQDd6b0uNwZ1AXgOHAX7wxlqy+vJmvLc6AuVav95LM1w/AIhAPlxkb8r3rvWEf5EC0qX8nK6iwOwW2p1VB8mJraMwsvt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlcg//fsX1wwGGYcuIVgWvuqQ2bLpVFRzNbtT87TFnW5J09iB6bmgg\r\ntsyXM8N2QJPI7V5UOltaLzbGxxQUiNeCxSOGfH2dkpfVn4yQ3tlNqqv1YCyo\r\nZF7pUdKZEfmbdUIpvg2d5ru2ErIS3d7SSfjq54BA1WywfjWJjD3RtIKsZG+t\r\n+8rOS8bRp7f2rncVQIeFgoNOjVEntTPuWzuaOrRILGjafKWwpslrDIwe8hJv\r\n2/RmhwkUR/+uxVVwcUyrzC/Ot4IS860DTbDDfX4+qWPRPkOpWaiJnIvKkwhY\r\nKTYBC4ydGCY1dgjWqEW/6DzBZ/KoowPNkBzBLKAyLruLJ8siNeVqWqT+3PQV\r\n258sQF5F6kN9kIEg+XTtg2s2JpALKMa5+eLiZk4FAn0ncx+zYLN6/CMx75ff\r\nmpg0xSSiqnB3HqzbgID3dqUUEdZFOot5vgqP2UM8j2zIElFU5HSnedN1jqi0\r\nGApPxXmummHlf4MKjH0WMN5DtWNksl12hzC36+clnSa46WrjV3y6p/FVvpa2\r\noqg7g++eszdP0nmWT0AtjvtFm8UuT2R9vJ1Gj2SnafzUsMIFT0NlXgyz/xui\r\nee/KPN4qAnL+aIRDQPy/A15q6Qt6KQS18atdgV75qT7nUOTGFRBaUIsHCaNF\r\nCDdkrRZFv102D6fgONRKWScID2ezraQt9vk=\r\n=RwTG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/focus-ring":"15.0.0-canary.d71935c8b.0","@material/touch-target":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d71935c8b.0_1665044110080_0.32340447535963524","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/checkbox","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e73037eb112901edad254640af75bf6a862e746a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.49c56a25d.0.tgz","fileCount":42,"integrity":"sha512-6SU26/VeVVmW2rZ0gsDbCLriPnR/Lu2ERQx7fsfcAWIunL4FRCJ2lpwtNeEx1afek9m1SQefALVkYHyCT/zICg==","signatures":[{"sig":"MEUCIQCtMYwo7p2HrYTHHCZjxNr1uT+DdOo26r3MzSlm9r3oTQIgKnci6Lt6KEhye1TCNUjqU44eiAM4TsZffs5D5l4zE9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRhw/+NlRt4d/JKuHl33RcC5sHqsUzItYCaP6jBw1sVqaz9bfn4Mzs\r\nV5R27bjxEis0SI+xWPoqREDLmoB0kBo47yFpI0dZ5HfxCfShS8bQfStS0Q/h\r\ne3RNd08gYZwuw8Ad+1YzhsadsyFpxhq6evl9Nfa8CIEWxU28qO9zq4L8ssrS\r\nYB3/xNQy807SuTGRmG/vBFpQ24Sd7b2CoalmM0ugVWGpwPDUwjCMXRNI/uL9\r\nFHJSWhmIbkkFJNQTGAVKscPe51P3pPd0RKW/+zoHNTW//kCCDzmz5jKfB6H8\r\n/kDRoJTtV+kXRS89JU1/sIa7uXSyZAq+cpKfofhs5TRY9piA7lnTEyGwi57U\r\n2+/o3p8M9rY+fRgmSd/KlnmYjz/IQQ8Ieh9uJFptGtBUw/5PvHLaYsECH/A7\r\nJLA6ZvV3v8CwIwt5lvcA8gTGt3zMvoMby1pdFen+Y3fl0VpO97vAfTbo6uav\r\n4drFkZ0RWLiBqJ+8KwvuTD1NwHnjcCbHB896zzPAKGnxl9IdNrxvUkPzjfpk\r\nQC0l9aOqApUWzuutQYqHQt2a+6OtX65QfcA6uazL9ewO+bk0ZA3E0BXUQLd1\r\nzu+RZ3tmT/GcqlCbjHX/SpToJt48tOr1SDOczndbBTpwCYz9WrzgITs6oivT\r\n1N5uRBS+1URuZfNBJHst7WtzgcNn6MTVkBA=\r\n=c1Fg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/focus-ring":"15.0.0-canary.49c56a25d.0","@material/touch-target":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.49c56a25d.0_1665082274372_0.7703116870851359","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/checkbox","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.07acddef3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f636abb0f52e690bd1271b8882aa74a91e6e2530","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.07acddef3.0.tgz","fileCount":42,"integrity":"sha512-swGRPV3BkzuZoxB6MRbj6SErRS21kNjFpgQJGngkuEeTvpbc/gDoq8Ix+bTGbkbkVXTQQNtFBlOFpbipWq5Zpg==","signatures":[{"sig":"MEUCIQC+YFxCRiumav2VBN0pz5nkIcc7/b06wIfqBHIwjtD4sAIgcp1XTNiWHtGu4OjzQa330PFNen0WE27HjOJjk/EApwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJw0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCuRAAmuW9jyq7zOOQDcJr5GGt6BP6ILhnQCKOx6iyG0l52dmvPX26\r\ny/AGf+5p2RMZctU6uQ+9/r96532317WhfLQ9aQsCdDfsafs0GbsKBYQXKIR6\r\nvnRPPhRd8skC3MNU/Le3Y2mNdwsUQ48f3t51XMarPSTtYKNvbhsnCdgIzC+p\r\n5d/KSxIv6vs/RFfYLo2wBHO8/gZTVjIKB9tAePcbOlmOhPZtGIPgkhVLrx4V\r\nZkpWoK11Nb4Imfd4xrBVbwHhUsWVhAJqnftiwiaO5EUgqp750WULolAL+wAR\r\niJxXvrmOiyYT3I+MLK/wumsplqFZWiia2upmEide/gErB1ZcMQUi0bw2vkyC\r\njCRNOyjNxr9eAnhz7E2EGmfBCRd+Ay++NpW9Ak40P+kuQOjhQ+Xrxdct+2y8\r\nbOdXoWiDu8MTbMIr/bKFQZtLiFWFlo7EwWFmSBWdt1V+HmnS6cXytJRFWLy3\r\neN2ietJTo1WvEVAfrxhsqORHCcXHUgMtGPUjmFvgf84BluhTq/TxLWg1dUzk\r\nhvlUtblvZ0c/5wRt5xVxH/KRJ7ihzKCojGKcRVtnurDP1qXR9XFmLohOGmn6\r\nzc0hYsf8nh6LYiZSq14RNR/LWdU/g3QXFJczp+slbt+ljKIyxyHqQi7T7Gq5\r\nbKCJ1Ug3lqsLkYerXw9bYr+oTfCTSTStf0M=\r\n=caId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/focus-ring":"15.0.0-canary.07acddef3.0","@material/touch-target":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.07acddef3.0_1665178676530_0.9474103163682268","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/checkbox","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc81fc9bc3fbc2f05abd5950309a7f32faf3926b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":42,"integrity":"sha512-OJPCAjF9/sl1kt1EQQ2bTXuwRU3O+3KcD2KXsbFUwGvtUfcOxJiatIk3vKMWVmUJofTPhRYRbT5nbgJ046FYPQ==","signatures":[{"sig":"MEUCIBoh4Vw/ZM4fCmFUBi1JvA95N5Y5Yj87fV2wtoEzdmylAiEAwfVxCb0hbm84T1Aj77Hk5r5tg4Tv32RMm02yq9t+Ij0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6ZhAAoEwo8/bc5akQ2ucYqA30wDBBdzRPxOErGs++iJRWXQcizzan\r\n2nmwxAVAu2zQxEGjRQ7I8Bhjmmu2MQku/Yjy+yKqVxrNK0pfIuz0orCYDUAg\r\nfVpNScPSOEWNzXf+s5AI4SVLNzJ3sIVLR8bK5+1FUWpV1OCDdARwJhhXp7yP\r\nAhOHoGFZmnmfo/xstr14iGRJZ9EHlxL6LxC4crmYbalDsdaCwaOgciN0ZuZZ\r\nwkrcEqevyTMd1QjjHwPmqVf2nmk2MbQwSN1sl2zJZ8/rZ91HFSe+/oLTMGr1\r\nuc90N2CTiy93RpNyIQ6/6REB5XHaNJZXotS9zoHYKVrk5+fpMNGIGLzjMRD+\r\nMVQDfwNFt6g2yOo/fEJiDR+aiRMX/Uebk9a/aG6eYamSnsWFNriN2wSI358G\r\nzVQ3DyHDF94/U7pKIND5RGR2R71BfBzT5vJvdOmqM9KsWEDdXNc6U5zWR6zm\r\nJrqQa1IFKjyCHCwAKNN+kW6/jjWzsYEllSLrd+Qv4fn0mQ371EokgZF3Fj7V\r\nOJH2MTBI6Lup+qdi7v+yU8qYvwlc4+juBAd0crjpwsgmyEVG4EKN+sSfJNQU\r\nxC/IGanjB2RWPSI3RODzcwXMxwiKPi9X59qLrCQ0FT/Zu1Tmrrs+UsJiBnMa\r\nZBnHKGSSv81qtGsA1qwj7vGsPLjj07O8WCI=\r\n=pFBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/focus-ring":"15.0.0-canary.1c74eb2c0.0","@material/touch-target":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1c74eb2c0.0_1665179737544_0.1853826260116629","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/checkbox","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1199962191f35c5d4ff242f12807ea0d8ce643b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.dadfb713e.0.tgz","fileCount":42,"integrity":"sha512-lleiJh8kwb9ctQWB0ZzCDPlT4/lm9F8E15/wTUgt29ORj1g5WxpZ9vVhNrVL3YBRlHvLO0e0Ew2A+47E23ULLg==","signatures":[{"sig":"MEUCIAYhCXMO4zm0ZAA+QfV6nrEhreoWKuniJEpPyIOhWYiPAiEAom2agd+ZJR7mDTR3dNmamp8zZ17UGz+npRDHptzefxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyFxAAg2IWf6afgVmnTeMB9x8HuG1Nfk1AuwZR8fwV0Yu74F+1HWhY\r\nf3vAQoNfHVpjiX/AexWRc+niDMSDxcVzXR/sO2ZrWe8d09Ft0lET/ekwT3JT\r\n45LeDAWq3p0P41RzA8xU47IcFYHqdv1f6WHwLR6IAqy71q5e81mSZVY4NBIW\r\n3UhjRwnylgBZXL/fSXIyObFj0cRZpjI7DdB9DybW38YIZJ/N7+yeQ/si30hg\r\n5hHe/BM/sNyJOgQ+ctThIecS0aTxEdkO0zV7iJJQsBEbAcfpQg8JDzj3Mzq0\r\naUgVj3QGE5NYdGWiM5+NCQiged5m4ijxR4fFOOu9nevFsS+jyhQg1Vsf0vMn\r\nqX9hNteKK9T+0A046a7UJdNblnmo4d9JbdK9m8PwVX2MFJ5GM/BL7LpdliYC\r\nuumEvXzrrwOxVUgtq2L00fTgXaWB+kKCzHEMCk5pwS1OTJ7BrA/fzTyYhNR2\r\nkrmuCIddjAYUyVUthcExNDb4iRN6b/5jzQ/6cqVXy7znG8zIUTxV7fzvvY60\r\ngjn7OBofA+Hoghwh/nUewHcDKbca06E/vxNzc6gd2P7GV87NgrEzM0JTN2KF\r\nokjXS3f3i4JDomRY3vgGcYe9JnFoPb4ACoC6RsjEi8r8Gd/71pg/c8LmOsWo\r\nHkdn6vwg7K+bZlcjdvfEWtS9NHYATErzfrI=\r\n=bjW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/focus-ring":"15.0.0-canary.dadfb713e.0","@material/touch-target":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.dadfb713e.0_1665205569513_0.9350853744600136","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/checkbox","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"887cedc0f89fb3c8ca1e2b928a2130b051bfbbb8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.395f1ce61.0.tgz","fileCount":42,"integrity":"sha512-08wY+OQtLq5rgsxZ8Q2i9EO7t8P/Jd6iRytTh9x7Lfa5j578JEpjhf002J8NGUXPETWWnxQW7A1rIYOZGOIRHw==","signatures":[{"sig":"MEQCIB+eRziXE8+NbOZ9yQoBJzfC1hZWWRI+/a8rh2yb6z++AiAmzlqZPs35LqAC1AZtxQrkHBnNtJjbevPVLk9iLOpz3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQW6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS8g/9E9FfUbU96kS0iOu+IAqYhrjOFi9mm+a4wV8bUQRsi8e7McMn\r\nePwvN7h++u7bI0kR6H5V9vbJPjmOD7NDcp/UW+Sy1V4pDXY/sTQ+I5adlRUn\r\nzZzc/wDn0CxmnnnoMNLXUGSbHwd7hsNK7Sl/t9EurYfKJQQgW0M5vSwQbK2c\r\nkM+K4dOWMP+MAKjQCoOdBCvEsiM8B40zkvwS1nMl1CAcgSl7dLfph9gXGHOc\r\n2DUzUsxs/LpASQGt9gSvnBzCIb++ottkSzl5jQdeezXf1J9dSjQVKDYkQTC1\r\nWpDZ8SXpNhAFkLMkywk3Gfcf4t6kNxz9apRd++SECihoSzDksH1norMRcrnb\r\no2BnW/Os7ZzFNzHNWeusgK9zx628JUXPmqj8G5Vfr2LxvzIFDA6+6tBPAf/8\r\nlH5tNlbMDCDSFYW9lRX3ze0SgpzVbeT6blU2DbA1g/1epYyekzBG1GrwJqmv\r\nVNrF3zez/luTwpWjXuruMr9PenLpaLDJLG3pWVoNELPQWPu7sM3GefVs04uT\r\nYisdZn1tlJoR3Uo63NLOjJ8XdV8sKfYh0mtiiI3gs01XkVQt/BVtzlWlmudl\r\nUzd4cEv0I0D/e3JTAtI+jxVPGKwQHshR/yIjAUu2Z9xS7SY6EQM2Shg9A1ea\r\nJ8SKzQc27Hliq/HkWob4J2nZdOMP7i6zy0s=\r\n=kpaI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/focus-ring":"15.0.0-canary.395f1ce61.0","@material/touch-target":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.395f1ce61.0_1665205690215_0.9965277435732296","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/checkbox","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"280ee772d067474336a3bb3d3d05fb8280232886","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e741b5c82.0.tgz","fileCount":42,"integrity":"sha512-vbf0Z28cIXTu8UC4pan+4WuuUl+kirLFmmiO4G3rIglDZr2dB4Q3qmDBVp3Wl3sQLCCP6yBtHjvM3+ZeAC/qSw==","signatures":[{"sig":"MEUCIQC4YxiM/K03YJ7dEDeWR4/TSrK9n0EJScV/vAm/zcsGOQIgMcUstmyUwdx6Ifp+la7Q4osjWYCbgdfYkPWlW+6XUSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMpA//eJ0PR31FMJN6G+9cu2R5yS62dSth7EZVvKLbT0rI8bfHmRTM\r\n20ObZVBbweYFWV2lz/+lBWXMsUm/wAWiaL7qEfip4sfg+k0KRDkPpHlD764t\r\nDeN8Nay6lv2gnpKE7XCVvskQ0ZHQj5wQwEVG4LbgBi8ydP5Xz67H/X7dl2l2\r\nIrQQ3pK31/P+gpCZT9phHZtJUbKKWiDLjPM8RUJnLasmIJvbe/17OOZkO/4Y\r\ng+F9ZBWZnNWzl1Nm5Yc74PUYj+OYkhLtxTt8xqzYFZIu2lFOIE9QA5T5IEk0\r\nDko6NQs4iX6XVY95pB2A2WOdF3nkXQF4mYdp3YkEuwTBhN79mqWF0UsLu45n\r\nIBOTJH33PP/Stn5ZQD/C+uAMMZBdoIx/CPPLEA3LYnR8WKwvm7+1rbtS5Gmh\r\nLzHU6LJ7x9JOyTDxBzjygo9tcM4H5F0fabHRt+jlD7Tvl6ofZij662gS/lN2\r\n3WQIYwx27XiRUThrGiT6XacBP8I/urq0wv8Eqx/hghSI7f33zFDwEnkjZHg7\r\nALj/F+k5bxXQjHKptUk6XAKoWLulkEHiGnDFnU0gDGA1+MbCtXM7d1upViVc\r\nK0P+Ld4+2leTpbTeMBYV8kDfXkM0p58e+9hiBlZU7bzdPgz5jZu58Elv372Q\r\nJ2ivkxVqt/yAen1IQzi26xwy9zJncMuQbrA=\r\n=Sxz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/focus-ring":"15.0.0-canary.e741b5c82.0","@material/touch-target":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e741b5c82.0_1665423505210_0.8884941415506158","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/checkbox","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d466aeb9b55b8ea085786dd9d1fc4a193876bf25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.582f3cc1c.0.tgz","fileCount":42,"integrity":"sha512-VY82ic5SJydykcrRFzD65zqmf6af9TQCHWVzzY9PRFrR4nvX0DIZgpNe6ibIkNvpmhePO9erDKBM4UnG1c0tPw==","signatures":[{"sig":"MEQCIAXkEsimBHeZFNuPBZY7+DATu1z0iXlgQ4y+h63HN4JNAiBtWUbBJZGXb/uIAS6LZGk543jLEcJj2G9AbVMjNsjoRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDWg/9HDBVulUmtzcx5HgJIF1MBvmRGdmEI4PutvNXl6poWvhjPM/X\r\nlnXpzYVIeHzmexm8HuHgenR2+7XFyTrzFr7vSmI4/KYRLy+H/D7CrwGVOUpt\r\nApb5cS+wylDgvQtsXJiT6/uBrY3S2p4NwfqKCSgSuAUJ3lxX7np2RhaHPIHw\r\nbzvozzwBpf4/HW5tPVqB2oTQAWFXZT66KphE383TeiA+IgTG7BtaMEP7c/sg\r\ngPwHeF7UDYd65Yg/CRvzFEGLRqKyoXQvOMpEYuFk438++r/zbfRz/xRAbYGn\r\nPz6X/d9JHHvYk4WtZpRiDHASQWGW6ZBYkottLszVzVCM1aHZR36JJw4DcoPN\r\ni9b7RfQusx7Rw2f/8V6ho2tWB9UtpGPPweq8q1R9lTIlTYJHD9cv2qWOzbj/\r\nfunCIg9R6986KS0wYK2wHECtGFcFbuAu6KTkCJbx9MbL0ia6rHobe6H5aoK/\r\nfbYtFf5IFsICgJi5oO3L/aodwu5Dl27u2N3RcnFiHSalTUKDQmtSzKMQE8Xd\r\nKbD8cb0LNxUm73pAQcc/O1WMSnM3vWNR9JVu81tc2JLe72br2kviq7+w5uhM\r\nS2tLu8TqVI/esM0rZkQ956zMSqy04sTqPAA+KvKSoPbDB/22uHrJ6/Du1H43\r\n9dlVTQ8UYUGWYbYUL9UnJYw/iZNGTLeNrLw=\r\n=U9k+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/focus-ring":"15.0.0-canary.582f3cc1c.0","@material/touch-target":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.582f3cc1c.0_1665463762385_0.5346126040682821","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/checkbox","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79a9229016253681d3920917ff2181568999497c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":42,"integrity":"sha512-Nt6e8EnDl8q/4tt5Af3j5yBehRI3+391SQ1+nDZvtx0B4QVP9lpeoG9mJF4tvOmj8y5DYGVKetetxBZJw1btlQ==","signatures":[{"sig":"MEYCIQDn4c+ZMsgLJSDDEDYEwqc6050LilJTdL+f15SZLCDKhgIhAKTZgmh05MJErNOhJIdguEnF4J7iL0cjrNMGs++iemCU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqziACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKRhAAn3dF2aAV0DlZbv7AqBYis2f0V76gHg6ezCY9k7h5nCiAUnjs\r\nQJfpHxqQkTlYtl/Y0rL+7hy8VFr26rVpZrV/PdVkqP9we66qoJ19FgAb6kTa\r\nzNZ4iAkBllgw0ca2czFRm0piUBepBCpcADCnY8djzubI0RBsK++01bWVmrvD\r\n04RBhbt2YCDAUCM+K4iG6i+j+4h4kqtb5qxB530lkK4bxelf1RWomK71e5mo\r\nVf2puvev8WiT0MWTRn8SkbLNssljNdk0AqMXZV2EY7Lb6xTFJaaDTt60hHPZ\r\nit3IVLu2Q/tSNUYclNfOf1uVjsw1VXhcgscFfvgOkidZ9byxlasirEturLi4\r\nQ9NIZsq+cGpF/NaONIZV1sWwsU/7K5Ep3x6CQMijuTMhwj1Ge6K+PGn/vyF5\r\n4uxkIASroSroayQWuHC4bn1USmuG0iuuAWBL6WIpCaUpLcsn0OTq5PWiVJRE\r\nWtcTPVnHg4Tynqm2DAAVxQTLy8rNx7FyHplKPSAAVcAHPJk0XGvyVWrLGwlj\r\nBJ3FixpYGWO3/kVJ4T7UdLoAJQIVd046zIlR+y1u2bpVS7yCUDxYdAtECMh5\r\nmgnUBrmRdXIxpDu3Sr5lqNgSR+jVrn8ScDoFKfOfJQp04Dfcs8vRiHzwvhVy\r\nH3YhnryAdnvl0YJhUgKe5hUBPcnpQhPlAnU=\r\n=Grd+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/focus-ring":"15.0.0-canary.b1a6e3e88.0","@material/touch-target":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b1a6e3e88.0_1665576161935_0.5226110331767919","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/checkbox","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db14615721f78f10b0c99edf260518aece03aa3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":42,"integrity":"sha512-3++RUwHyIvoyG/xOPiEvB4nuknbo8apOghZpj6fgyuCFR0BQYy2OsJXgA1itEuG9aM61TnyO45oJduYRvgnYgw==","signatures":[{"sig":"MEYCIQD+2XVpid8Qwg+2HinYuOS1HzHgXyVD7nIvnE7WDBW5JgIhAOL4vo3fXE6Ky9NT8ihedo6dan10vD2cVK7cCbT+pmBu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphMQ//aU57siVtSFHpkr94ygoBIaJkSZ+kRoOxcuXrQvekHjfQlFJ0\r\nvrLI6B38BnzVkU9oVlJf9mvgUV65x6jLiokhqHX3+fMvh+J/qakQ0+TyudkD\r\nGLcThc0rh1V1gbQMMcEqWkHQXe2Ha3Elw2gy5S7i+jT7jzdQR8p1rqMpMGN0\r\nYAZ9JT3pNQDsIoAXpLlZ5QTbA+Y7H5rD9Rm9CKUHCFj4smNfb9q/f0JER59K\r\nE5hFg/xAHf/fnNbv16+jBpaFgoCCH4E4cmrgfOeyVFm0woAkF+u542zkWQyB\r\n1KM0hB9uFYBl9VizoV6oW1aiivHOGTjXTbENZqNUF2GEXcr+DU84a5IksiUM\r\nysAWwRO2jPVNChpWL0ilC1aDiQq16jfpoij9Nd0IPPUn5iCT8iv0lbTVnz1W\r\n9h68RAkl412CvXYnm+sLCkOLScfG8FG2XMlpx2Wx157HzZsqjq/OgHrO5fqr\r\nNCuB7o/dKSqJvUiptV6/XBKXV0Es7O4d0re86+4waPyqkcgXc5NLv9pzrK6p\r\nfn7E53QcbcdMOD5/Hpu6St04VC7HPXv4NlMbQjJqBKtPqr457Uj4XgDlG1Vu\r\nZNEeBCkFfaEi3LTGQWY5c+CryrvZIcOeH8yoJF7cxfNIZHnRAhwA0mT5jgTN\r\n2GGGXFT60h1s4GvP7Dgl3Ri+/MgHYU71BiA=\r\n=KW3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/focus-ring":"15.0.0-canary.c9b1a31e4.0","@material/touch-target":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c9b1a31e4.0_1665593934501_0.5383505549388152","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/checkbox","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47af14b25d1a84458f34495fd424c035a44d2e58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":42,"integrity":"sha512-b1qH1UMIhdOT1cdCTH0Vc2EEB4vmyNRYqDy5Aw4/lnXSi/RSq+RrEO3eOyDHEQYKBDfBgyDkPjg47Wj3NZAIyg==","signatures":[{"sig":"MEUCIGQxlKXMg6WWYcYq8Ls2F44ykc71IJkwHEc3Vaf8FLnfAiEAltOs7jzYGWpeGkFxP9dtZiJqHMbZ/mlA0A3lmY0YD88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxO5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnExAAoMJp39o+9jicNJReJA3U/lBBpPXevW8GSZnQBkw1dGtlV7QU\r\n0SBRJ1piSCzUJfg9Pm3mQ5nm8cSafogB7hDCgoWMJHbnHVGwmCFxOdKJlZrN\r\nKbquLUhYkr0ZYI9aYvo0HJiIzPhyElSQhxa8OsmksyPBIiNYhq127D3fyjdZ\r\nAtwXHHm2khJLBxHzXQLQMzK2lu9lJ06ECv+FkkZZql30PAsWqnnEr/dvWggb\r\n7RBW7Vu8PCYw9JIuPYs5DV8MOLa7CynK7BjkpQaktjhL9yGiEJwTIzrrWAmX\r\nZK2rWBuo1VgfkUrdRT+J39vnBhnv1uH/NEdcbLtPz8jNY3wczXlfb2AI6KTK\r\nyqg3GkubI6N/wYUL4kxIVrRg+6cJ8LRHpzcWs9dzyUylIRkal5KbwEvGNjQC\r\nFt9Rg51M/F90dUVVf0AJO1feubvAv4BoLPjWo8jZg40OflC/TovxtE8cRswn\r\nPw5MRlcvVuKP5wsmWVj8o7vJazsC44quCwrJmzpDVIEVPrXKfyzbnemQPE9f\r\n9i2reDvjMhr+FJdUk+f9AzR22722CHlo+9ryQKcKErhKkFnCOckFZKo/1DtN\r\n2Cu9rnQT6+NK8/bbFjwDZI7kyd3X9+ELfRATKWPlONWSWUHhWevauVOvABkb\r\nYwPcZQwtv5pvrtGFPG421yB8HSzU4IEc1os=\r\n=grYi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/focus-ring":"15.0.0-canary.13e9b0d1f.0","@material/touch-target":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.13e9b0d1f.0_1665602488822_0.05711238040125566","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/checkbox","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e66d0dd0ccc717613acd40062126256e8651405","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1dc797e7f.0.tgz","fileCount":42,"integrity":"sha512-tvmt3HZuWP1EXuf4V2Dh/1d+xNysVS88CAWca/9un1r6R5I1u4YxFowi7SuAYveyheuEpLRVtHN+vdcld3HFdw==","signatures":[{"sig":"MEUCICQSVGb9MO6MbnFPt89zzUn0h/zDhmVd4O5GRPHdHCFQAiEA7dSwkdDs5LUCHVQkG8xROE1lW0yUSmrWNmkw7t9ZHtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgOQ//YWmHPHzqACHS+innN55YqDpkpXU/pouqv45tdJqivcfTbIPe\r\nr/NA+ArjMMaI7LupMWIMBp4DY0h27AvxtblvN/JHFFIKoRS64JR8OmZCwtkJ\r\nqa1BNq3xL7KvP5Ayy7Ui7oJcPgBNPON8F4r6tQuq6o5xvwPBhjIComXaT9jV\r\noq2/YF0RGPDliFg2b6Dsd0G+69OBWL3sWn+rqrSv3sXPYKfIi+gyPlPM1lWz\r\nh3uNxw9brsz8fs4CiR9YOJHXGw41+oNVoKe3CW76OHII4bgjmnRW+OC4RN3P\r\nPWBOCGX1mOHRspyCfnPCRuKIc05UMgV+fXsu9YP9/TDAZ7LiLSSNOXQvt/pu\r\nlRsOyswe8DTAUQkg73PLTny2RGj5r528upTeIO6TQCpOUkX2YSCEELWuEV0h\r\nwxSIL+pJKpRx6Q/HU44HfrFteiHvGNRPDl7CyqlxHBt5ciSDhCvOVp4kiLqM\r\nl/pKpD/83LJeGABgxW7q1zQJIcLLOH5uq5iaY6/hvr76UdnDSxHdxdSeSK/W\r\n1GwtB9aRVNKU6/fVcbz1RE5jWQWvxi9ydbb/zpog7s0JaN1ajMG0cNt8EkJK\r\nyiVO4cnVebQNMxN8iz965zmeQF1WLiNZ5wWx3WiXVrkOocPbNkzUBU8w2voT\r\noYb/8C5ydmy1sAbhUMn0GgrmakR2SBu40yk=\r\n=czb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/focus-ring":"15.0.0-canary.1dc797e7f.0","@material/touch-target":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1dc797e7f.0_1665740512815_0.8421366715283367","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/checkbox","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ed4009397.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee06721c409eaa8d2a3a3a9d738841517d7061c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ed4009397.0.tgz","fileCount":42,"integrity":"sha512-v1uoXCWdWwA3ZLyNablMqDFphlbspAOC2PaaCfX5SSKaNq7yPVvcMuanfRCqxR9SaGEYJtEvxe2C43Sp1Isr8g==","signatures":[{"sig":"MEUCIQCgeErpPUjWnPGLt0Id3XomfIKmGXj9r1bEdrGl+rx5twIgdHLN8awKwXEskXp7CJSTMFDABU4zpCjsMKM8xcggTxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro9g/9EelIO1PLydEqrkywenNguzsgfRKnARsyCj428WntZ9LdF6M2\r\nyry5ylevC5LEaAFWKwdoLizSSbIMToQHOGaJWFBs6TNwGYIZ4BhhZgCLbNa/\r\nrb93MwE+EAm4/HUI9nQ2wqXaO9h8LA/Gt8SzxQWiqTJu3w21uPTnWwdmARrU\r\nW/lry5O/wnsyZis8oNcMN1GBkn7EzmwKvLKK9VHzvO+w4cxiiCz/z8TMelGt\r\nJhBMeYfxvXVSQuyiE97E/dR1Lj+HE4EAOCHfU1Rc0Zi852HqwawdbEHKFn4D\r\nJPp6BDoTkp3HUMqNpI4HLo3zFPVWDq5NlvO6e4wzHZJAx9eEMkXnwdnfxJHk\r\n0EnNvb7oGneVblAUpV26ulznMFij9LZcspASvKJU7QTkSrKMAdPoBWbyHd5K\r\n1bTZDdq6hKQP5wp89TrSeBs/Zmwl/iSszamei7Qt1xDvl5tRXvHC0mVN/COX\r\nEsBmk4JsPFg4G6qoDHrYsH/TVfC71HSrvn9icO7dhnsFXP6+kbtHHvjXMzmR\r\nvaD96YvmotPeY87g06y1gGWp6s1XcQeTce2zKgr+PduKGDVqos2CFRb8QGig\r\n11O7MYesmOgeOJUGwfFYwX2X/oxdym8K7UPVuVkAJSyNgg4B0nfslg9IDsFV\r\neDlCLz0MvIftSQhQiL6o0+pPVC9dL1NZwAE=\r\n=ckXN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/focus-ring":"15.0.0-canary.ed4009397.0","@material/touch-target":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ed4009397.0_1665766294776_0.025934053563564596","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/checkbox","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67946d6a048ff75044e6971daa15a14bb25faed0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.95ef196bc.0.tgz","fileCount":42,"integrity":"sha512-oiVvB3xAEQzLHySO56ZsaqLyK1fLyYgk4ChUCUVMVw6NukLPXIvgO49AVRPfmpaus+GKsMj762IEbUAqBKnnjg==","signatures":[{"sig":"MEUCIFEjioMYfjH0Vgq6G2NJpmb6E7//CRglGNIov/OkIJrkAiEAibxBmhOA0HP0XMwim4mKeqGNZABv6mmyN4lbZJz2h9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrWA/+N9jObDT9hrEc7LbAlYaz4FoaqbP/cf4DPWkzJBfR505jYvtz\r\ntdpwHGtjoHBLMffmOkGKSEseBrMs8NGf6LIlADBNP/uMCpA4wPnfCMvMbKNP\r\nTczabn5yW5uxyEQuAwfzvmhu0SmVCT+mxBgECq0b5mOetz3wQVFQ7qljCjn7\r\nt4Mqqk3ZnwHHjJ1+JMNQ7YAaYtbr6Dbhi04oH+Zw5SVf/ugLkmwjJbOZ+ShZ\r\nwljDyU3B+4hU5BvdTxCmBnd7Lom+dpY6W3XeTVeJshcvfgfmipZJfjFcvWqX\r\ncHKASbM04wqToXS3ADrJrscJ3oKEpcLpIeSTgPj3g+2P2Q+PQMRholb+5Xgp\r\n8PjkKPXAOcoxjG6S/0YrZU+OEXUV5uXvOwKjJEignAFZnCcdB5s2R+vHSBdy\r\nhnX+LRrlDyaa6ET548HNIC8q603IQCziNHL6j5mwvY7O2WRKWbTTgTfht26Y\r\nzUYeEMGxfCvd8FDdSb5KICEQoMJYpVfZLf6jkEVCh3oPxi3BirK2sWtGhjWA\r\nBT12rDroVHLb/mW8ClGgcSI3hBdkgPORkckqj2rIQupq0gSPQlF2bFgYZUAQ\r\nzqzzIYl5FuTbvdCefcMSJmlU+vhi3eSwuYN6AjqzOc6kCzzi0TOIdNU4GR/C\r\nP+/F85njGkLY1UaF3GLLfAkHAjTnJWO7atA=\r\n=EHFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/focus-ring":"15.0.0-canary.95ef196bc.0","@material/touch-target":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.95ef196bc.0_1665789252661_0.4737198662522544","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/checkbox","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"328f9583f62f269f237e3d2f99518cd8629b800f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.13eea1b2d.0.tgz","fileCount":42,"integrity":"sha512-i5q9tm0oksHFeuZmy6pLBqFY4AA2ICFBqxgLZmgxBsg/FIpPQFbl2j2M25tgWdsNvx986GyDlzgCow2dQvMQAw==","signatures":[{"sig":"MEQCICo+62a2GFgJtTdy12ly8czK3abZeGjAgFXfV8AmrpoLAiANc2qfMbtu/WLuFYi7vTeGoqSufMmm3czpcHBKxf/ZGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmHQ/6A8NpJM9L/DTx5osdlARvuVstrZYZO5aZl79aci+/I0snwjnQ\r\nc0EJ/O/TW1tv+W0tL6/ZF3MJps4pfhuQcDnLriuCIbGvZnQoLv9cwTXlhEVe\r\nW4IWUlJwCbFy7VHmrnl5s+NTObAIFQybW9Jp0rDdeGjf4DYgG5Qbkqup14lD\r\nuYSW1FU/MEWQ60fvDZOsahuZni4GwE4DSTxRO4i4+k3sxwN0pdkzprQ2Y/jT\r\nky8wLLlDzHAobHME0j9hyaIhRvVssH4z31SOfUla5v8hEJuCD+BJkFYqpRUk\r\n8rqWYG9I1BASNt/FtQ1lGzLtUeguJvxpPFLvFnk0wVISW9K2XPsVSfUP5KLy\r\nOiGYCGEuvSNa0t1E0yDpMiGWmavQ1SvtdthuX3G5hV6KoWoZ1JWseOs5Nuvy\r\nbAjrfgatcb+JuDLOCvp20aMMkH3RX8eFJ5+PRhgRGIyyyp6KpZb1QYOlMXqG\r\nkYXaHAp4yKss9M5TW7On3+czxPz2fXySzXV5B1B51TWmfGxgTtDlKSmYYnZ4\r\nWneyjwo4jgI3u3DnO7o/aafEokdpLuGgWtvjIJKX6fgmjAOpNSyflP6PPPGe\r\nImbbd1AwhA/tdyMyebZM/k37okZivwql1cIQLLcnssxQB8MV/zMoeWpDfruv\r\nvdMKaMRtYoO0+1vxopFnJDUbbjmqxwhcHp4=\r\n=K4g5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/focus-ring":"15.0.0-canary.13eea1b2d.0","@material/touch-target":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.13eea1b2d.0_1665978711329_0.9989877144519568","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/checkbox","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b72518b12d1d0e5493231096421ce00d8dfe4f85","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ef9b2babb.0.tgz","fileCount":42,"integrity":"sha512-Mhhfmp278+6wChtgHjo6q1SLqiVjCyONWu6oBXVCvXreX7fCqebWOhEz5loddvAp+BGORPAxYZUquRUs4imgTg==","signatures":[{"sig":"MEUCIEFal8MwkIAMoqyL2+REVJVkUU7BM0JGoEvGjAgngzqcAiEAw+Ezx9tcdYvyvISvLV16Sf8jHvKr6SO1Grj1xB2WpsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqzw/8DSPKi0OEKVvpmCwGV/WfzJYDZIGh80cQaLp5wPko6vCv20BB\r\n1ub3YyY4deHYeVTUsvZR4d/6uyumUdVAfkwQv9BCYRasZf3UyBke82w5vtDs\r\nJHsDxCNI77mU1TlwIU4tXAPt0DMuJnGsR/kVUFzjOxCsHUl7QmARLvtpDsMb\r\nqjUzNbi7oP7C9u7LoB6P9JJe9UXNW1mRl2rqMu9rZA5K34VbEuLXeDN5YBuo\r\nJm8AWP32yKYKNUEyfx0wKqPE+eBNp1/KI5VIsNOYpj7QjEsSWBzhUKM0KTPV\r\nnVhROLrDXVs+hDx6vBG+hqIwr1AHLAvWACRLj/eXuJ5/D8G8xdxNe5owNJrU\r\nf5eFLhlZjxjCyRWk3jQBawQoa3RnbCClMdlfgSeys1yXz4NKW4ui//J770ro\r\nLQGdoM5cEgG8CSImlyCDp2XM7vavUQTu3H1yPRvDWX/qI7y4MtTNZDmtmxdy\r\nG05TTazew6Yaov0P1+jV/b6/0HGLJoxJcdM6Cnxo4lyTF/G7lKQwI+pZoo4m\r\n8Knvi2g8rFXpmAr3Ifyr8DSnfCPTWN1oBINJ7PWK0Ctv0Il8dU8FJrbAygox\r\n3EJaGn5b79c9lnncZYW/BQ2CcY0cpQCOeszD/oaYyWeCFC8I3KFJbJzp5A0D\r\ncX/6b+56SDqnrRa+Rm7FkNzZg6SYoRt/pYY=\r\n=6D0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/focus-ring":"15.0.0-canary.ef9b2babb.0","@material/touch-target":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ef9b2babb.0_1665998296639_0.8858083531491359","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/checkbox","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23f1416a28a907875fc7b8ea8a138e434c4dc58c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cec7fb987.0.tgz","fileCount":42,"integrity":"sha512-pxq1he/DvEtK14w/ZZ5Wix3i71qEInesPfNz6e3ZPROqpowHyPIflb1fTBJlKWuvBtqeZwOel+yKr9KaJZtCWA==","signatures":[{"sig":"MEUCIFZIOG+imxLbDFgzHD8fHaskiLQpKQ3KFmLadcoj3CbnAiEA+hhRffuDkU+C/WB5Se9+mSp6Str8A7f43eJaqFzFuO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXAg/+PHjec5ji6XGXWI5oQbBZCFu78ewOjh1G9T1YnjrECCLAl7Tx\r\ni79/fNyJcGzTjEqZeSl7Iga6UREr1tecHHBW45/sKoiznegNgBmvydUfoHG3\r\nxJIB0w9c+Qr/9PqGUazR3ReuVQwegLpqJO4hqLLcZ9sbxLlSH5pBGn1iW8DJ\r\npx8CPRpbvnvjQzsCReTYV2DK67HnpORIbZl12edp+QOJCsnnTArkMatUYeQO\r\nnDFPuU+5EiYzBgczHIJzp1FMuRAv8znWySrInOrdDMAO5VxFug/XZ8YRDIhS\r\nWfkmZ460NTUqW8BTUYZ/QZVhRKmA65IDm7EZKpAwVRRXJv0jKCa2BPVJdHit\r\nt4fNoJck9cs7HcQTQ+qltG3RSghy22HH83qqx6aYvCdXIl5G6DevFtRzmZh+\r\n5hSVXxga4i5cFBVGmULr6MWDrcyVnuXo/8lHjiN/04D4cWrdIWMEIPFl7YZR\r\nWNnOYtIF2sxQ8U1EpclobKYVAMFyZqhmZc2yvk2oINYAO4SnwC07AF58IhSJ\r\nG1Zb/qbI6jDv6PBX2ulbl2J7cnH/eTQtWT3DdqbXOafRXA38ZZSku1keMABi\r\neqVdIGSOIJfkXEFDGJ5UHVtJ67MAiOJ9bwpZ0DDO+ZzSU2YI3frQDcFc942t\r\nP64Q1Plw1N5AsRUO/zh/XA+TEpEu5SA/zO8=\r\n=is1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/focus-ring":"15.0.0-canary.cec7fb987.0","@material/touch-target":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cec7fb987.0_1666004198311_0.41001359167106255","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/checkbox","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827081acd01acdf8046bf6fb2e7d5f68552e7065","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4fff58b08.0.tgz","fileCount":42,"integrity":"sha512-ZQ4kmIB7mmhopHsCeZhuDmopM+JO7ls/J64H4E7N69c8ZUE2Aeq6BkL7NhgpaOStaHyeYhVmWSfL3PG6e9k5Qg==","signatures":[{"sig":"MEUCIHk3QXfWZUOmnSrbR5RcOddzCnxxAEi/FlXCZR/h8fuqAiEA5jY9AmIEkj6tcUKacec7kYJ4quTRsCxD46mM47r5EFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTIw/9EfbcZmEF8qllpurVf1EGO+85FWR/voVWv47nv5QS11DSr2bj\r\ntvUL+9h+0oapQrwf3t0H4jCCQFumbwfiXUfPjLAlXWFr5/DW+46/nLmzFMeH\r\nsR3paO7iaS311wWiPeyagSZvbkL+nAo0uf2ZlLSLSF7obFmdfLGnAn2yM/5C\r\n+ayta8mZiU0mLRtLKLHiu79YF97eaBQoe306r7DTqJl4kJQ15QS3bOpq3mfA\r\nW2qudNDzEWtuD2huE2fGV4nS61e3z8GWwEwRoivLyEJfVAfGlaeYyw3L2p7G\r\n0334nIGfABUKiJK6rrl3s5znfgbiVLkQ+by7DErvIN6Ri3l9E+I9dmFPdmxn\r\n6UkyGoNn4aDYCjPP5gFhGS8AQdikf2YreGlKsdf4niPnqpEYWvJ8PchJ2yjF\r\nmiY5EJqN96ZOj8w/ytkomDEzsbf+DQ8SjM5Ou/T7sghYcNga7bV7S4aSvO9W\r\naIO6Flr14r8Urihr1/yesBENUCx/8oPUXbmBoidxXlvPCUIPg2cAm3jj4b3e\r\nOK25KgDf5yq8D4qL0k7irsRB08y7lRytp/Za3y9Cx3OBV65viNQzjjMeLtB6\r\njqhr3/fIxjXS9yu7MZx6xfRZ2E5twbe50CIOWpZ4JjjrRL7QAkOxTvAGI/yF\r\nbKumyFoW8qsKYCEuVs9OLsrvQly8Mt5Btzc=\r\n=zFYu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/focus-ring":"15.0.0-canary.4fff58b08.0","@material/touch-target":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4fff58b08.0_1666020167974_0.05168110039471152","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/checkbox","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.587d8f871.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b0a022809d7897b5d8f76c57f7081bf28885cbe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.587d8f871.0.tgz","fileCount":42,"integrity":"sha512-EbaaPkU25JLgHpkzyPr8C6dPhNNx+nX37jQXeFNixocSGBTFGVSBmVxkLbbvIVFbQvDEwFirh6GthQyJ68/ITQ==","signatures":[{"sig":"MEUCIQDk/6chRJ+RKvS5UfZ3je7pKjvSNZHaYaZlKjWgBmwIrQIgO90m8gnvFIocZmCtCNIteLqcJ39OtH4lAZNlunNzgeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqk0BAAhZF47UibEnozqyyhSeO1YRSeRkFY4znrnOA0l1DmlstAaueX\r\ncTEQf8LiAx+NO91a4u2XxOS9CSIyRN/LYN2VNUvlh/dVHMlcWcDr/HzcV0tv\r\nEPvrYcKQZDincbOkRpATkyx4uB6oh/mJ5sTdRrokAoda6VpCaoxxO1+df1XM\r\nAIy77zyZhjU4014LDGfIeyj2iNwL7G/LmRKUmV75F5hqgD+4T+dghLyjMSfn\r\nNZ+FggwUQXe/ZL2MlpsKKgcRRykvtFKsCnjsOuGWVs5KRL8CTMSCkANikH7d\r\n9LbCLZMRm4LcrPoOGxig9rlM9yn+zu46PsuAQ8yFXcy1+UM1mZiW+glQaVxr\r\npDLQJCdYAdSGG/930dfj+2b6Q895suUIelak9fSJio7p2z8eJ3wU2nh0mzyT\r\nZh5xf02mvXP/d3rm4DiQARMz2NwNXZG2gMKz4wn0xmdBRtJFvQKNGCYErmBs\r\nWx8j2fNBrAK58rVF4IcItNsAxKgoStOT+4cF4msu8FGrHoiWYsRW+uOtxpZ/\r\nA3PYqla836iVzsRA0luxVCkQ0Y73umccsZiNX5XzqQKQ/tm6nj9ACSBVRnK9\r\nliYm9b7NVDD9f45/MRfBNCHqLTykcJ2aB2UkllpXe8QMdYEXAc6vWG91u9Wm\r\nTzibfzoa8V+R+4lC7ZSsh+AS7RJRBUwh3vU=\r\n=6wn+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/focus-ring":"15.0.0-canary.587d8f871.0","@material/touch-target":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.587d8f871.0_1666022244820_0.11191861654954716","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/checkbox","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb03d33055adde9025859f093b491d16b30c9d1d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.edf4b98d0.0.tgz","fileCount":42,"integrity":"sha512-8vJEdxu0IgRe6X+m/oG+z+x34WRFSqQPEWLcq7ZfLnparRE5Gi2++4P2Oz48JJLAr86bvQQFelvSxTADcOtL4w==","signatures":[{"sig":"MEUCIQDPVklIUZUj0Ubo6gS+b2SYekfGLr5uFRvUJgMVqqEtiAIgNifvp+Y40fDB/sU1ZPCtJODMxJV3f+FcYyPpIJV3jDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi1g/8D5fGvfG2yp6SM6x4X7WcuPpW7ESWIfs2sgkMDOm+wuGS9wtP\r\ngsMWjZr8hmZtJHO3RDAgKVq6B6O9Izb8He4xNpUcqx2YpvUXhhAITLc/tDpW\r\naMwYZWkRyfAzbqoiAwaUPqtGQb69+WToxoxwMCHx3GklC9UlfoftpXcjYGlO\r\nAHG3dsHc+nECTwTL9U2cMeQvb2XFlYET8Qv/zHD6Fix/qqlzB1MBsw/5JXsw\r\nGxfM1QurYd7Hosoy4jAwImeh5pwccHvZlnd14eftezh+d6MD/5HBnpe4ag+I\r\nYjZKk5CSLvMgl1C2CXa9Zu+ZWfCpHxfRYIncjNFW+VPjGH4BY/YtyO2KblRk\r\ntueOKlt4a6BSrnKjUMnZsE01sVVAq/ewoIOJGhDaQ8FDyi40nh7LJovEL549\r\nA05F8+HuySllkwxo22EuKS301kL03oV7lUQ8/AyZ4aAcHGLINM47XonemmZN\r\n7Br/jxHnYQMPLzpO/QIoDWw2n6O7bCGvaq6uXxlZyYPGKB6bck03tIduTqA7\r\nLFD0yxQMi+iMT8Q/v8SchkNrnT55H0oN2dtc1s9hxM3mXMKLL9nsAANtrx5G\r\nJ7Oo39ulGDCAccw6TYUD7E3nittQjFyzVygkyVvLfVD70YGI2qnm/TQ0CyXC\r\nGBNeZKloQXa8Kn/SKbVx0760JIZIEQQuNmM=\r\n=Bjc/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/focus-ring":"15.0.0-canary.edf4b98d0.0","@material/touch-target":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.edf4b98d0.0_1666024844779_0.1459205801415795","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/checkbox","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dc768ab55884ec7029e95522f023d58b253b2e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.024ac5f16.0.tgz","fileCount":42,"integrity":"sha512-lihN90wzO9r1kryoS3mk7QQY8lv/etkytwtvlswt1Laf3lNV25tAbjiytgcS/TQR3RqxEjSLzVfpVWP3b8yaIQ==","signatures":[{"sig":"MEQCIG5Ea7P1t1T+Ub8K6V8E7gANgf9NH9hc0GDpwpisPhYgAiAmIicu37pJNOxHka0LR7WVmh2DTshv8qwOY90i7UxK5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmBBAAorLKw0bSdYlfVC1pfTilGpr6K2NfXQQKfyTeBpjql3AKCTcE\r\nzPk+AKWclphnhDq2jFbWP+KLQyOPPEp+gOcuuTfVlXgq6IuFdJnIwD7sfg87\r\nPh+S/pw7kunWzxLMDkfpaTSWyPZeYqW/EYKgzZLKefQ5KL9BZtfzqBF7KlEz\r\njrF28U4cAJpn/6Q00WT55xd0/H0oDs2L+UwQNeEdzAr2Yue9KujxlhFEekr5\r\n0hr2IU6AcDx96Uo55JMHi9+txEZSXPuAFpDMx3wlFBdmL19U7ShYr8COrnoH\r\nHW5aMOe/TQw0gyZY//Y9uO1vWTyzEHD5i5Ez5lgWzyQGZh3RKHuBCmy/prBW\r\nDoGESVp7WNOhuB3KEYW0FCm094mapn5qaXQz6eHZJwSQfR7OAfQ7Fy2bLWbI\r\nhy6P+5A0ZeGKAZ4fzJy0SMA+1mrEy/A+gE9jTta4wHmQdtzelpAGJuXQWldP\r\nAFstzKmlu+P/ZaB9RUosf97jhrQ2PeJc+MJhlq84193Vj//CloUdcmKEd8sP\r\nq5n3TFWYfDbldhRkMh7J/9G3O3qGy80eZC3ECxeQYj22AmpyNiKsbHI1Gth1\r\nj4XqW4GFrCRJfw61F8ainYPu4nM0mj2zewhLHUoUPwc6tMqQzpEJUrkRYxMa\r\n+8rrG8Pg5aMgwmr2lf1+iy1H42PGBKd7fYA=\r\n=6758\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/focus-ring":"15.0.0-canary.024ac5f16.0","@material/touch-target":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.024ac5f16.0_1666046558652_0.6486418090758257","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/checkbox","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3497ae29addda9f90555c0fd07b8dcab4737a486","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c8bdf6144.0.tgz","fileCount":42,"integrity":"sha512-3DmPH5jQ3GQyPd6NQt6BxgShzXwYpFynlZEEPTS9smeoIxW64tfzslEU1gfh3NGLhBaSEOaPyjJ7iTuvuStkFg==","signatures":[{"sig":"MEYCIQD4CRLXOuOSsonuIXICUfRYsriYAzmkPxspP8gB2B/76AIhAJJEkG3uCDp5LEFoarghRhRFihABUPMutrhPAj9w5Xek","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSCg//dmi/bqMTlqvkvP6Ko8WbmOFyuj9YVyV6jwrrtbg8Lx7yFvt4\r\nBjzJImlrU6pCRefvkJvqu5/+2SW8zVJK2gKTVAN2IivIlcGhOgZe9kdD7YMc\r\nhlFmXKOh+csy38a4F+s8LBv1hxRiYEa7XRIiLH56n/W8BYZ0FaiWZ0iDMRIL\r\nd7X3eHapYViLdi6v2L5WuTPwuD+Cg1oucCpgGTgcThStg/UNwaKu+Qc75em5\r\nljf/K/KxMwbp7DrySvW96xQA/lxYi/SNeYuuQfpAgAUlJBzWQTY4jatUmb4D\r\nuEv+FekfB1CFF1Db4NnuhaPR5PyS/xLzDdCBK5QnzCKuu68zayufSDJxpm5U\r\nqRc3GZihUwlmV5fFFKIpTUlqqsGFAOCv55AQEqD3r0etJdbVKIIwPhiGeBQV\r\nh9oMy5KEhbth2/9T3wRtnnA5sx4URbD5DeDTXwR+doZ6187DQvH8WOysvjpb\r\nOo17SBbMtbVfUOIb7MY008I9ABpgd+mem1V8tMMsZYKoBLZtUq8VqqIPR6Jb\r\naOk4IoXgolT05lC+aPqVUha9j91R7774m/8AJCa41iSU3LoOVl52l9UjJnlo\r\nGlTyVTXAf7NqWaG9z1zFKZMM8+4mb0F5i5Qww3Yv73DLq+6j96noIifUbU/A\r\nC29Vd5Do/95duxlZo+xZCUDx9k1U0Rld2SA=\r\n=FD0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/focus-ring":"15.0.0-canary.c8bdf6144.0","@material/touch-target":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c8bdf6144.0_1666117421564_0.08712917176201329","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/checkbox","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bacda4885.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52f41c7313b3f8bb658cc31368acce55542f5105","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bacda4885.0.tgz","fileCount":42,"integrity":"sha512-k2Atbrf8aepNhtj32nIAICxHSACoP70LxJYknjqFMLWbxQAoZCqJIWflM5Dh0+hTQwrjDSOzIfar9+vLUVmQlA==","signatures":[{"sig":"MEQCIDtd4Rw0wPk7nROJv0QLvQJWfSiVBya6xxxA9yDxKcLGAiAP3mPbhfHa1DtE8iRUAeIj/nJs3hN098SldQIMWFeJ9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvO1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7cw//VNlYbBzu3ipaxM2ys4bAkJ1KrTel4nQbhIjOZWCg5/+Jeq0+\r\nGV0HXKHEqnu3GL9T+VHB688kud3wnpHdK0p9/SsDpl6HI3gDzFqk2NZlreAC\r\nS6J7z/iF4CkPO2ewGIx/bX9g18nje6y+H/VuymJ02Ap5N8DbDVO9x0nnIUIP\r\nB5tb1dO8Djh/xn/H3Iyd8BjdLpD12BmEzwg09Wy9QN7jitPqFNGK8PbeZEkx\r\nHaGp+84oaptJkUFuHcX+Q/+EbkEUFNO3YllWuMb7tLv7qS/n7Fsg9hy/1Q7l\r\nScUNe0U9Vol04tTmH6sEOy+/jARtyJ5uF7PqJG6yOrgs9D8f3JJdyAWDk97x\r\nU5G+q8Z+JKI5S/wLmYJN9OBJYogF2R0fjEs/4v2rSMBqywOrWHUrDoBdj8ag\r\ngNehIskApJmJUohmX07d0hofEFiXDDWGlwIDPtrVhTFz6GIORJtYmfFhY4G2\r\njCjdpu+NRAYwZ3kbaWp9H+2HDjuY772H075zn6jNbZsu5aKrYZhDa2U/3aOK\r\nHywEate13AXT3AhTLXhugvG9f0EgcrRFe7ja/AMsxdevHdrJoH6rcyST93vz\r\napG+g2ufqmtoBGCJtdEdZMNnflV+RInixEQfnFJmeHG6ASBFWkpbKEYd8/JT\r\nB4pgBr+lcvTMJNmVq8GEmYQ6DUi0kcyvDSE=\r\n=Exou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/focus-ring":"15.0.0-canary.bacda4885.0","@material/touch-target":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bacda4885.0_1666118581168_0.9922854193097514","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/checkbox","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89206aa9b714795fb2c8ab30e18b7016e6fcb5ab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.92b2556cf.0.tgz","fileCount":42,"integrity":"sha512-hRohUY5lP3pbvjFc5lTiDiYrgwh8pyu7gO8viQmLPt3uK+IsGXXoRuip3w7VzzuI9lCUPGZQC+BhKR0hlN8rMA==","signatures":[{"sig":"MEUCIGuu7sAg7VYN6OY4xsDoTxOGExzxIvEe7s0UAc2iDFccAiEAzB76Qo2RV3SEKxGfa+sg7JQtShvWrwQFghvQHSN7nak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwiA/8D6w9VSPY/8FXjbfSLPlIKWuH0lc21tzr8eqbzAJd4b+RFnA4\r\n2AerEdkEXfm9aCsniqJNiKl+JK+nAsibHzt74DX9aQrmmgIE5oxoIn5FG8HL\r\nuAbPOZjbmRPZGYfZpVzN2zivpdS52wHNNhJtwztcMoCHSrIlo0bQX5YuXidt\r\nInz9T5beTvQlJo1R4ldEwLvLrKlmCwgthMZwHBVSkV8PKO3Ql3o6RBPZ2LX7\r\nC8oUu+Th533AYQXqXB1EB8hRSnWjGKlIOEGFMKwBOds7W3M5VJZuXALv64sB\r\n+ivhEd1oMb2ftT1wBSbmhmGPikkXi47gztnkojrnOF2a4i7R1+Tm1e2HDEBZ\r\nZdROBEL9/nJEW1CFJMYaqp4jtMtEjaX04BS/rpyn7PV0dKBst5V+QdJEpswA\r\noYZ1kmhQ/evS1Zf5pywv/MHijdXCrl0S1IxLfiEt9wWregFVvGWXva7/Wu7/\r\nfm/j86xoB7YDM2/W7Gwx42vLMkUejLgENfdtzJYNV9y4H+Fg96FlWllJzUHJ\r\nKU90qcMp9RjCx19/s4Nqts9PAks/SeM99ktOfabcgm4uEay2xCs/+PRXJZ/E\r\nHtwEGOqjrGE0O696Za56SKV7I6Rxr/wJq1NGA7tHI4KywARG8Psa9iwoAMxe\r\nWUi7q/1D+JZ7p0VZikXJTuOtOsa+h7o88FE=\r\n=Sbij\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/focus-ring":"15.0.0-canary.92b2556cf.0","@material/touch-target":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.92b2556cf.0_1666142021433_0.49902455939975776","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/checkbox","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cc804509a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eaf6e05ddcd20b4add4dfdecc2b4b5f570918f7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cc804509a.0.tgz","fileCount":42,"integrity":"sha512-/9xI6a2fUsyn1D5Nv/ZQ4pFxifuqj6dm3yKyHAiZPZu7dkUVBPY8N6eSNBZqW1834g+MgLK/sYTWABG5C7u7ig==","signatures":[{"sig":"MEUCIQC71cJuBo7pixR/ApGZb5oDF3G9VkEeKcAdlpj/G8YSbAIgWEMBgTIxN9n92rhHfSndeFG16TYJlv3Ih7ShU8rqxI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1ApACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnDg/9GtbL6KQSLNMrLsGIKx4SYexxFtUamgQXh4+vMzI38BIvrKEM\r\nph7/AujQc/L+JzNXbm3Po1fclmvt9kJFyFjflD4dEDRU7UcZl9WD3Wlqmobx\r\nG+GbI+TwZ6ZPdLKZVOaGcdeSBgE1tmFnvg8CffHoyx9AHYOqegIajiDcqlt+\r\n6eF3hIAW+QTaPWz87AvHUNWVskaQRbTNwY+w4P5tHe5vDg8OG+wHlh6JzD7b\r\ns06SFfsXs8XkhMSLsQ7i3HoidA8eoFnbJVq2xGdrAU96v4MO3BmgY3w90gZz\r\nqwR+qDgvYkVFBaZh0cNYfJqc92SFIVtmUtZ12BG+X3Uysa93S1GJYNYW3ll2\r\nPANdFSC1WtdGFkXEuN1DmrG6zcFfWBYYGtL2SuuRS0wzk35kxVFRaS9orFAL\r\nnxDNKRt8nJfbyc5bCdpJoiemHqVWPM5nMUe/Z/+w+CY48RzCPpL8xGvKLcio\r\nUPZXCcaX6Mk8kBN7fG/HXFgN5QEDONVMBft62ZrDWtoiy64TWdNa2gO6qk5d\r\nF43qCiTFPdk33NPo8oXtlbO0pRACGow0ykouHmfwe8YtIZxzGu8e/Dea1Qvd\r\nuUWEcYtnTGTMdP3iv56noBtuaBRnZgC5mlTnyV65j2qTUbNSnLMS7yBkcc+W\r\nKZvvW3s+i8O4bgoQ/mRM0W2nnIyPxt7kCnI=\r\n=ocS1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/focus-ring":"15.0.0-canary.cc804509a.0","@material/touch-target":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cc804509a.0_1666142248728_0.8409780656688675","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/checkbox","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.982bedae9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f1b40a15cf01cddfabfdabd1c6b5ec89c2fe189","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.982bedae9.0.tgz","fileCount":42,"integrity":"sha512-qwpV64wtSoJfQAW2w+vyizlFyJvpSdC9pC+UG7WbC75oZ0wREPbVosZ/ARl+Cz9zQZ8IUpzTQTJXRRx4r+M41g==","signatures":[{"sig":"MEUCIH4VdfCRNmUaBmW+4n/4AT2Zphq7ij7cFSO7lOYYmiS5AiEA0DtYozoOK+T1rxz7i3EK4jb0+sEHInFh45wNLFBppoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLyw//ToGxolkGtTcnH+ZH/UIAA4uqPkM2cjM0K534ilqXKByrjMt5\r\nYqnCKbqdzsSf3sW6M78Hqw4aObNk7ogdL57UgbQutqqhQZbxVrwoXKo/RO0r\r\n9ttEXN61OrlvQVpP4lqFy0SR96FTO9wT9ojwFu8KCjSQWdO0RDCXsQNdkMK5\r\n65Tw9+PgArysC/c00yjqfN+1uthYn+sCkRLrXb0MdeBdrpZBIBJMKUdTz47Q\r\ncVhthpYlV6VxbwO0UAGqcVz3LIvXzmzcIXaeF2r7knoVUxtrfgALSgyxDBF/\r\nb8Oa49DRHen06Hg9woN9bPKgxBnlRzArWCVHS1IvadxZC3Jn6TZHROnrOExw\r\nDua/mUX5kMzXCctUtImJxPo8Gml3PHxt89wdnTXkao23/0EWqMWEKTfiNH8n\r\nyoIXs0t3shW7hX4y+HzkLngd7H0oHez15et+8etajXO6z6KTXaLYsCL6nYwk\r\nd6ARnhbFhbZP1b6Gy/pmb0OOTa8iwY/dYdIJOhSO9rqjKtCdGI+yRq7I/TRm\r\nPyM4r6cAgHb716SJ5B9mLRkWYCD0KUWheLkTa8R0xqlGQSwf7+lIb8GPpdSz\r\n2kLfUAKvYapGaItoMLIIkIAJpuZNayiNKnJXB2ibPSDGffMpBFPe+8POElSm\r\nQsqoxNuc/9nRleweijn1piCozRW4S+ICxFo=\r\n=oR4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/focus-ring":"15.0.0-canary.982bedae9.0","@material/touch-target":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.982bedae9.0_1666143447389_0.1539039125305186","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/checkbox","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c11fd6dce4a934a66ebe1be3c9f67e0ad4bb3f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ee40081f4.0.tgz","fileCount":42,"integrity":"sha512-gC0i9vN+mhFU337jFEBqjxtPdnY0gZlUZ9NormIe5tWHmeuwQynD+loXU6EKY+fMV4HaCGD7m1B3h+ei8/0nKw==","signatures":[{"sig":"MEQCIBAQWHuGGNp+fZYZEQm/vHXARlwdz4uPIEfJF1LNhrW/AiA2p5olBbZkXGEY8ON05LjO38YTDPjWiG+k/gdTOSX8ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoABA/9E5gYjzJWE++G5wJZn02ChmwPXUiCHRkVrQrpQHXaM+QuJfgN\r\nSas5crPQ7tJbC9/z2NrTIlLsNVPsXb446Xi4WEVuNaI+99Gg0F8mFo/ZEgwt\r\nvsKz3GOTkt1gkGqPVyG3x1snhlMNJZoI5aEzj7NMpAiTuANXeQVqtGJfVsyi\r\nsuKpF95UZV17kHk2Eo2XkC9dcE3yz0ULXCDs9aHDUEfbmilVEGZkGThAs3b5\r\nmu/N+6+KZWurGH+y/wXOSAvyDlut7nE2Sf9T7ijHJIakegLM3jhUrqNBreMs\r\ntwJMZVjQ1pyHCqpIZtRRL3Mrrt42SmR30BofWaHFwMaJmVY65GioguH6E7iZ\r\nD4MFLvU5z/B9vhOq/IlXbYxhddPZd/c8rUQaSe15yTkHycVI2ev6sqQSlxRS\r\nqM/9/7qCaEgHQZ6vvpIJEtukFyGtYbq15afAyYFCmBJj9oQWOjLKMI1SV8v8\r\nW71DOidQrwxGbRFJin+GFS3Ns2+6kHnhbTboBYQBUDWohsGc7ecRjp6hnB+W\r\nemL7OEtvJfQf8l1VPf+7fQTa4BaF8Yo0hkNQsmwnbm60XDc7xxtcGCRIhqrE\r\nkAcyhChAcafq4Qz9WmqMm1JERJ3tVfYR3M8yoVtDHLCBlqiIH2QEKeO6raSx\r\n6HVf2xJR1URvyGLho6CxBP/GmMlA34UrI5o=\r\n=Bd85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/focus-ring":"15.0.0-canary.ee40081f4.0","@material/touch-target":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ee40081f4.0_1666210329813_0.3714980546307791","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/checkbox","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4003b79a673510927d8c51edf6d89e7c83f2d2f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.98f1b54e2.0.tgz","fileCount":42,"integrity":"sha512-d9fvqRGHnnosEV1DY6aH8TrnaON3orYkcL0pc8sA71YJRWI8YC61HI8lbHnOHr3mf5j9+61XwCaqL4f9octerA==","signatures":[{"sig":"MEYCIQDM2L+f23GvbHZZBP/seHnVay9Ik1ZcDI0+z8qF7QguhwIhAKvOcDokGRa122lB24+LL3HuKn2fK7DcC3MwoHjfXuS2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdI9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGzA//fSU/y4KGxcld2CcBdh+WKiuBbs25m2965k/WN/VDt7cRv8tt\r\n7EEdyoIXxwZDUp3H5HU6c9t7BDlUJLpsCZi6bqHmzOqnRUFpBoZ7p7SGOWl/\r\nG/f9kqehAzOw8QPrzCgoXcE4RgtqV6xqMlEL6Vyk2tsEmG5KdYHCxLAkkcMI\r\n4g0WAESYl4NiNkmlZgaRac9Xh6DN1hx0gOCTEg/wAqQbC9Rq2h7bX/W3FpZs\r\nyuTVmSHlWoqxRozhnryn3NZ9P46qco7g3YoMtRbQ6vgj4WZdngiIGVdwtCut\r\nQJlM1XpeJnfdds5V5lMu3lmLLmxB7G2lFF7R322e5YO82rEZdkkkeuxdzS31\r\nNPv9GmZBdmvfVL6fCzhDQHuZkWJAJ9gwVhwFoVV7S3BghseExkvXjuRKk35q\r\n3HbSIDbMtyr9364qfDr4oWcT9kcCxKKmuNH5+rVjSeqEBmb8k8QmJGsGJIZl\r\npQKGxcQuh1Jx/NEW0+wwgwYHTaQY+h7sVXRZ5cyKtm2GLP6ZGiDY9c7un+6j\r\nF+VOUbnsVssLx2XZarKZYbQGfho2m++38L1FPOMGrvjNV+S4ygLJ92/UZmLI\r\njQfiVqCCPpkfydymMzJ0O90iLMW/T2i6PhMc9jZjrSr5B6bdyJbCLgSVkdwB\r\nCIObaCvdKqbelEluaqzElv/Nb/g7SQSwqFg=\r\n=TdrO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/focus-ring":"15.0.0-canary.98f1b54e2.0","@material/touch-target":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.98f1b54e2.0_1666306621106_0.587212802799566","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/checkbox","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2605d7d5d86577235ae4701ca31bb75d6910c78","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":42,"integrity":"sha512-jDmsskfh2bggGtvU5IS6bBlOfFcdjth7W5pFpS/ZfXuC3BrIKtkEzz/+bBa2gykkMhSjOrvT2PLMMiU24PpfQw==","signatures":[{"sig":"MEQCICJ4v/3ztOdRjoHf4Q7tatC+IdcLmqYst4mfwTv5qBnTAiBDO3W8WylX0DQ32NieMOVXpSfEJ44aPkIvK3oXIyirgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtF+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqURAAgkOz4lGMiqWnXG4aY3K/M4qXG1epVGsuaEgjxx6Me3Fc2KV5\r\nq/a5rFWrxkr3bJms2BdIyJPzHBebvp2At4YLR1eYbdthRrrpXCNCjoL0cEjN\r\n1/Osi7KJvXm1GsLjePchBmmj8g2dc3ZwtileO20Cr3Vsv6P5oT1whWvrf8T7\r\nYtCHVD22IMW6IxCFAnmb1lk78ejaK07uCiH5gmu5oUedXTW/g25OY3jLgZi9\r\nxJLDewJxDAnfE4tMISS+N7chQUgBdLlgEUpGmdg89Ouwx/MfI+BCi3FEm3ch\r\nfWf7nXVhHDyl6mhiBik4yp5tio+wK9j0GM9Yj2nfyOM0MP6HrvSkTucclHet\r\nr2iUnvSvHoUpGM0JBE2NdZcSkswhVvw1jFv8V6sCUqbvJWfLmpnCXOYptE/T\r\nQ+ezpyIi6te6d2qgZU75jYRNHJlCeYnElOFHnF7PRwvtBRY5P5cccXiQCTDM\r\nJroaS3hg1u0Jphtw/7ahcuPQGHfwYTnzpzvv8TOmN8apHfdgcNEFYuCoYryE\r\nGEPvqdmQV8yTnr4ASVKJa3Ed+BrKBoj+rqgyUeh5ZQDbnQ/0q6fCB3pAauqD\r\nUn+g2iXwZW0Frb3OOq873THnY5maEhO7a7YWSOEVGbt1eTQP4VH3psFJhsIL\r\nZ/Ldiy8YC3iSue/W6NMcYzMJ6abMhtwlXo8=\r\n=QBIz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/focus-ring":"15.0.0-canary.e74b7ba7e.0","@material/touch-target":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e74b7ba7e.0_1666371965853_0.4984164978357597","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/checkbox","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a8e21920736fb80a978664517bddfd4a092e3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ab55c07d2.0.tgz","fileCount":42,"integrity":"sha512-i3QiMCJlAskiyIe4Qh9L9wTQon1bFo5jjQonwfLv41B94FITL95+vkEAOy4zIToW24AYO5rgXEHq1HdT0Wj4sQ==","signatures":[{"sig":"MEUCIF7/GgREyZ0ifZGm0j2R0dy180q+erL4/OKnGF0qrtlAAiEAkuTSEquJKsxmegyKQthYney/Sk1zkcj1VnOiHtmGdeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmpw/9Hbwi4KsAcbL89RhRKppE5HJ7Ht1MaKHeJaBlQEQJn2VHKqlj\r\nRjK9BMio9Qvc2dMySwlj1vzssOQC0j/6eLZO+MQGZMuEqSHVF6ulAKo2Uo6v\r\nIkkJWlMXXo29QpPEtckhIQ4mnoYIi0Np4uhFl5eMNiGK6iTY18oA1TMnuwZA\r\nde4coqmypQ5Ryda2XwvXAf7wAzyYkVAORqbpbpcjB/OuMqYaTpw54CvlvpbL\r\nUNg92Ptoz1SabjruGxQ+ki4xYXccYqAEKRfJZUlJM95Ns45Ad1nvLu16jqR+\r\n5p6CDxkGtNRf7hg/XrUd1rc/Q7G/SUc0x7gOnNF+4ZAkPyjjzF1cfTJRIBa8\r\njM3Si43wQPDuED+zivY4+O0jP18cCtebPNQwW8XnWPfhGrS2qluXhlWaBiKV\r\niaZuu1eUa5tUixPk/vEwnsLr1UHF19vbzD0kOPYeAw8f5Ms5+9w+LWhcGWc8\r\nJ/z7dIE4iyHhk1pUe6YR+v1lj9bzFXZE5+TQh1ONb+qI8c7ZiF5619xWQKeX\r\nGf1cCqm1BN/KGuhauE424h3tzVgp8a5nYRDIoo1ofTmnAyiEjJF9iLVBWwin\r\nIwDXhu9avMF6rPgQ8xrBDcRwDWPiil8HItC7BokrvY1rO6c+gXPB/FSbXYRb\r\n3kI7jv6NKlGWlInM2tcYeQywxq1/LxlQQjY=\r\n=v+Vh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/focus-ring":"15.0.0-canary.ab55c07d2.0","@material/touch-target":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ab55c07d2.0_1666462768291_0.8431482947037043","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/checkbox","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fc539db34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae8a3a93821242dad2fca7ef43beba6b331dea01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fc539db34.0.tgz","fileCount":42,"integrity":"sha512-g8ggNErR49bcbOTj3mrkt9SS7n1OqXIoWKplVDkPLprC2Ho523x/n6ZkQQjRDBJJIgXD5yUT9byvQ9tWXgldXA==","signatures":[{"sig":"MEQCIDg3m1on1Dk6/Izy7xsIykAQA4iNlB1o6quYZWV4mFr9AiAi91VmVQLtY/IxpkSyCJCJgCwLY+2w/LfqwbdvccVkCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF6g//Xjjw/fTUcJ9H8yULqM+n0nTd/2V9z90lRqBh8srHSPrliYea\r\n1XufHNyWjtK8HQ7p2e5gc4FySexlX3BSohpDwwlj0Nxua2cYYX1gdzED/FRL\r\n4NAF92e0a6ZwJKQ8/K053QBddQmOss2PUI97KvVBDDbYFVg75d7PCN8xU8t9\r\nR9LgOi1To0gVTW0s30Mffz2VxekCm+ukuO1KHTXGSj2lVriGMyBP1SNpYX6q\r\nMvFQgi1Fw1zvDOzGzN4T3Fyy5pjGzaPT+RoFeD2BJBYgeuFSev/GBf4oTGrd\r\nJXET5ThX1CEGhMg+EvVzWhlUiMsb/nC7qvZHtUc4WwOWFKGBHhekhM2ZR2Bc\r\nNlnYBTPdphqWceg5Zs/FlVMyShSXfQz9F5DBuK6Tgn0OrJBqcpI0WWjtj11t\r\neaX8qoToBvZ1MA5LOXHiCddzellEMKR+QWGFFIrnRjAckfdaQj8lbpzlHD61\r\nD9VWitIiBSGL3y4GnnsSfGWt97g742OrkSmk/dr/ygvvJU15H9N+Onr23lkq\r\np7/5uwqIYuaIpbgWdDPBWkji0A67u2zTy5a8kdlH4NsZ0KBVxIFjT8ShgQLV\r\nT83fPScZZEvtWDc+3E3Qd0Y5isrIJ9h5yotROP2UCUqgxBrpu4o8pwATXoRd\r\nEASmYlbT+AUllPqt43xzLTu2BfgSsBENiIA=\r\n=dSbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/focus-ring":"15.0.0-canary.fc539db34.0","@material/touch-target":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fc539db34.0_1666637966191_0.03850181566758004","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/checkbox","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de6403847f7ec3859403126031ccc0902a756c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e340b04c5.0.tgz","fileCount":42,"integrity":"sha512-Q7d+i8JlivKoOcfX+yIfU21HGSfCdJuAmOuW2cEFmI7bd8m+gJ3j65iSYM3Z1p8KbPToEDLkkn4R+CjiFqN23g==","signatures":[{"sig":"MEYCIQDQuCfd6Nd1qsVqW1jR0vSDGTW1NJWpkIgr7k/LLQyh/QIhAJlJ+XMJiNPf8GMxwnlphgkoGaZZpFjwehH53HrYRu8c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHURACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0JA//UaJ01HdEPkxM++9Jy4E1Q7AZiw6N815xWpfP6N5n75TJVKOu\r\ndx8zZE3jc0v51wwuufljJtEGhn4BthcS42Q0UnEhS0fuGyQpAsoGX0Psclio\r\nlcDElVZLSN7qhaKX+/xUu88MF4MVwpmVofwgaZVxlelv1a37iL6cvKk+Wkjg\r\nPNe/0zvAHidbOPuy/d/UUIjB2v1hXOSQ9+HktXPpmY2pVCSc5D/d1aEyCEtt\r\nC8PDaGp58EA2I4IBQ4BccQKrDC02QO/Xw8hwGtUhwaGl2aPE8WpmOfVVf6fs\r\n5oo2r/il7t/+11LTf2IQqemJ1J4hcmcizFWPrE93qtN/IeVHEwPcwVgmQGB5\r\nhoa/898Ea1/HAmDH/UOcCenFhGkhZiD1E7c7Wb7lAkVBPVkqQP+WKXJ6QwDu\r\nV15PRz2aU6KiT2FUB0wBIyadVbr2F9e66yQCfvKNOdE8Ogip3cR6MaXyzdIm\r\niwYYwZd6lP0jpUDp2jXphcIod2MhVYFSw/L0CRWeZyfU/z4adY+xRPAr2iV+\r\nv/AT2R1tj7Kl73CN55pXbGuiLktXx8AEE3X0Vd6QyTUEq4+r5Axbo4x8VMzs\r\nd/SWpk0767Ub6hZT5Pq0wQ8cVfXPEtcNfqSgEV10YVEDWtD5SOmlYqOPzh3p\r\nduHeTvZoSRhlkDZTON2TBd0zB6bufHXed1A=\r\n=6usb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/focus-ring":"15.0.0-canary.e340b04c5.0","@material/touch-target":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e340b04c5.0_1666741520874_0.37282801238759067","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/checkbox","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54f9637e991ec872aa06f11f0ab1404a6f118886","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":42,"integrity":"sha512-6su872qnTCS8aLXEIlzMDabIw/03Tue+RTKF23M5hbXy7aKH5uTSNluIqB/UEKp79PZBXhJVSdm7tDa2zGMW6w==","signatures":[{"sig":"MEYCIQDDz3GguamtGDo0YrKhwZKvrIoOWrb9Xjz6gQ28CImpeQIhAJRsCOYpVEyBHT8QcOVfVvRiwcsfVUSU3XZSqt2/GSk3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3eQ/9GqU/p9IFymMfJArP3uA6uINy6uoQlDLiRG1uglTTUFPy7DWp\r\n+BLs2jOpBmmyUR+etkKn9rSftEAzSSlP1alFgjGDd0xpTIDmCyhQk0rVdW3T\r\ndFNP8iEVmOc333yJE5vfJZjklBAfqxbzIE7yVLCNy3Gr4jNavVIX9pQM0Ul+\r\n09ltvB+CPArhY2MxoQL08oW10BxbTsYsmePsF+6rnAcnTBeHILrmDB8SZB+g\r\nz4uLyzDgUAeY7t7FjI6IV4OBnWgVyBZSi8q+0mptSTeJUXXt5PF5iFqyP56r\r\nh4z1Is7O3WR4MLMz/YzZtN1PWSJbpRgSgi7luPmVEIuC+eQvF75FU3YzsOWB\r\nzY1W3kUHDRDJlGetvMAGEg+SkyfBnAg30Rq15Ik2Iv/yACz0Y1BQv80C1W6R\r\nzI6T1m6UVbkF/uPQRCRWfv4egZePCm4Yr6cj+nYxQD0OXrruoMhlccuPhpME\r\nS3QLmtAvDAfUnV55Yj3BIMTPkPGKuGeBlTfskHsivVRQmDEmZllcb8KPB4h4\r\nD0dqaYgE+7B8iAet+pIqqvUWXfhnGWUb4hBjWx2qJxprjgjrs6+ULKip7/Uz\r\nFN2mrtDSI/s/fBATlae2Riw6QS3xdnrujN0rnNIq94ayug+4TsZhok06cp+o\r\nAYQG2mkb204TQIimCXg9rdOwwhx3VS7ir74=\r\n=PVfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/focus-ring":"15.0.0-canary.2c1a8f8fd.0","@material/touch-target":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2c1a8f8fd.0_1666805451810_0.6217157298179485","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/checkbox","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e99a601fce56de9076dffffaef09bc70b44d2814","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ecfee946f.0.tgz","fileCount":42,"integrity":"sha512-gU4mUwF8rUc5s64PuIOHNQN4VwRfsZ1l7jiMQzBJu1Kp3tf9jbqsMRtEQCd+mWN5w+DFESVEnvNr2fluY1Jsww==","signatures":[{"sig":"MEYCIQD418HdTZyloatHsq0zPL41sQJFFG4b9k8ewKkv6OnS7gIhAOsQ2og9TwV92XnATG/E8mPQZ80BgAsn73qXWk26yoSs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCGQ/9HBCw0BkDK+nq5rWO4hpzBjMXbuOqNwEgUc11qkZzZ4jtSaUO\r\nYchlisQY28DLTqGywvkCTJyw37mZg2s7mfLc+6P5vkRlIgXT1twhFA94h1ix\r\nufPv/YqAWwpLIGXDM4PF3Ts2umMhUUd0RJmB7eXYQuAfzbk0SOyWTlQ5gTky\r\nxJO/ABwrhCzzNhTN2WDqnw0I3hNR1sVwxLUj49o2cp2yLukdHIjZLHkfxAG/\r\nvVIb2QpfcWVxf553jrIutGezo4USt2XOhqoSCauklYsGQ6BKI8cuVFKIw0Ps\r\n9iMxDKB+Md8Cyx6AAKPzNepDRbxxIqNfH/QdXT9D1HjZCBNmZL3rSG2hCo6h\r\nBWzPaATGKif9fgofkKde+j/mq8Rl/WVcfQtYD1wYxqWf/I41jXTTTumJoQ7D\r\nRVEKcQD6qzeENuYJertl6r+GD7bix2I6I84komDdwSFjXPfcH93TEcD1+umQ\r\n8dbKK98l2XY56ujX4F73No73HWr/Xsz+dqOwSfHpkALTrQh8qnumhq8YMxfo\r\nZusAakN193HMq7nva06KOvGfDuOO6zau7UvaGkHHA8fYRAp3IWEo1JEgspep\r\ni7H42qrXtkwdkk8TLWUBDQo3tjHJRABbPog8y7XKyB/tzcHeZzJp9pfiz+vb\r\n7ojXijxxOjLQUsjWfTY1XYQ8GYQ5tGsnTdA=\r\n=VcXD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/focus-ring":"15.0.0-canary.ecfee946f.0","@material/touch-target":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ecfee946f.0_1666815333568_0.0997437001717345","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/checkbox","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9254af8aa4a8bdb0adf73b3dd36a8681951990c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":42,"integrity":"sha512-heUUT5ii8hqlXOlhaNFsynF6+DokYDF0dlIj+kVFD2JB2glpzwfG4rh+/6WAgYMp9YGVtOkMv0/lP+vD/gbuLg==","signatures":[{"sig":"MEUCIQCGbUxSH2ATSBTKvEBhx4tzLL7t6Lr/Z88Sp4oZN9DZLwIgZtNFEleTiJ8Va+WqbKCg5zO0oj1y6B9XddQk2ftJvxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAa+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgexAAhYKxB6hRMKfbzeXya0nfyJdEOm106Uin3GN11YmG/s409gSh\r\nOLDAs77F1Geec60mBew9qxuy65GBV0bZ3CEqXZ8FnMdxRZu8bCeD+9V2OlWv\r\ngLPDwelA3hq3C+Y10jrvgDAPtDjkfcRfwg/oTJr5RCLs8yWjjE/S7eP8SDRa\r\nOn+gLhM7tPPu55hUgB40A2SpzZjgU5Pfovh2N0Zv1E6PtBUCXO8BwJc6F1PN\r\n1rbUPida/ehK0oAwrnSCihqjyE/04OU/V0Zbx3rP51p7KQVhjITxTKnNTnZ+\r\nGbcH9yUz9b75eRzHZu+ugH4rJ6GB9peZtv2NbgEckabl70UnJCw6HSgf2VRR\r\nO/k2SYhjVC/ULbtPXUALwNcOH4EZANq5UPuIQ2lYxZ3dGdaG/7Ku4Dpv+gul\r\nVTSd2/5WrNQk0/lyTxHNa+JEivSPFzszkGKCw0whFwlXoQMi4O4qfuCUBRe4\r\nY2hT296su3TD6kUffXTmVxblZkfNY34CXrzhbJsmkUV+42ZfU6cCwyxGkcI+\r\nndZ8s3tWsCEs0+HQEMD13IeYSGkKdB512IIx/RtZFlyGyNF1jwNBQ+X7xBSD\r\n3JN95WoYom4NARl9XqeMkexH0mdOAj6cFIq+ViWB5UHff1J7lEAb2h7ZeY9G\r\n2kHRIwwQwOCozwiW0EP8Tv0Z5OSIOazQF0A=\r\n=UgY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/focus-ring":"15.0.0-canary.73ca9dbb0.0","@material/touch-target":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.73ca9dbb0.0_1667237566469_0.4547567313385008","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/checkbox","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbd34dece0633ff1c775f966073682bfba86934d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.357f2e5f1.0.tgz","fileCount":42,"integrity":"sha512-MQS+0rzZBE7y6K738mWaBcHWO/TgkOvbYG2wPBO7oTGqQwt/f+lTeDbN0GxT7zBhnzucHsAFwliwnFAawjSa5g==","signatures":[{"sig":"MEUCIB1e7R4M9gV7nKZQCcQArnS8jXTxH7azzkNK+Z7T5UkHAiEAzzgDwPnEe+GMIWynUHEZcX/3bjfLxnUFfx1476TuAv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu/A//QRrP4cYXlJjhPEaiV6evDFxbubDkJe/SkZqnzHLsZZkYnIQa\r\nVG15pkpvevQcARsDYqlSn4EadArd0jLqWO7q2GW8jh1PNc2cQDOiBmf8uv+d\r\nUS7vtDrLy0YeEpwpSE+KgV73uGRZEmHCTJhFcQ97KFkNEkWUFfYfGygmCqpf\r\nUP3w40OWfWUz42Nlkmi5WQBUwfLJOlDO6qD5mBIBU/k6ER6Z2njiMKB1AsMQ\r\nquS1zD/qvLZrfbar8Da0Fsgu9sqC1r5RKpw/jpfITMDCSFP4U0+wWRQN4KDu\r\nww7fe5qFJwyrBb3eGtPqDry50D5Y2hT///xCIQmsKxm62QX980bPl/maX2JT\r\nwKl1J83hatkkc6+NGxNZb7x0Q8pwEtaGVfLaHvM2a8kXC8BFe4Ocy15UTj+i\r\nLDTXmhdieY7nkwz62GlS8MNe6DRsq4xBgniIYAg6okXBxdpW+d1uX/7UukR9\r\nCQij4IVzrrX5TWRAZ6/w9GI+oBRv3Z5KUZfna+9P0hotfrDBr8YrAybm3Zqe\r\nfvJOtJo/DHaEZIAFgmZ/dKhOx/HKhMpxrbLr/ATSFoaVT87/lOPvRoMa2HaF\r\nxv5BMdwQV4CGkrI1RFdpbW5wZfCrVH7KYFvydHXk2/7Y7uhXAUiZ8lZA/cBD\r\ns8W11eSTjiPA2upPkWSRfhzhNRkB2V0kKJ8=\r\n=W+j0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/focus-ring":"15.0.0-canary.357f2e5f1.0","@material/touch-target":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.357f2e5f1.0_1667242185939_0.36031267343306017","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/checkbox","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26201fbdc6dcbcbbd8c0188ecc1f0b94a76d4c1c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.eb103d4b5.0.tgz","fileCount":42,"integrity":"sha512-CKvRrOwndWNPJq6wQ5ffam1X1P9bZz8Rsc3tb7zyso21PUJa/rQfQoajyVoq1cCK8/oC4cTV/w7tn/EHzwLsXw==","signatures":[{"sig":"MEUCIQDBmi+BCqCd/o5Uum9zIaUI2u1YBGNRw82ALpVIG5aqWgIgNs7pHRvu85/AF0nwhRpSU2TouSjgwgG50z/avTegOys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCh7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2XRAAn8EEVynLab0hXfnqYA41yXXivpULLPx9c2rT28j2pmr5OVWR\r\n8MzMR73Se3Kv195c9yPbSNDsJpa3F9CNbCuAlEwUIihVq3YyWCttMtwre8NP\r\n4OcCv14D0uV1QRnz7Djwpi4Fs6A7jehPbJV018lwc/Mmb2OXDYrws0p8zbeN\r\njMxDg5Uj7RCDncx8I0zIS265vPAkhtcoBaq4/GFFGx9UYM9tp4ILSHGVcBPV\r\nyZWb2YjbstXJx1tXsx7AlOe4Bk5QtLrXNnCcQ2LzfCFMIiRz4CtlJQKXirM0\r\nwu0gcxj8CfciAUoOgNoxFcP9H/kPJRhrtbY1VLwFP7BkXNEr6m8IreYieOAu\r\nwvLZ7q7Guga7cgHwBdKU6nFH6sPEFg5bamf+Y73LJtRF74+5e9PO1XWR1tXx\r\nnDAPBvB0kfZKsULw8nFT7KKPK+2KhuNpi35NiX11wF0J+wauVnEESE/KS05i\r\nZ8DJrvS1NiYcacMQc7jqCUKLEFuWskRWsHP6ARCwRrKMK3CNhun9nqR1BOy2\r\nrkXEYVsiuMpDgaaj+N+yD2aUuFug8gM0xAV/uasnOzataL+WK1A0yYJsyjlK\r\n0KVxd5XPcHZUkXVMe3BAwiSiDTvJS5dtoizh5qGGCErktVph5esU2byo8ZxT\r\n7za1HuzOpLCpNuA/5zeO7PGI1f3oZwqDRAo=\r\n=aInt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/focus-ring":"15.0.0-canary.eb103d4b5.0","@material/touch-target":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.eb103d4b5.0_1667246203316_0.5041787777617226","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/checkbox","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.af5f01223.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c1f743bc9ca96de3e94c86b55db8dcf8413e81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.af5f01223.0.tgz","fileCount":42,"integrity":"sha512-b1DfxfBz2QMbYpwDlDvNUnv3J2Zd42EGtN11vc1ls65YNAA2v+1+cqrvtIcJicJUIMG5ySdXwULbTmR0kbN6Mw==","signatures":[{"sig":"MEYCIQCW3T9y2k3OxlulWfNPRvNkwllHxyV2OqAAHgKOsipvVwIhALnqZeYcg2PZkTOAPH9757tmvDG3DAl6vf/4n/mDvIvX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTzg/9HrOzumnamL7IP+lPF0Aj14SUGkW6ZUX4DUUyviaBQwzkrv/v\r\nJ7xHdGklbJO4To513NYJywUYv3MLFfXJIO9I28kmcX9gpgqQ4+nEgMG2iLb4\r\nVJ69keRAwGuEob0x4ave8/3m0UzVklM/oFJDGBiL6ASxHiqlluz2oOJ0KTVV\r\n9i34fknnwP5MXgliAAf3Pd3uY9eSaDj/5oAVmECfoqkZjQdiiJrpb8JiA/zi\r\nU2ekfNxwaooJJcTS8avWldU0vFeD8QyS6egDrLLHRGLfI1ssPw12wOLGtbyV\r\neMTLc0tVbv07o2WPFe7eMZUJoqfR4KNcUAEJfvBLYqA5jO9MbuDgO3W79tl5\r\nCXWKHSw5nGsrFTnA0G7dBkM6MheHn9W7RjZbE4fxzCZKLgK2HAMbz7AGZnMC\r\nIcOty26AMTwFhWtZQ6HQ1dd/SsI0bVZ4O3jKCr6vwUUr0Lyszm2yzJkPoxor\r\nQBKtiTarHCTJdnkUJnmUmjn3NsvIz7dGvc11ZGSjMGn50MPpRcbEbTzuafdZ\r\nzqWS1iSUCNT0r4KxWKPj8CsY+hp8wf0bdpBGWx2TGRy/lcl8wKdFIKbvPA7q\r\n/mbsJBfg86XvnLn4WR2qZeuE3CKNVCbOYEmFXt5JuINFi+A3vWEZxgezuhfo\r\np8gbQ9SPBH5Qd31gDMMbnhV3qjUSipytWI0=\r\n=Pitr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/focus-ring":"15.0.0-canary.af5f01223.0","@material/touch-target":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.af5f01223.0_1667327830746_0.7232681929484126","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/checkbox","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.58733ef41.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da1eef43635f2a29f43b6077465fb3e77331f41","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.58733ef41.0.tgz","fileCount":42,"integrity":"sha512-vgNyUcEGcPGDkSmQaIc+tFlQIcs+wX7gKuvU6Aiwz1nH1BXkrInznQZqfOmZkAW8wFc0lLadWZA2U22roJC+EA==","signatures":[{"sig":"MEQCICOdCY/6DoHnCu6IDc+qc9gVK2iMZ2THgc2R69UuI8p9AiBEuy1+0gn6dwIOJtcUrdfSnsaQdveVAGSgjUtnRhzb3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrK2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW9A//bnWvR9PfoIY0LbRb4OroE7P4C7cgCfl+tydQ5aj1QFJKnKJI\r\n17TunS3gmebQvryJ5daXtJ5C93fnRTJRxWwXlPpEAwQhwi7750cIkb8reTwr\r\nTXrdTvvfykmWqnKp9a6KM9xBNHom71RRLQ5ZhNtCTBeEljNTPJhMmrA78OxY\r\nFAh2c5vSJlhrCVpc81BtD3TS2js39ONolp3xVB1q1zjdM3i++gANbxEJpAwT\r\nM9WoS1pTfmz52njbnOGeOQ0dQQz8sjHSrf9x0wSzidwZrqp2XWEwcDhOs8YV\r\nObP31ybGh6oPpHcvyYo7Fnr9F3ATdoBoJy+HPAnXhOtPlb8kYNzRmNxYVTjW\r\n+vTZhOXO6OClGOzL6yufT2xtAvifJN6d6zns0y4CfwL7sWTeEDCralRVHHL1\r\nBREnrqAjvI+tBBVUhyGkpu2v06Z7VDiAOlzFfJJXB5kEKZGx03ncX4zEcpYY\r\n72XWil0qSCiY5EDnpzOeKfxAfTLE2Fbnilgbk5s5KezLdrUE8m6t9fQwW8RK\r\nzFqbXYO3LqBRQotmDWWGCmX4mOuDM4k4quFZAmA9T0UXRdVSo34UNCPPeChP\r\nosxCzoCQhNtt+OX/P80bNvM80FECzhvxIFuzOXa9cQb0xBxaIu7oKqHAvodb\r\nS9BdwrBeqHL5P2KryIOqRBzte7JZTLtls3s=\r\n=AwzU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/focus-ring":"15.0.0-canary.58733ef41.0","@material/touch-target":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.58733ef41.0_1667412661979_0.19336602476855824","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/checkbox","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.909b48215.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b53230a7c501741235d0ef0439d37079b2121c5a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.909b48215.0.tgz","fileCount":42,"integrity":"sha512-ZjaJrSsRNJ4dDV9uAbK9WYH9/iwnIeViu0HSyPEPch9uvuuSYTRk9HLy90mKR+75daL7B/MD45Qd122kKFS9UQ==","signatures":[{"sig":"MEYCIQDZ33ZCXAy+2O6OauyXO6nAeuXy7zESNXeT8RNIpEMKxwIhAKzSYSRvl/6c4vEZNxqvKiREtgbP7t1TFbS3HlLdFvII","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP+g/9HXzLqGSr4YMW4IKqskbe0CFAtngB6rdYLeZ12M/wv/NgyYwI\r\nakaRlleDVUhepqLDD6VGosuE7UGfBqay2tHyKVNyzxPcb/6wqiZb55i3V52+\r\nxmcY1LSBLYoh5JorKb7zf9YWfqdHSIRbTVpwxFMP3ctCEnmWshNWyGNIl83G\r\nqDtqSFdrFVO4u6ODK1SiZaZFpfU0o8YpOvOjM6/LwVOmgByCpzzypk43JMbD\r\nwCfJTSagGZyTVGFSRFBu9o0rqGoCU46OWqrD11IfEUZzTI6Ud+SsbR8N0Mj6\r\n62tkSrdNuX2E0QdRbsV9j6nJxh/FitsEp71YZXdNE934UVM6Yu5run7cLh/n\r\nuRRzVbdZ8fp57Qe+DnhWLux5tg20qAOGoNWh3TfZn+GpoO69DpTv5kPbaBxU\r\nPBZvmFPNJ3rmZRUQ0L8VUCwVaO3iTxxzq8gUqtrYaykBCd8pAZ8tRcvpNmqI\r\n4IZNfy/TgMKr1AzGpdolNg8UPGNwDZtwM+uvqPDmTgrkHQ+Vf1RyVHreVvYI\r\nQ3tr9Ohx+NN0hwQbxdfrLzq4ZKr3llq86/7ZGDXRshAKkAM262grkhRhg3c0\r\n4dLpf8opcPclTed0a16XfF2vVrr5SZxktB81NCgxbyL4qT3mUc7kSQTNoXlq\r\nFcEmZGdMuAXX7RDeT96hOW3sb2vyGTpOrrY=\r\n=CDH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/focus-ring":"15.0.0-canary.909b48215.0","@material/touch-target":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.909b48215.0_1667448489971_0.06688119563623274","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/checkbox","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed7d76fd4c1ae73e7469a57b1a20cc14ab4644aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7f17127d5.0.tgz","fileCount":42,"integrity":"sha512-AE63O/10IVCtTIuSc61FOA4vO65UtfAdhN5iuYTsms+fNYPQCW5/upNBAMITjgvXJj28mCwOqYBzXlB2z5Nw0Q==","signatures":[{"sig":"MEQCIEttIm7dmYyngr80WPfepFsooC/Af5GETbBNlcFT0yv6AiAm0EH0jOPntU7PEakt04U7Y8ZpZg8krjFGBl9trJVZQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Dg/+JEUTJ+cWNiaxTi22iUULS5AgURtjXAZaXrlmvGgjN7FX7bgr\r\nAzefEgCMnPXEAFxZDOoGjAXInTj75GJmiMOHGjoAe4xFos/pR4ksEk1ddbMN\r\nSYQVzW3JZoiWgkPjdkpEcrHA3IO6u5Cs98JgaMQQKuxGFBpTBU74UKodXknB\r\nMr1Nzffv9lg/rVERYUjscxWJJ+DRztIsnqv1HXxkDfern8363ONsiqlFDRvI\r\n4mfiCkCZlEgYDCC75HdrPrJ8sJdjk5l9I0nI3LYoVr3ORUkUSQK6upUptJIv\r\narLMvvcGyPYAM9PVR8mjupKt+DFZQqUMjotZMg5UJ+hZ0zt1V3jCEtNEB12b\r\n284LzEoleNw8V3bWO4gAByXh0j0SEUBUvubicZXWUSHTg/j+qaDrgu+NMWEU\r\nDU7kOgKWL4PlS6jotaljcQAYvRYlnINsTI+jFrdxniStSbPTnowXblhEjdlh\r\njLVDKWc2W8V3SAHdqRmkLuEhq1HGx9VWPgA1teX9oWE+X7kabBQFVelEUwU+\r\nSTOc/+OZolQ7LriUyHcnKDGC9xIrOsGAEfUZx+2IsjfwKA3R7U7fQ9dPaXcf\r\nnQ8iIv7zbd+rg2chuIlwhf2DSbis0XEgP1ds52d618UfOKYSiHlFh0+QnJh1\r\nbBW9f54ZrRFp2mZPzRSndZ+/LMmmKe+EO+I=\r\n=n99E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/focus-ring":"15.0.0-canary.7f17127d5.0","@material/touch-target":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7f17127d5.0_1667499569486_0.8123797387088796","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/checkbox","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc18ebcdc20c25f864c979a3c0acbd204d0c1263","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.da95e2a05.0.tgz","fileCount":42,"integrity":"sha512-E+ze8xwbGvbFcTdGOt6MxrBteotDsGBuTvuSwmQeTj3Y25LrSLuF8M4tSEj+TWA79hPiNXXocrG6TxV18UlmuA==","signatures":[{"sig":"MEQCIHarbqVYq19mnJ0wlWdI2pqJFx37MCCGurY6D7OsfqzBAiAagdOPcnS68pfTqhxxGC7P3dajSelKk5ivvWYxNDRfCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHJQ//dNcdBVHfEST8FBcrFnfkI3rosX9/AfSKeXAS1AP7RyJw3KJs\r\nBL3z4+i5cf29RcYXyfeMnP7DjOgvoNrDHxIE3W1ygaLMmfyZWLzdYPrtz3vt\r\niqFV297f8WtkQJEcTnSjypGmt8AoLQguyx2EjUSWBPS+/aA4CtUKnFZYW9Mh\r\n/y96bpH+P31cG0MTPAPXkV0PF9XFV/RPQSU23kfcgXwuDDN4zKks2kOU0Z6t\r\nplDnmTYX0c4ii9wXCkn8mUUa2nuNQatmu+wwTAJKzEbCTcHdF3j+V1IOHTXb\r\nyvd5uudpqkeL8slm3ao8GKfoKUN2ULl8H3FQGumN1OD+aXRnW+40CDDYvJvk\r\nYzKxknEOJ2cCo1QjdqhYcihzAf0K4z6PvLkhTK5MXKVw10QqEkVHHuvgVyMr\r\neLjm2S795h6GdxPBXPL2e/bhxVhOVjl7h3UjwJQwPnAH+IPRertteDvwY4YU\r\nPGglK8ZcUhdve8tBSvW88bTCCOPHsaCXWCbIali0zVzpn1ztDlFzOORGfx92\r\nZvXjyh2k3NqasNN78uG7bMFaoq//SLELkfoEkrDe6lyxj31S2Xd0lDNH+3kX\r\nW9ZRo2OPvyYugXwHjkQiL/VKQ+tb6BehxkAyJ6pZ1npgkreOlQ7MYQRyVaOF\r\ncq7GkygzYIpVeIP4mcAms02CBnCQA1TNQTg=\r\n=sG8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/focus-ring":"15.0.0-canary.da95e2a05.0","@material/touch-target":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.da95e2a05.0_1667581162707_0.5398433502096915","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/checkbox","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4832e2750.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16606b773e7774e80d9425ff33af72da75243de4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4832e2750.0.tgz","fileCount":42,"integrity":"sha512-j9EGlzf5PSb/IaXKfMO4/zRtXqobDvZq4SsBzmv/0nMpkg9wNbBpC+2OcJZsgHDcTRBWYjsuPUBjkT1Xmkf44g==","signatures":[{"sig":"MEUCIFBdVuARv8qjRFp9keYVRSo/iL7Xi2Du9Uwcmzlgv+nIAiEA53628Z4sfJyiFRg1RNNH+/N/Bkn2lVD/tm4pSunEtM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXyxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Pw/8CWt8Y/zIMeL2LCI4C6YC68AWAzLSsY5G3roJ4UvMDfrXEvt+\r\nu5Fx0bCLOfNSWADFk3cpZ+DyMlinogCtaNu7GsRjqp42HIOQXidlGfVwhnSg\r\nxb0soO7KHnjDj+o3Z1xLtj12na5tJHsSwTMcB2kDTioLcgv0cMqeDAdz9a2b\r\nQn90ma1EYHdcZ1rUIkTf/FNiKovNDm+GLgnCjOEZOG9ffO68RP4xC9dbxfUc\r\ngNaw2dNY7yQmp9nTUX3gzU8O7Pl92ZOxoxhPWqDx6nA/hU/zfdxlZtp2t+/D\r\nFeAwy05PGz3Gi6Si79W8IT1z5vlCIG7x89x2e76znjDo7jifx0UvTmlSvyFs\r\nbNkfi5MnTNDCIiHK8bAADPU6FjrGxiyLtqUS+tGCzMfQWsCfGmSeP++NY71B\r\nVk8AW9BL2Jn+/o8axFk78a8ycj7D16zyqr4sp8FTcpxRZ+OrqwLrVVPeBxM0\r\nCxRTSsUiTAWpcgLdesZW+ZVyIG+O9oflKxTp+vO8KEJQCpZOAkkIf+veBf+J\r\nsJCywCqUDLaxJTOqC1vFVa1FmHf3Zd81Gpo8s3NUEewD5NX/joMA0FD16gnJ\r\nNbMEG/ChUtTfNaAILDJJNiJAckAkpGn/+t2SuYy2IVrGAaQBUJtjs7xiJ0ps\r\n6pfzyUB39/n5i2IFm+3i4gcnuT9+tqNmmrk=\r\n=cQt3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/focus-ring":"15.0.0-canary.4832e2750.0","@material/touch-target":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4832e2750.0_1667595441543_0.6092550512583408","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/checkbox","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.215506426.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"695a7885d1cdca25702dce72e295132d3dc74098","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.215506426.0.tgz","fileCount":42,"integrity":"sha512-N6tY0InBHN0LoY9t+RjJHvY7UBoL0N9/FgsvsR+58MiH/lx5UNdmQVDyLl5EMPFTMmLIrALOu5SfSN9EjKq8BA==","signatures":[{"sig":"MEUCIQDLgcuITIwSVaGj2wcFFDuplnZVwn8evNc2PoxcBNNJDAIgS869bfYxZcOZnyH/KI6ZqWbY2/O0m2v22DwQFprmBJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfJA/+LIzokKCya50oSuzNdeyVaGQhjFrDL2xp4k1hB6MCM3lVxb+v\r\nIgHKGguUxTanw6w0vEFJSUrqlDdMgFZVRqcpO5KEzjczZQHwblqqV4S2/8dO\r\nTKDjOM8sEWlMqGQ+TDbyoBQWGzjwqqKaUVFbCfAqVSHDmsaJaKEINE8TbWs9\r\nNhb8LScG1uBDXh0z3Zx+uSl2U7TkaO6F+MwDOgjhi+es2oPgtO0mZXEMgyCr\r\nXb+piPBAPcHiphs5t4KHXrZBILFFFRWJT17JW+pbJ3/7mCicXb2FdTG1FRWH\r\ne9KO0xfMrsXdTRBIgPDjcYY36zbSWiM0RlqESA4uQfTp6rStzFIP0hRL4DJ1\r\nB1kJAGDc7ByVVdl1MHTcz3w12hc3sTG5vQW6vIRCeZOPmlMNCW5d5kMVME6o\r\nGYzL3/V0me45h7nX+tih91UQDsz5eQoa7A+o6kBf+JvGIEpX1RTxWWd+d3cL\r\ns2j4Ej75wijl4Y2zIVoSM/IXkL3Wfc5sAoMYiQTw+AOraLGwJUN8XTZxS5Dm\r\nuwEre9qtxq4+o+CPjHSiqjHIq+Jfpf6ABfaWpyxJwJWNfV2SooP4nSRdqNwQ\r\n9wcyKJWFJ3DQmGrniZY/LIREughV85ZMErdalifpTjWlTPd/blv3cxN9AeM7\r\ncX/H1Phmglg8YyI5F9WEoB9PduOj+mw8CLA=\r\n=lnlh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/focus-ring":"15.0.0-canary.215506426.0","@material/touch-target":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.215506426.0_1667610377486_0.7153098989808979","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/checkbox","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4cf917476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b642558b59c326b379fac5996756b30618a313c0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4cf917476.0.tgz","fileCount":42,"integrity":"sha512-z5sH1v1H7UyYtJjDIdpdKKsx3xKNtVnMDa7kVOE3NsmCh+eIZ1Mb1PBvunjXflV8G+COcINqrcVGC8l09CMNzQ==","signatures":[{"sig":"MEUCIQCfzxIEOMSOR4v823HY0Mjr2bV9xSwui44UZqf0b0dcJgIgPWllOwzGMGXAqNEuQ9iuvA7lvUwIzYxA768b6allvCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6VhAAjsip0yrL5UE96St6tG2+APhhngELpSqU6uKrvuU7o9YZ/Kuu\r\nwsGViGRVZ6pxnwV+/hGFiOVf/Mw1wnDSXQLFWkcs+O4axrT5FD/XgV900QTC\r\nuGiBWu6e1cT1dcnCZp0OwJbtuc/+kVkCEebfKo4s7IAJne28Wtulz/bs/AMZ\r\nA2Ect6/LTUYZlwyNG+P+m5gu0W9ElrukXhbO8nlSSCHnxgaJDXpc2k43D15Q\r\nvVQctMEKFRFSih3PHJgD+t0HoNJNIR9ojX+7WXW+g3tKSWYLu1gtzo6rnGFt\r\ndlOIZoly0xJTiPFI9Q7Xjs99vWs15jJR5P7Sdq4zj9eU14Ki5xBp3l6t1i+c\r\nPx2h/4TGYDFSODkF/i2KEHRlgIM7mfZAI39gPbmIP6aUkndg2PaGMAF5t8T1\r\nU4c2JIcKYH8gZL0zklD/Bstoslhk1NRPHFOev1EjqrPClP1HeeAcWx6Xb6UB\r\n+8NbqV/mjBCbiH9TE0VpkBzNBrPU1ctq8a61+3I6n0qWaH4lgqqA21bKeOdb\r\nIemCnMtM8IstYAmxHWJMOezp1QRrSt9QkJy1+0pBjnkgmHCXEhNMEjnZhSon\r\nUyXIscocnLScZzt53UmHMGpQK085zKNZqyCg3JeYb1SsC3fwO3Wj+ftdB2ky\r\nUwp5bdvql+N6S+MQyczG4CHdrMLhT+msL8A=\r\n=n5Ko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/focus-ring":"15.0.0-canary.4cf917476.0","@material/touch-target":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4cf917476.0_1667671461887_0.3412673531360304","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/checkbox","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d96e684af0102e227071a62e10bd0844a147171","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.eef14bd32.0.tgz","fileCount":42,"integrity":"sha512-TSwU880FDD5xQdxUYQYZ99GVkjvfu6Y7J3W9STXcJm0OSX5zLa12uf03n10qIVnuJUlsIjypk7Iotn9mDfyilA==","signatures":[{"sig":"MEQCIG8fvIgjFXXFVO/exiXuy8PtZGTeBl3Kz5qvIyRImFdvAiApwvDccVpKTkYwxe046Zji6GN6nEtJhqDC+TINuQefmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdFw/+OWEcPWwcLbmmC+vSdHvup73uaWjXakWUdamY3zr954Aw5fAr\r\nQKOQ1IVvhg/tadJn/fl/ZHLVnBn0d/Lj6clO7e4DOXKhXs8zoM81rZ9Dno1T\r\nwWT7+KVkYCjTDnGUFJ8glpgt9zZxveggYxVWlTwkg8kOVkymfShnLFab5i5F\r\ndSm6PDwyWgLekF65auo17vGt5gKwawYODvnpo6bbL2ZpyFeVHiEWeEdQCgiK\r\nezV0/n8wLTTW/M/jFGfHjokJgVFCYjMAxknVTjS/SwvH2aTljBQd9u8YF/Pg\r\nms/CZ99PGA+MMv/lY433DovedeSELcKftZ3vqeeV2jgzx8fa/nx3/LTZsljN\r\nLkj28fE5i6nU08kPrao5GvFwlF3uouS7gT3iEhHrB1LCS7jMa+cPZOuQFEgh\r\nf6DX7w5vlFfqGWaM+9xsjHze1P3vcI+ERNEJivUgn7QXrrYEYQ1Y04QhYAKT\r\nifW6RO5Q+zJagXXcS7bhtnS4PW16ALfvZ+CTN+iWoPnk8Q0YQ3QK0EHFuT+b\r\nWCzmRmoArmf6U2/jJCHn9vUkvsnJGfDAIJiyRLnhXFnf1f47s2upi8UPUlwE\r\nw+4CjcoQLIqFcn14BTtImxTn4vs+hsQ4GoBLuzDrhTMhbr9Y/OqJ6i5326WQ\r\nprhANRHunWkrpE314eWCDNBGufq/SWEPdo8=\r\n=ukKS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/focus-ring":"15.0.0-canary.eef14bd32.0","@material/touch-target":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.eef14bd32.0_1667755493430_0.0036211076529919506","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/checkbox","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc5cdb45ef765f6fe6746de59b87166cd9fa1b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6faa29fe9.0.tgz","fileCount":42,"integrity":"sha512-O2o0W0AaGU4fR+y5VJ4OkheGg7f+RxTQLSBfm/XrIlZZ7RrfrNl538LjLhCl/dbVK9JDimX8ulV7Kkyj1Khxxw==","signatures":[{"sig":"MEUCIQDgg/n2vHAOtFJFOuZdHFzw4x/nFrYePzIQCa/ZxqG4lwIgelGm/MjU6WtyQifaTwG937CNNLXXPAQKmkTXw6q8Als=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHfmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlTBAAletVmUxQn+EgpK8F1MlU/1dft538FdJkrAqdUx9A+O8+f11i\r\n8sxj2gi/DlXnkRZiofmtKyWvytv3kG+UKo1n+o6CQ5tSlTUN9gNbCWJiJZS3\r\nkCqpYfvzMNQapW7i2vbZwYjQIDQIFK07MbT3hqM8T3IADUi9ugAVXc876ffz\r\ngL25f78rw1T+I51XdqTh0xvZtaUbaWIsBoT8wLfjyAJ/yUJHtvHZ2mUtzSGm\r\niidJYB+a5XEHvqVzwArtP8gupMlQAtS+SVAUfJ8+uUc1/KWxedhZIwuGGaE2\r\npUDoT6vUUhd4zbNQzQi9fQo1K7pOLuiHYfU2mc1wMKYSJIjFiNZY0qoQBGYq\r\nknQe1x8c2wXxWN8kn/SbFEHGeQ6LeLOse89fq4n2nGFnkj+kKl1Y2EaLJ2Pm\r\n0FPxMYX6zk8nuMmeOb1BFY3fTLtEmrTL+bpxQDuS00fEcFkoncdMIyeGI/Jl\r\njqa42k5lGyW63/dDmNLpe3sypSiqEtOhfD6C9WaCU8/BRSrEmmyuSH28lMca\r\nBuPk9rKUOEGoNWUUmkV1+Mc9XQrwGotXEviOtw09HZ5SIiDbaB1F34Qs9B3V\r\nUqXyjqq5pSwXA7HI0Ds1Iv6sAb2O1AdSiARxg+uZw1G5v/VL/tyUAe4xoAer\r\npzpRak4q42LygxGJemWB+OA469O0vQXqo7o=\r\n=KGCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/focus-ring":"15.0.0-canary.6faa29fe9.0","@material/touch-target":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6faa29fe9.0_1667790822414_0.8175627848452682","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/checkbox","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9af09b967.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23350bed838f75e70e40f5fde2226c82acc59759","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9af09b967.0.tgz","fileCount":42,"integrity":"sha512-dMlRwo8+w9pVEHMC9XX6udiJNwTKNgpwF+X8YxdWoYrnLZESo/bTt7SLXrAsTs6PufauU3PDEhOiHsFqKBpbfg==","signatures":[{"sig":"MEYCIQCTqxak1SSXubMSc2HLaRc7dGG4BYfM7Njdel7oeKZ84wIhAMsIqZFgGf4u/yO/KD2MhVuZ4ywnVafahV17Wtxk+7y0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU40ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/5A/9HgpBZHCnEj5cGfoXT8+V0tL7OtVguDIAxmX3KcXdiU4CWk7L\r\nc3uBZBpMOmR9LyL/IfYpKpN4SpaZhB951T+7os6jdfdyT7udNvL+YfrAEJ5R\r\niIOWDoRqcSbTUuz+xQEuHdZPTBR8JAtF3MHqwmyyxyNFshsW5hRz7LRHRr1P\r\nPtDsM5ZxihgGR0+HW0oiFvt1BNRVcGvY7LL4JHTFOzVxnZVuPo955QO4Acas\r\nZh67WWeWq7lp43qJ/geSvPAA3x1M9igdG4fCVxAxcwkZF03+RYaCDl5tD5o/\r\nLDWiUY6OLd5tvc3QvvPfeUisK+a6qZqwUkKrN8b5nzV5v+iJCti9rrf/fGEl\r\nPWIiOi4KQZ44PZrNK/CSe29kJhyUgvGIC8Si28YfqcoJzfZu2LBD2p0F1/YP\r\n4nTAKaTrkL5Cy+1UOCuUC35LvX3yPc5SLzieA3xsB2yBd/9zEiKPa7ECoc9b\r\nIJdsN9PwOOgz8mVinGT2dWJL2e8iRt8NwSUnU554K+y0KYBf+5gAjxKD3eMW\r\nhrdrR45tQdCEs3sPlIQcRgaJkl3tB+rkSKkn8dwYx7kzaN2C7mCaAuIlKsmG\r\nLVoCYyMLpLPCsqFI6sPceNjuAV8kqqQzqPdwQpFmXqPw0bp3aZV/IKpf24Dw\r\ndTUaRYPLTnndi5iWGGCzpEOGZvHxcEiALZ4=\r\n=EHby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/focus-ring":"15.0.0-canary.9af09b967.0","@material/touch-target":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9af09b967.0_1667845684614_0.7259310982349823","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/checkbox","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"107a17d31259a0df13ddc880b94a96546bca1efa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0f54fbb93.0.tgz","fileCount":42,"integrity":"sha512-XktSb4hE8iB6Dlc3EDExqsd+TkGBjS9MMB4crjFtyopuYUjnANa3QoTS6Por/ey9vwh2sXLo3wHE2NDjq+EmmA==","signatures":[{"sig":"MEUCIDD94uTVWCyDbcPa2qSP9pGI71lJ97iMp8CBcrICbhvUAiEA9jwryDVy2tKv0W4o9yqz3ynudE3mrH5rek7uPhElu+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsMQ/7B0GcstY1yNycwzDesZLQNpyVSF8vqVJwrCUQVIA8odpO9JZ7\r\nCfxOueqNj4XStq3rE7MjypduW1A1jd+R1paHlwgY/mT9r5XPN9ixtracyK5y\r\nDSOvOjUIwsRBLh4T+WDKAoOp7nPYcqDXqdug8KGwngXHMvEjFRH2zAeo69vZ\r\nGEzOpkRhvDai86R09O0OBN9RdifMxhB79fQ1JrxKrTsEJAA0TvyYA1Foxdeo\r\nJP9oxhDZ/sGwU+gLyYrav4Xe2dfTImDJZd09HeD3ITSpqS+ZE3NUAPDmHblM\r\nrglsbmJZVcWEVHGnIBQAcDhehoHryWXJaVrk5nuYqS41K4SmZzSECqQztfW7\r\nxTpfIJoMkN87+VTG0FdMQJGkWAxrmj2rRywnblsfIWIDc4itrkL+7OiF1oTL\r\nFhalKWTbSxjCkWMsXVHFIngRw/jw4N3zAvgqibCryqb8hMB7CqMQWDp8VaZA\r\nw+GVYkmbeYrqXQOQ+QyYxtac2u5IklNFryf07mj8LTx+ZEbY1QmCRkZ/x9Pr\r\nLX+4B0aULuav9Wky1wfq1iqFCg+rluWZP4+hSG3cj4hNwFwrZvhdEYY6fyLD\r\nTPMfa5cIv9Knb9u+hwSK398GEcKG+LlmiBKhRvjD1CgZmg1EKWHGwdNeaiSg\r\nW8zmoDYe14a3ZNURpT63S4w9FF3Ozyw7S0c=\r\n=X0f7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/focus-ring":"15.0.0-canary.0f54fbb93.0","@material/touch-target":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0f54fbb93.0_1667944611905_0.38863930714955996","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/checkbox","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b03770a1f9b51368581f1577b1862175c98ee8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":42,"integrity":"sha512-KW8Ebqo/WK6BVfVsLZb5EUZ7IrK5H96oBxfBstwkjOWaCGlFRleDmVBOarW4U7T94J5m4NMqaZFe3gRfwJwmig==","signatures":[{"sig":"MEYCIQDGVkMkdUPwsUFPy3PAMywme+lBPXxGJro1u+pVrAStHwIhALtBN/JmZDA/4rQZD4BkIt3ikXhdn7kZEn8DJGlw9saz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayoHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGrg//ZrxcHAIGac8mKSd4hW+umOTIYoULE85W5sK4sLU7u0+HhynA\r\n+sDY/99DjBOldo7oBw5j/qGLDjALf5Ul5TC6qhamCdL1e2ruGCI1Xjq24Y66\r\nQeuGkgVk2wiNfb6yflFtkZf+b8NwOdbCNxDYDiABu1VAkn9JnFN18waEduVo\r\neHCs86cDtk8TdQmwn7X7QUhKw1h7jOMn+nHx0dSqWIstbZ03xO/AfopbkVpm\r\nCBOQtqG8jKFc7MQqcNcVcGRv4tCA5b71RwaFx/yd4I4dmAWz2YtKwi9UAEqU\r\nz/7UTJW0PF3uQWUbm8Jcj+EYetxEaiiiNI9phtNm5IbPr4QG35cu37ZsQAK/\r\nMTsZCzWh0+Rrkp0qN3DEaygTimWq82O6qXvA1iGC5ZFAl1S7G1mpyVeHMDIo\r\nCzywq/Y82LAloiPxWF9xJV6ZjfMQrsiRCpidK2J6ezxojLFbHIbQehsZGohm\r\nlA90CVKcnWGwOVB0i4DDwK1crbEsgTY50K9Trae7ScccFIkF+pf8fpTnnvQI\r\nzMJQQtI/waJBUXVFSTQ9QA8JQrY2RNLBIKBRG1NE8ZO8eYUlG7wtQATVB2LM\r\ndg6WLxYJq2yFIuwaGKAbXHoFRVdpU2A4llZVT3f2ko/K0xCnDZwfopLtq7fx\r\nN4+TnJUBCYTtEA1OdSKyXiYEVW0zEpycqvA=\r\n=M+Xi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/focus-ring":"15.0.0-canary.a8d47f9fe.0","@material/touch-target":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a8d47f9fe.0_1667967495666_0.6228982214387111","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/checkbox","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"503aa6a4dd1f21f4c30c46fa6e8a2d6aa080578f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.66a1e75e6.0.tgz","fileCount":42,"integrity":"sha512-kuUTY9JmAp1k0Av4FlEYiibpSISoczAM3tYu2vx2ISesExYSvNisq9DdrANXCxI2SVfFGQaLAMNwL6PtNR6hFA==","signatures":[{"sig":"MEUCIGjaS9K96COSR1LyVIsqYHr82O3bv+gcySr0SUoConJnAiEAnpKc45k4iFY7BqWF4tI7NVOOnL5KrUxcxv5CDna53NA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3R4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIWg//b4Fo53KTlzwSgZng7sxUTlu9UN5jfrHUsXZJAA3V1P5d1FVR\r\n0LIOaaVLX4ukXy6c/q31WRWyyV994RzoHVgYumOtjyN3bE3JbuOiPqrcqrdT\r\nQeb8/9/9QlX/IJp7Ls+2N1fRLFYCeMtQd942vzRCkIjcBh3VSXH0fhPBKCrT\r\nLTUocISWu+nojQ22Mg776EPPvSigfvB1v0/ld6fFvTdsmK6/QsnCpJ1w39MF\r\nbRLYx/VzXkfMTq04kaDJL6gVTF+s91s12cBmRusaKtQncT5vqWh143gDtyuW\r\ns5LeUnD35zOh1IREyEdslmPvw60sNlIDY+gw7klgqsyYs2u5Y8O08+C7baWN\r\nVZcQkRV4jZMFrAL7OzmpPs70g4u+NidSsupJaxHoMt3YzWuE0iD1hjDKGcsX\r\n8wmt1rU0ZLABfvW3DrZYB5HxCpDfH+uLiZPLXk8z+01Xz7z+dhmTpwnbaFiR\r\noo24Db27Vf+n5jfa9LK/5k4mrXqwNaWiyhHBoFV3bao9OYjIeqAbAaKW31IC\r\nfkzG92uv5UeLzaBsYe6hFOrCUYm8VHtQsqENR/KzYsmoyO8weFqZzAk/q2jA\r\nYwuXwK/YQT3zbefhIdtFskx0tDvAxXt4SDT+K2JEWgu9aiD2L4/pd4i8ewBw\r\nudcqig1BimbZup+BIhxkeAx1g2yJ8IMeWG0=\r\n=+yWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/focus-ring":"15.0.0-canary.66a1e75e6.0","@material/touch-target":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.66a1e75e6.0_1667986552034_0.015959046950963174","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/checkbox","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6968960a2e8bfdddc90d6a3776b664a8cda4f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":42,"integrity":"sha512-zZEITSnYrKoJAW9VoDVuX4xrp514jVai8fseWdHnZjyEYr3Gd588nNPua1+shO+FGyZvWp40WuOEHixxruFQYA==","signatures":[{"sig":"MEUCIGHROg3oXcy9DQYX5GL55ji8jEFHIoh5wUgx9R2EWCD4AiEA5H3CqAAZ7GEGKvnZ6kNw04dCXCBNR5/nlwyikDH2uls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5S9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU2hAAob0OtVKqWGrXa+acBEJdyIh2gKxf7TuhT6nNz1CRhcpVzZF+\r\n6CH1pWxrXaM5e54KsV4igh7jhBraD2PTwrGtFoTK1fXJ3D1ymTVCYMaLJF92\r\nsP6hax2rwYS2kMTcIj7YjbeBI7I7MPclgzf4yQxwRFsUGh106mrgW9D4pb/q\r\nw9coJ1NrC4F/zgFv2mdaOykIaZtf4+Ulmicn3Xmlr4X4Js5n0MlUAjk7kBbq\r\n63SzWLdaGkMoT2eHlPbVJq8PcETtMz8PQ3lGQceoViPBtsa/tiVD35GpUcNF\r\nj0BkPPtaKO3va0DiIDUDqgPSagDzxiQClz27ZXWaKue58o5xBlwedtxFwByp\r\nFiBCOAtP//L+ZdRVjxkrHTQ/g6c7gK70QfPstMzSeeKPz1nvaYmwYfpf71L3\r\n1+UEQlQ9byWD0/0rOZBNKgJFyHGaMBMcD2yn47ZauclwQEioJItEgLy6+k6c\r\nFqHyiocwXoZaFtxaYhTQlcFBqaVNHHVAm7Pl6Uf5oG95ntdtjdmvMap43Maz\r\ngiZcjHWpcvbnMWT2ujd9Q488TQ7wUWuq/TkDGTaEB8udyDlDfZO4Ao8pd5Ie\r\nuaSPe0TxdTyAW1qbJQUc8lFVXXkQOQv8mCpA2fZhMkBEvIOV8+D9xPkQZQqv\r\nrjMwDzofQJd7hCXC+rewNnSMY952aorlDU0=\r\n=3qs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/focus-ring":"15.0.0-canary.5e5c2afc0.0","@material/touch-target":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5e5c2afc0.0_1667994813535_0.4574137773634679","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/checkbox","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84e1611f6aead69fa68c65a884e5b7257122cc51","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3e3f43359.0.tgz","fileCount":42,"integrity":"sha512-e3My/9DYzExSXbWvBHy4ozBtv0MaLbVhZAb6gt5x7Y/3hzt6NIc6RLJMX2lG9PYQWqlao2X6Y7cg/2jyPrMbZw==","signatures":[{"sig":"MEQCIFjj1kDfiLJa8HFyg409PFv6MTFSnfurocdbY1Yve2e1AiA1SInKYYxuKaZYxt3h2EB4hMi9QhG67bVmBVy2jXc6lQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAd9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVfw//cV/BZlJ35UZbjb3hb4Un/6ed3QL3dHE3R4Zt0xSz/RvFjIrc\r\nwI0ZipHPSZfZKERLfYPmd0nfLKfALJE6wQUFwzGN5LxVy7Fb0hpEpHNP7MmX\r\nYmXVn2l0y29rcXwHBvG4MPwbpK3MbzMs2gOvjiosRPpHkt6XGugqLIt5UD7l\r\nkIYbWtekMRZGukTS7/dLKtwntElNatHxSkca0OdbEFBOX/IXcotcJ+uyikzo\r\n5S3FH4+qLmtW2gzPlAyE++sW0ygoChxc9Bv8cGRr4faVwiOubrphLNKZjP8u\r\nabN8yM8VcumzJoPkVUV7XYMmP15scWwg4nbJnBOCqhlzG1VVrpqEFebAD19R\r\n0q6gy/LKuR8JZxJT/TSgugosAxsbrxN8yZYgGDdWSjJwgskhELCV3z4gUIGg\r\n7aJZeRNtb2SBnAg1o/AW4hyYZ8foPqR8FKSATUdhTdsl+VIDAujimCfpvncQ\r\ndE/NqMLMN00Jjad1D6OwE4o+Ym7D06AvLF7SBg/gVTJT0Ce3P/V7lMgw9wno\r\nWb+4FSYQvrIwdEWhoEJ4FKJLk5c3vPqahOH0ef5jmWhgLy6U4euQ4htIYXk6\r\nokCevC6Le2Bqd/xo72yH3Hg/uxBYlsuTEnjTT67hOYc/AlCdLwly1ZSGvy5R\r\nYQW/acrAukcXbpYxr3J93pSJdRnPPJbErHk=\r\n=Sac1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/focus-ring":"15.0.0-canary.3e3f43359.0","@material/touch-target":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3e3f43359.0_1668024189497_0.6284764598972636","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/checkbox","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac095d3a882c366fdeb45a28eb1ff255a65d31c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3f667fac6.0.tgz","fileCount":42,"integrity":"sha512-HItT4x1Bni7MT+7jpEd+5+1vzNbL17nCmi0CBKIYMm5sS5x/4jAuvLckeKJvgLOALtSAkCbBkUoDfIyL3pnoeA==","signatures":[{"sig":"MEYCIQDbIKeK4TnBECcz/4JW3PmUZG40gFZby35zjnIJriVavwIhAMWAIQ9XLg3xq5Fa0i+huPbgeyaYtHieqikRDFE66D7h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqL9hAAnFKtHTVamnnCKJ+r5oh0COMdlHfj/jRNTWrIcCwYMx5I/5iL\r\nYkUKYMGcqWZF5SpyR4sWcYeU7MrMUDw8NTPGddiqyb3kSwoZBQ2sytaoZo1g\r\nJWVm1iQwyDVKZGEJzJ0X2OspU1zGVuQrAfCCphrsCJW1Cb4rJZy0waa4n11Q\r\nCfQMl8Y89N1q8K8i0wd2EDDelokqhBo+4AKDr2bFdk8C/UwYx5XUyk0D24MX\r\nDSeTepz5bBKjzmHJSMe4WLZXzLfN1i8/EPODoWlatEwTc8QiVA+PfN39AIHK\r\nOM5dZpc6Mcozy7luWrIUZEhpk78ZN1ZPSgkwZ1FwrRNg0f5Sm2Z0MgXVHNkY\r\ncWD0QvzRWa095rdcz6m7/gBvV+V2MTX1b7xgN2thpIeE5xrd8UitsFO6YsMr\r\nDv8W99PzPM53VaV+1QEoz0icg+EhPV7DGnbvm3qmGyGn6H6YqHrhi8SM7dfs\r\n0foLJjcPNrlPUaZQbNCEUQsBKXhpM02VQ9YTSTzf6D9JWX79geUmjKGUvjEL\r\nlE1Pn0WIk8scxtDsZWcnrjj6cEttoNcwhvoK0uQiD+hAhHY7f8Bh9qHD/Yeu\r\nlHKKv7sEh+AG8agY0QDBMrUmL0SraWwKSbFv1JKEAvl9D/3A+/7049Xcmex8\r\nOIa4qlUAL13zQYKB7iCxvP3QpMBJZCUHHVI=\r\n=Iprk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/focus-ring":"15.0.0-canary.3f667fac6.0","@material/touch-target":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3f667fac6.0_1668031583416_0.7093699674985661","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/checkbox","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5eb8a1444bb53285f061d504cd835991c4c7e515","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.faa28c1c5.0.tgz","fileCount":42,"integrity":"sha512-Ax/rsHiMG0x6B1MS5/giEYVJt8tRMEdIliFMW8+uXrSNasxqpbnd42Qr7wJ4Kg71sItnLm+kdOYYqfq6Z+HKtA==","signatures":[{"sig":"MEYCIQCksVZt+damIM7L1Yq/eqLmIPv02/FqEFaGrfIt9ITrfAIhAMi01SBd8AY6zmBdjFe9xzFWKBbSigf1KjElWaPjPbCM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnn3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhZA//ad8CL7Ks9AusmIM65bLFlDbdd5s+trirI2/koy42tQY/G549\r\no/ERv2ErwaDf3016JoQf3sf1h5W2BPuku8HAkH3jK4uGO0efhKeM9iLcaufE\r\nTYI9IQjVFIUZr57c8ggZEIezzLJ9hzpTbSaUnFNeuM/0yhwTksZBfC8Mw3zd\r\n6W4N9LdsIboHLcCYkso7pNeQFww5qk7+UUJrtEPugh1FJyCgKsU/N9EpbRmT\r\naE0pJwjUrL3jtiRmwK7lXUC257JjSI0cm8pGMmJeRHQH28jM2xEpZd7kp45l\r\nDNmMaVxm2ufprPiKhDaFeIfYPEo+daNE6iYg/x/cm5UhhXGF0tQaCrbNknHz\r\nPuGeXfQhIRC9AA1211lu1G3IoxysijyNJQ2RBNeAEx6bQBwjXPLnT9t5EBo5\r\nvfOB8UQPgFKnHZFqo01u7mYlhYRYL5qzLEol0woh08Aet620J1RgiPIXOBqN\r\nC/tvlVRohiKO4Ui/VQSq0iKmM7/4BdNayC5okXGwowquHlueZMx2nxJslv7U\r\nSW9GVOUMwkxEUxewFgELV1yvb9IeUj5nfoany5D7e3fh1xcV9nkE4sym+/ok\r\nLzEnEhvE77G+nzq/JzYsscjCDvP123ooPRs4paKgrLZLpaWh0DmsKK+nwfST\r\nQE8G5Aa8fffib/MGphWyBp9hxjkh8aHLmQg=\r\n=Bcwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/focus-ring":"15.0.0-canary.faa28c1c5.0","@material/touch-target":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.faa28c1c5.0_1668184567720_0.7038389342209908","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/checkbox","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a868c7866.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4baeed04931153ce2a313f29928e8f7615860439","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a868c7866.0.tgz","fileCount":42,"integrity":"sha512-oldNB416NBKgbOFry5Txhrr/Ru7/3MHyP1QDOMy81/67P0leysqyK2zEBiPuv7CQ5aPILhh8ISRPOKhIqFoZOQ==","signatures":[{"sig":"MEUCIQCqk4ckxH/uSNL/94HiHHhILoTNXQaUoeIt6FSsQLX0pQIgP9R1j+2BHvRBL19KhWGDEhA5zJdyBumMq9pLHXdjd+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnohACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwKw/+Pho1FJtEJTHLExg4VsVb2vx/HKFl2UBQddo4/AG81wCsJa9z\r\ndC7y6Vnnfz0OwTdqwgfQbkOqhPBb64cXI2VX0ntm1FVyZiFeyJV44dLTbOtF\r\nT8ZqEIVXDIWXI4AwKYIVao9LM03MkbQpjNlO88dPRuDVDqPO8L9rC42DwBHK\r\nJQNvvw+pnNWThTCBRR1gQ00MQ+vggxEaI7No2qQoYVYsjFMAN6VVTJDVB1oi\r\nHsQ1BiI6p9IQusY/iiUNh69UzZaORxx+2nld31vFrgHtz3K4IYv1z1ISyoSH\r\n6I5BigZh/6cZeJgFMKcygANTlwmekqH581HOGo+IAjA177HJTrs2e+wE6XbV\r\nWvUiicpuW0NoiiWAm17GLrVcUgXHo0VHnkwNT9oQzTqoHupK9GOAz582H9T+\r\npavzkVUfQq0AeBFB7dd/iT5jl6ojW3KFRkOhcNYRj5BO5NyPTFi/ipN3yaVP\r\nNoOR77zLSFlN4Asz+HMaRoJ49LzpkWqUxTL1rN64TRUVyRRSD9gjdjkUtuJ6\r\nWbCkh5ZIYNGehOtWhKfncpULJmh92a2TiF37Uf8XVQFktvxN6/vuYx/1lzaG\r\nkyLjfiHlzllcENgTrDXKD0GfmSF//8RDbPKgNOC9WyBNKCOghRYtXgHL69b/\r\nNGscitnW03tYzxIeOpZvXs650/SfUxS5b6k=\r\n=uehL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/focus-ring":"15.0.0-canary.a868c7866.0","@material/touch-target":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a868c7866.0_1668184609183_0.025016447344949455","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/checkbox","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5548f2d9f9078b5ef77d6ddee30c2beefea07c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.602fe8efa.0.tgz","fileCount":42,"integrity":"sha512-Prz6Avr5b+jbl2cqIXKjoha+kbQNiGmf4VosTwDe53ur4M8NiNfMk2UB7xmejAa7Db/FsZmG5LrjvTswXmHyZQ==","signatures":[{"sig":"MEUCIGzO/dFYZpSdXJ+9frZ/HD4zU/HdbFWc2Gl0BTCwBcJkAiEA/L8cSqxkiF26fr+ANDRmxuqD3SUmDoRewaBwgXA/EgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB9Q/+IU7G4cTDnvBahbUta1CHhXgDpon/aH0MfFVqpkg1xc8ELIdH\r\nbAvffQASV+jGdI31VdSmqMj6vlk1KGWvPRFcxRV6KGz4UnmzIE9h28ucLyK1\r\nQMHnfzWbyzQEAKKM0McL2yNlhWQoSEWHf55QzKb37hdxBGeyBCsH5WB7c27k\r\n+ljakJAEFmlZAbo2LlDnIphnNmd1TLHnR4gDZkhjk2Div+AL4P1+mItlZZUX\r\nE6LATSCFvJ8U8P0qFigXTfiNEblySZNpBLckd+q5ts7y3mWRe3YR1b9soTKH\r\nVL3Ga5jPa1L41ZAY/0ZKJ44xvfBqmukzU+S34/1TFBtN+EdOmwTqi5noDZSP\r\nFeMXT7oYGClcoGhC/fdwyDktwq+E/1DQdkVicdqQnLDDA+5JURPEXTTqNp6x\r\npUTFaMiQmI/rgvzHk7kdmshy4YlST7ZbWYaeIyowqcSb+IVVv57T8jGKwPIj\r\nne6H94eC7c+TysVhmpH8ypXFA/55aNw5DYVxiD6YUfoivkzzNFpg13QB8z25\r\nm9gcNFRnJlexWnzUGqpkZll1ekuH/Zsy1O+zOt9epQFRvrxh2xm47OTsSni+\r\n1fVLPaGFr5eQw8MLrcqVSm60qzx0zm8QxKcwlPaLUINB0zMq07qOIWQdpig0\r\nYlZ9epqx7lJi0pnoB3XRXaQTWtn/wfOiKPo=\r\n=4iwd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/focus-ring":"15.0.0-canary.602fe8efa.0","@material/touch-target":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.602fe8efa.0_1668186726875_0.2554489480697326","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/checkbox","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.558c2be62.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc861f6974054b869263251d448051c5a66d4669","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.558c2be62.0.tgz","fileCount":42,"integrity":"sha512-m8DOzK8jF/GqOMedM29NlEqoDrhTP20TwOKj48m1xjlUl/6vjMcwhg2x/bTp3jK48vilaiKnMNXQd2HPJVs7Sg==","signatures":[{"sig":"MEYCIQC54THYmdxTszSBgsmdbTdXTSlybckDB0ke2FpyxUQtrQIhAPnILg3D+X8V4IeLYAad/V6fIbJGOCChIQ+bj1zbpZnv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG0RAAkZEbENGx8HbqE3oBWJhGGZ3Zr4glwkaTgBriFQD/iAbXYK6t\r\nSw0EM+B4rjqrDYp42gzzFznPhjRhswQOyIV60MtzmP0VJfuUG2jE8oVf+Eia\r\n2TS9d9quhT4ugBpgRpbo+xup34L2JSYYPhwsS92vnl01fs+1C9KeEcEXuLDJ\r\n2duHD+3FfKlEGEk9TEmyDXf4r7Kj7gVgQw2pm1tkkVqx7qvHVosoBAN3XVLZ\r\nPiUcoWQQh6+Da5x6gG9b6Qe/R1TVIWmx/w1kObkyQKMx42ysTMpkUOI6iSdg\r\ng8Lnz2FyXKNEQ7eit36B0fpkbk1yCHowfvGEnbH59TLInn/x0xutQA9utb+O\r\nDeNaniIesYWsXNl/30TaHsNfRvPtuuA/00i3HCmA3JEwG+zoZ+5zP/+ZWD85\r\nLAhQFJA17ioM8iPz6G92Gy4OxCrQ2mOs7OG5fe6kwcBwVcH/sj/EnxIpBLB2\r\njxVdhZuhrmVcMGAQFuXrXeqDBrB+xfKxWRMzAkP9F/SDbAlGYqRG3hIkFRRN\r\nQVIXpy/8n2jBffhaawhXebEpO5eHVCLORafVuwrga+pWf55cGULzJxS5ksiC\r\njlEbPcmWH8XhzOzLqM4nLo7wwYLaOetwYxvNhwGXeljiu1aHnrF5XQcdoZ8i\r\nu4iv3st2kpkdHtOdA3e77tkgAAmj+Tn32ZQ=\r\n=Kxyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/focus-ring":"15.0.0-canary.558c2be62.0","@material/touch-target":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.558c2be62.0_1668206733405_0.06811772416198458","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/checkbox","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1227c3a578142492771145810489d83105a85d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":42,"integrity":"sha512-74aDB3x8+a+FBsgHKbQSUVRoCS1arLgt+8hWlk6slEYdDKxzg5OGZGlMZcBv0zm6Ir0MCfOnXuD42VLFu1v95w==","signatures":[{"sig":"MEUCIAJ0t0+k4Ln/H9BQnyU7mMbci+5wh6rLA4VYEybfiDlGAiEAqzZUZvrSWwbPJQ+QHtMJaNlYRLJKMPovwpJq0f5SoKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmW8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhig/5AQyDFX/m2ki1Mu9CL0hWisuiIEOSKMYTD8vQx978X2MEqL+6\r\n++t+CzVnpc0wbaNu5fP5xr9/G+HiUIjFCbT3m0zh6qYH+ToWNKgAC6gkrtvM\r\ncUUxh7NhFZpWjCwqz6xLLoapsgoSynh5pR4MvfHh0dACZ3RoRNRP3qFExmAP\r\noP+0bYc+69C4CX+V4z/06wVU7z/2KXoBW/x23O1ET+6jb5dr1zY1UQENY1UH\r\nFMsH1Db/Sl4UHP4vFv+QBaI9YPehTdOiVKQFRhbWtOKVtOMOzdDyXapLbnYT\r\n9qPSg630MXZwH8FESh5SgY3aV+RCSpac2pWkyfF7gw7DXW5eZdpUiDuZhXK2\r\nB/uRIhI0tWZNYk+FyO/A9U3zHrW9YGtJ08YEHBL3jE+kxATMab6lwi3LZ5wE\r\n4dcRidYeBixHFLyd9fJygzAMNkWrrq/q0C8gcGt34wo9GDfq+FbEeie9mBwR\r\nVf7jhTG84pbeYRGH5+hqJoh2JACbgGoNHVtPM9XA6Pmoc+ecd6nJ3sP7Y+EE\r\ns/4vN4dqrl2vbDOyA7FGOc02K5hlGWbmT9n5mRUpg41TB9cGHNnvLCw9aI0m\r\nVf20v8NJBRH+CyrsEdU8DNvmuP8v88QP2M+dzfr6KOpIawId+zAd4jBfV1DW\r\nfy+jf36P6E/pQlZdAYDrDZ/KZrLdu11kHjU=\r\n=XDsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/focus-ring":"15.0.0-canary.b5c13a7a8.0","@material/touch-target":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b5c13a7a8.0_1668441532061_0.012132438446809779","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/checkbox","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2819afc274f10fe6cf968e0dc19f9c276ef73f8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a6e1c0702.0.tgz","fileCount":42,"integrity":"sha512-kiknmOcrWeosJ//2OsQkIdydCDUsS++asfeBL80ov/RyxoxufsRFmbmTRxhaNl7F/O9tJ+t4KwVYq2KBZcaQLg==","signatures":[{"sig":"MEUCIQDYuLY00q/fp6064LahKs1u3ShLU3jZ1kxzEsvXvEs0CAIgQOR1YZAAbnlHdHGqEdUH48mE6ESwK3Onzr2eoEflv1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnp4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNFxAAmBca8ugLuIXBDPE65B7lFwbYfxDgMVPRtMxSxEzy9ThotOmd\r\nBdWg996CEmY1E9ZLjgWwz7uJCae15uGwFTKzlZeHdGvvBoc/1FaEBsDiD4cX\r\nAX1eJvPqpTVj1VK1kzvwWIp2l96ktvGiSaVIji95DLuGZN5nlbF0hbti9/wA\r\nVR3PkqUEwXwaB9MHQZhdiJAgB3OEzNSFNei8vwVoYkQpMs7WV4qbsoDsBr2G\r\nl5pxLMJ4Noc2g77vfT34ZdgY3svKCMGa71ONvGamVx/dNHylltFrqBhXiPof\r\ntIczBmGqTMlMZEZtqmLff1nwVfCy6buNN0zBkPdvZJlE716JnCVhZgcYYQXk\r\n6Ik1ve91C8Sbq31PBu6Twho2txViB19OIAwTMYD+DciYGTHbAs47dP2V/vOU\r\njNlapjRWvmbxPNLjaurSdB77zvY69SfmlamedLdCc9AZINwexXZisC/NhRdx\r\no0Nd93hCVsGEix6ZjCqlH/XG4/WpHs0Iofjk3J7Eu+ZkR0gH6i4IRlipKV/N\r\n1P2tdzbUJJ0e2Lwh58pwhoQv1233pN8qpggK/ZQy1QlbpaPQ5R+7LtCcDkYE\r\nv7CxrS0BxAvgMJBjOuI7QRKw2Xu3MSixZ4gxFf5TWTKBoHgts0RbZpzfsQzp\r\n/S6n9WYQQgHfDZa+yFUVYNY0VgkIAWKE4T4=\r\n=s3zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/focus-ring":"15.0.0-canary.a6e1c0702.0","@material/touch-target":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a6e1c0702.0_1668446840032_0.4517248277604362","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/checkbox","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a4ebd24d2be6b4469d31a9f5138a8eb210f607f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b6f8a06de.0.tgz","fileCount":42,"integrity":"sha512-/5kbCjjsc3G8ma1IDUWApQQ74mVLy/bPBj2KmrG+vy2hrp3EY8sgNKhOUoMV3aI9fn3VesVOALTgjgkkxYwJwA==","signatures":[{"sig":"MEQCIByJFwIEhOHco10UcL1zFdqFumHaOuk/R1DPHHXYNlYYAiALpeQ052CTn1B5PvLyxsGHCrnqitaXG8Nd2NmvNFD+xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiMQ/8DpVH5KQIdQToztozLR1BUHFEhy3ot+44Y+YEtusgWtcp/geM\r\np0P3B/3WmZUrmft1oI6a5FivkqttCy2phP5wqQEB53xYM59W8Xt7tUdkNBr5\r\nmYRg6B5BSt2TutWHUal1eZUO55anWNRdRfW5/64MY9tsFvK62GVbXreOlMA7\r\n5Eo4qQLut3MHZ4m3FC8BF/0P+CQZXd9lnfLJ6ugR2J7kcenhC+nZSxwqh/xe\r\nSkex+X3/ImldBG1abd5imcIkmeGj3p/9DLQGdWj4MydamXAoADyrzJBSvCW4\r\nciO5g7960l87nrz+dXtxIey9bL8wIL+XGMqsDQ+pZsFQbH0SMXYtFQy8/peG\r\nhFs1GL+6agyT6rDQlM1L/VXZWvcTYbP0bgiVt3pMVHTxRjcoJWzjHYd5oWTy\r\nbz+g3F8frKH7r1qOJD5C3M4IKlg6SHXR/SFcWFNdfOgDOuJo3G/TizlIiBbp\r\nPrCEFVPBKAK3kSGIy5Uy0PA2DLCEzuXKw9DeAwG1u7ifIGuQORf/hTWLOQsd\r\n0H2GPi7iKMfefG5XiU4GzMbKGyAgz9TNg5CP5LQePU29T3O8AgDgA0Vz+zUI\r\nHEQFqXCZs5KrocXEEwv+xTx7D+Q8sVaLn6wz/z2KbAjacq8zgvsLvrUbLZ2Q\r\niiTwdDPT+CQPMWWnwVR6TNlMBV0XvFh49XM=\r\n=bhY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/focus-ring":"15.0.0-canary.b6f8a06de.0","@material/touch-target":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b6f8a06de.0_1668504520624_0.2958337427075386","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/checkbox","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12188c487cd429a4890f996d7317d477234e5056","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0163f3ba5.0.tgz","fileCount":42,"integrity":"sha512-qvdogf6OS3E6s7FJa4oX3lrYyD3oWh4QajvHXch3jpqEVKHLDhcs4c0xLiGthQfSMy3CEqiOGiohOOM+7q9Wsw==","signatures":[{"sig":"MEUCIQC9wDrOB/5SjsveYbsPNjqOebFpH6P9w7CuDGazQzlY5wIgcrwjgYEabIxFc7AfXOGBAftoJX66+XlPg1rRuYRDANI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9QzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIEQ//XYAaAg39GQ3vl6pJaFaVjoWD9w0fCTy4WJkvBWiuoCV1/MrO\r\nTVyAnwDV5//AOakPIbe+NkqF+yZDld50xlEwVjEpZXqytGja0A/5C0fsyuu4\r\nz6zMVib+4ulMsRdth3phrd9kyUySTkjFvGpmKtwM6b6PFfktZEg6b0KuY6/1\r\nfkvKBlN9sSAla3tYn1xmLtWjyreOXfdHyMrTOLA8TUKqChQuj43jhwCJ3TJc\r\n9sukc9X3npeLILudwRXbAEi23s8k74YqF4RFZJUx0IJ9yVdFjqKJzf8E/0Xp\r\nfHPhwSXL59vtZabTTk40JJJuSo6K3UoKxhbeqrtlR5424eEbYMEa5g6SRl0M\r\nHJUIkglSVfc8Kwhwqj+Hd+26bWCDevkomi/SEa6MyOxA0Gdmnl1cijtKqNiw\r\nxrS4FZLWvlaClk6Chp6p0UPIus+pftSU78XKx+MqG1b8Giv6GciethE6zqYq\r\njq0iD1Rarhqs9GnWt18b9230N1qojU6uHDGss3DRkwp38yPEv+gdVGvdjHMc\r\nQTgoJhPxv8bsdE9ZncUQBaMqu4MzCWCZV+U14+sxjM4qwzBq5j88BCt98Bsh\r\n7EFDIyVMpbcnlkVS00CXZym3cYrJbGC7Wydf6cgOrUchgKw1u7X9KweRxlqr\r\nwS5Qy3ePwmVGx+44HwapGNCogWzTLRI2G14=\r\n=5CNw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/focus-ring":"15.0.0-canary.0163f3ba5.0","@material/touch-target":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0163f3ba5.0_1668535346964_0.4960776869956556","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/checkbox","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19b5693667517ee3d3bac63ef051fc6da473287f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.66c5cbb94.0.tgz","fileCount":42,"integrity":"sha512-xxXGhmmlsqupq0JmQoEsO6vkpoCZ7gHpRDkxAmbYdVWeBLpZvH/hvZeyk+5hIFt0+uAEARsWUng1vpg088bUDA==","signatures":[{"sig":"MEQCIBDYtJAmylfR2OSjcH0nAUX/ceySoRNSgws5xVanwBBnAiAIDdKmiNqHk96R+XFtRZIABLt2u6tAzPwGd1205e+bWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobwRAAmFGmpeW/i0xp94abpCAagVcoj0qU+tSJvZ0Dad3PFsrj1YVh\r\nWcsWWGaoRbBX134x4DoN0SU/RSI3wTCzbDKYpbw00bxSrIiiNAx/XYKAouBs\r\n2Vmoza5FHMR/q7PADwJjCmiz5ExJMFtc5KXrc1z4SaJZjtoCmNz1tUDEh0dk\r\nJt0RHh3daFQrT5l7Vvxs/kKfoPV8Ljv0BIDrH6tQGMmWX5uoXKiFnL1aFjwc\r\nC6qpaGIa5Rr6MigqPRe9xb7RqN5cE4Ssd5ebfxq0/LjpbsMuamiV+sJuDB78\r\nFXP2paGVy/XvX+gL0E9Wc/JFGnthdi+NqxpLpbkGEsoyUwMPVmpfKxXVfGiI\r\nOy7dE76xPwkwnjajUul9O3LoAtDTlucY01iwqNRdWzKXM/a/YcOPBt9ueww+\r\nwnNKJMZ6CJlaEy+vs4VQlpib9r06Iz/8K7gUqm+lcHYmGnRjA9kUJD/nX/7H\r\nn19J8aKeYRbRfPHwEcpCokXHtHn58VHGLB4Usq2JAsliNU/M24ayIIAfZjQl\r\nq+0gHLrUuFlilUiRx/T6Yx4kU6YJHUH6Ol71mjqL982YFRwaRSqBKXyEKrzQ\r\nY5Jo0JflkXMAUYz+G57KXB1fEx/fL+0LbC0dzuk7q3O6jWxZYnJtTwWw9DYo\r\nXBURyACVkBnahctzd7WA8lM20YTQtDXAOsA=\r\n=U5mB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/focus-ring":"15.0.0-canary.66c5cbb94.0","@material/touch-target":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.66c5cbb94.0_1668540626969_0.6636752134792965","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/checkbox","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b01136063.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf368d14f1ab33940988948d258beff9e3fb973c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b01136063.0.tgz","fileCount":42,"integrity":"sha512-A+Ji1zN9yYVO/IIAA9CZSxp9dK6vBFe9zWkJ9LVCcGx5HOPJbMT1awrK42FSMfvvYRr/+RhnnpunqmG5JTVT+Q==","signatures":[{"sig":"MEUCIGaE0Ow32MFJBa0B8r1nkWpi3JNGLEhlmqdfJ5G2xZ8TAiEArTDudHR8PZi6H6nNmJsglTlE8hvys2/1hBR+SUa+RE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSUA//eTgqqyRNVixMOHnV3XxTkLDSj3azLno79cLFSr6Rn6aBT0ms\r\nnKF1hFsNx+2isWFWFzAxTUBCfQFuQuQZYP5Qv6VMJ5/Oyt0kCXPwg/Nfmo8G\r\n3q/JtKJ809EIZrj5Bv+3NBjLkxCeyOtN5indqZUToJHPvp6EV8VLDqoMHax0\r\nvaqeZomqlcc7YksFNX91gUSbr4OLaqTBWP4Xt+wajVdOHv3dveBt8wBFwBIY\r\nL6veArQBodHEgyEzwAJ885aHy4rljLFIMrz0mFbh65mfnb4FkQ59lcAphlXh\r\nGfeLlANArG6iHxCVZRlMsJsulXPcStBsURs60hNk0dWLLjDnlAZlmgJmcsKe\r\n7LUTzKbd42gQ6uvpLZsIcnHv5QkK2TcJHdy5OVIXPeOV+GEL3F8RxiqeXDJu\r\nR+ltq2J8MJoj0kERYHMlh0+rMIJ5dl+ZgVGPcVAmEWoax5OLcumok0WNBetE\r\nvE00ZTtX4pn6NL0Y/RKX0xgSccesbP4WYM43ZYu7dO5e1uf77JgtjY4g5ACU\r\n7f0JXx8H+K4qBNKLYRswHCW0ifbOfZsjUsI3Zz0p0Vnimno6JBqIP9bpjE5Z\r\nZjBJmExlD8vbCHU73akZfUB1o/Pf6gF/mkNM6CSRfmpDemm7v8dV/b+Iy2xi\r\nbAmq6fcPGtqfcqRXV1yOCI03zRcjTW18hls=\r\n=GpGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/focus-ring":"15.0.0-canary.b01136063.0","@material/touch-target":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b01136063.0_1668557768904_0.7941366274334518","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/checkbox","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"164efd4a626d398723a7fc34107faab802f1ea52","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.01da0cabb.0.tgz","fileCount":42,"integrity":"sha512-j+++xxJexpmdorvLxF6VMfwcntzWuqBEu9PKxIJul2PpuYZpZBnUumYs1ubJYEuKKh1SC2XEGAhHxMc0eD9qoA==","signatures":[{"sig":"MEYCIQDuIqfxQ2gWjb7Cvlv/KnSO8ouRqPvwhpIoSrGJQz5KAAIhAKWraMVqIV4SfhVluTUlFvkt6InnbcpXVe/Qdoe4ffZZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKm/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJ4A/7BLvCiNcrnwG9a2YkB2ZwugC9WfQd+us5jStTCEDoOCpxo6HD\r\nPasZUd6tz79Whp3C+3VJ97W0Vtlg52+5gHVIYPequm7otHgb6ti9P9F/YSlG\r\n+3LOVBKiM0aXqlUk5Gauo++6mpMZ9+GACZvwAoSnDDpLjlgkNZxEuzjEPJoK\r\nj6Diqk3JLdbFJXRtTfByTT9MQCDFtQ+egB5Uxq7PHTb89kbp5SJkefRUy91B\r\njLt9M8OY0d9shp3YonqasxIQR0v+K51X88ux+BXOyIak6PJfsk9LG4U3MAOu\r\nIyx3iCOMWnk6yzXGxioEkiS4/hiHkqqonW6ONJkOO8Pwp8PL+Rqn/J3L47Ki\r\nSfFpfkrySZ76bDjPECRfGLzioxcDNB2bnfeawgHKhKPo8TmEESLwx4sSlk2e\r\nYcACxujd81ngT6qhkPeihyEszCBaLcGd0SbUcd8PeJt2SAycT6mQP0nntRjS\r\niN516O/Q17M81MufN42PQ/eW+jU886O9nMZFJqlvCMLglYdke5ULTa6Zx/RJ\r\nc16T25asHiKWJMNb+rcNJOLCnZE6mB3xiR37O5mO1Ia4NNq6o2sWZL9EmMKh\r\nnf2XJnDa1fqrlsdZDzlphIOTs4lPM97sKF0KGeK/0fx/GAoYMi8DCmvw1BJ1\r\nkMU4F/hIqjeES58PXeSUgOBnWP2YDpQj19A=\r\n=VBiU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/focus-ring":"15.0.0-canary.01da0cabb.0","@material/touch-target":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.01da0cabb.0_1668590015660_0.778548230894555","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/checkbox","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4ac393164.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ab610b14c7d2e892fdd662ce4ac58b6a404d68a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4ac393164.0.tgz","fileCount":42,"integrity":"sha512-yuPLIO7wBPW11u8/grdUG/PbRNR07gfs2kpfxQv6vntqrOY5TCLWx7395ezLtbPzycvJx5LaMI88ChQ6WKNGzg==","signatures":[{"sig":"MEUCIQC9nYrsJOR3vMTzCMV6kB5djWLtJs3r/Wo6OzKZ0rMdjAIgU2R+a8DELz6w5420mX2MJZ9FHzKZjAjEsS9lQ0TRG14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQy4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXRg/7B8XPW9WkakoVfCnjfdaQ/JrZ4s9uCO0xQzVFezCALje3S5Ca\r\nSTHcjcXP7hptQ8JTRshSGIVmLWoS3GaDcXhWoHHYLOzFbeQxLCHwYdj68DEN\r\nazWMgS09/lqbZNP0GZYRi6Z/ZuVYJlu9USwyh2J2Fb+wy8YbhSAG/4Olmm4I\r\n8pZME4zgOFmBv2TZagwqPZAqXlOk8uCSgmmKIsQ/O6JWg3vSCf+FU9vLtPkL\r\nPrMNo5qlIx2JZOH+xE3AJXsOT29HR4/5uqmujrouU6YVMCqhRH1bho/kx4YM\r\ndHDEmDR+w8cPIOZa2VlNzat3DnEnkZ5AzY0ugHtDjm6Wzhk45rHv5DLlzwJ4\r\nj9yuQHkPw5Pb8EvFz9I6F5HTUF+jOnWK2T0GIHwzQ1HWzl9LhqSYFzy5bssF\r\nwH5A+oh3faG8NFdLJCTdsgyx3lUdTobrHs8Ghy8k2npfSRhIP6/YtadlvsUB\r\ntbqLGVRFrRr2yLKppcEQYK9kuAb5zcn72ND4b9IXhj1CQ/MIGFkrs89ecxIr\r\nasVcUH8irJXikFHVDOKE8V8hOkJh7GFaR3KpC9Vph8VXIvoLe4+P4z/zU6Aw\r\nEEIYbrmkUpRt3rVwH8SoIBESRoOHwkDVo9xHOvX7eV9aqpRvws+hofAt2InA\r\nSsBBVTIGOr/cGXWoVQCoC5IflXug5D8qBPQ=\r\n=aJYy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/focus-ring":"15.0.0-canary.4ac393164.0","@material/touch-target":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4ac393164.0_1668615351793_0.7070548807493056","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/checkbox","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6048fb563.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc818e1f55034f1353c0bbc09ee6707e4a1b6aa0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6048fb563.0.tgz","fileCount":42,"integrity":"sha512-Xd7qh/YEww6giO/wEfRBn89vLOA+PotLzOX3bGf5His/ZP1QmSHHEvz0CDWun+dKhoQJAJi4Tn186yiVM+dW5Q==","signatures":[{"sig":"MEUCICKVV3xffl/lADzi7aMLPsCIrk4ydvWTO9QgU+XwEkzWAiEAsTE1XH/3qsTBQQDxszBRv7l8FUmTwBHQgIWPX8wRDAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcABAAnmxSEs8mh0aIXZyl9KYtvX9kTv0vIa2qi8aJFmFjDCP1Ptun\r\n+h/Aew2VnijZ1qWjlHv4TZ2LJvQkesPs5NZpiAsBz4TDoLsMk7YPHzxgw4ft\r\nnjiJV792eXHeZuQfL6tIg40Cb3rW+HQWhy82YW19ECgG1ZE2ScN/7CTsa9Ou\r\ndmyiRIdrZdtVMENutuz79W3P5uUYPfFsFhySwVSAC3FqwvBYHFFqXYHi8oLI\r\nZpP15jSGOKKfZ+fx20jWX0mLC3TzpIIvl8mBfs1VbC099R6WlRxPwq9XLlgH\r\nMxjsM0SX1jh9yDw3lNa03WsS9ZeNH3M82fCfEtA/MUeqiy5NS008sp4dh96T\r\nwhT3hvj+COkwseYyqYjQSeGuFDAnRwuPWZY8SwEMy3CKutLU7ZLuuzf4M330\r\nnhTx0IU5bF2nXr4Aw5TAHoCEHkyQ1ykH4exsyCpBigd/uAyxxZOOzkU3AVqI\r\nVUUpkCOE6qSqDMIQ7QuiP3CYWSUaDZpcf+f+iue2Mwab9rnmjBZtof/1Cw02\r\n9AXVVWZPTcyK4bmujiPS/TVi/mY8Ow+Gy6gxpnI3gGWsNWeZfRIdcn6OGT2V\r\nLJHdHr7kFLOfvn6GlBhdxSV9VdZPg9aVwFThvJOf9c7wZgAg/wDyb0LZsA4z\r\nXdtq5lLZ0HalAdlnPd2jnvfqHlpA6vmohTY=\r\n=PQGB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/focus-ring":"15.0.0-canary.6048fb563.0","@material/touch-target":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6048fb563.0_1668615473307_0.37694461322172423","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/checkbox","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70087d55aa2f90bf45994adfe596ff41d336942f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3777b03cb.0.tgz","fileCount":42,"integrity":"sha512-ho2unWxE5i8391DhrBiiPhw96Xyx5VSX3a72r0UjOw0z5+06kKlI9TLkBYC7bqA1Xa8gTOE4oCdkV49wj5A83A==","signatures":[{"sig":"MEUCICjjZrg6FJTUTT6PsxS/CVdOKaNJIVt5TKYucHbAAR/VAiEA5VpK3nsy6hvmdt3JFC6jUrvDzCMWghzD8yFPYYQPJfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxNA/+KLzcRnvvx7TRBCjOy3Svh1ptm8IWBnbY/YYrMsiUwNPGau0A\r\nwZp02emqQSfa3/nXSK5EVP0KyGxJawJmMmablHW//OnI6igIycizv7Teh9US\r\nGUvFftqYhyQo5HCmlw9TnYKSlZPzUe5Lt3bZpyC92qPLHERGbvYDxHsmzmgz\r\nCnZgUEGy/Q1WqM3UVjDaGKrAVb6Ucox/BCHGptomTL7gc7/+6ieaprdYwR7J\r\nz7ImLODjuaEu9IdFYsCuCQSov1R4+TiZ9yA10dhtnzAIaH36sdxRE2P+P0mz\r\naPIVbqt7WeNXmx205i0kg7qBjgwQkKaAcTWdGxO9T/WDxL8qV9grT/snIWxL\r\nthTMV/TDUEhbqi1muZYdXgBHkUG+F36Yj39SoeVzoFfbAd11fjcLZJE5W3GT\r\n2hLhXk4yzsMBAJ6xdUrg513Hkg35G3EqIKV4XicdhSTbLotNiTQ+0mnY3aHd\r\njfGxZCsNIY2rknqQwI6SoKXSfGhkWSQx9J2J/HdNUZI+aLJt+TaCzcwuD1Nu\r\nLCt7jO4GYi+edYZLQWmABU1xhE9sXzZpZl0FcscZbi/cV+CPJMZgaMr6aUpu\r\nP/nMA1isOZWca+wF1sRA535R3lOqwhm2p8f29j+VR2HjbHHpL5lVvCboSOhM\r\nlBH3XwoF1WvfFWIOJi4meLwNlKjsNkJsXOA=\r\n=+qBZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3777b03cb.0","@material/animation":"15.0.0-canary.3777b03cb.0","@material/focus-ring":"15.0.0-canary.3777b03cb.0","@material/touch-target":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3777b03cb.0_1668624106444_0.7583705507739864","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/checkbox","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2118b1a53b8397e27e816c15dd0a2d9a75a2ce31","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f7f56fff7.0.tgz","fileCount":42,"integrity":"sha512-F/0Hw1GwTblIOe3IEVMPX+ZUw7wYmFPDnYgAPkDdrQmXTUoN+D69bQ48mtKR7CgoIGVZfPsPWo5Zy5vPLmPsqw==","signatures":[{"sig":"MEUCIQDtlCILQjnNTcktW8OHk232oN2X2WvvV1kb1El/A0L16gIgdB6rvk6u4RYr2cPF32AhZ+f5z44VV5WFTJNbhdgv4K4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVTxAAj4fKTdw0iGNP/dZnYhHhmCjxPjTrKvyVkCnm8YomVhLolB6f\r\n/wWFFvH00H2P+w4AVodIuDjl9cTlmN3ZBDztjQXL8s8O58KB59WaTcrwAy+l\r\ntJEbEunRU90ud8l7YMacuM44rePGU8bCbxNLbWFPLCdlx8Gi35fDQjN7FIBP\r\nx4ddQrC4H4JCvZAk0PdY+VRzAkKwS2oQlpTWXWoXP1vhcfvci2rgqH+4qmYp\r\nxNrVUmQ/k1ozoSd7rUlkIBuMVawTDHr5JDJXLK8mHjwaNeQ1uGIac7VNgcib\r\nfvSkTYzGplKVU7U1K4zMt6VbgjGmAh8BE756GQtHWLaiDNl2r3erJvntlh/z\r\nuKpNxkBMTCjWXr5YWfPUD5kD7AuJxn9ReET8axyRMWYuiP95dwvFHwhXAxhu\r\nUrXwA/F81dp65xGNr0Ea0yOADu8neWckLhWUnMguOqgGWmrG7+ZCsfrJ8BdM\r\now83uQ7qdpnCUyTszrxkplf6UfYBl3QYok6zVeQknzQ8TDk/6cxXj9mgru6V\r\nB3FBJha5EiEhGn5MspNFdDlzhqiwfErJI0FxpFNN9+IRwWL7o6IcPV8a/DIW\r\nLNHaMAazQi63xqHEnkzxT8hrvp0o+ntLXB5h1cx3rOwVq/1aKIDeyu+H1JSV\r\nkHOwMfRDkou10LVFCD6ZLaTpFs4asexH24Y=\r\n=+Fkq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/focus-ring":"15.0.0-canary.f7f56fff7.0","@material/touch-target":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f7f56fff7.0_1668628580196_0.9249118972932051","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/checkbox","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d35aeba1bf45323044aeebdba04604101f0b5d32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7c73f6134.0.tgz","fileCount":42,"integrity":"sha512-CRaFew0dmtoKDkzNwUkxLHSRoVosEa2/ivqhw2/MO1EHN0pkfVBWEhikXQrvbVL/vrWMNc4Zy521X2R4rts+mw==","signatures":[{"sig":"MEUCIQCfILOHT1XCeHnDcFaQvziNtAtjbdL8aDX6FBz4r3wCHAIgBJ50QIn7BnX4WMq4uYdYCBYeHheilXdVFD359i1O2HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUEyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfkBAAlmu8xAiTQ4ozgd93Gd+DAlnb+pxHnSd2C2hyi5Wd1QgAsEtq\r\nq5Z41wp3Ytr7HrR0DnYPnMFpw4md/yK8sGLciIZxHrglL5zJ8eQH7wPGSdn9\r\n8tkoW1dDQj3MEq3FndC0WqqcmzajByqXS1B7njfdMC8wI7VtXdTibjEAoNQ/\r\nr97BHD7w2SXEcuPonqXLXRAhDTCw/nilG82WhJW4G6kZIwh4rFsGbKyExFGw\r\niTUDMeTmdxg1eA2SYU6yqLKbUWkU0/7t+q/gxQRKalUjldtVFGlJ7mnSVxIJ\r\nhS82aOlnrKYC+DJsoPWaP0z8zTcwvn2pLoJRVV/Xp26gUUTaXHOvSTAp8iP7\r\nF7F26gq61kO+HRBqEWnMUc66+l8uBC8Fiaw8FaTAF0QePXP4sb/7dM9gkIzr\r\nFJ0WWTaLnORMqh87XTJfI4g95j5TgOeebCStS0vyZS0N3fWoQewRn/J08ywA\r\nGX8N0TuH7t+vNdLqgnveCjJNIWzqGAk7cV/ujfdaSMS0RrcWzNb/aJ3RNnk9\r\nVuweCcbx52BkaLzDuuOOX8kxSOJYxH9h7DNQ640AW9dVkzstrLCoCU8ul7tt\r\n8AIexb6JqzS4TMhn/qwublbdt2rmHq9QdWQxihS2xeAxPLtX8CIC0RZfHWX1\r\neB6HlluOIz2W83fTNWLUJCXMOibNJkHFNvM=\r\n=1zy8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/focus-ring":"15.0.0-canary.7c73f6134.0","@material/touch-target":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7c73f6134.0_1668628786317_0.8794495140350014","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/checkbox","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f1e037150.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b256a8c4a038c7fb809ec51dba31095578a2c852","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f1e037150.0.tgz","fileCount":42,"integrity":"sha512-Xt+2nZXdds842wZTlu5NUgMoYdowj0WH3ahNu0Y8kPS0mw2MvM1qzcqGQyC5l23dIphHSZ6Lri+1zRQCBVdurg==","signatures":[{"sig":"MEUCIA8FTvZhHqzgLds+rBo2MGqRAwnbs98Di5iTuA6sfxBRAiEA+0lYeBbX0pz03NEfJugh730xryHXXDzacZSNvIWvzNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJpBAAoYHCGP+1aN2sA3bVwawUyAi2HKwlULB0xzRCHpgwYY5eb9+W\r\nLtql91+dU3AHHt31JSliPYI8NqBnbEwS3BljUg/orgpE1o0FPzeHnq5lCF0q\r\nFYcekHXKY8tAFSuJ89CbSWTsGGaJQAanZOksQjZwsLUzAI/OfwB2jPEYCmsl\r\nUGbWwqpo+Vvv8aUgmqOoI/flA/EbzrsrZnFRMfUYfhYT93w65jvRB5SRx+8u\r\nmuLBQHzsL/6pQi860saBttUhugRr5qZvS6aKc3jgrKGbr1+R3Oaikya1dOOG\r\n3nyND5nIBJaxu9k/M1cZAtMRSf9LycqcO4GCvUdNW5+KC6uq0srwqHF3KHn+\r\nRtROrYJedAYj/dv5SOIljDhHD1MQwxK3x2c/GQm9K5osT5bY//P/sUM/OL2Z\r\nf6aHoiFl7HW1fecTXGsQwJBuRHDAE2croWeOAxXgwvG5whKp5IAEnfKxs0ND\r\nyP2Zm2liwdoc5sFhtSBdaoc6Mht/UnpdblKWs+MV5Sby090LX2DnC6kMBw2T\r\n4Rw8E84kPR+KhgUHKsqXtVM9M/r/MINWvCSty4s1usEKiW/QN7Pzy0SazIqX\r\nzDFML9hYxs8jJTRJ4wXDS7lMAJ1tgkZLs6HZ3wbzt4uGdjfziaEgMlNuebBB\r\npx8yB94c+s+bELYkUhPJ8npptG82M0iowDk=\r\n=BQAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/focus-ring":"15.0.0-canary.f1e037150.0","@material/touch-target":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f1e037150.0_1668629133269_0.5751196264162985","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/checkbox","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.40b18d043.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd4cd442d4055631918f820533c5ed044fe1c67d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.40b18d043.0.tgz","fileCount":42,"integrity":"sha512-iFGI9KTS1dbFqYbfQs2lE16rNiNS3imm7CKrBURdWz1eJcueqBzfHLUcJT7r48G9WFAmq9Dx8uSuLUNkf76rGA==","signatures":[{"sig":"MEUCIQCZCjcCDi8xXGOGpncKOAq0DfY0U3p4+uPdaymRtx2LtAIgVCVX00bXzkfBKPlXRAVObo1Skbu0y2EzWPXy9dK6u10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWs7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqujA/+MT1PaQkN7kot7jliChOOLoB0pl7tXER5xwzPzez6GeJaGpCF\r\nEFuQRGGck64RBzPuZLDfUAP4fU/yeDM9pcotygSCit+2QDwU/pPlnpEEUlNq\r\ngPSJKGI/R1lXzTDbsOD08feWX4RcWFWXwsfgafFkXGRkvp66rOkkDI6Us7l7\r\nDifFSalBkNVf2elXH37YCBZx0sXmvuskEscBWy6QHfsiE0eEGoghsLSrRoqJ\r\ndf0C401rp88oIv75xxZlcRVLuLqc1ITbpdo+wCnCfidlT3SK7xf25V/OxT7Z\r\nTnVT9U/iRuCfTpoKx7iMqq3SgLiJhczXNIkYfVTpm4UOeTyZOtGHwxA0m2/L\r\nCdxNYeDWqcCcwFco2RStKE2hfjB7/QBW6NCzLITN2IfER97yxefwigUhKaNX\r\nNktpL+2ikQTXNpfgkKt4BmwP+jKx7PrJ3zW6hVZ1lqkGY4vLiF+yUXcPFpta\r\nNaUKA10Ubn8ep+akDmINN/4MWlHm82bO3B6EHb0FnUJnIUkqO+BsGKWmUvOf\r\nI48/SyzaTapa9a+B8JHBq+08BO2Xz0hV/DXm2JeSmAVT7n8Fc58YV//T7HWn\r\nLXBPQlZOnjkiMLzcMYXJQa0AuUJ3OA8je05/ow7jKg4FERj1fkHrH3kLqhqd\r\nbiVGtNA2ihUkhFdr156nD5IKvBhvT+dol2w=\r\n=R0Pa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/focus-ring":"15.0.0-canary.40b18d043.0","@material/touch-target":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.40b18d043.0_1668639547478_0.5945269331259195","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/checkbox","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1431d2e316d69c0d06ed7372eca756c01e256f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.86bde5c06.0.tgz","fileCount":42,"integrity":"sha512-Q6HqBBiDGxSYAbWB/2ipg1UBdZuk0lTn1AH1k2iyQhf32tfNzEnhgzrD+TM2+LcwWfi4kDB/5our8NgqXY9AEQ==","signatures":[{"sig":"MEUCIQCHxlWNcj97v1VcPduey+YTJvg7sFhyt+RcMN9PrtJGAAIgWhB+IX6+KCffmOGKdUgY1HsgsBq4p2Hlh2z6A0lZZDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovcA//TCMq4JJFkaQCHWn6fh/U405ZdmdB/egmqdsHEK1o9sB3S75c\r\nutDGN7ZgnhgSgv3y/ky42o3yYNXb6JZfnJ10SKnbHEAO//fXAbRXF/r8dYZz\r\ng6wTRlIFW9WjrvYYuW3CFqypnZqGT3fMynro01saVniwHsELuU4M1qxXq5TI\r\nE5T/lvt+2e2xO1KwmZSvudHDTLHB+lnNL58JM9PDsLb6WK6V7ukxn9j9KhJ7\r\nouZSRsH/brKAXw43shRyGAYe+Qckaro80XCZcAjjzQNRvI0BzXwh4POW1FY5\r\nkDKOc77FAZWxiGgJ859wDHPXMEUj9MViBz6HOaCb6ECElMX1j+Z6At69VnzM\r\nREUZ6QyyL5xsL4AYMTbGNEtZn2Dw5+qHrwrEkWchP8XA39TTu4ZwSwM1VFX7\r\n5jQjf5sDN4ULPEu8cc5v4f0F1ReJ5o5C/ggVMk7G+0rakEyxUIcHhLy+QVoW\r\n7+y0ygKYcBjQ5jzfDHFpZwIVOayeJ2nwQpaUdHPAldc4PQKT3TVyza06BS0m\r\nldfsgWP1F/lIf8E99LmqZHZ0Scm288gGQx8MigQDmVRhpfhDwrM7P4vtuGte\r\nXZ3zZzpcLAWoPRc23YA/kN+ajf+uYyd8RXKpHlOLbDJ0mY9nVFs16yfWXc9t\r\nBgjEspUy4oRLia46z5DnlRm1IRLkyAyHI0M=\r\n=Wt6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/focus-ring":"15.0.0-canary.86bde5c06.0","@material/touch-target":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.86bde5c06.0_1668640153837_0.5072144877664011","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/checkbox","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bb7751002.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cfd8f6d8c036004d2ab5c2088eb25e574e8c81c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bb7751002.0.tgz","fileCount":42,"integrity":"sha512-/1ZnJ9jYWGK8jGEw0fyE6Ki3mGho3titpXDvGlAwtbGkZcavsz7AUznkd91IUZ1fL7hO0Ie7qgIGBIep64TlqA==","signatures":[{"sig":"MEUCIDTLPBdld4AWPk3tEm7irrSB91fWuYhOdkPVCfXfJYUOAiEA6oo8V2BVwZNaANTQ5uMqll+t8iTJ3YcZhVQIc4p6erc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4nA/9HH3NmEnVloKG7HGMh/gfK0JBNUbuodUXR4nuoDdieROHTTfr\r\nU9aFNO7/jtDlIEyBm6q8J2OePM6HbqjbRTBPyN38ATtD+GHT67Qb+E+SQsim\r\n2ccYEkF5hrHsv85ZPJKlRtVS7ySGP6vPjk2JFJWTmW7BOaBSKdHzzUBa9EjH\r\nvlkx/1LRNfz1dupf+u+9ta7kqv76oavDSj+IZtuBbRdquF7AXoL1XY9X7bz4\r\no/jEe5nqie9liBD5JjQTSTfHOAKiAfKxsQrMrWIAe7TvDaMB0FsIS79kUDrK\r\n0SltZA0LSvSNNRKZfYHvwgUeJKU2J5sfyBS/l7gdxdTdAK7LkeMxPNCWSjZZ\r\nrUyHqjuq5eLKi6zr5US4tD8V02GNcDwCLSbWNYb0Wc8XKsI/X1AgMNB3HPG7\r\nq3dy5PtusSF1gJWvePp+qyKnYjxgqRPTYXNTVlnox6t+D3FcS96PefKMW0Ku\r\nfIf8K9ZLoYlQmLMb/Vl508ZDTnD+kMwLFED9bRVMwz64Y1Txw8RG/ysfrxMc\r\njfURzxSTY40iAuDioQF8ltY0+9mMUUlNIMmYnlTh3Y+Q5vxIHaq/j4ZFCVcs\r\nbqWqorBUKIxluq14eu/lMUwJqktr+ASWAxUj8fOogyFJGyDxqDZO3QlRtcol\r\n3FZatNeWL1eQR66vmb/C5U5vxXSB5FIpia4=\r\n=mRIY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/focus-ring":"15.0.0-canary.bb7751002.0","@material/touch-target":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bb7751002.0_1668643226268_0.10075409637048605","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/checkbox","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28117b9ac7d99185a753f7d475975d8e2fbe6308","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.63aca9af6.0.tgz","fileCount":42,"integrity":"sha512-TYKLUjsXJ6/17jxvv2LQivsvPcYFS11+hFICBKjdukKKGotSGCX1B6xRedeCTef+H/Sokm/sdLxFxBjQncfYEg==","signatures":[{"sig":"MEYCIQC5vOLdzppTwm6+O1REsAK/MC27okRuWagMshWjaTZpdwIhAOF+ZFvUjpqjEUvGiy0t2c1O6EHJbszCMePEbT6TtVsM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWhg//RJIaSj9R1tyl7EcaYmmYwKfX+RMmydCUGFr/pfi+cd67s2OJ\r\ne6Dk3UbayT2XmmzFkk/DL/FaCxiK3mqkTjGd2rqv4Go4DLDqqk6ZNrh+cdhd\r\nWjNtyNSphAoL5blyGTkTYUoAWixOdc/lD2wEV30OaMismbUMpuuDIRAhrxWK\r\nGKxroo7KHcL2Zaguvvj3Hg0LG0sLS12En0JBXljVMG7m1Bg+ngMQoL4XN9i2\r\nyQkMktv1XajvieBzFwdGK8lOqqwT/fcNevMk/el+A6q/oIYgqCnRVsyF/i8G\r\ntkN9oXDKQaIN4f2xevWie9H9KvFPggN26PO/azlEdN6iaQiY+DJP/UUUuGX1\r\ntgGRC37sFc00b4YGDl77EdxL7U5GT62X2kPpbtBtfIG2L0/JaFJxugS+351n\r\n4dl9HaRlbAt23dLbI8IP61aznGz57Jt5IEXH+3O5W1LroHIklKbKZU5eQgLV\r\nPfHPs172E5FU613nS/7ZF7kbfkq8LzrX24ZcAf/FKqIxujBta7/2ZX7Wav9s\r\nTKg46tEDqjeB0IMuK1OGuNupJf8brogVFXds53pJn74EVtdE3ECYI/FxKg9Y\r\nWroJ8zUbhtBoG0tsABXgkbSLOJIq4lx7Dcyf9s0m5oLZ9Vs5b5+C7zs404VY\r\n5M2ueMOB1DJWoONnIE7s7koSQ9fAdbN/QKs=\r\n=XdQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/focus-ring":"15.0.0-canary.63aca9af6.0","@material/touch-target":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.63aca9af6.0_1668711681241_0.7483042564623514","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/checkbox","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee35d9a6e1f6c8497a3358e3da9c5e76b2e3551","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.56482dc2e.0.tgz","fileCount":42,"integrity":"sha512-32rLNxipzXzCLratFIlsHXLW8AJpO1j6wlisJVHkZHtNimWeKWCvyH8pYm0J9N7o371qb/0qCeyitsNqRBpExQ==","signatures":[{"sig":"MEUCIQCZlwuuJYIUH2xxpzt1GjbyBLraXiazKCBvme4WW3KbsAIgbtehLNLkiY5Lg22J5rJpH6KXBzByDWqdgRhuHPXTGyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbwg/+N9pIbvytwg/TTkrkKZLbCYGsCX8bQoC6kkFcJi0jBna/u7bu\r\nkCYkd3Err1OdmgCB3/0RTl3J0w+b/m+CnFrBje/4hni5Sw1ZEjG6/iT3S2ld\r\nRxFOOwcis02FSMA3Vr+gILEjCHB2FdgJhwNg8uoX8IGbJI4kPmENq4Tl1ASn\r\nZKCbGL88NKIDqu0PNAse2K4P2IDueH+nBXTK92ki2KNkFeI4xTfkUPh7Vl+l\r\nwg3U2WrQc01hhQc/FJ7nWiPP8BIogeHkC4A8AU1ymumEQMcXDYBWARLB52j1\r\nUdCDGNqkHKJOIMATnc4dgSb1BGvIS1knSoV38Ohn5BHKxV3jqp5gKf7HWHgn\r\nij/BEoz6gOp5qWUq5lGESQLFtv4FKqylbkYQnwLiS7gZoiS30neJXP83QSFQ\r\nXNZxwg3ke4GiY2v1W5RgHXYHnrX0sd+opBK451JonlIjYzB+H29NH/e6whnh\r\nBfaGdt2IXjGTWzEGMyJ5Y5wxgM//EUwaHYUWHHUvIbO2SQyn3ufTqreluCyq\r\nA7apsGBcXgKWhxXqptMVOhjE048rccivJQbEv1xl2IfOUn/nS/h/WgJoaei9\r\nNLEbqJ+LWFpsYRGoh8GYJ3gMgWEOmZBgxGpdFih9QdhiRAYz3UjqiXTOWnjr\r\ni6JfbX3DeZgAS7POlvnMC4mv4N6ftKKtg1I=\r\n=cP+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/focus-ring":"15.0.0-canary.56482dc2e.0","@material/touch-target":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.56482dc2e.0_1668722123559_0.6318464371156307","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/checkbox","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.953e689f3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e600d6e08435f3a0495744cddc4efe68ea40a58d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.953e689f3.0.tgz","fileCount":42,"integrity":"sha512-GC5b/W1Pa67pcKLsufL3g3/obevLXXqyLPZA1ZvGcUdd4nps7u8u1kM/BDKXwfMR6l2XmI+oOUSTo+Pk6efmbg==","signatures":[{"sig":"MEUCIBRZs5Gy5Rrpq3lMDVoWY+D9HmMs2N8ZE68dER75dH0LAiEAzifwz3bsB8cVBol8a8zTsFjjH2iXDVo0p1yZCm1x2jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrAMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoofxAAlc6qf3NBezhSaGW5sFj9h9qZYHO42STLMpZ/IffK9EQ2GArm\r\nI/54YrJIAlwnXujWbeycBLCIeLejOs1EwcxtGihtUxUXf2vqGJogbqZ9+QT3\r\nuKeLY+XJTl/04BmQBOeAwyzQqgOaLCM1XIA7zQ8Akkyr0aj8QXcdFA/1HeJ/\r\nYUZB4M9nBZOaQkxEG4aeKO3iKPvHIXJq6pQapIdHavE1USHnXQHBMd8ee4oJ\r\nY5KQIuGFgl78UxKKm+3FLi+hsbws+xAzFLoBiqIvgNF6MJJwRGgYE9M9oEn3\r\nu+n4XVgGpUaZsyYahdH6L4An5FiFKGV0l/uDOpBEQMN2Gl9BpiXn6WLxXn5n\r\n5IVLahmDy86RKIaJQmwn/dmmW2mdyF/J52E2JH4UgRzrT6u5Wx5sR18bPbFj\r\nxLBUeA3QOdtnjhXBsJJ3EadfhhAVa6slg5hztOlpyrJJ+SFtO9Mj0sMP7Qp3\r\n4wXI5mCyl89P0okxfnfXyarFQJL2fqHR1D/v8ePhyNIKKkfJtME7Bg0RuI4a\r\nNCH0Jed3waNH5TPnhOpnv//h9NkVGtZLfTVI+lKD0FQHuHgKanRtezYD/0r2\r\n2+MWSvxG+jSdLqzREYAyZCRXgDfX7XbwO4eubyin5++gx07GK1APOCAKifke\r\n6TEKhAwVmw0cBrM5cVGFhDzB6l7Vzs2WKsQ=\r\n=FSl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/focus-ring":"15.0.0-canary.953e689f3.0","@material/touch-target":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.953e689f3.0_1668722700471_0.19277341579880214","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/checkbox","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b5606a793.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c47df55bf1524ffd4c13aa6ed04b1b7baf012f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b5606a793.0.tgz","fileCount":42,"integrity":"sha512-/nz6o2mMvejUKQ9LVZnBXaNivtPijSp26DffO98Ckm6eHt6CAc8a5XJt/Rtvn9C/GTSpEb7ZB1bepJbUsz3pUQ==","signatures":[{"sig":"MEUCIQDRkIpJVll1lCJY554L4blYS3TMcdSFBILtR+N1w9nosgIgCP87qEkQzl+nq5Vd0p1cKAdDojeTskEK806k5FnpIek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1yoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBrQ/+OoqcceRUNjDDTal8KOXy7eAiaPajAHdR8izGdzdocGj8yyNJ\r\nVr/jxglEfnSdwD2jSDIqufT3RniruYxQ+Ny44xQzc8gTlSFQ1PxyTcj94R7C\r\njAdGkjCzjEbtLdLSOz5Lk0Y7ktv/U2Ct5lW5fs4FrLyKLYyuno/U0iDHDRnR\r\nVeL5RS540vpuJn/TvfU5UhDIC2Pjk/McHcKifc48H1OLWkFzB9N3HImA5vfw\r\n8iOQ/v1dkApEkkvKC4nXo+5E+xp2PFiVKy67KnnHq7GnMkPDwoP1rXVC02L+\r\nowaZN2GAOFI7uiq/4GzwYGuWbyTgL8tU/8shtV79ZEOYe+cZrDnfdcIh7JMO\r\nWdGUfCH+s1AUs7PTF9N7Pa6Ws2HqOfqTFyL9FVzt5YzRwnsSPfRhKNFl2Ts0\r\nx82Hbdd4kB7+zXzTlbG5r8Ojag/REbDJOyE8+T9Tiyg+8GRe9RN1S6HOuARM\r\nxjrGuKhAVHObyI20j2eEB/XmcY8fuN44+mRULAbNRmKHAGkHMaddZLh6kucc\r\nFvp9BHr4QDQsYPBnpXg/gWhSQyVAD/CnXhX2v7h/GGmhluEg0jdTiGiZYoiE\r\nRbsc3/2fD5bvdbTzbvV5zHdbl2UNRqfv7Ic8UfvltaOzud8/G1MtuwGUMl/b\r\nY6ByYTCwIKhh72RW55SgSxOj/YUL91ZhOZU=\r\n=Kdpz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/focus-ring":"15.0.0-canary.b5606a793.0","@material/touch-target":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b5606a793.0_1668766888363_0.3279349655152839","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/checkbox","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8c5675942.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"840eb599ccbeafb5ce5b89db809a52421d7222cc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8c5675942.0.tgz","fileCount":42,"integrity":"sha512-4AGXKUVZ4wnPC2MHBQTuTAwBgtRfHdylnRjSMrEb5+Bc+91yIvKojARIKkFccDIsv8Uk8RSejWn5b/DMIIZ06g==","signatures":[{"sig":"MEUCIQCxif10muD72tQ7C6mPnW4UHibVP2B8qbWBKxRdN+ddLQIgInUWnvubfGDMOMBS0V8ESqeJ24A5E7tMCIXI0e5dZAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp96g//aEeb4pRL0ztkVpOnuFxvhZInvI3h8EofhHE5CW6yshgc/eAa\r\nqz7nPlhyrnEkaVFy+G1E2IwzozRcd0QShnc0K7wLjV8u85qrKyI6zqMG98wG\r\nKEotbJO8HU5cJ8rqa17akj5sIbvXY19aSTWJo5ut54NC5s4wpQLWtTLdzpe4\r\nE1wYpwKqxDTckvd0NKcMo3hfSY4jrc9Cdu1ztgsi7SY9szBt79er7Oc7RKiW\r\nTycgaEcQg9bA0mA3bYKFw3iiveTPJ4J1uRdFETfmWRFARPxOPL2WQYPhgETo\r\nN1cMOZqg0BxKVFkmvJmvpphj3W/mYyC0jP6nR/r0pgfMJ5iNK9mwVojLiHQM\r\nVgreK10gFOlVP3mdiExpf12urJZXlFC7X7qhjgAxtLQFO+yvaKA9EBJWOA6C\r\nIw9YYJrmMTvy6UktmDk2UAAnpOm4YJxqTqKY9TVAe36MJkIlfNUMsg7tk4Oc\r\n5rZrkzUhKXDEIpP1/wDOCS5vHAqvGP2HD5OTm/zo2xVbi8p73z94EonoRm6z\r\nj+q50asUSzed677eJkYOMHTX8KRzqv/+Z3PeVpMDL1CDPrN8L+xWX6gAwZCD\r\nzEe9cdHf7RKyV5iq7InmJ0Qlq2BzIex8yUYAbkn5izu8iSXqqfk/aJypiZQL\r\nyJvVlw5p1bVcRgj8yqUX8Rwy+MfLdfrDrAc=\r\n=ipDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/focus-ring":"15.0.0-canary.8c5675942.0","@material/touch-target":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8c5675942.0_1668784598162_0.16304873012832677","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/checkbox","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5046d70807c5476f5cee013233d7c4e0460e4b08","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.697fbdebd.0.tgz","fileCount":42,"integrity":"sha512-PDH1NYo00YLE+OJig66xadrBLwgmluIy0IfQGNpXtZ6H68R34Sj1rzYBEooJTBB0bY6/FKg2XfUozd0kYhgeLQ==","signatures":[{"sig":"MEUCIBoxbzs4STjdzCRrDi1VXUWcDzkn3qwiGRGBt1aF5AMKAiEArTKDr4dZbjYSmw/jfbvLgDW3qrgZrX2laEwVK1jlPrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkaw//bikCkvJK7KdSDBO+AoxSHrFPhlphBAETAkMV0E6/igZowxyL\r\n6PZblsbvc/J+H/aQ8BKL8CJWKh6lD+5oy5bpGDwG6W88M5EijEebF/TTshjh\r\n8ztAQhQt7XKjOpft9hmww5BO5cf3oL8QU+UNOKxK8JE4spYTw3t2qw3/r9lm\r\nX9D8BZ9uuwUwfVPm0b/wqyuwlS0v2geHANNTaxqP+vnV420CNNmcqKDw5rgT\r\nB/QoSGw8OUhAOUuTXmHAhIPpqlVTZNCHTrdZFDNGHiWg58zGcNIff8id8XHE\r\nOgEJyhBTxeFPetkh2vC0ypeEjiRz1LHwW/0PymJqxeXBAVvXBGjryO/ql4Ld\r\nz7Ypnym9YOMnzMtfjF8vZR1khIHnDXZ9g0CCh/NDeZiQMUOefbCtHSxz4Nf+\r\nSdZrp4CxGVZwKanY8BZbZi/kPmxYB8NxBCfHeEUEWpyQVbxi34Ni1bCqVRak\r\nTnlSvVqk+FzhvyJ9TfWSf48a5sCKrRE7q3tu+98jIRq4L5/dE2pFvBKOrDoA\r\nTBZENq90B6GaTTBv/fcGeN8N+ccbx5DbmGTpLG/MTOjZkwGLCP5QIHEfeMDA\r\neCG4Ru+8iIS/0X9gIXp9B3EMqDAX+qfPDM2opcY1ygrIdyjot+ytKigaAYIx\r\nq/0vwlX7B+pd464qgDnbZSt4WPlNnkdUT+I=\r\n=MBLG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/focus-ring":"15.0.0-canary.697fbdebd.0","@material/touch-target":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.697fbdebd.0_1668790868252_0.4475369687963562","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/checkbox","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d58410453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f57450653bc4ce214764ad926b82c3e2171b93d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d58410453.0.tgz","fileCount":42,"integrity":"sha512-DyR7H3pfwEA+Yh6sq+GBvcorzjWaxQcujDdPd39vPWqa4xTiyUJVTILJwz1TTNJ/5uoollFm9DcmYod97haHfA==","signatures":[{"sig":"MEQCIGEP4Ypy6ECcMKUs5OCGbLwSQZi2onrzbSKozRFVohdhAiBWJTKDlGwGiTO5Y2w0SUFYdY3T30MLhf8/9CFo6MJGWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZhg/9EU8sBejgPb88HBfcXgfkbuZlXBUMpX1lehJZaNEfgF1IZuUh\r\n3hDJRBt12jB88j62tL5z1awa26L0A/hX9RPi6pmtn4UGdl9Opn3hcFdBmEJi\r\nQSc6ykXSH2zZo73TfyLaGbi4UbX5HdZXUNmpp8h8cxb5xaX1Ek5xMK2qj57w\r\nU5ksIv/yK6KC0HdrHvDOAFqTy/rreVYuKN+PMGEQo1A/vMUEgnf7AQiuTWAj\r\nPsm9MOUk+PmKolccJAyiJfabYJhgYdLeN973AMc7VltL1ydzqNNaunGqFMCH\r\neclS2gOawXjsiag8O5BH5Fbds5S0oq9VL0kZ2taQI1/0Wf/2JvCzxnRynVOR\r\niesfD3WMVOhlaS510zZYcAGgIY8jdQ+MhvURn1zF5YQZaFbeQH/wEpNl1V3q\r\nrrCh2uLiuSAXL7y1ESQlAesMnhzKja1TkGN7tMCV6XsckHS9q2SEVBPAewcZ\r\nk7sZpGHrMmhAbOx7bGZ7UIG6tEmj2h9N0ElX3oHXVnZsj1PRQgUIvrbsopvi\r\neHyYeVZtY9LD22YqnXUqe7D+5VyP+TjKnqVLcrTBdFktDX3D8f85DyoE9vsj\r\nsaR8ml+r2k6EOo2N64n7M94Dzflfc+cWQ/4G9tW75QdRhMXFQzi6IWtXZQqc\r\nvwymmOmO25J6nkmPaRZSzFzVpPoIiM6xGT0=\r\n=tgXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/focus-ring":"15.0.0-canary.d58410453.0","@material/touch-target":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d58410453.0_1668799525990_0.2276002983468799","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/checkbox","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c82738ce8c1f36cee645a6aaeca8c71dc3bc004","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7971d6ad5.0.tgz","fileCount":42,"integrity":"sha512-RSFJhMtU28BhXWyQHMrThqkGMtYb16JOuKkZ54bc1AzIndQnniQoGpkb5tHx1hOCGhOUyAGVh/w8BHczWRsLbw==","signatures":[{"sig":"MEYCIQD82Oa4vIx07ut4fRKeyUOCF0YHbUkzCRkLq0k3QuTw7AIhAPmEys5snWbME7VSh9usXY3g40ut+Cz0YcwqWy3HwEWC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJetACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoviw//VbwNl/FEi3YhoCJ9Vlba8iTiD55se32lgZBDL++kC4kMbrCH\r\n48wy4X8TXEDjgY0rjHtY7TBRUsJSpdqSZ0PCI5mL/+YYlTJtxu6UBAXIauNO\r\nZrxFbFD10F9k/avGcm9Xhqsvc511As7uvhzTbaN5Nbr2HVzetUaYv/3xTsYG\r\nebvV4jrK3y/jRrh+p6eTaAuDQdAfESkgO1rACVmUuBacpgCGRW2T9EpdcHtH\r\nIfh4+T3eTHvGU+hEYBALxlG4fqgSQ2JU5ZzfpCRHqjoMDkZl02NzTBmd5BMZ\r\ns5vbqLcQtv/f5kZp/y2qeSyaa8wdZ1qL8cWcbzJwf3B6XDulYz0Q7S7spz2w\r\nTGaQ/g8+JFNVT6h0kwlwy8K8pVaSqddklfSIZovY2UKgfMjIhcqT4xxYx9o5\r\nAc+Ekw99YdhjzwFezxRh0OMIBCVuFD4PB4m4Vi41tZqnxZsMwe03fQ3AKGH6\r\n2ioR2+nkDnrDrzURRMipkJenn1W+EltAW/CwJ0PMi0PdjtjS4vlN3kBEDSj4\r\nLUBblGOY88+iBloxT3sFWndwXxYuIhicJE44cULUGNOxwjyLJdmN0ijNCs9j\r\nCjzkTEhEZCz7XV3r7ldV4gKc4T0bm+Vx56Wd3/u8TTYYLHfLEuIBLWazigMD\r\nI+ibWqRv4DHXTaf7Nb1NH3/GgwX0GkjZ638=\r\n=+iye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/focus-ring":"15.0.0-canary.7971d6ad5.0","@material/touch-target":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7971d6ad5.0_1668847533412_0.7893720714556061","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/checkbox","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b80d67a8ff324030eb2967c43bda787f6596d2f8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":42,"integrity":"sha512-pzyo4fc8Wu8I/1AaAd125LGB8Gg0XVt2nhh2hmZou4pyOwX8vQEKbRGp+DjTE4U8pKweOIVWvKwl6UBaFrEb9w==","signatures":[{"sig":"MEYCIQDTRL9ZsK7ACCjtn1SulyHPKn5srpH5wqhrohdLKpePrgIhAP1bzf8se/KujgPYiOo0PXzP12Fy0vispIMq9GTDgIIc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPhg//c/YWluDnQ3BPixcK80sGLcVuRDOn70UH7+BaLeTZFpYpK69a\r\n73o0yvI8HuA7JobgaiiUL77iwALRJjp+jA5T0x0wzmC1FHCozdSUSALjzhjr\r\nMSxXiHVUDbtByGPUCQ99eYgxnpz9tO/EiRRC0atY1xj/xc5XNweaEpu1dvCY\r\niwfkWOjWxqXdyg0UgpmXaLarM9JMndkQRDE1slCQiL+zX80CJD8csatyzJg1\r\n2Rd6j2pxC3zA5msdcg2k93OLqFXJl6kTGo5nhNEhtvHSBM/7zaGTjpIzYW4P\r\nwBIkzS3T/Y66g9o/8NfJ3TXFUg8f730W0tRfibDD9KU3o8Ej+Y6/8Uft3L5p\r\nnK8y2ItVhY5P3QvVFcCtztAmFpidz6TtXQODaMQN6xokhyJi0SRNCx8Qq6L5\r\n3Btdj3/iP8t3SY6jI72QQJsZsig7m4yIOTrzX4TVBHOnNLwSTTY5X/kj/mEX\r\nSE5MlDkkuWrJfgErYgXnMDmDVPfW/VYkKJxLiN8Grg+94p1L+IK4kr0z0+ZJ\r\nXq/SSv0P2wNLOh2b2y5i7hiiV7VR2zLFVeg2rIQm0h7dztO1lPNOy7FLGl4I\r\n+lMoD3BsvANg3hWB9d/pfWbDq5Xt4/WK0jsXnQnVpm1c48bBsXw3GID/EhF/\r\ntzxF6Je22hEvFYQBtH7FyCjygSkTDK2xiAQ=\r\n=qZl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/focus-ring":"15.0.0-canary.a0ae73b0e.0","@material/touch-target":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a0ae73b0e.0_1669028046703_0.6825742384038145","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/checkbox","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.96f472604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe80e595e3eee5ac52b0fbf1ac93aaafd0a6d8ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.96f472604.0.tgz","fileCount":42,"integrity":"sha512-40okCnHZDauqM+HuTHtvYIpX3MwoYgrLKVwh+pbn34Qy8i/lkUW0V95Ihh1DqhU47kKaL8Sq0xcZZuNgTa6c2A==","signatures":[{"sig":"MEYCIQCsiq6slngONZhDlJbYDpjB9Fa/2NVnQdhljZG8o1P0dAIhAOryxNnql0Ib2VNtsGOzOa/+w5lQCwUBvIVx22LypZvd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3SuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc5A/9HunOlCJqDGX0kY9/ojUpjp86ZPQJFNFGNKWZC9iXxaR/oGdH\r\nk+xh/j54U+BgA0Vxxyoth4pUAg/yMKl0kXB9sD5wBRaQR8HTNdU61eOqXGQp\r\nz96eCnUE3xbZgUvmpGOTf7Yl5zNDcyZc16JzOpTGnv2AMDths9gfkOj1iJLb\r\n8lAWChfBuH1+UKcn5XdLX9WB3twItf3AQCMag+6/9Na4/g8OkQ/3cyisuQxu\r\nUBZLq99SCfKqdvFaVwcJ9tJAxjo67mMDaEisa1Jz0eaJi+Fdr+B3ZrblqHh5\r\n0XId01JIHJY0IvxzhDZpCLAfdRBZh0P93HTOtLXOwpPyyAUXo3FGhi0BWrVY\r\nwug0wD1o5wt8hZC/hIEq34pqJ4w1UAt/Z+8gIV7dnWhT275cjf4NI220O72y\r\niWx7Idwz/JtlYlon/dnUdtwkyOdTWxlhDpa+3zsK+mYc6sdCMs00WH6ZdRoj\r\nEw1ZQTxSTO4y/4uR8gU/1BxbFH0m8E62n+1fVJ2+anQSqgqYl/pwBtbWex3L\r\npjHLsAknMI5IDcdVXE3RYvZgFXqAiYKIzIYSX0ulnUrkljoUDIGPWRTGBY3c\r\n6pSBqig9mY38ZOdRTcY5tg9A2iIvSRBuvRgiGljdtkFXnyHXVsWhbey4Sqha\r\naCsVm7pXpJ3aqoxljpUT36MM5/EkhC3xoE0=\r\n=oqjN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/focus-ring":"15.0.0-canary.96f472604.0","@material/touch-target":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.96f472604.0_1669035182400_0.7283765733389991","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/checkbox","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb6dbe2e4599d1b39b3b00e3a8d0de2459c6dd2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.18b8f31e1.0.tgz","fileCount":42,"integrity":"sha512-HprlqBpQhe4StoWhq/az9nzS4uYw501DLRvwQK62NmhJMCdxjBK/h+PCWvwLS74vtgYpUKDOsIWXlhqWVnZ3Wg==","signatures":[{"sig":"MEQCIBWPRO6fNo9NEa0CTpf1AxD90AZgNMRAHrk0DzRF7QL8AiBVzqzYlAAlDCNvUm6bP2W2drKDX+6knvFREGk2gCIYiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsKg//cR7orxmr6GQiNUgaNVSDz0bgI7HGF3UsoEFuCJBRBgoi0S85\r\nYGSyhfL2eUXUCx5on/fY9FM9AAp7hCBlBbYrxusOrPK6zHtqoMwu9+aAVP7u\r\nnKHjRbJPlncFpBC7LlOc/RjGaolqXCg5tgPS+bJ/jAAnbi4E1Mw9DR4XuyZ4\r\nKMkCs38aV6AZFA5GfGy2qc8SEtBpDZFppTWC96kse3yfsKdJ7QC4NdVD0MKQ\r\nD3vPbAQ3/TScafrY2OC7Odvn3M8imY80/JczYSc1OgNHCAci4BBVPeEOhmqP\r\nc6LsbPcglwEJrxv0/D4HZXX94pu9qCp1plYPzxcWPt7ekwFJBEapj0kX8gpy\r\nQa7/yvv4gbnKcAakVUOWUKSWgBq9YcZoEMbLW8uKjBHlI0b9Jvdk/lUcf0Ye\r\nCGK8e07rfWiyIMXYYCf7rm4SphersG4ilopIMESlPJouRHDrf+gMN5yvs4Pp\r\n263Gk/mbgEt4wQBGYJujernKPcKJwnbnUfblJ3YMsw22lhUsLYz1WaeJZF+U\r\n+RuJmpbJBQCfpineRjPdjcpkjGsRy+Z1O/G1wuXBCNHo1rsMr4Df6PYEv5Qc\r\nE4MKXGkb0Km71DXq8dFv/UFBh8fPBJ5G5uGQdiBQTO/915pGoNaT+xPxfNcs\r\n/5jzAvtpITee3DESfxiuYlXSEE0umDXnuX0=\r\n=7Xh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/focus-ring":"15.0.0-canary.18b8f31e1.0","@material/touch-target":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.18b8f31e1.0_1669046567109_0.2996249827786448","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/checkbox","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e091e8ba84376850a133556c8c967b943dbbeaaf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.912f33ce4.0.tgz","fileCount":42,"integrity":"sha512-fsvRwTSN0dZ2OCz/PvdHqpKl8lplkcypc4yDTRdKLOTKXMdjIXkP5lP2DP492jC5A/5I3fOga3gBH9T3QSrQUg==","signatures":[{"sig":"MEQCICEn0yFmJOiRu56YSL4yY5zYnNXy/MNHe8eH0plBhWq/AiB4jaJxjm6maukhNPfHxii2LT39oRTAOr7es6egX52ovQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK8Q/8CWbtvDFCAJL3ytViuuPIYNa96AJ4eNb7OZtW2X9/ORyARkU+\r\n5TM4INQ/bSwFGmAkyYJ9Piqj5BqrbdsXCd+/kM1Bl9yFOHM+EVkZccQtQWif\r\nR7jBC1JcT1K3SgOWCR532qRH1N1qsaD7+e/cPzGRYTp6CB1EII3kq1qfY8fq\r\npAvUXxJZOk/NWzrCq+5PzJF2y+KE27HAK/LjWsgVH2QUB01AoOsojL+QBHx3\r\nK612R3eoNHxTwcJgf1pZFt4rIkZ0SecmPvQRCgjzvA/3AVWQ0syqwTqzB1qD\r\naqxDfe+W/EKxplY1azqbzftZMfTfQ8KJCAFwaInweez1XWBh0OHNXT9rQsFf\r\nu+RzWXxYIdHcZFxxCCerYV0sz2TKf+OduJFcsaNgpRtTmcTDY7P8Z/qUXtXT\r\nteXipmj1G6KSsxgLhgspCVnxoI2RDIYGb5oEZEQsu0kuqLFY3mX0WSPDKBG2\r\ngv4qSIbLny4kFly2eHFIDGQq/36Kf4TMzQFRUO5uWCJtegteIH/dELUDwAtS\r\n/iWq+1Y/6HxSEOUjFyA2TYQQv+ILe8Vw0ul3JQIiwEUbGyo8S8CPzn0X5oTT\r\ne58YeLSGk/B/uGsg2tMf8YWShHqERmKHwQvGMNwSNzplrgLmyLiKJ0hzTBGB\r\nIUXsf3vvuAGFlbZeO+0xY/nvEXhs3S38u94=\r\n=URn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/focus-ring":"15.0.0-canary.912f33ce4.0","@material/touch-target":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.912f33ce4.0_1669053261818_0.8846118290472738","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/checkbox","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c4d2434adcd9364ad85c5b4f42055a2c061b11d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1e1b1c369.0.tgz","fileCount":42,"integrity":"sha512-UE2hBebLs93pzg17WzE95r12xSHa5I7CydF4ha3bJdZlixujydz5wiRUPntqI9Io4jLlUNOSKKbWNR9XiGm8EA==","signatures":[{"sig":"MEUCIDWy6xASgZQ3/NBZBE4/A2pNtofc9cCcxZ6N7CcdBRSAAiEAt5eZdTJz6PTLmikV4/2Iku7DZRBgRzsWWOongHfdsCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqatQ//QwvoDguBbQOWT1sw/mApUEerO4UqzaDbWUOviSFWpVQ4S82K\r\nmts1crcm0+xOrG1svWMWGZWCAevXwePtuN0WgM/LFFD4r6xK3MadnuxBnW9e\r\nRRGMjhn0wKChH9I2XX34wHmsoNEfd9r6MDtYyG6AcsjonvHvMhRVYrT0ZgmA\r\nb9pF2jDoU5IjoJ2RKJX9Ojvwrtr00qOKABx2hz0dIO1fKu2WdNoWksGKh6Oe\r\nv1GYyjilFUgo3mIXHhOV7TolzcCBbTwVpk+Hz5lMWfLVF3QetAihbKqaznxi\r\nXrt2idcGLukx1FaSrGRI1hDMw+HwshuiL/+cu+yE9gjI5NtHdkNdT0KPVdTS\r\nCepVqGRtDIkmxgruf/BFaaSHIfzgWRecAjhPibUCcdTBhvAklTbm1KKVrs25\r\nzsuuz0S92x0f8Ov1bpLClIRGUu4RhfvGWd2TJBpsuxBrGv0Y1Cf3qUc1hY+N\r\n9nOeOMCRM6NraVrTN6T7EbFZjPCjSiuzb+JH5kJjkt4HwePZC82Md6CRSLH9\r\nxWB4uUcSbyRa8IyzEfFlk/vkLiSEJzuI+avtZ8HsiU4E5ySd3TVBRH39D1ik\r\nmvKXDrJqrS4gZNTbux0FHxcw2N6W4elfE2uySJ0ZYJq6Xvld3//EZKINvgsG\r\n1TjdKj+smBK53Dm/IFuIpXLWjp2bDiyvCvU=\r\n=dBkg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/focus-ring":"15.0.0-canary.1e1b1c369.0","@material/touch-target":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1e1b1c369.0_1669230057587_0.20720692200800928","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/checkbox","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f48e4c1cf552a618029b730c8c32c33c9c17d97e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a2ec49244.0.tgz","fileCount":42,"integrity":"sha512-Rt+1UCvqArt1KOVso/aYniUN23a/MaFfS5fhlm6gkSOta8a9VLvlUVQic5k5V/Du1J050f8eT+XU0qKvisAQBA==","signatures":[{"sig":"MEUCIQCa1cmrDmLh4motX6MibXpF66vCNgMGumIY4nHyQDG0KwIgeyVUtCMh9CueqzQAQ2W8SiiD+f3ivsYf+sneXm89fGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwyQ/6AueGr6cJm+qp4lQ4wyREQCB9hgnNW6KRFyOvIo+V4E6xTM4I\r\n3ys38nxna+tkEeI5rt0vDagXh+1MDQK065+qW/mPFi4+BDQ6tudr38B/V826\r\nDR/HQbC4iSuEAsRmuzmAAlnpkY1hokqOLhgopomfh28DuUmW2PVqS59Ucr8E\r\neH0KoMDf6GNB2FHr1GmoamIVubgTVJZ+Wbhp9NikiKghCz6jEzoZ84ylOmyj\r\nssvCji7rVG+BIOJlzLW3s1Qxtnmlz/naXS44XwMBGFG+bhVZhj9OY1liNWcF\r\nTIBUJnu/kJtBbNNyOzA/gxD9eOS1BRSLbemFdBJfkTLGNbdhKIUN037/FUc4\r\nf4/zDTha1URypHlBiayu6/H+UOxdF01jeJyQhro0Qoj8td87i83IzmjgKjm5\r\nuA7h9YrJfKrAPI8NdnWzhblnIDW4oK+/AWanpJ5fWJCiFfV4afUAFN0cnVms\r\nNlXDIFzUc1RgRS0rxE13BGLVmajqKFq5sJc535gbz9MKk6FgCtd4b8Nl6tll\r\nHvKO/4Sez5mUIXJwZqljqP2FsZbHcNhHpFkQ6cyotsnSUI1CH/L0mF7wjW7G\r\nJpI+a+rfiCKQ6QL9V8bOas5GZ8F3vyfZOQatfxj6XwEccJ6OzFCrgkgE09y2\r\ncSF8Qnmz969iWqQOSeSGCF94GVrJ+dgtj1o=\r\n=BKbQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/focus-ring":"15.0.0-canary.a2ec49244.0","@material/touch-target":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a2ec49244.0_1669231875857_0.3014772254904443","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/checkbox","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b917b918d4d0d7c4d6d6cbfde4692652b046022e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a7458ba0b.0.tgz","fileCount":42,"integrity":"sha512-E+JRAWQOpfuuBfkJDdC4d73Ejl6zWQ0j14OyniEwzogVl0Mb5KvH6Z0EzIPM2vvmf9Lu8xK7eyeiplpfwim69g==","signatures":[{"sig":"MEUCIDmMEjqC08gPoBL40Gya0hx0Vv/hIG5rRxyfcHCH6lm1AiEAkf5c/O2INXfmZdqoFTNx0dkPhiJTa9fsJjsGXVblm/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMRg//YyLxygwq1I4woUAvaB/UgzKGq8YIEayebdMM+Vqw7GWOlhkw\r\n/lsREr7SW6IB0Ho9kgYjlCidNx+OzMpx0lluioDMyqXs1SU4E30wxWvhwDii\r\nfkPEuh3Qi9dQe1lB/T60hwJ0a8LaIM5ph9G3sXj/L3VEiDYbo7InPlPmDTug\r\nVGQeqJgsLXv3AmqOvjD7n8IQf+Nar6Jzr5UccFm7qBY1rbGRkC8dp7LR9qnw\r\nQ40pBKUjoh3pFmXAI2iI0p4poSitT4DHfi4y4sCyi8lXicxjmgt5UIOk83ZY\r\nCs3U9gnxyVODYh6kvZayx/7qhLKjhClLIvN8goBaRbgVOA9+fzNL3IkVs114\r\nrSXkCunCjOR2vB4oJ3WYY4A7o6w6JluaPYHIUW5mSA3oXZnvny+4JOqyutEn\r\nBbB3o2E2U5TkrUdkIwPEHYevZULwnTjY58RNsiaZ6hx3K0Q1rBxaoVNt15rb\r\nOdZ8b/Q/OzncZcms+V/LVZroDyibFvlYhSiw2V4ib+6iEGtL5l1r52/jNJ3f\r\n7FvzgkJjndfaoKsY1nNciU5r2vbiWThnwAjRWko+Up9LDwDsFgTJnXqAQo7p\r\nouNF/JQd9vTZVSoEZyMmC8L3R5r5CeujIL5zgCOcWaqsfXmB+UtQBIy4sqGn\r\nMUUFd+vkNWrmh+YAhxlKaAB4AhqkdaaGO/0=\r\n=rr60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/focus-ring":"15.0.0-canary.a7458ba0b.0","@material/touch-target":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a7458ba0b.0_1669234605402_0.9890801523369996","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/checkbox","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d4e9973b4e6f0c6aec4b3e9d8c42fa6b16f144","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7c35e5036.0.tgz","fileCount":42,"integrity":"sha512-9+4enrr4UVSz7W2bhWNk1gR7veRyjcg09cZAg3/IX7p1ncz2yDaOzXsSeQ98f9dqt6PnmufUY050bBE1aEt1BQ==","signatures":[{"sig":"MEUCIQDyOlUEpTMcAzC+MV69eG8oxjAzS6rmD5v97nRiDeuzmAIgIXvLHPSiI03PbdsXYpUDZ+Jo3VTThExgmpd+XDWgUt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr64Q//WZYCkmXjfBmma+XqLtQXpHBIk8B9YjXP68UG59rDOTmJDRzd\r\naae4330GV6SaL0QjIfepyALWREAYhp6BDTo7pb5uIWEg+k+BhwqF8Ze1ks5E\r\nQeBLcjPoL+CszoyoazL3aN1xcDMPF+uZDLSjF5DFybbKr6YOda8GHyu+seBI\r\nJVTp8POE/XYmOifkN43ioe3wZdBxXoDuuMjgZ/PhbIU0nSuNxkPYPUug2AOJ\r\n32S4E9Ud7XlnL4EQwgITrT1MWiqksO6+X0G+hVvQyhEwupR1HXUVroAFoR0c\r\nflf8Zn4RiltJGsxCJbErXowfJ9vvH6geph6YtbfW/qCHoFn4ZfHwz15obmnn\r\nE3ma6ztT0+B3U83Lt6yrtyF4zGan7mAfz4SpxnndAUD7GjdeZsBy1m2DV5oo\r\nTsycQr2vSTb7hABFjLvfNJCIn7nP6NuVNEhkVIWEl4brVrYcyK7b+zY13Sie\r\nTTyYVdU7JRcuWLJh0ffGVk9PVZXRZYmb7MjrSPyVt87KZDnrDBVvy1PxG5UG\r\nqSggiZU/cSXmQUJGK5+jR0ORoI2PGD6XpmeK2OYv3mW3kXepaJfnhtMFgzmI\r\nf5bI3lkm3+nouT0CRhdcIgMfMeKu8CHd4f2cpzHakaYsMcV0AAPRr8/n1oso\r\n6/zNQmE0J0JM+xQGjc0JtRC0/crsV7SS45A=\r\n=BJCs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/focus-ring":"15.0.0-canary.7c35e5036.0","@material/touch-target":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7c35e5036.0_1669279185989_0.8421033676435496","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/checkbox","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1df6279c093e81a3c85cb49f47eedf1b6f86c21","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4356e05c5.0.tgz","fileCount":42,"integrity":"sha512-Xvab6PK8usN1QNg+rXSubnjNZSQBdYGNPVbullG4hIsqNw+XpR5FGPIGFkayelYlSS2Kev1YhfnqFdQNbq/+wg==","signatures":[{"sig":"MEYCIQCirebKVXaaT4WwBj2l1QHw9e7FzpQSTiof3KBhD2IEbAIhANpPUHpdhjXySz2yehIbE2+9j4dT2VSEuBBadoDT8xlv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraHg/9Ht25IJhC1boL+yu/yq80pBUvyvrSBbucWQ096ZSwQ8WK9UR9\r\nH7UsPmP+H+YcMvX0IDOUmmWgEsiOEGyYWau/cLlW9SJ+8fz+z7PpEkcSxg+w\r\nq9sc06Gf/5iOpcMtcTavfw/KLniK65irLUCk6VXI2S05k6uuoF6RjSfk6EP8\r\n1EAJcaWP8Yq+6xXgq6nvXL4YLIlfazNPn9aTIo5Wmh6JTnbPMlis4YpB6VBG\r\n66pEKrR8/RrnYLr2wBZYiSe/R3lyM/aeTYeb761Pp5+vIdhje/GTwoDvr+jV\r\nrNBhS6ipXYguo9gJHHM/QzuHsXndUungclQ1VGBn8uIGJ8rRuZIT7A3s8KqB\r\nAXiyu1tPoL5xJoV/X5c0hNiRKJv/dZGLTCAnXEsdJUAz1TMBYTfQHXCtR4qc\r\n2Hgjx7XeecF70KakYz4Pes7mmyiKGg79HLPzj9DqMtW4lKFgjLcT2QgIyim8\r\nneCaidOB9UhOJ0PuGLMj+ksnA9Q2LOGK2y3k+YUKyWx20NW6vpD+q6hYpPa9\r\nakCyEod1GOyyI0W0RDAhUphQR6UTIdHQy8myC2hEWpZGnj4VTH4zClCtcRVl\r\n66E0U2D/o5/f0V8K1V7DFj4lEK5KBz0gOd6G5Hmesw4o34CGcLBXjcSY3S6O\r\n1u7nFexClosactEUCbGlpLdqOPO6CITThhA=\r\n=5O3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/focus-ring":"15.0.0-canary.4356e05c5.0","@material/touch-target":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4356e05c5.0_1669283823620_0.9808929975651199","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/checkbox","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"239d47b43dbb697ee395f726cae8c7b2a4afe4d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cb605f8af.0.tgz","fileCount":42,"integrity":"sha512-Eqb4mh3qrgTGZW+HhFSknzcg0K8e1zCwOptKIdCtvL/a/d7bHjJLbnZutMjHdbKmjvgC5l6erSWYhaVCFXTd3Q==","signatures":[{"sig":"MEQCIFnBHDMLDuvXokSvQMJpRCU8ro6rc+aj1fNwZnTWpKY+AiAiNgQRC4P5gUKFo7CCV6n5EFjms9PR8dvS+wLzU+t08Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohpA//W0n1ES2iXrVpzFdcy+TPssiGFcbcHFbm0W+4feccmC/crVZy\r\nwcGwa+qorLT31InPb7iMZDquaZbvuqlKBDAdZahVLGcmlDYzrhkD96n006Qc\r\nF2Y+dB3v1AupR0Q2CbHH9X9ni5G9wvf+w+wS0/ahlhQQH68ZwCoprkCDicT3\r\naUTfvdbLOSIhgmiTAyrkfhLrO6/FgfAI3i6bz798g9jQfGFigo2w+cLRdyAb\r\nWfkDonm5r44WWsMy3Ce9rFhqV/8VjcNVO6ryyqvFspOXvQuc+pLYAAuZvjJw\r\nSqFlpY51nQN0UgzxBUyoAcAtcpJfgPphMweQE1+FDfrxW2T6IwwPZdYV8nTX\r\ngA5ik2pIC696QRYBi+hBi5+DupvyjXyDsgdwajSXbB8Av5C0IrNubcZanlbF\r\npvPueU4JIIseBDr/x8YQBT2QuksNoDcuLnnosVPe7i1Yj31qH5xZXpT/PIcM\r\nGbm9ON6EZtq4AlofoxWTtpeNeBLZHelETvovfZ1V4bISfa5YoLRuReyJwDuv\r\nMM5h6t/7twMDdTCZuGs9A6njCu6KvdD1aZnA0rBrR32pQ3t+2iHmJP2yxnh8\r\nQ2V6HKtounfIWTVCEK8KsIgYwRPXvF4o3MVKwlBC/EDFhivVJMSTb8WOQg/V\r\nzVEVtE4ufCDgy8ObMnpD/fQCevaiHju9iYU=\r\n=8r3d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/focus-ring":"15.0.0-canary.cb605f8af.0","@material/touch-target":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cb605f8af.0_1669284966035_0.38460708349476613","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/checkbox","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c108ae67580dd7e5d128c558e78efe08797054","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.05fb07f9f.0.tgz","fileCount":42,"integrity":"sha512-b5sZxnW3AeimtQq8gNPvhY8KDpgGRy8ke2EgWznWd9AOVW6t9JTG8hCKV805Baq/thUmCUZJM08CUpM9Cb0Ftg==","signatures":[{"sig":"MEYCIQCUUjioxEQ1bAMh478HoxurODAa0ZJnmgODf6i1s5t3ngIhAK2gLnNy1zSm7N7gpURAD4RcgIQ8LQliT05pQMmEKKlL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7JRAAk78ZxGL3dgxFGxdErn66PveT+vyp9RqD2bg75CXGxSJ4Bq7a\r\nEOljZJByTPdLelw2AIX3qJVR/H18Ewy3JwVnKNIL4xgGhCgKiiVNk5q5g8DX\r\nSqTVXduEws0z8R9QowHFRblrQ9iPwFW9S/FwVKpi7PNuEynE4rJZyYsvfLH2\r\nf0qGjuqrL39DrnTJ2IX1EhTYIn23NXj1ld8vjtmv/CpTHwx0JxqHxe4Egz9s\r\nIZfoPydjmiRb6tBFCM/78V4mtD8IZqPrdLuq2Exmeh5dcHRbpnfFcQxThmQ7\r\nQpJXlZYgQdbh/NoWrKsJ4h9Y4Ca1rcp6mpxwkANcjvyhX1Fn6cHuQ8nRmqqb\r\nSDY/CqCf12P0jqMQiz78H+uS0PhMtrgdGJ0Q3TG0IXwMUle886XJcDcr7aLL\r\napQOthrs8YfDYVntp6II5YcioDeFtIaSyKkIs18bIqWpX+lx/7XV/sgVau/o\r\nXBh4znEJu7RJsJ5CaqepMXraIjr0rCd5nMXuqiYIUxmOvnrPzptANXGZZ0E8\r\nDnFTKFZprEXU2MY7BcaoHlVn1Pzhiy78OcFFqzlV+2iELQdgCEF8X+lY0KXt\r\n+2IqNQwO03pzoTM9uvT30Rak8Im6ZQuMQaeuW260mX9zwSGqE54tlJM9ZGxH\r\nf3XKkid4wb5tVs0GL+B3IEYlzTWM7uQDrAo=\r\n=SekV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/focus-ring":"15.0.0-canary.05fb07f9f.0","@material/touch-target":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.05fb07f9f.0_1669310046276_0.7096427934990504","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/checkbox","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a911b386b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02758774b5dc21554f6d7dd4e7d6828ab6b7e169","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a911b386b.0.tgz","fileCount":42,"integrity":"sha512-06I/KbBEvR16Ovt1jd4brAn2kJDclWvIWCS+mhRhKmDqdhVF0XP4q4lwzF/bYBurPSlEOeL2n+u82u4+D0SJaQ==","signatures":[{"sig":"MEUCIB9xNWnEHqeMWwWF/s1Fb9KLgaQftjQYeFoDhnpXyru9AiEAmz8sTlDd1pT9GImKa6y1Kih4QVSQzU4wfUi/U7dkORg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGNw//W/+brJ9734aO6E4SqENHQmU+slcn/08I82sMrHDd7uPc+r4C\r\nQFCYd7aFGwWDhWhJi+UShugl3V9/9rth7wCrsVkKAWP4mT6xOF8mDYyOhQwx\r\n2wKvX0l+Pw2Tf9EY8touAktWbbCDt9gtTU+clMNqkwQ9+Xj5PyJtzz7aNFpj\r\nb0zptjVIxjzF53EW3gtn/XrJTwjms/Tha4tvdc+2PfAeaAz45gc9r0rncOsx\r\nyPNGpaMzbh/4KJEGbZThikFcnubm4rG0PjaX3oDgkYBko9OtbNgiPsbz+qde\r\nnbABe5Gw4MCk7VkmD5X5eZmYl7G9srq4IbMIb7HSimKToCGWvDAHH4pNJqvT\r\nBAypzR/dZMtBk2MP5puSOSNlWgYiw03fKgfMZajRnIPXl94An2Lb41bNjokg\r\nwrAYQ7JO8hPPIk2/4tz+RiQA80r6bAYUHUNOvKr8JElZf/DcO/MutOE1K2oI\r\nw8tBs3CKaB+Yhq4RR6aLJSBv7MuyxhFd6bZSfXn7r/wbT7+OnAvIIchFxNBY\r\nIAEAIJTVM9P6gHpuEgE2rE/Us325g21zqcd5LCHTuiswAQeyGcxA5zFaWMR+\r\n9EdRLS7fJdDThHg9T7rqo9R8zIqPhrGxwz5mUItTksaRMICpyqFt0eY8xFfe\r\n1TDxwxNGmkRm/9M2MOW6DflS9YBSSAtT2Fw=\r\n=kiby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/focus-ring":"15.0.0-canary.a911b386b.0","@material/touch-target":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a911b386b.0_1669654062655_0.9675238157754265","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/checkbox","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"285b32eeb2066b6186e4d886e0a252766e6debc2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2aa8050b4.0.tgz","fileCount":42,"integrity":"sha512-oDScRTEK14m8SrlUA/UtUpNku02ENHyVkxUB6fZXbGbulNinZf4hK+OJhF3lb3KTJdUMMkJWHY97GZ5iaEfv4Q==","signatures":[{"sig":"MEQCIGI8QnZGYpJAYTAgJgzhsV/+E6LsCPZOLUILYYq4DBxkAiBCnnSTUXJ4tLw1qbX/ojEg4oWxYGVewRG3C9VXFnzvhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQf8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRBA/+Nn7Y9WMeBNGSwLFu3cS44UpGvuWDJMTekGr09DF0L6LcKPAC\r\nJmgQDzkKAztb6BxMYfX7uKBWPKAk2eCn905jslqr7pfRXog/m+t48Se9CeBG\r\ncV3IinnaDDRLaUlXwKq98GfQLcoZ5BFaieHcVoSqdooqLgd7GohBinwJJzoR\r\nOwjNYM99i55peV238iCi7QwZzM2gz0eX6LYx/9+LUh7tQ2mugfMfF2Q85JLb\r\noB995xHtpM/jvbDIK/D7OlkclNA13G/jc8/Cd0Z81+dVkGYFKaQfLIcMCtpE\r\nIWOkBKdHrUqAqd1LRA0n+OpOM/7R7bbz0SNwl3LfqgABy5zuxhvySTlZUebq\r\nJphOp6g2mfha/YeFBnmL64nU7yrhZkXprvML8riVIkeEHCW5I7D/J25eGqJO\r\nX2Dy7ECL31d2sMMbwuGOV6mOaMslqBgfO6DjCOQpDAP4MN2ryzVqkE0/8rpL\r\nP6X4ctCh4CfDwMgBrKl1TXNPgwLVrP0QWGGpTjqYVNQ/PD1ZKKbw1PrYuOyl\r\nPwkWUSNwP50qa6BaJLGYhUBMiiz2JMp38ChJZL2IorwkpO62qiw/mmOae1t9\r\nG3f6K08I/qqZOHaERNQHQB2ySGfNr6dIZrYTlcbzKSYr5ioehsi1m7ooySb3\r\nRhh/+0ThVYhRS9Z97t/DJrtCSRy2m5+D84s=\r\n=1ft5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/focus-ring":"15.0.0-canary.2aa8050b4.0","@material/touch-target":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2aa8050b4.0_1669662715867_0.8074331080123864","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/checkbox","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.323904a9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39478e663774d0308fe4af1fc58c1f244ca71c26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.323904a9f.0.tgz","fileCount":42,"integrity":"sha512-siOJwEl3l5BviEQ9Uz3Li9DhfZIM/FDwMK3rJggdXoIciNj3Ux4pj8jy3wWRdj/4/DX5eHdvT/kAWp04LqIN+g==","signatures":[{"sig":"MEUCID02zRPmOelENOe/CmDoW+RmLoQlUDo/cMLN3+ewOetyAiEAmz7fzNhFZnt78byuVg92621BPFijEAc2JteOlNABg+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk4g/9E2Bay/BnkZIf6RmtG/gzLwdm0SQJTntF6Q+hNXIeC72cgaga\r\n8LDN9lrh89+O5RbBZ+VDOyIZbz9wUsLZsBkKTrcoY5nPYsrZyxA5naOINc6T\r\nXtEIyRCQ+1OSDlqYlL3LZKX5339OGIttdbWVBqF5CK+fESCnkByVwBhEH6JV\r\nHGTrd162BueKXjXoPOAyyzPiWA0r/eILGdeb8kLx8P2cuuH3+Mgdx29m163z\r\n5FNDzf/l58dobxJrXZUdiysZKj01ppZ1ZKQnGDrHr5Lniov3gq3kfmQ/Oiv4\r\nNB2yj/d+aSSdYb3TaPDmFznIQlUCULJ5yT/PYfPTFYp/k+u7KMYqvRV126Cw\r\nsDruFeCH/H4Kd22rsK1OJUIXwjHOmmpumrQaIUaZZ5re6KZfZt+0e7wKMJ14\r\nrAn+JeDlCkqQv5fimi3WThEyqVHlO3O+O/SLNU51WeiTQGUUA2NgINhvhJaH\r\npnNuRe081cmiibKwIiI2QZr77u15KD5SO7ORvbcwhpnZWcTD7SrrwiCx4Kbl\r\nFhLyAcE27lJsPdUVSogLXaBbO6l0Auk+lSwxOUUw4L6UL9Mg1ByhtKvMRC79\r\n3SjzORbz68OPF15Y3mIg3DPxoh1MEw1huGGTTuBV8XrbYiqhrG8tmPKOeD01\r\nQ9+su3i1zWtyDjvo99D7LRPyfmSBf2Hlxc4=\r\n=Eo/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/focus-ring":"15.0.0-canary.323904a9f.0","@material/touch-target":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.323904a9f.0_1669736046905_0.4949058990439219","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/checkbox","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.168a629a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7dfe5800ac26b689fe179a8affa466d0cca439e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.168a629a4.0.tgz","fileCount":42,"integrity":"sha512-lx+5gNcd8nNnY3yNOlKQngT29Hjka90rVK1hKaAF0rS0zn9oP7+WUAtIxVTWTIj3qHq/ZJ8jJ2WH6OgLJWBALQ==","signatures":[{"sig":"MEUCIA6RAbazp//ju8QBltSGQ61nGM5iyQ7Sx7D+NAaZ5td5AiEAzmI2CdyGt5t2HdWQEJL359+Gv8HtEcCrD/gSqpyM9hQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ4g//d6irGxR40Fj3M/Mly5q24bw5AFCYKpZHGRCuonC65/a8K4ia\r\n/pmyfJUdyLRZYHN9KbXTwUx5zOpqAouA2jg+7Le/6h3+DRMe+2gdEE8zRo3k\r\nVo+gvBUyMJ+d8rx7zKkCrHqx67uxVma5jz4mBA5FE8gKiY8zLi5NDG+lHdRu\r\n0tngpC7UtuPd5lcZbTYHdtVdbshyrbmPzeEFS32yXTUdMf52oQ8QgHlo0FJ5\r\n4cg1oDmDMI/bM4B5jGkUzykujStzOTjJGmNMaTtphCzgveUzsN1pzHcWoLxd\r\n+Ap4O3kALaxvVDOny2BfY1Uj74RBk5W5rM+J/mnH2RsSxvaGyoYKy1U5yp80\r\n7w34feemBOh1dMDIeTtt5dfaxqNVHr5pA+QjK8Ki59+bnGewjP/AcY87hMQ4\r\n6vBaWiEiIfWqaA79HbizXZkX9yM+MKxTS8Q0HAk/3DfhDbl0MKw8F49FCt3K\r\nP9uCkvzNUPby+C/sYEIK5EEjDTxk+MMDhjpfUAnvAqE40CJJ0K7JM9VXOMW2\r\n6RGEZtBA3nX0YaIrwYGugQkwYN0XiWL4UE8Lh4Aks6HlDd605yDWJzutsv88\r\nCWhvY/PO3AMVGhkQwiTOqwD7QfmXeBJ/BdH05gqv86LZOPD9RIIMdK05i2f8\r\nSLRMkhioE2BcwHrzM8z2kSDnROrGsYr7ijw=\r\n=hD0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/focus-ring":"15.0.0-canary.168a629a4.0","@material/touch-target":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.168a629a4.0_1669740546729_0.09952122600031155","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/checkbox","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.65c411674.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b4df8e0dacf26edf066c103c3e78b8826f3f6ad","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.65c411674.0.tgz","fileCount":42,"integrity":"sha512-BzQrpdD+908h4Sq5yA8fQbvlcpwpXHzCvckAxCrZiAOr2DAKBYci2jY0Pj36j6c3DNCBAEoFRyLmnG9WxeArgQ==","signatures":[{"sig":"MEQCIF80w/vidaZcTC4zM4YP5iWcq+rArebRUVekWe78wylZAiAjfbwEoRNytmiErK5M9O130T4phNy5C0y8/SwQFz5Yhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2lw/+O28cGQhNgaV5LVcfanfKvaOGiWD3NEAebslNIh/gCJn2n+Z3\r\n2y8k5emNJ00PyvFeNgHRuF/K8Wuovp/t/IEaXhmARCU05G+4V63wArt6FS+b\r\n2YsfLTWpAMi1WQM99V5rSSjhz0UaVJppOIMY1nX6m6X7Hno3XWp2Ku3TeIRi\r\nsWqyLfxwGC87wt/mNncD9vvPtNZ/sGzhBuFw8+JhjaOCbsV9gWVWXH1NTi8b\r\nn8imDKbc0yKVFm99BzqW9fYYZi76OwgbAyHTT04K8T6+0/mFHv2kA5n6J3Sa\r\ni5+58a8W94vB4wSQrwBOS1kj3QcygpxF0TjT8ndAla2ZucioJ0Y3QyZU/YNv\r\n9OxvPWLMiH6xMClZJaDw/xJiRHAPZ8M0s3n8dIfHz0jBPNRHc/Gepan5HFtp\r\nbz28uRIEiVIRk7qRGMt100GKvw2NUOG32NCMcIhAVZ07YJEpA+5FcBxOLdX2\r\nz7dHZI3F0MTcnUfna2cKdw7Gr5fIaPcHoYWVjVUfZAtgUH3dacbWKb0ZfZdc\r\nZO7E6pVd+be3SAo/EUSNvCzPh+y79JepsboZ261DMR0HVIY1Fboahs9KYfYc\r\n3b8CGj/YKRpeHwn7Pe8gv2EcB29XBaaHRN5s1BnGrKU5kqaK8HrR08YQQOxs\r\nq4+5/3eUgYeiUUfYxun6uKIy7EbddJ15J6k=\r\n=SOej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/focus-ring":"15.0.0-canary.65c411674.0","@material/touch-target":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.65c411674.0_1669743529734_0.1321566635343594","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/checkbox","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2c452fd1a74b4e135e0ca0d44f214af4d20741b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a86d36fd2.0.tgz","fileCount":42,"integrity":"sha512-WjXP2V6AtGk867GNYQK1Zp4Bx6XRbyASqptBzM+XvekBdU4euXi+1jBQyd9klGn/Qf3Gf1QbSFjogJ4159jUaA==","signatures":[{"sig":"MEUCIQCXFxaDp6E9tjrdB5eVUQ4j4RmO461/7JCnzJ4Oamgg1gIgHulcuwsMs00q1qWqrqXKifZfnrUtm4BipsUk65ZK+IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhryNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmompw/9G7HcrXKcoLjcrxTNdSumHFMMppozmUwxVK2WMdukoG+oH54H\r\npkGl7IAC5lIfPHcg1oX7K+PR+uAbke65zDSZGYNBjgbZvIAEnqb44saCBr4y\r\nTPJsh/6bE68R0BFN5NH51vzEhe4F3fuM2OUJN6fP7bx2ElELclkTMXZ/GVCy\r\nVKMVh40D6/bnqcUUu8OfJhZoFAEWLL6gMXaYlnmwRMTVq53Ak7By4qU3GKbl\r\nFOOgpm6qXTv0n17Z2WladU7TfclPq4hGQimGGkxR2RynTSUwBoBjyxZvyOG7\r\np1IcFYyEA6w3mZmOkc4gJhywEEYpSiVX1X4qKqc/EqsSCs6I25gHR2V4ODQc\r\ndv5i8IPxoSKZ4ghfudyCVjUQQjWzm5Szd3bvTRRHRtuT1XboNlkZe6A9w1Ss\r\nSfWnGX76JRCqc/cSXe7kUIi1jPKQcpesO5KjH9R9lkpBohn1zeC1EG9djkp3\r\n3gjZN6fxsWLXehP7HLFUOk5gmRRRVEfPy6gUdRgd8SAxGMzmaLNgbtDyHnfG\r\nmlZfoNk61N169GYF/WKx1r4RfG71qZO/nVtRhC7Zmn0MP7AQTX7XKd55blkI\r\nGjB0yOHGBoTNkCVwdNEIRBgdQo4/cu78kvSHy411EVPWdcxsKNXG2pUOQIj5\r\n5FX61OA1i3mmLdkT29WZfTcRpMCknzKQXHU=\r\n=mPy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/focus-ring":"15.0.0-canary.a86d36fd2.0","@material/touch-target":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a86d36fd2.0_1669774477558_0.7502512773372645","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/checkbox","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9926e7d83ca5de0debd5258db3e20b16bac78f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3a1f46c66.0.tgz","fileCount":42,"integrity":"sha512-i7trJMg5XcBJAFRLjI605IJuLzsZY22prfAVYDtJfr9F2zLLGYlD/lLVBny2x8p/U4ypRtPfli9DB8GoonDCGQ==","signatures":[{"sig":"MEUCIDqRJGipwrboKSYeWRSQlHxesSlcVrbVsfaIkYddlva0AiEA2C3K+TamX8eGTtxTDPMtd9kDT1mPfPZFe095583hNyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0eLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8AA//Xs5E5iKEvFl6SJb3jj5syNozivThBiHiM9FGAU1vZjTfjAyv\r\nTOXIKrnT1D4xQGCxYXGByKMj+E1fM4T0Ih1KzeWLZJzfAMzdg9U24RtuM6tL\r\nOWODGBYRzuLdBBiAQXzgSgLIilBknZ5RIbGBMOwmyeM6I4MqiDevHw7KHWQf\r\nKOyGjtzW3uWFy7Fa6HQi6CKssx/ob8S5lud2oyiwxUpLeW4pG+ZEvgqcs1TC\r\nEkidLTeFwBkwwL9sUNrdVXgGP9G4imRgzVcWZgsSPa77G5/TnynWkiYQynuu\r\nzeNsDv3Z4dX8KSxDMXLVqrl65io7vQFgZ7cld+10m5PE95FEJsRL0NCkfbPZ\r\nrMwfKBcud+qhOMWSQTfnS95t1zQwlu3v6z3QpBtJvaGq3zz+ITceNyGVLK6K\r\naMK1YyYrCD/nXAzNk3WRr6LCOjfwq/c7U2LVdOsXqKLIkY7hxQttz+0Rwh11\r\nVa3OAN5+7dKIT04LRxpB4mLL7VcHvIPQeKizPvbrraoeX8QPZI1VyHLhZ9JJ\r\n+qEdh34/65HOEU6XY7j8czqgpSG8kdKG75Mr4AdVk8wDKMHpxibBhmu4jy9l\r\nf/YhIwil0LHjgKrJ5vNN3UipzL2Fx346WQD0NQx7JVkN9d5cVUx/SZYTw1U+\r\nLnALLabg2WtGsZsSiMjAyGJSJ4djQX0LK5E=\r\n=wGz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/focus-ring":"15.0.0-canary.3a1f46c66.0","@material/touch-target":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3a1f46c66.0_1669810059090_0.8500418334467268","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/checkbox","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b461e491771e6c3c45e4c8891c31f12c72a38af","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.32d8a9648.0.tgz","fileCount":42,"integrity":"sha512-apKyH9pz4Lnwpnm3hNHnYad+MgBSZbLKdfnZqtKPlFT7dsfEJ5PsneXypUXKOeEtFcgCNw1fvuQyYnb6cSqiyA==","signatures":[{"sig":"MEUCICl3oY9rn3yyjhSUhqroX0FKVU15AHajBYHG9lc25A7eAiEAgNwKNpTEnLPrcnzMkb8MLVcmv3qU1jPBOuc+Y2/TLkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOR9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJUQ/8C0LKGMORby4an/uufQ76ZrmlMDtJJe/xnlCIJzTKQVKV6Y80\r\ndg9XkM+UW2udAma9OcuAsZb72TiJo2jt+zhFNNaCKlAIqctYknkcxMu8nVfp\r\nmYtePBca76VQdE+W1sFFA+UTbxUHkf9rONshABUW5WwsWA2ysP5JEEJchSGS\r\nAnQq/yKxRIMyMuOUJE7bbcYHOPLkm09CMbhUjIiM747wXyjRaBwwSjSEhkCC\r\nDPao1DPDZ9QBEWZpiqiWG7QK14p4GJfV1gjiAeIMgIU317ECPZk/katGpNt3\r\nlvF7QzuTRF2+O3dfEPBOKu6txw6Ygu1s/f7VpcGlwsazj+U2dn9+3mzkuMCn\r\nCQ/WUKS9GLWbm15PT5sk7P/I+rJva78vLmXixo4fLE1mG0ixlKzwDNRWcqeN\r\n92B4pYJGxS+eeuZ7WsNYQYMacBkzNQIJnAOQtzuIoAFuTxI+LP3V5mRQA/Y7\r\nbFZ1Gki8MlAj6O5AjUIRQgARmdwvn4s4l2NY72JS2Xn38SQ8RcvYG5xdSCKY\r\nE1+eGpeJmXFI+4FU1Lz7SoMA0NiXfihSqK8uU370OoZENgCT3JFMLtmvzm+u\r\nAIEQBG949r70Ie6x0pjHh7mjEHFgec83hXvC/qHa2kaKVEnWMFf57y6gU4L+\r\nv2o8Tg2IToNG+/UGSO/3aM7Cax2pRqxxq2c=\r\n=a7E3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/focus-ring":"15.0.0-canary.32d8a9648.0","@material/touch-target":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.32d8a9648.0_1669915773202_0.3630667258699165","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/checkbox","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.03618ab70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d858f6d5e842c39efe3f5110b31c9893dea989a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.03618ab70.0.tgz","fileCount":42,"integrity":"sha512-6TZ7eJELjuvehXIBJmti4dGhYSkpMh/awZ9mUCignr3+9twDY3Qwsn/c43tVA65Y4K5pGKTdpDVmvKR6TqXDVg==","signatures":[{"sig":"MEUCICjEqU+VDgnIFztMix3gIRSo6Z2iHOKUctx5DDX7m6sYAiEAgmnAlM0geaZ3h8+KqInNF53QN6Bn6S0PeIklizlYlIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6RQ//VBROavw5koH3F7TrwYc5cRE7JnKFCjAkGltuhf/AVoLWMujm\r\nnPOZyqohz4kZLevCBVdEqCZsgJB9fGpObDBLKK5oOSem4KcAOB4SzRokr7XQ\r\nd1yHtPpbvY4AXy2r2phsb7zXbywTirfPJKe5+X9tXcCaLHpsyfLd8IDSxZlz\r\nWi2/Z/LWME++pK5+70tqWtTp3o1nQZjxJYlpHfcKjYHf/G7fs1A98q/VlMHy\r\nZo0lGj+BBcvvOHhWg7rsbcMoIxC5FM/fB5jpw9FW45qhnNoqZlVQDjleDUOq\r\njPchyScroOidv/VK53AlRZ4R0TJMWe7Lkk5i4xSfzQ+in9hZyvDli1uW1fPS\r\nn1oF/pc+Xma1/arx8fmMtUnNveAPbjOHCxlO5V4FxodMa3l3RVVaCuM/ACuP\r\nK5ItYPbE6aOUAXYHoEyOKmdfpBlS91F6PSVsy+vGJOp2M1W11mVvFqMkiPDk\r\no0jGnUz/hwYxxMncbxFqqPOCjX9KNb0P8bMYlyBqyuinc/16AJdkGs9/q5Te\r\nMb13xs5Ay7BTvnfw6zaOG6dzzKeKiEOEfR2KewMd5zhlee0oF8Hwnqml1jYn\r\nuuMBG/1RBc8/7/wxZWxtovietVMBVf081YalFALGyLbcMhv5Knx0g7ZhMSxJ\r\nkexKu+oHhHPCwSceHhslRD5XEclTJzn5pLc=\r\n=KzCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/focus-ring":"15.0.0-canary.03618ab70.0","@material/touch-target":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.03618ab70.0_1669928088546_0.8929080015267907","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/checkbox","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.68aaed940.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9fe84c1a5b3d01bdf54e83991aab02af0820aab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.68aaed940.0.tgz","fileCount":42,"integrity":"sha512-yEpIPpIJ9q9v3cHC3oLsdTMojYD0TIQNsYV0HpCRIh7a5zuVzxfkom9RN6N3y0xdqJWXCzpRsK/SRvWnt8SExA==","signatures":[{"sig":"MEQCIDD1VUzupp1AresF9Ni0k/6zJEsYnC3UPXux0QrUNjKeAiAseWSjiAuAAbFddNSW5xXzpVl40hgD+/BgpnIgv1h9yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRuQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpopg//RoqUAoI/3v6AgMEx445iZYc0aJmM+z4//e86gExeR8jyMyQx\r\nVjTPdcnusMpOUGOhwnEHY3sx6m76snEtW2nSyTUkabasHzM1lh71CtYOcxg+\r\n/mDJ62ILdDFHKIcthBoNPSfC6XCTVfpvY3EkoZeSQdRCgYCwnmDcPMkb84OI\r\nBqhKCuArPjvUdqh0BfJXOakvbqEG/dn957ZwDSdkQWJDsWolaXdfvyYWgohh\r\nxVA7+LlbO5x2tqx32ShdCITcEkWF0ej2QMDmK+wxZa67GEx6rwhIP+9Bh1Nm\r\nsUpCMmiauvt0YydAo9YpwJY/2fOT5fAXsIhmeUYugVopTL3TqXJ6exuKCQ5H\r\n8oc1xxY+0luUwF1khnLmLgh2Mm5cgkUbRlNKmiJqUHIDQfZI/l+0qv5wPIgG\r\nAOIj5QynFCilJgMtI0QhsbpmJYi13VvIr93ZvbqDbGPACNbYjiF7dR2LjJK6\r\nCOXwgCIpOv3fqUQeiBEPqDaElhtT7JV7qPtFZgvwcho/YCnb822/BzQ20Bzy\r\nNaLCjVUwnpUQcc0MvKHdl32CdiZh3Q2jPGFX5tZP5Dp+lvd28Inzx8Gc1NCO\r\nFkNLBRsWRcNAGGJbuGAqwvQbvwEwpb9M0vXIZ7BifEos4IYvMXMJuO5IhhMM\r\n/h/xDw3lgU4d7M5oe7aFEqd537/QHINUVyQ=\r\n=Q0jy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/focus-ring":"15.0.0-canary.68aaed940.0","@material/touch-target":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.68aaed940.0_1669929872371_0.9687016466009508","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/checkbox","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e3052ad9e75a8ba7aad5181f505df9ee23b769c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":42,"integrity":"sha512-CEk5eyFCEvEKm8g5jbHBohXOtb8ugE0H4g4sV6aAbQLQVQobL4DHabSB5lwSqul3/o7LfqJwZvC4aLdiJ3fZEw==","signatures":[{"sig":"MEUCIFhdaecbfQFnjCAwsmkxiMFbLD3+d26BE1ubackY3gqHAiEA1/xJx5esJ4u0UCxQy2JmBCmD6tQMnGPin44xuIWUZAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":762399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLXQ/+L+jP/XWhjbAeyqkJNxkaURWEuv07aJiutKIuvHeqvQTM4WA3\r\nBsxPdQntGy6w1fnYpSN9iW8k55iMz5CqSNok/fDBeSMZEmgKg4keFPD2taf7\r\nylDOTMgtORZ8i991fU7VSZ4Jk/gfjPBGwqwxdyMMh0dr3d8B8nry9zOb25lK\r\nOGQDr8zIE3glJ7iKGWTnJ7W/NHgeuvb4A3h+OqkfHM89CTbMzB3dtn/w2LM8\r\nO7itESiSGgZXvqwweogHoMLaxv5009HxcNzI9ntUg883NywGbvO2DGnt+HSM\r\nkCghKpi7qdcb+d2Q1STX9L+pkUraTtgXKaGZaASGUt69Y0CxnN6TMQ6v02RZ\r\nWMoblKwiGmcO2UxpuE3Y/fwlGA0yYwhBSiebT73KD+Xoc6b+zTkW34w9jsH/\r\nqQKFfmO2BBfrbxGacUW/EJ5SW9HOJcAR+/283NCfd+FoR4z7WkLYYnt8Qjfb\r\nrAX/Pt5uUeiU5R+EwfjrjFk16QlcSVkS76zxH3Opjthh+s7Hn/az8+2NQx23\r\notbA0m6GfCV9ZU28x2udrtyMaNBgwLztdU8QFKFivrk+nRrXuOG64PdA5jpk\r\neQI7/rvAN/MSzSVf9QLsOKciaAE69FJKvJx0/HutYAGZZmRYUEd27fHYLfaE\r\nvv076Le7fMOdA/dDo+Vof64th/sRpG9bjEY=\r\n=A3f0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/focus-ring":"15.0.0-canary.f0a0bbc75.0","@material/touch-target":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f0a0bbc75.0_1669971721868_0.38949826897475504","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/checkbox","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d70a540c650f379397c56cecde3e00bfe09db9b4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.dd99c8764.0.tgz","fileCount":42,"integrity":"sha512-YP+y/8ruBy8a5lKNMzoo/hAD/hpKxjn2JjRYz2Z6+wOYRVvahIql7AE/0lu2dXOJLq+29VxgbrGNtUauV04T5A==","signatures":[{"sig":"MEQCIDL49VY1rkcebg/5dUyB+V9gntnPnwOz6ueLfUYR5RXbAiAXz9MHNGyGQvmhztpnaPPYdI5fo5n1AUH0V/DR2OoBlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigU0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Sg/6Av3h9klHmARAOSfgd72vmcMop5ZPjyhxqR6xE8usZ405hj2p\r\nKdU4QDXTMA5Yg/6mTy7NjLyruC7jbDSyISLdVWKtp5qfFSPkqMGwFUrsEb2L\r\n7ZEltRckCRlWAmYnK1g7/KN0LFYbl0jPxRlI8zn4PG6ZD33eP1mrRsjaS7Kz\r\nTNaKrSCRz5/8YqEilUgGo1NDY/8qX3U6OvO0j4aRQBdklTIDa5lggO41CJtQ\r\nzkhgR2QIdhlITFQ+9UnPA+Vd8EZdIeLQ79PzTcLUktESh1ZjhY3hw7eL4NAR\r\nwI95W187+VKEhDlXQnbjJGPQ/O4mqHIzPbZRRKmFycbHA7exHkmCvkQL4I3i\r\nUPAym/yczgmiPeAJ51zyAv5XU8ZpMX3fw8zSb6fNDOt/bBXVuNWRgJd/WPy5\r\nlk00v93DGHTb8voiIhM4zDhnicjFHVAXZ33XChYqI6RhR7I+t3fkp/+GCnCg\r\nyvctSv6stAeAjg15R19cxj4cXgis74xDoedZTJy2DRy/VJaaYvzN2CcECa5+\r\nbb3IMt5NTPZL5HXEYBqeGfqgPz0LVR43U6kHko7X3poM38m0qPKwxn6Pa+E+\r\nCbziLbN6qSK6KjjyY6f7inTUgEELeQlMa6er83M2IWYPjosdhgo3wRO6fuyn\r\nCS+8OoXVazuHnMYNxSZbhHDGuPMbtwpmBP4=\r\n=ohvE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/focus-ring":"15.0.0-canary.dd99c8764.0","@material/touch-target":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.dd99c8764.0_1669989684414_0.49048103035555957","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/checkbox","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"737fefc160681c536ea842f1b2dfc4c40d48782c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fabdcca3a.0.tgz","fileCount":42,"integrity":"sha512-7njcv21EjlN/aNiJX7kbHyQeCnmQClerwStSyNeLWgXkiXeUbihwYRXke3vMZUyVNzoBn8sjg1GvBip8vSafKQ==","signatures":[{"sig":"MEYCIQCSzs68WoPaw3W/BTGipXC5r+wJHVRv+Diqc7qc2KhuaQIhAJ3uYRsMDk0+jsa8cHHPW2//WB7LB4Tt0U5sHqbj9NKT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihSkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/HRAAgh1oh1AoU5m9t9GR5nNfudmX4P2mV5amwuhj5jo+pJISi/y8\r\nqqAlrtvnUC42F+jBvElDWg4GUc5h5R/nlXMp56Ofk2YTRbnLw6YfB68RpSrA\r\nUiAyfLVcb33W2kr0i0UIildxueL1MteKVFGlPz1bHAPVeKQiEE687PhfZqM5\r\nig+xw2NRY4OUnbm/hEf2pFAnU1rEraAp9MRalZXPv8sdvIIeJFo+prXtzi0R\r\nNLAjEE9RUPQnQE0MSLSwOFwlfQ74d93bRR6Frfaemn9JNDBaRh/Yw6UNEp5t\r\np8NbPKRYgCWjVElf37Veu+V8l21kudpDrG1dSmBGFrTMCfTmYVPoTquaqsvt\r\nkXeu+GaLUqXweb2EwLN/6cZN3BVHAmlGZTvhzUUQsSi5pA1twBEPJD+gb90y\r\nFgTyuGqOPfsJwBaMZcEvSGW/9Ri54zNoES3HmxfaDTPWIJ/GF6E+afrVEl0f\r\npWluwzhd/Ps+dkhhsj6p7skwWeuZOJTEzZ4ALx8o9Bt1yBsfCUWF8jhK10Li\r\nhDFazWzAkHQKIkyfNhxHuNCrtppawSawmgpTZSG/1JUjo3kfH2Vnq+ZiQkqm\r\n8jN0zYLjXPPs34okBRjg5vs2PPJC3TOUBj6QQmB0HXrJRNt1ZlzR7eyJ+eeU\r\nBTFkdglsAtvejb319dZOUkg78oEC9pEuHH4=\r\n=rbyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/focus-ring":"15.0.0-canary.fabdcca3a.0","@material/touch-target":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fabdcca3a.0_1669993636592_0.35487779891843285","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/checkbox","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec5a9346f0aff705f40bfc09268d55dcda647f4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2d26722d2.0.tgz","fileCount":42,"integrity":"sha512-NhVFHP40gY7jWZ4J67Ab3UPJCp0cNbR8Tyn8yl4HZrkREliHygcxR1HbYfGGg1PvZWUnnyoi5lGfyvn7glRdiA==","signatures":[{"sig":"MEUCIQCY7m6a0PUdEpeoZ2yxdaDrxdQqn+m4ko0S1rvo0LqI9AIgYEQp4eSN5rirAalKGfxFTqNIhRKOQUPwU1aufu/7nPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1RhAAjtiN8yaAeuRpi1ASpZiGYCqi6WFBKk9bZPxswSCtACi0dD8X\r\nqrlaY7MIRX0CUbWksMVO67LCGluCFKnqvWH90w03nO8fuJDtiYh1BtaXOJ63\r\nrGjnIMc7DKqATk6igI41VqpM+pWakN0D1pWD0Tu9SV2wlbQMbVw7jcaB18MJ\r\nhoH9CFup/ht2OVVj2Sv8xBjF4mrlzSTaaWEJn2WAsRzm5W4EFJOKyfyl2+BY\r\nLb1eL+LguqdMtfn0HxenzDCYH9KGba1EQ/Y2YtWIByti00GkI3/fO4b2VGLk\r\nGQMheWruVNfAJdfp6q/ugXoRgb8e2vuohgQHyV6U9opPIhZpFDrNbYczI/cn\r\n4hm/feuDtCvELH4j90GiSLP2vdvAklYnWOIN6RoHvEa7QG4sIOxdfd/zIg5s\r\nXKwrrxwuy52pdhvDfZ9X8SLhf5rytL0Ulz7BroZRAn0i72uN/ho9AzLKOEBL\r\nu2rsTEi1trS0mgVeIjBH8ZEH2dGx2ZRLm3uYHN9x8YSAw7wRWTbmwc1mLapR\r\nN/FAREqqHhGUh0GZkGrphMC2w0K97F7SW4TQHqK+jdfU8RadQZR8se+S1sM9\r\nf2to29EuWVPIANQyUZ15brelcDdYb9w42rxoewRAe31gMSoM/PdoH89Namg5\r\nSCOiE4bBZ5FAf7icA2XIDUDuyfKBRXqG3Aw=\r\n=SA+v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/focus-ring":"15.0.0-canary.2d26722d2.0","@material/touch-target":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2d26722d2.0_1669998417735_0.636525931746124","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/checkbox","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab398df765fc5441c4a0b38f50a99d538547951b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":42,"integrity":"sha512-Smy+Ykwf1szUelubcnZoKZPkxil4GljZ5S92YwN8rQHaUvXnVKHZsMSl6eCYdE3G/i4MBiZfEiqnkSOynJoigA==","signatures":[{"sig":"MEUCIQDu9Tk/BtP0WwyjauJecxuYGb7eqozFPdYeTboG98s1WwIgCqOFAAAyKevbEQzmi71+RnyMkC7M1+NiypkgMnTm7gQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijklACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRqQ//TqbKTf6Q3LgV5ye8zQK8CfF9MWd3VRaJDxhKLaOve3LESKfT\r\nOhADkzqghtdFg+8JFrz9Ti2i7PEgY1NxwL2AbNGb0DL66xIh8YtJQqvWtnnZ\r\neSJ2fpWxbmMT6SEqSKD1D08BjfgJsa0SidTHxlTcVpXHyzPyerybSq0XVXW/\r\nhRqXuxE4aZrvQFQtMvIAv2ht3FyFJCzSu6l84eOyeahhbapPi98HFE4nKrUu\r\ny8iNSMduVCY58SJ8v5HjK/kaK3P1LYhxM1hU09NQn81JekKQWilPjtR/miyp\r\nroCkxI9RE7cJgVyDUDVP5/qzX7H5VK0nTRi9scuicUJxzwGRT3oNALzvpn6H\r\nnICDwT47eHFKaI5rEJmxKkpp20300+oZPqXLOgNKJFrgmhJ1R9L2ORygDcT5\r\nRaOtcBiDICaIbRzRa4vJJyHhaMutf96h33tJ200Fa5HULf8uduo5OMx9arFN\r\nFHDwA5SqEBt+6ZQAh962Ns34LgOsoi+JI39NLs89PVHMAAfH4GR7l+myf/yU\r\ne/0Z5wWYbKfyzDXWJZ/8VBTtWjgFWGhNqVBrn7InZuWestj83OwnjV2QLg9d\r\n/PqIvLA++wRrQjrCa58k7jLqvXu38lWkMwy1MsbwX3XHC3VN4OtxTNfHb+SU\r\nEbzWDsI5Koik/1LX/pA8AbLmhXbghxgwHVA=\r\n=pIKM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/focus-ring":"15.0.0-canary.eaa0c3a86.0","@material/touch-target":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.eaa0c3a86.0_1670002980749_0.21285748032495633","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/checkbox","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca0258c03b1b779ba5ddb20bc35835e39b5ffae5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.79a613bbd.0.tgz","fileCount":42,"integrity":"sha512-bFV4J9P4qC/LUfxT1Q2eVB7CJuQcW9cykIMgxg+7RwqrMnscVYpyR52I95VER2ZJbcqkxD+1+282iWKpomtcjA==","signatures":[{"sig":"MEQCIBX2c4XJxOyw+fUaTN5pdpoB+v0P+bAd0bD65qtA4a7ZAiAxVxrok1WzXOxTx8jTkXzRj4bUe6YMILHrxfYyZGILlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1DxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOAA/+LyC9w2w3NJXxY4jV31tsrqQtixiFPSsd74flU2f55STKUaC7\r\nLuye4cw/2tGTZyfVrlWQtVFW+OyMew0Ix+4PnEbCABhUS5j68nuSUJEOzwuq\r\nPXDLBwz3cnWjZGcgYk7M69QC/RfBeLQnZo5cNGfolyuiEO3CNtWnHNp5Oxbp\r\nA6HGUz4TJau4iXRBbmGa1jJhjbjDLq3YtHxOTFPEJFQc0+6mE4d6ZAfbkUAQ\r\n8VQWyzbGIVzeKhL4z5N8diMPXRemWhahwBY9OO/o+HONQNXNacXxQugwz0N8\r\nHL0Lzi65MJzqcQT0QqVO0kFI1pO07JGlatzpLhdYWnd5ZUB1/GV1gPszWLlN\r\nT78IwFdF1J7gORKQO2dFOwvgolrZvkJsiXcuq081QmVHkZ6CVTqBD8zMRZBF\r\nm4JBpgNxmH7Z26gVZdlpseJQrzrnTYJvOVrn1LKrCmBUslpLlUY/Z8ZHDKjy\r\nx3Aq8JM/Y8bz4JwHZeKgj+P6mmtAveE4rQBRH4fvXhSWWte7qpSuFgMBMFRf\r\nQkRYOlLNsBM4AKf3f9fo9GplV+Y/CIo8oCz3Qy3yyBca0FJvPS1UjDRPfy5m\r\nus/zZKy3dSEJaYyLv6GLwy3VmC9ELaWclyQ2IsIJtRWalH06j37UFb2xI5mT\r\nS7jg404EoW/SrGiqpTInEWEUpDBwA85I+V8=\r\n=hw02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/focus-ring":"15.0.0-canary.79a613bbd.0","@material/touch-target":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.79a613bbd.0_1670336753293_0.2961745974614305","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/checkbox","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d510e386f0aed7641bcf19548406337331a7e22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c871fe61e.0.tgz","fileCount":42,"integrity":"sha512-nEmYGf6RkBT2+kqF2uM0pLKbHCvXZc2/rFrPGv2mdEIJRvOloqHAXzjy75hTeTzHb/12/tYYV3//t5MNB+c1FA==","signatures":[{"sig":"MEQCIDKeKIQY6+a+PDBEg9zG7+klphcKoO+2RBePVSIXgjZcAiB3dPXuzi6uULAgTYya5Wzu8YMY/JusUlGlmvZKfRsOqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3SQ/+P0vhDIHOFHrW7GZiIKhIfui888DxiHWzIXU1RVZBv0VYRjVN\r\ngGFzjnWxFHWRxcB/xj3qWhmTZjXO6mB8m6srzps0vHarmTKztn45LUSs15q1\r\nGU4yJ0UCf5E6ErMIsMuMzTOdAx8DKzg5X1xM+jqcDlW/9z4OT2FMM/i5DIog\r\n+geloXFTFziuqktovGxFoATVWOssxGZjcrbUO1brH4kXavPexa4hxGpjgULO\r\n3LmDOuucCjUri8jZXNk+WnEx5byjot+PVU5GBKUE+TImQ8VWBvXiP8MYM/ln\r\n1d2iw0Ds71F0Fd/KAhR/MPfpHpuk//po19XdQCIYBPW47Z2LwmVnEgvo12O/\r\nBuqL1T8JQ50vwcXKSZc/05T+7h1yrONg/vF779riK2H2bP7Efu629HXwx5u9\r\ntfkbjVfetjAFoPwIbbsQBd8niDpkWeggMWz2NzvOzcgnzxbB8znNx+QnaAcJ\r\nDRuotvDXjKov3dgJQfonhzNsuwgYF5bmDgQNL9f0/sprcygfdtZkFdnkVa8V\r\nmEeUnqZv3Ht2lpv/yoz9xMRwDw8UDtjyOCOgQcqC1JyhyfGJrimVsR6BSA5W\r\nCJpNMN0obNTtqQt86ySAyuoJ5AFoP3zL0t7mZbQwNNxWW94KQlz23GSY3Nuz\r\nH2bbE1kc3V6mnDOApXK325d/s30sgBcDTNw=\r\n=MPxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/focus-ring":"15.0.0-canary.c871fe61e.0","@material/touch-target":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c871fe61e.0_1670399538641_0.7829490175014839","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/checkbox","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9368ff364c13167dd4eb8ecee75288297df5517","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9eaee7936.0.tgz","fileCount":42,"integrity":"sha512-mSsjxFfOvNWtuk9iShGA404TxMPKSewPRR6sWioVLUYtoH37JKCfa50YPXyUl1NGUU/YqklOHqCN75inTK/t5g==","signatures":[{"sig":"MEYCIQDgHHcjiAffViHS2WtrKbfwvhFolQ3EtYQ7v5L04R40ZAIhAMqFfqVUlEzZYb2a2dh5Q7x3BfMFyOF+UfDFVTZLTI4g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgCA//UHsTX9nA3NiQB3e7pqGFtqtUqMHmcj3IpC3R5FPsf9k3AdSQ\r\nZu8ern6///i0Y8h73wEWxWuyuyVhPXYLuUTWgph6TmESJFx+KY/6438/kdO3\r\nm/sBdWmo1iHK1P3Q3TKL117hmM4bprRHQWP279S+oPJAYCBtKlVPyXDTl8Gq\r\nwbV88OUgolVtVfNN5yydW2GHpQxhHGf2/HeSEmtn+0BkHtujwR4b3Z29xz/N\r\nitjc0FJ5oEL/CU06u95xiShAAjnMc3M0YoNoFpFCY0bXlIihQd0YEi7WdW9R\r\nILBksKoL9MVIw+imoTcdPoedf+FHcJQjbe0befwj6iZCwDAA5qkGkNHicpOC\r\n60eoZAhd+5ylLxQDqNeaWXgvVqrLqgcngfv741TsoIaA/jbFpjWgv/iPTv3G\r\nPfL8dPXmqMzQu2r9dqpKa0hucp2rSKEL9l4RX7VhvcLq/Qg4vB+2mm5aQjQB\r\noOD8HZeVQDKQofjkhPUSihCZD4HgESEMFtzrtCmE1+SLCBBsLvwKR8olt1ol\r\nypRKUvaiNShEw6ui2cfCE/guVac0uv7XTa5vLyI20N38eh5SXN48rpXuhtGC\r\numae7cMCKvB79Dpltlphdh1/85fbt1C5CYOdaW5lSb3V68hTd8pKT9v5VdJh\r\ntW22cJHGcTUj5ymJabaaBcAG3O8btgWkhVo=\r\n=rvNB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/focus-ring":"15.0.0-canary.9eaee7936.0","@material/touch-target":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9eaee7936.0_1670443401212_0.06531543024965503","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/checkbox","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80ea3348394e6ba0b4253d6ef1bf780fb52b4ddf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1d37bf601.0.tgz","fileCount":42,"integrity":"sha512-n3DnBrchZRIfvruJpxXsYcq2PbE/+0mMyAOFIjhZc6gtEA0XX3p+SQwIVma1hoiShsKSJOv/VtYCqOL0COaSUw==","signatures":[{"sig":"MEYCIQCG/kUUlGK+OZlm0Vb1HYGm+ufHvVWPpcnATcXkTGjqEAIhAOUYqzxLayVOAkhoh2gW7ksB+5ECTW3XNiH3LWObggTl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSxBAAmA8fKCgJmM4DhUKKMjR6L935XRAOAYVbNx3/l6aDwl6OV/d7\r\nDagwSpk3M3Ol0U3aICIGHuEdWfqCkjePcI29vmarGYuuBNw6Ub7k7yNCYKHG\r\nAaFF1oyjJIjsLzzjmrj1HXSCcYVXBU/Ku5iAPVj4JUBnsAssqKpbxt/vCrvh\r\nEMSixxCza8cOWn1JUJzDCnKbaCswAxvHqMgInyG7KqUtWGnEmwKJ+CzKecUY\r\nrllQF2P2wRq4Bcv9XpKYo7F5cEhaY0XTT8jbIB9pxj7NWGCSE2D3qyKWa1lv\r\nZqQKXgnDeOO+yudnoHp30Op9/b3RDAxAG/PPDSqbBDHoIRIxOKygZZPQgxm7\r\niPuGoW86nJHfh69+YP9p0MHBbuY+yGZjFkG7vPQRGaw3O6LWNLmp+XAZbVuV\r\nLOwkwwbP9ZVU1Mk1F+TM55oZNpqrSbNe8wyOFl2/BH0N5xvtjmYvAWYYZ9SX\r\nyoURKpRIroBY5axZ2UpTF/06e+smzZiNvPkgD1sSK/pA8Nv5ofPn2G7fc/mH\r\nQX6bdkU9uda0+FMSEveKQpi4quY9X5Rr07eEnuza3qjFh5zAyskZAT+1Mm3x\r\nOY0MIBdkGSOJbkWXsbMnyA3MrEhgz3KlMAZ/6XY9AqcxkmYMAfYsIsUZSm7G\r\nE8wIYE3tzIqOpdxd6lai5f1xZHsnDy0UfZ8=\r\n=pA1i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/focus-ring":"15.0.0-canary.1d37bf601.0","@material/touch-target":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1d37bf601.0_1670445700958_0.07046239519030406","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/checkbox","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"412fe5a2e3c8ef2f8f457223c155e147a61ac4fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a5fe069d5.0.tgz","fileCount":42,"integrity":"sha512-FbSIj5IxTe0Vjk6fpVwjV8O1r0J+b0tnwktwbpmoi+B9rQC8pgHgW13RBQLZ9PIwACrFU+b+cE/hHi7kFbnfZw==","signatures":[{"sig":"MEUCIQCsq5oGdjPhGAjt7sfNyf/K60alsb9QgLXhxaXbFAVSrgIgJm0ceGReOW22FPqqps4erEeCsHgk6NzcHGsno24om/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0XA//czfjidHbHPHXaaYvybwr1VGgI1tEN7UMtSoMnVuNhN4JhuIg\r\nFH926+41EBQfB0YIivhwWM0MwbdW64vStNEVkyvSRGFUk10yNpH7rW9Ul30H\r\ncINWNi+HPzWXxIsspC3yU6iFWVf+MafsQIe78ZYMv5NJAj8Vs7Xg/a0hfVjS\r\nHLYyrGowlKlhe0kp4ZeTUfb4fawZexVHT5770cWjFROz3gdBz0dXI/6PFxpU\r\nqyaVsvt0g0xK2gXUXHKqtQ3OwqFZOGZEMjKBlUSZaWij5MyjAP5CJCcRSppk\r\nSeLGOQ4/7Ia//bFk3cuTMfJjzdXm3Sr3Jn6M1W1PhxzxrQxsTqx2FHbGKUc7\r\n5G8rLQB6KeAzKjf8ErfGzLeBpThKVXUukK+dXIg6iU7hwF5t26nDrf6FYSHH\r\nMcNYAPpU1FQ2iM5mrJddtFS/o7iiIwGCvGIhcwjsHtz8xipcd1csCexidjRL\r\nprWapHgZI3Lj1qQFqW4OFg3HNv+b9lWn0JOVNqLKbGb8AaUUUlumUen8qWBM\r\nwhZA7E+hYR+eDLMRDwovMNnvUGkm31jE5+3OSOsNDXKmsmWFIv39JUycdhYq\r\nxHv/LB17Nz53ryYo+PDkipmeCzVw+IPMiLaK5PnwzsCj2F+u9gg5yQJOVzbi\r\nylb+XU+HMdAhu3S1utXlVdbUYLk/toFhj2M=\r\n=Jir8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/focus-ring":"15.0.0-canary.a5fe069d5.0","@material/touch-target":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a5fe069d5.0_1670611484117_0.07453227693512776","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/checkbox","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"017322a0c6514a2ef78bf627ed7f20031831fcab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ce8b5326f.0.tgz","fileCount":42,"integrity":"sha512-0KT3pt0J1W8Yue22T0Ij7b0YR4x591AspxxUgzGvl+Fu4gL0ggX5geapzH7wIT4GyxrVzOK6GgNZMeDS9sDZSg==","signatures":[{"sig":"MEYCIQCPxxNExhtYm6I4Bqq4MmS3G7uASRoXk3slJ3rSF1eMywIhAJmv27Q3c0mNqgm2V6G3SSxpny/42JRVJLJbuS95zmPg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8VDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonBw//ZunaUwjomi+fqeytGhTaFt9We53JF44Oac1iPzRKQcyBz+MN\r\nM5COec0UaayCL6Bsfpw1JeA9jnXhY+kkW2JIsbnFO79si9eaPL0YQjH1jmao\r\neCQok0h+tO7zq4FLBGL0aIeMSV08vUovwg7YU+gSNDIohmcX9nVFS9B2xRsY\r\nzdGFs3dijmlQ64fUbwTtxKq+p0v220JnAgJPZLq4JH6nSzJu1iehFGAuJ1gQ\r\nlMf4hw22gyzN3rAi+1LMOFqyO7AiKVzReXK1riuLTuvwJ0FsEguQThe/XYxL\r\nJm/fVIoIK/Lk6C+hTmOTGmLJQhTrxdr9vY9pt/9zabaA61iEEGn+sglD7gNm\r\noqEvvwDAVgRNuyM6Ga7488a/Bux0koFJ8ziffrsVVDd3EBV9Dg3HJNqvliNp\r\nlVv8d1yrLXQmi0UBai2S+FbeJ3hYGyrMGA+OsyN1lzW3qbq8+gQY20q+16Na\r\nHqNFzlq7TtWewXf8/CkYgZlZswCDLTThjZhLm8MvWs3ptfd+yM6VHX1d0zK5\r\n9gbulPiZbzwv9+nXLcolNlZPceM7q+NlUqs9dE05GrXURoBjDeJ/xHFrkMqn\r\nVGJzgRVfbmHFJlruADHZ3+Nc/0WUv/SaLxD11KYO9Iw+uw/VUgwPThLpWQHH\r\n7cqYjzFg7lRyF/nxUtMApZHgx+o0tTYdAt0=\r\n=yLhY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/focus-ring":"15.0.0-canary.ce8b5326f.0","@material/touch-target":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ce8b5326f.0_1670628675445_0.07261399406772862","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/checkbox","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c6629cb9434b0f8b51c618b588abcddfea89d24","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.43f5323bc.0.tgz","fileCount":42,"integrity":"sha512-SYWoHwgIrbugKLLI5o/QozVA/RceNHYu6rJDI79wxnnVWwsTm8DmkhdO9tmVlFCRTAnk4SM2KtzMAKqXCmRQIQ==","signatures":[{"sig":"MEUCIBXvEb/xpmDkAzeMzPslGOItgR166TR1fpdqxy+OCv8ZAiEA81vpDXJyVuMtA+4YW9fel4czN2S/o60lVGx2W0biWx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1rnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrWg/9HncDRNtwpDle1kW0pkjQzHTBTacflmyJ7BP2lntPS0Ztu0nR\r\nHtGwxoBMKATFGLm6pOf/liYdgwyPznS/pZ61Jxee/uP3GczncqPcdaA8YMUj\r\nKnwoM4pTsLQLgRVQOHqeBoZLvPnuyUhf9fpjnmGC2rhdNtEApXawbBR5FpQ/\r\nH2d1Qm0ZRW+UCmThS1nBgpVaEBN8B5fIP0caru4iKTUnzjHfyDka+tAgMzYI\r\ncIA3VMu1hSm35DBMB2vlxj0zPpwe7GcJPtNjArb7jMXTifUXHcvV+OeZfEmy\r\nkFJOnrte8BG7L8O92wHO6Nu4rAe4hD1JNYhQvxslVcE8q60Y2BbXMc9NPI0i\r\nsVXsYclvUeSH0vu9uhuKapYSfFoiq+/JJGcncKW3XYeIs4BQxXm4hbr/LZlh\r\nTAqUbwHJHcsUDQGjID3xGnjsbONwnvMaFHe7ukrlovMhv2s7P2H1J4V6oY1Z\r\nAS/vSLxj0hVLhmw3byKwZdB18DPgZhYY8ervXs/1XIm56rkSwLhiU1K/C8np\r\nsq0211cjBDdj3a/oXZJC4/ZOoGjMGXdhAK+aV1OnwcZfRvcd4HbF4kmXDCdH\r\nwWgml9xmZUs2xZapw/+lQHgWUFKS3qTiFl0v3ftHOgHEsePp2aQSqFTUP/DT\r\nvH4WxsSmW1/Tzm4ZdTcJqNG7V6+YSFhfDgQ=\r\n=Lk1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/focus-ring":"15.0.0-canary.43f5323bc.0","@material/touch-target":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.43f5323bc.0_1670863591375_0.9110367692366594","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/checkbox","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6aced73085bfeebd3f044e440c7b893574fe327","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5490e32e7.0.tgz","fileCount":42,"integrity":"sha512-ZD0dieIvveCQ4/ukPpRRNPKJJvcszCIyB4UyVst5HFjPyvFiHO4gZnwlUjPSJLUEcWYFJ1a7Ss3ccztj/9nr9g==","signatures":[{"sig":"MEQCIGb4cssq/oVg04TpWkZf2xcIoZsYhOed+HkK/LkdbrL6AiBObnhzKURBACcgx3A8bLxA0ogkZIKv9+WYsqAHydouJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl16sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNRA//Y6nc1rBPwoiwEeAuHeSNAgBEq0I/9f1ydq6SlE2PBvbP8GRM\r\nMd7ivJSXehBSP9duL38cC1Y36rEzWG5TQZS2sGByuS03Hd3RKxQTz9xaBfuO\r\nfvhDLseAVtjeFqE0IKDa7R6Ia1gSj0k+Gupv4uQ74hpLIFFO9SGV+yjxvIus\r\nv0DqrKgaytIGgOlm3FUCq9Vs8aoGxrFiVl4tnyFINMigD1liSwOsfz+UZooV\r\ny0SsA8t+YdpqNfhMV6JTr93BSnrug0LNFTXnUl+p+JjTiqfIMHfHbPsdwEgz\r\nRfsd9LrcsTbxMCzegL5Zv6qpG20cULUyFG6OBiy9WemHnLf2mm/YHJTWHNNd\r\nbQFUOP8iEPGNIHJmE9k7c8n0Bkgr38qO7nf8QScVyIum+50IsWene+0XLB+y\r\nuhr+EsLKa5rWwlhqijyZ622RfZ10OuoozLSzjUBnO+Ly7INlwuN3LLSrELKA\r\nmhsFNIBa2gL5cbecytbzz9A3d9mc4j79zMEnrAVXdYkSlwoTjcFfFb+PET3x\r\nIaYzP7kWsjI353U7/fYj0sFicbW/Lhmv4jblY72zmcqEdx0yhKBpddw/53Ni\r\n/82fwLyyHVNUPgY6JUzndB/UVcMFF1HiAZ6BHWnP2dN8LcYLGSP0/MfOQZMP\r\nNwjbKnpltfDE9JY+x3hTp9T5KCguIvJ/BaY=\r\n=YMgu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/focus-ring":"15.0.0-canary.5490e32e7.0","@material/touch-target":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5490e32e7.0_1670864555675_0.6798414902796228","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/checkbox","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.817002c29.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4397566e36acecc9bb57ef2ebe7f27d8a819edba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.817002c29.0.tgz","fileCount":42,"integrity":"sha512-+1AzBIu+Bth4rS8YuWmG6AkBwrMXwVGYjVglp2+8s7FncLB2WDv7PemIFmwTsWyeTt7hp/QO8B1DY1OUuRhoQQ==","signatures":[{"sig":"MEYCIQDVu4l5bsl+xnu2Mwf3eZwdE+2V1lKvF1AG7crexixShwIhAJ3PzAAC+3B4GGSJJsOuryNxvGeaVPSaZQNzvwDw/etl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd8A/8DA2d73qvMqsD+ojsJ3oMtzcrWZ02YPbzOQfXwlp4AGWKmkQi\r\nPNVW3uhAUS8RjGbMittCFkLRIHjf6Y5/mJzwhXpX7QUtyrXBt5iUNfhomg5Y\r\nOLDcXpr52plVEnS/k8+48HGMBfpHULUwFewOcqaQil/V3s7EA1VEJ2o3DHXg\r\nxMr+BDfNIGRsjqyyDcvrgFV83un32oiMbF5a4sbnwUSb76Ck+AeLj9J08tE6\r\nO83ADO7xxctTpmoAgl7ghBAR6ahQInEK3rzfzgEzf2IF2W0WrYlOScUVh3jR\r\nFWqar8wjVXCe4WKTax/yIk0ObrRAFHpnvf8AoliMg3kjyyZwwz4zFhbPGv1I\r\ntwBC0mm3D5dUc5dDSoRFMxBBYH9a5wzVTxSDijMrnyKzg/nBglJ7lk8IxmpC\r\nCAb0XmAmK/L2RMO7IX8k74vgwfPs9HIanrl/PqsGwQX+nJ65PP4+eh9u8/JO\r\na9QcVyduFv0IhSGnU3aU6pP5y54xfHZrfF1sBUxEgd6DzttzSQpVXiw/kOXj\r\n6N8z7a5XWOJ99U4FyXE011iWJ3UAcyGXjd9SittKY94XaYMBLXIJdixT0CiJ\r\nqG2Iiven/cfAW/XHgxW63/5wGjOG65fAOLKZ98gEQqIqo1XnoNaryLhLqVWs\r\nPRl3cAQFr7zzCeE3bH2CdeImZvCDSVst7QM=\r\n=GO8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/focus-ring":"15.0.0-canary.817002c29.0","@material/touch-target":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.817002c29.0_1670968470206_0.4773929957088474","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/checkbox","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.313a1326a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13329ec1b5465ddc70fae0a09898887d6da80190","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.313a1326a.0.tgz","fileCount":42,"integrity":"sha512-B/xmC8b4RRoeDiEnR5V60TpcueL4EZHbACOze39jUFLOAb6+k4uFf1N9lU8dYIvW3Fql1d2PSXy3RzMhtF/tHQ==","signatures":[{"sig":"MEYCIQCkWGM0FJQrrytoYlX5O12ZDkS9e2CluHI3E+OdBHC/vQIhAIEE9/0SJxFYiRct9vFAByGj9IBv1SExSi4VlyUavDdo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaV5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppRA//b91Xq8QhO04RucY5YEM7qo0D0xcAcTNSOBRE+CDUG2dSv1e3\r\noO70WgOAfrDJS4mKC55ZtX2VaYAV47SBx23dyqDn8ngErF8d6IjjSF8q1+s7\r\nbIZsCA6zQSj+5F17qDt0mUPpT/L9zJd3VI32n0cGaU/zptU79GnMzQdV933T\r\nVTkfYAzogCpJEx24/y1ERDkWxQn6eDoSfCPBQ9zlEo1ac7hXdDO+in8L8bxd\r\nK7qpl57uF9tx6mFNmVIxjHvxyW9BpUThOzRf30QYggo67zPbaH6HZz87q5I/\r\n6bX0mze2dxdIEnJf0ibUKDnvIBXpfoTkuc2y/aB+C0FBIY5MImJ8z/2IxJ0u\r\n7W03r15C4yYHfNCITuME1h3ZJh2rDFgYKWtQZZ/Ab7NbP0tFmJYdHn8Ycz+Y\r\nNZt+lOPd+TddN0EXaRVr302XBe1fXzS3j7/oQCuRK4YU18OAsmiBxhrRTYYQ\r\nJ3PIsIyWjcML/Inpe54/aMQRIyd0ZegEAyWtXxVIR0iCIgiDhTn6K1SN28Po\r\nPy3UuXR6FMl+eUZWKPZANjelRB9xKhC+rUMVTkQ5ohr8C5Jimve/DeoapxUI\r\nGc95r63h8gjLXCHJeSHCxs/EYIXDZC+hbmd8EM5yOR2W8D61iIEUkSJeMFF2\r\nfOaRB8do4milontE88K/+FM/8MTHmoS37BA=\r\n=abHS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/focus-ring":"15.0.0-canary.313a1326a.0","@material/touch-target":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.313a1326a.0_1671013753539_0.5817017073814372","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/checkbox","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb2a53db453b122d6fd5633d85cf94c7193f6cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a69c14e10.0.tgz","fileCount":42,"integrity":"sha512-GwpStDAey1bd5/Tnokc0dHrpQL01iG4f2uki35uqNtd5XbWBhfJgxRY2+icuws69sdfo/WARr+PCrdKWayKzJQ==","signatures":[{"sig":"MEYCIQC3FdsEnJF6izQCLU4HRLJSWa+QKgEH1BVNy9F40uDfXQIhALTqBza9pY4gcKl4gJPuG3fLz1Lx02gUeX4BNO1N+63E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbE1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCHA//XPMoCrV5ARgPovyKCKNkN5pz7Prw23249PiiIThS2sMACCPR\r\n/ttgGXFMQYHWoqIreNdYVWlvE2eGFfVDbed255fDlO56sefAsV7AjcM3jUHN\r\nSKJs7MslLNrQItSM6lUt8rivKqIfb7mtt04uO0/687OJYq/kJr0HZt2AX5yz\r\nUiu9su6M+kGVjmcTJyR5H2YmbHPu1NveydK6biuAe8czVV7D0iHR4TAbExID\r\nHWO0WEs6rFPMAGTJWzusxf60cgjkcN2VvUzHVW4Ib/OPQbNiu2Z+okVqmEFe\r\n/VCZcGUgs4ikxf5j7qbazPI2FU52gik6+YuGbNzpUjSbpOoTnfC3hD9sEc0N\r\n/JrwiaCl8pswxbMiPm5espfkhb16zVIJLRJM+HCxHhay3/FN7rlYZ/C5SmHH\r\neT4Wd2kvhE5KOxkEaoNWmUfGkYTLJbeThHFCBtWrL4hTBIEJNaGbSFLATDSl\r\n0WXeBfpoH8wJo7gpUUzz6DlSDne8PMa5rkjhM4VcAUiS4XDbjYMD1/+DuGSR\r\nCpLhi5Vd/UrLvJ1FZcrcmP7Oepcp0pK+lIJF7WIGXuR/ggUHKFojlx+0qHBR\r\n7HZ3wX/H/sE6a19Lzv4t96jUYU7BtLV9G2Ulg55vCcP/VLWfQZOq+P53X2lY\r\nkMITmP/bozU9cS9a7hvYhleRkjNr4rq28og=\r\n=tbKn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/focus-ring":"15.0.0-canary.a69c14e10.0","@material/touch-target":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a69c14e10.0_1671016757539_0.4993608754852008","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/checkbox","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19455ed3fad127adeeeda56eb756cea1bfcb49a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":42,"integrity":"sha512-oSFgkeUpwvREpACkEAzf8mobFpQijU1d7gviKyNQmY3/jHKjDvL17UFMv0VjQszzD/4z5S76MsjqQzUX8aayLg==","signatures":[{"sig":"MEQCIGO42bRGztPi0lgZ6g2ZMW2n4myD/FZRMst8bKKmYsiHAiAm4JhvW99MdYsLkLlmJOzmUIEoBygCvz4gPUFCGhw59g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9eQ/8DL601U6sDMh+ef23WRrGaKNfQvdlf+4YWNWO6YyV9qyRrgOl\r\nPIpeuD98XXhffXbXn3Fu6uZTPd01yxGs+FQOR+znehmv5L2bkRT5zKFLOiv8\r\n6LF6kYO7I8YXpCqhkd4EdEFqlaox3MTvOjLNpbzAHSan0sIuTeEJwqbv8oDH\r\nvKnCXzsEHWSHbvLNCjuF5oC04V+rwOlq4naCl8GAoH0meF8cymxin6DUHAOv\r\n1XOd0Q8D0NCziwsC3gFoN2vu7CtIjYKBQRUIUnt7iSYE2BElrjeqnTGzHrNk\r\nYR33ri0ITX+bK76hH1I0PzAWw0dERAjp+uf775ZT1ZUrelz+LvKjjFGjjwKP\r\ncNUv8i0AkuRHgRxGNnvG4IfgwdQRT637iulpl+3dvz4XZsO/zNcPeBXXnVvA\r\nU3l8JeheUuFtkJsZDMuPoo+TQRdaTALCRtr66WqTS6LWKqLj6w8zsRWWHfy+\r\nxqRS2zhCbDm761oTGyJzzQ+EgBGAghXfvC9o5CixZEHxaw7c1b/j52DHW5Vs\r\nkY18hb3+3EAjOvr0fGuRbP3YHYtBkqkRbvHdpCyJo3eUJslB9vF94OmLqEcD\r\nsAFh+MN5Rf2OIA1iKPAUZBLxL34TI5IaR+llX/rYQU6K4n1DXTr6v3t85sh+\r\nu/g5Ano++jtvCpEXSDXy4ekbRYXIP6ZwQEk=\r\n=QD6J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/focus-ring":"15.0.0-canary.f43e0ceb5.0","@material/touch-target":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f43e0ceb5.0_1671036320233_0.9284350681382849","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/checkbox","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.34767110.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49cd817d01db5bee9b6070fa623567e68f03ed14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.34767110.0.tgz","fileCount":42,"integrity":"sha512-Td1/PVaRdiOBhaUQea//qfc00BONvjDLyiWoHb0DlZXYeOZJzmLzgT8THP/2TZz7n4A5aGPYrIGolAsfS99LkA==","signatures":[{"sig":"MEYCIQC/8dQ1Naprjlm1PKAaFraaTozPZVX1E1nYPSbOfXGaeAIhAIE0S/EfNYIPkv84DAf/HR8qk7BOVE/8MW1wtAZxp3pv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgWuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs2A/+LltFBuFdkCg14mYHzERXoH0gU3k3qozzu95J+wKh/+tem6UK\r\nKlKJG0t7BLvhZf+UwHzq9o0BMcs7dcPZdc064jsurEQHB9CfUmyYPKLk6K71\r\n39R0nLmfCCw8zUbPJWTLOmDU+q4p2Ta+cIn+WIMTMG3d9iVtoHSIrKYCkDxX\r\n2i0XFdYJQ0dXqUUeNlTF3f4fU0sT55drFwQAMqMv4nVPOIb9VcXJjj7wBdtf\r\nZDAdrS9DKLbjWzhQHnlcZMm+/006HpsOKKbSWa+/ECmuG61frW9C5K+uaO8p\r\nXMXeJsY2ca4e1qJHYAZ5zwUay1U77xYiD5S8aAPBhHzFx8uOfArZQran8DV9\r\nw7XA7E/xf1sMa+TPhjRSP7T+6cL+dun90/Q5CcFlrMUcLkul/sAjzinUX/7E\r\noGI2Wv2F5NgI47D1F1LfmW89h7oDQpRxd1P1rWxn5AJLAGMoYYER0NqTf7Q+\r\n5ciNlFBclKpgGl1mjcYG8KaOmuhnc7/LgjWM44BqGUhL+ZxF8hg3CYkRbM76\r\nno+ItpYbZYlt85Q58SkyBP7KrwKR9x4bVXDk5pqI0wUGsue9MqA6riwEhW7e\r\nGf4baWCWEiqgh0BOlNfxWMYGYjrkaE+UMQZpGHGyb5XVZiXMtq/6UUBwOsew\r\nAnl3AXa76F1dmntvYkn1aJEktyLh121686Y=\r\n=BgrN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/focus-ring":"15.0.0-canary.034767110.0","@material/touch-target":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.34767110.0_1671038381941_0.646563886637773","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/checkbox","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12ded1fb49cbb7768303a0d731419c799d38507d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1f99f3c50.0.tgz","fileCount":42,"integrity":"sha512-CdjiVixX12YfRc0oR6MBjP63piLIUtCyW/zkGrUid5e4UdmDZUUzdsfcrrMH4/b/l6GqveINP8Doh7mogetV5g==","signatures":[{"sig":"MEYCIQCoFdmTJCly/qQTkW7gyP+8nQT5BgSvQly1ky428/VyZQIhALS01ziOs6o7DonCGgGvZzGHLvZ8mvsiBZC445DDjeSB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy53ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrShxAAli5+FhE7LEfxfBwHNSrevfZVaCrM/PdGGkNKzeQFcN5jPV0h\r\nl5iijbOD6tS0Y1Is0t2mmRcYpTd+1topmF5cuuQI8YP+OnYlpj5OyE0hI9s/\r\npwC2SaBlQA3kqYAmRpN5fjIng81K79bZXiMn9pKURNFK6C1VuiFy91CqVWBs\r\nxK/EcT/y65dnrthIA1d8sQNcuoxiv5CObdEZFcz/8QFL2CGX3GFF3DBXpNKg\r\n63XtnfiHhOH94fttLJXcEkzut1biidxblOmCOViSzeZwqa9CKFTquAv8qyJM\r\nKgahRSMmmJwLCg0jY5y9BbJOmWy3obd3oQYKW6g1E3YFhXwgOAaaL8o0pQyN\r\nDIrjwG83uSEACiusI535qadwUFI7zQVHiLHUt1YMQswPW0lIGUui5H7SM0sl\r\n0vMfCZIgGhuekzwFzq2S607IF7uLTxYC4OP8fegNDdVvgjrUSU0e/RI9gWnN\r\n+gbUmmcMzkGtv0fwpMo7gasuoCeUkFb1pOBq587t6qzSAOGz3ZU6LpaNrjHx\r\ng2PUqkUosegd9AOtkGNussuJg1MRLrOBgIn9GkzZ0ZX/xzPbcqb/E4L15on0\r\nP0dUH8W8lbV5EAmCYCVE+hBlb7THXgc9xoCmX//96+4TjkfA8xsionwvv7ET\r\nvYf7vZEk3IHRwAlipLVkOaHGSq7A9mYtYCE=\r\n=pUet\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/focus-ring":"15.0.0-canary.1f99f3c50.0","@material/touch-target":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1f99f3c50.0_1671114358714_0.9236766192631538","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/checkbox","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72782ad2302cfa2334523658066314a290b10b7a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cfd69490f.0.tgz","fileCount":42,"integrity":"sha512-im8owhn4NjKIknh8RozWQ5ILTn/p3YR7QmjxDLBV1PqzrBcn/5Iisk/q2CZHfhlbOKOoGxN4F5OWOvI0WxZvfw==","signatures":[{"sig":"MEYCIQDxjjpFZMo9UZQx0gGwJrT6SFWxB4qwXfNVzX5uiN1xVQIhAJJeT3NJgnKUcffuWFUNrJRVuEmAS1s8HQFPHsFKvhcL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkFA/+OuM2umCqkVXeXxQECRa2hD+YL8iCAlAcKgScGWSRDIP8RpLZ\r\nPYr2z46d+uxS0u9IGv0HkR1n5+6mnoKsGS6ronOtJ+A1QXUNlNEPUaUFQs5n\r\nZM7n+WFgjtkQggVkX4ZOonZG7QkOZ5IkR+vbY2b4XNA+2Jo0S90ppoIwBM88\r\nFzeiEcbEDTvPSlr/VPyJRN+rpLSYJJ6qT7FuL+5AHTJhk+LvGbkiu3osLs2o\r\nkDfGcLnwrP60/5565VPtVb5229EPutD/SiePCFXhn6xXHrM/OUX9kTWTNRcu\r\nmcyIw6r6EdtR3Vo7+WmVRCuxuwhukDUolnu09G59SxFJrP4AUmIyFFi46zLq\r\nu4OTHnFr53jKNl1H5LNrjgm4YMvPktYJUZZJa9TUbF7JmcDDYuOzPg6i1Geg\r\nm2xZETyzFBcjQ9pEkWVlgJtlMksMPAsczVfGX8oaoCUU7GumAn5qZw9QRXGy\r\nFI4rCrWKgAYdkYAHYEsu2Jc/xG86ibmqhwhsfG+VgcIKDp3sEH3eKD986/5M\r\nfMTS1GRUKlC51LGmdibV3dLUgMv8jHr0tJnySyHNe9w2botN8UnQj7so9Nk8\r\nX8lJoW/S/oi//ENXIYs4/dE8m109jyMzZnEYLuX+bpJqlbmt/7tqOGDs4nJE\r\nP5QAEfRpYaggH35LE6A4HssgaVgoS4XlW9s=\r\n=5JCY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/focus-ring":"15.0.0-canary.cfd69490f.0","@material/touch-target":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cfd69490f.0_1671221341026_0.47180653370970105","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/checkbox","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eea4c6caeb3d300e049f3ed3bbd21ace859d915","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.94ad8d986.0.tgz","fileCount":42,"integrity":"sha512-tRRNgcUioSWhv8w76WDVbqzmUKZmw+hLXIn4YOd7JNPTkb/SWjzPFuNoQOwwAuWo2iDRvxaY3b6ZGU5UQwNPQg==","signatures":[{"sig":"MEUCIQDwB7niUbzZ+kN3a1Npqdd4FgM5MIr2GdFv4BztR2u94AIgVIJN1YL1I4UzXx5aaFQ8sEQEV2G+ZasEpuakdMN67wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLskACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpgkw//Z8BUYZGZjJDPPSWIoiAX2Jo8kY7EMNQkKV9eUHOt2bmJKBaU\r\n+PbaVE4ZVARzVd22HTP/aB7PQfaA7cwl1W9I6IODdhPmQ3NqycBcISo9EfLL\r\nclU8ss9RVVAlrwed/kF8JGLhlG1vF/0tUbfUByuCmsC36+H/E9X6TV2lfIsI\r\nhvDGSdWqo9kNL2SApzFBDPaTv5HnbtgIZidtRHrB37GU0jYF6sw4GPYGkkJo\r\nvgKRLs9rj/4+cHUxSFTmofyxP82IWh1DJlXu0MK/YNbXR5kFzpJ9ztLxpZj/\r\nyHV27ROxai0nsP5Gmd33WR+R7wGcXAajvuCFDfyS+Giffkhyp6gbLKrbBgu8\r\nIuQJYdDVV2yIh558au+REip2jzZv5XolHxq4XjIpwPmyyrfLg4/9q1YlOghL\r\nEOnhOb+Ncl1q1urh7SexDMMAZAphJIazJjyWigdM/KQRFabQPygyUnymFhAc\r\n2Xaj4CHnyYzbAYrNOGOx5jBI481SBwrtX+rCX/bgmxCqvPqDdf1WKvOVvgCM\r\nQzez73tuLNKNJKWG5jhXqrrSNfeENOMQ2YqJwE7CXwu5iZavqaIzKPAC52Ot\r\nIy/PUGntnFEqNO7xgV+8ezSUD86kz/DX9rfeEm52NZePClz+6p5kAm8E3kJE\r\n49c/kklwrA9QdO+KfzR+sjVXTL1NIjWB33c=\r\n=5Xh7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/focus-ring":"15.0.0-canary.94ad8d986.0","@material/touch-target":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.94ad8d986.0_1671478052430_0.2641080060062131","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/checkbox","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.604264203.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d5fdf7e37e04084fb007e523b07c03887b7308","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.604264203.0.tgz","fileCount":42,"integrity":"sha512-bwYfebS2ws29WniU70r/fqjVDBqAQ8ftCf++ESam9eMBi30rJkS56eAM3SekZc/yj3Jko1l1hYaBV+BGq823+A==","signatures":[{"sig":"MEQCIFYhoGj5QF94WmTE+U1qjij/ig4wdXxATdg4Oe1trQXrAiAUNcM7/XlTsbEe2EO7Mdz4NsQn9wNHS/34yOnOkxQPuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo317ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDkA//amL5LdUMV1XqGWepMpNufPPUjBO8pJf4pfIICp7C4N+p6lTe\r\nr/dTE6/Xh9lI9lSPvUJgpDivPbg1SPt33vDdCRsqvQ9Hyn79jn37KwqUAtlV\r\nZ9sWaUMFVBhTONlqsY2vQgyGorCAvjvrGIw8cstvvlefs7WdoXefR08Rhj97\r\nDA+Id7J350urA3SOEfNF7IpZgJZ2yPUs/MacLaKxeytEZ2YCK8Mk52ps4cx9\r\ne1p4A2ENILTwhzAfk/+sOKIJ7Nntm8jsLUO7Ek9b9AiqWSwrnoHsEkKRGQvh\r\nIUTrVcVeJnksr8h1CuN7tqvJr+mxbsgvtUD6RxKyuCtXf1oYmpgV+Qh0o49n\r\nWCOeUyoypYDWJQlfmX8T3qB+mRB1KbsZxA8sLECaf+LxwN3vLfavYq7opE/C\r\nvgcPH+xBOlmVIun3cETR6gdJAM1lQfoFZOVfI9htmUdnVBzj9qYDQ9RMK7Cl\r\nO2Y1LskIFPPYtKZWhD5dZUJad6+ZxWXzG3HBptQnxgQTAu3mHPk/7Rdympf+\r\nmz69/n4crftqPJNp9qpXRZuZ3fQbyLb30F70fEbKGe8gFHNorl/X6ONtCNxn\r\na3PULtF1dME3gGpBlKUPST+Oc8VFiRPBclBg1ukcT3atKD5zJ/Hd2rvFpKPO\r\n+fWsVLNwRALgkh5yYDik3UxEZ2hy+EVzNm0=\r\n=Oq27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/focus-ring":"15.0.0-canary.604264203.0","@material/touch-target":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.604264203.0_1671658875433_0.728435471958722","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/checkbox","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b32aab676ea3b625eb3c41df35be6d6d87d41bcd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.85bcff6af.0.tgz","fileCount":42,"integrity":"sha512-PGRD39Rep/HFZTPvj8Oi2aAy/T425zM8ST0kstVyY6kT+x1Y9lC0/t5c18EtprsHwkRDmvJ9U0F1OhkZB8+8lw==","signatures":[{"sig":"MEUCIQDwD5C5UXaIls5meV1uIVYZdRXE2BEnZL2EKVTkxIIJcwIgThunf+jUqxnlS//sXOEOwELKXkqAfvzoVrhZhLW6Beo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDCeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpLA//eLsLEhN+p4+XLMNwmFmp4Ia1DTU3Crq4Vpno6DtRnTrzDeme\r\nOhwQYwerA1ns6gfoOvVtohZGNB9MF45YIs5PTQFahnNzDJ7CMxBqojGtka+J\r\n1AsXfecbon924xOT1HsX62aku2AOp/1bq17q5mmPI1Wm5aSVKqO16Q5mFDvl\r\n4bgpZTmjoFrhKyjmIEBvwbxs5IOlvsyNiFSGWh8xi6eQ1+I23NZq+9EnCL3e\r\nttBmRr4OMDwg0R5qkUl4CtPYdAqiBWCSA9sg6rPu4VxU2JMkGGpI5M6kLloh\r\nzJwyDpO3YQV9UIr+u3/jitI6xHJKNlBevfH4+Vzs9oW8/nWZA9xRfyIhbT7L\r\ngn7J10bwBYbytNHtaGJjJNAPOCXoRg8V6j8sOVTpGkjVpcA4Z//eug3/M94a\r\ntiD4LAEW1IvDlMPTXSR1fe8g74bZU87ki8TuCauy7JCV/IsFtOl37C/ciGCI\r\ngwXdl2ZLCT+N3lQ4oUOQz/+6B4cPCpWSYm1XSQK/blTg4vR47e1Od2jkzluq\r\njlAY5MW6bNhcKnqM9DAXu8cQXdbzj8YCzDf33SKCrRNU+ToZfGTnreHePr9C\r\nenSHaLdJEKSwY6Gbfo7oIoRqsHrfraSDuq1RSde11V/Jt8ehZoSP3D28aqFa\r\n7XTpRAX7B7u9gGuH7SDbldTj43vLoWOxUtQ=\r\n=cXD/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/focus-ring":"15.0.0-canary.85bcff6af.0","@material/touch-target":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.85bcff6af.0_1671704734006_0.23203850221593902","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/checkbox","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47577dc71b55b5c129f05548831e570e6ce8ae4e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ece3e8d21.0.tgz","fileCount":42,"integrity":"sha512-kyUSUs+TzhyjTjHLsMST06dtVgjms9Bx04I2Ov4fno8CAQ3p/n4yXq0VJdiOTk3SYAtrHgKZPUmPVVhe72sQBg==","signatures":[{"sig":"MEQCIQCk2+4JFjTjjKwrjqd/zenGdCGJvY+J3QNCxET0EQZJpQIfDKuwGHN2slvHEE+331WhAHAn7uXbDpQz0g18i/+wJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":766061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJAHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoavBAAi/zTiElwy/7I3zdk8vdLtNoXqnbXSbdjTApRrrUt9iChKQab\r\npC/0InFsyhejuV+6LZiLvlBNLpPhXvQmDt20J3cdWa8cxDYdKWhmhynsMTZv\r\nG+6Sq7f6EGF3DJ9UnGDUuVFARvB6YreaUvJdwsaSSJ8H6oi17qlszcL8XNGO\r\niPCM5ssxQ1DpIhTMl/qbAig0IaGrRZxoiAznbY2Wuxm5sM+zipCBmvKRcaJn\r\nj0hBXgSMVEIEZpjJ6xePCuicQaaZDGha36jdorX+iA4ABLkP94J3hvoV6HCf\r\nBVFLp3pbzN5PtE8JuWT9bnXu4fO49v4dWnGQiUzqRpBlS4rTdsG9G3GTQbEe\r\n9CwYZ7veVvIUuMJmyF1zwFao3DxkJpUKnX7wh66dx9NP+sw5ayQ286TKUOwi\r\n6ts2OA+6kqMCEp8vcNzmKpBjgpEyN6A5PrhBrUfsZ37D4N7UshXmO30vlkcC\r\nJaRDbIq95LKOp3C92fdntaPQDTlyp2bOhbfqm+xaMWviezgDty+5za2QpMvu\r\nV7igdgFy5CKYw2RvbM92qrooIZjlOjheoJjRc4FkbIHS/rxvAjfHZ8m2b2To\r\nD3fOHvN/XCMzxEIRilv4mmnvGyC1Arvb6Yp5Hd10QqHbaXgVT36dY/3rdCVP\r\n7/7TtLxgZLxmklGN3T0y58H7BoCpEQe1K2g=\r\n=zxoi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/focus-ring":"15.0.0-canary.ece3e8d21.0","@material/touch-target":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ece3e8d21.0_1671729159474_0.6963626348717786","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/checkbox","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef28aacc378a9412ef7bb2e5d584e478106484ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.278ad53d1.0.tgz","fileCount":42,"integrity":"sha512-tW78U3b63jVMm5L4zPqc+de2iqVTdFbOc57iL19UCQMERIoTG1pDd17bS7ekCPTH5hnZu6j0QNPvmITGfCSHLA==","signatures":[{"sig":"MEUCIDjhcnChko9g+lcny4GAz8FD+M+cY281iWAZbiQtlM6xAiEAolFyu34ZVPZKLK8/k06nFeA5Jh9eiWzckbZ5fQ1V37I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":765989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9OA/+M1kE4a/e6lsdvZeVVFY216ztQqe7wkgngaIQEueDwXekYUZk\r\nIvXHMZ9AFaFBfR7zmSl9mKP8RcRYSPdHCxA45eVZ9EoVwJdEQpkRTEh5weEP\r\nI+eQuA3RBR2KyJbi4kKRF4gYXGXFZ3vSwFXKfJgJRAwm26Gd4JFGbv0EbxTG\r\n18ul2NG2kiBlKUutquqd185r/gM+TWC2bzqxdoYooQWORcx3mz19qzXgHcze\r\nhikM0zoz0WBP+qN0+VQt+LqU/CGyq0hWJVsruyofye06C/vNc/aKpEF77PlE\r\naRwfFdc13IKlGkSle5FTIwjivBnVJY8rA/D8gcMc03ZQDny0lzCXoj/NBc7h\r\nK8MlE0ubtO94wYlqeeu1l9wMoQyFqiLDhD3GwSwxVnvDn6LZf8m6SSuTjdOI\r\nOaqdWFoRnC3wRBJEZHgS88Z5jdZyf+OqtQ/0DrTFCfw9oC4rBHZK3BsDCfi0\r\nIQLr6M1coq+tkehsX3uZiEWtq5/xdn7Qm7W7Kh8NhkZ2bSL/eUbMe2IeQEWi\r\n97ywMnDPQztKfdRpNR3zEtuqy9Sk6ByEeNQNguMwZAc3Y83kcByeKCIU3ucM\r\nIRS/p1g61Dv4gadTpMEJTHk5MI77k0oAOJOfmeBSzM8+OvxgA9k6oY0avBpB\r\n3t07u85AW/rE/E5lg/NTmo1p1YbT2h6Dygk=\r\n=cUz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/focus-ring":"15.0.0-canary.278ad53d1.0","@material/touch-target":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.278ad53d1.0_1672160733021_0.844411321170704","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/checkbox","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84fcd1e5dd74a09130ce2963d1b8c5a2f75ab23f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a7d8389e1.0.tgz","fileCount":42,"integrity":"sha512-sbv9nT2H08jXtUUmUgrbogeiKexgHJBXVCwzympgWqxc4oGTJdApJOP8e8nMbmigBYEtXhH++32m1Wo5bMVZ8w==","signatures":[{"sig":"MEQCIB7RJaoPPMNxBZDgype7G9xwsKDPTJVqdIL4le/afcrOAiAnWGRTWUwe8kDwR8Xpoj0PPBmOWSeD4B1ldKNpuqj72w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":765989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrY9A/+O7lPQUeiuntE9FqRLSskHU8tM8DQH0vlo7/bIHgy7+R4RNIp\r\nQoBdILXOAI53B3mhR3ewXX4PiMEZ4XSQVqZoprNOcQ80/EUA7vGT2kkqc3hQ\r\noAevSZwiedol1AJZCobAJaUrnjxDB3s72MnjNIWaroYdpnou/70RbzlAG1zR\r\npegAlhUNFkZHh4PLtwgwbhFRNEiKTCRGIYYlCVZbRJoXmsXoNvZfe8NVzS7j\r\nYN52UmVAWD8jh7fGvwdg/pptDC3fPUhoqSt/qt+T536f9WYyRxNU9yuvvlBJ\r\n1rRQfzH4eX4wZXt9LHWP7URcVeMArF3MpdNOaVPGVnMo2EtDYNLwV/0uGhyQ\r\nEwMuLu7VBjyVmVZjd3DvTkxocNI1I3o49djCJ00AtieHo7b4Dk5WlBuvTn5g\r\n7o+gMEdzPokyHR52iz1outIzemqaYZZmKwWroj2hX68xpfnVyWjsf2IgYH3F\r\n/po/cWrjiAl6JvxqIyJZ9MM4bWxAgww7Ydo2LAamMtqfqP6XWWEvM30b+XcU\r\nkFrIzTaigMXtoDH32lXknUa3xaz1+pRdBb2+DEYXnF1nmSBZ8VtAvs1GFSqw\r\nB1txrTJRp8mYe7692c86vIfHfCWhoi0Y/LR9DfdAb1gZ5e2gHBAgRr5+Lmpc\r\nliRNFZLxVcQWU5WqaOFLHxq/e2zKtK2Hc5k=\r\n=pWCO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/focus-ring":"15.0.0-canary.a7d8389e1.0","@material/touch-target":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a7d8389e1.0_1672167858781_0.57184232696931","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/checkbox","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bcef0966c65b7b18a3c3d5ab8b98398c530a912","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8175d5eff.0.tgz","fileCount":42,"integrity":"sha512-PoqvE4rcRBvDVniBsoHjMg23jRYrSheEOT0BegNCAB/isK9HP/MgzFqsUd4yc9VJKBWZZumW/PT86tmKiFGrgQ==","signatures":[{"sig":"MEUCIQDqYtfJHFWhn+GWNUJkbarmgkczmEKu+kf/VGq5ebw1PAIgZrnfkenXgxeCrUxEBMPN+31yW+LjHkG1lFVLq4Tem+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":768152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdcQ/+MLOZ+d8BVJp6Ymtu3ixGk0SU5lw0X8AeMmGAnWCwhsZ2dlGe\r\nFENYfa2+RQTd2Mqn3thh9Hkyh0yCACJsbwCjxEhO3juLtsIX7grPgYTudoQT\r\nmRJsc4N/RAfe5o3LZejPnL80RHPSYtqgc2uCDM8cNX5pw29fs+/DMOFUE3yt\r\nvX3kk6XwpIU39BXkBvn848w081xbJqONdLLIN7AfPIH+L0MTHtde/m7SyzAV\r\n/EeKPI0Hx9n4lAOJvCgHNLr7O099e0ceRydtuLljjXOH/3QgseEwL4up5Dxn\r\nCNl1elLXvnRox4FoybBWElGfDdcVlnKrsLRQ9CmRJSYlshok6gXKIPdLJMTM\r\nq+diR9w9tmJ+YVjOTC4cJbFSQMRrRch07fVgYdgNZlLtC5kEYwDxI0lTrvX7\r\nKF5Uokds3FoKqP23knwySwQr1WGqxEBN+gN8NCmO6raKSYTZg5eEw2gT8z+s\r\nBnlQ/kBBn0/Le699+jeDe6snFK0KiS7CbEZTPdu9i3jjEt/SxwwjOyXRVGCc\r\n/2Ngd3F5iEQj7ZAFb24spHZYw6/IlJBbwhQ7OToHoHQL0Vr87gSj1HjGlKoY\r\n7BWdXcvJ5MFVSR9SuIRY51dxH0LHKVJeWFLvovy1q9n4dLPy8REIXK+DMgTH\r\nW5bqmEG2voEZ38Vx/Q6ZxVj9WjY8Rnsdjc4=\r\n=4VJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/focus-ring":"15.0.0-canary.8175d5eff.0","@material/touch-target":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8175d5eff.0_1672192325516_0.22471732369251152","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/checkbox","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af00988f2b54e4013e3e6498c4f3df85696dfa9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e21dcb86d.0.tgz","fileCount":42,"integrity":"sha512-N7OX2L52nJ8pGwdB4I+lVkcMTNfZgJFtxCgFstsEKEmmcDKE+czrtfJJdASBEO+HSingM4qS2m1QDSANl3A0SQ==","signatures":[{"sig":"MEUCIDQtMZfe+LLXVgGN0qHCpgUVeU3puaI02IOveUVPWxX6AiEArMBgEZ5WksVEp4zVa430mnrk5sGBXYKN+ViJe45Qo7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":767836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ3/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAjQ/9HO9fLHWRXYrDAMqzMRBJEPrQ0+fyhyfcgSrShFPj3E+NwURb\r\nrWNcv+HjHK4eNsas80EFe4+R36ApX87+ozv048cEAyXtgKJWVqFsPp3igZ/o\r\nbx5VmjZn+IlLRQ4hambnuR/y+G6X/84k/2i8w27BkiZcJvv5OtWM+RfU4SnY\r\nXW7xTd+aordgyy6jy7bmoxhlvWugRYj78eiP2QXoAJzPrBuq73Qwi1Fj3PK8\r\nzvNumpHg3bDFt443KNN8fhTpvlytO+JXUVL7Y1i3p10W0GSqaw7QNDU1LTN/\r\n3LxLERwrQVTu5g/pmUSxA5LnbzENRUIrK2bdUnyteKq1e03pU5hmOltmHmPv\r\nD8xrt2L5VT8/Awy0rFy/jXajLxj5afIvy73wsVjy3yK71j8Jt24xV4NSbxE9\r\nwmfNBuH1hq/anufszNVnBB/ZgZ7aEdvnJQC9G8GAhyD0Cn/yO6YXyRg0FseR\r\nvkRdx1zxjNCt7ojY4x5nrun0Y7Vp2gRYvEAUZluB8mEK1GlyY46PBZ8d9MgD\r\nZr0V+vO2DzhPmrVMv43iTaXm281M7MWVfcrO3Hq3qVc1yFV1oXu+z24toR7h\r\nnH6YoWXISsdvUPXlapCfGX2b01VeZwb60gx5dQLcR0xy1Ok9zB87OhE8Gp93\r\nEoHk2SeHGVqv2EvuuFHgTd004tBDjoTlp5k=\r\n=HZQb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/focus-ring":"15.0.0-canary.e21dcb86d.0","@material/touch-target":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e21dcb86d.0_1672322559665_0.45565070514739037","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/checkbox","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d100332e199283b2c13116615f97f30ad0044cd2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":42,"integrity":"sha512-ya2Mej/PdBD64u7s0KVWk2Iy9mhDzcf0brHkrfuSOigaqCEFhPo9Qsz5kd65o3bcTw3jIbJkSD9vAXQ7dR/tAg==","signatures":[{"sig":"MEUCIEIpbRB9SwYQg3KCknTFuFX5kBbmIWdTJJ0FRgwnS+fTAiEA3QnXwxoYHGrzaXMqr50dNBc3ybzics8lhCZpJhtFHEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":767836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+hQ//afv7eNOVQGNrtbMLqxHYvujOVP3pGVd4smz5BTMVcHYyrpqm\r\nvAZ7evGjBSD0MBsMNQkam9iKRGIcLNkWkuPHk4DIHFZ0ZWqzA7LMfjYkYGKT\r\nJlEvnOg9HqH1x+58m53ZzH4dZ5RwAyHXW40R6pNBItdHM7Y9HuhnLuhToMIM\r\ns7C/Q2dRkzgsROAs7QO4GLNveUZrQPMe/itan5681Fy2zuw3v1tdLKIjwyK0\r\nn/YMCLjZowWQYdFPYIugZy3JcPnAIQJBeHUPsWHzOACC9ImriEGE6YUqeP5s\r\nIuUgIHgLXwVudY+ILfYyMc1wrycfqzfWrW567vgLGfVMrKQrNe2DirjTV5ro\r\nWlHF8X2SW+bPLkWiOS00Ab3ZYlY8Lh1eoPcy2w5Sb5F+iKqzy9Xnac8vwsCK\r\nioFqZU31JoW46hbySUtEIEzisofHXnKQ6GVrrPIDCXMPloNj5FIS1f/wSz/j\r\nnCCeTHLNmtL8aK7tL+5b8KEdjFT0pevVXQ/lqKSbTFq7TMVPn3/uywrboyGm\r\nGaCCgvIjuExIlklQQW2GY8SmeI74mSk/3UMiBM8vzmVb043SkL9IPxc2zcPG\r\nWil1ekbFSA4wnTe5jsyx67R/eCi0eTjitPnBMfeC4qpI/SG2WYpVa7EiuCiv\r\nuJxfXV+hsLDv0UEFgaKvQayVZpYONv1g130=\r\n=MOJc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/focus-ring":"15.0.0-canary.20ab6f5a8.0","@material/touch-target":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.20ab6f5a8.0_1672342884223_0.861859666625177","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/checkbox","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b9806f623.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eacfeaa05fdb506a6f318cc467bda8f461d2020c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b9806f623.0.tgz","fileCount":42,"integrity":"sha512-FmraJms/PHG2FSrAlYV9OH5CtmiAYEHXyqDvqRGioddafjd+JPOaNXjITnV/PgqnA9wZrkJhblPT8qMVaYQDDg==","signatures":[{"sig":"MEYCIQDvLqabJCD1KL0+7y09hrCwK5xDZCgkQ/KN4MMJVcMMrwIhAMzOIcnwXD7CK0byruPgQXUwAOrH6sqcLndxagRzz5UV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":769134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh1sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt/Q/9Hsnq2wWBijO/Y3nsTwDIL8qAhv+iiFPFrN/uhjsroJgAKQJY\r\nQ+7PS4VvpFygacRtTJpUWaYTwmMHJga37krU6Wyn3n0Pr4jFVKaTMAzzudGc\r\n+Q6yCd1D6YakVgpfxnO/h3vSvsiz+Whg0FMOdm4sRc92UsC4d7Nq+8lTGaUK\r\nqyN1VFNX35s5RU1dX9s0U6dJC04ripn6pC0bfWgmSwRgmQQViuURWk6fMG1b\r\nbkgjavwZYbIIrjNpGOujMB2POEO6y7M6qiPFPJkZ/mIIKyhlxASI9p5yXYWP\r\nZkVRwHyb6cuRJMlRAylj3obZSRZYk4++HxA6jx3M7NAm6Dgzu27gWy/Xs25m\r\neRKfWL6omY3l8g1R06MIIFsSW72uCSCjUWt0fl5jX6HOWE6Gkfpb4yhQwRId\r\ndAumhdCv9QcNFY9iylmhQ3V55mSxDeqYrizQIvo3+CK2L0Upil5EGGOgsd0T\r\n5rTunAFXKxAVyJUNoQabQGQkwGZDB6tRAH3Q7tDJ9z9zgFecMVAR0z1R0Cez\r\n8dy27JYjguGszaPm+4+WhdLtdJR3EdWBbW00vaKG0VAnxjAbDVlHIWXOyfu3\r\nanQXWhKZ3gvoUx9fIM8FLf/+pXL32bPyOYUZPNAKmfTP2eqMHc/gsPE9Bk1r\r\nJZTN/Ro5u7BNAW2K0FEKkJ5N+XXqTr/DfEA=\r\n=HYpb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/focus-ring":"15.0.0-canary.b9806f623.0","@material/touch-target":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b9806f623.0_1672355180693_0.5438130373039021","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/checkbox","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e0822bf1927f18e6b74d756a83c8a56d8b12626","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.50c9f550e.0.tgz","fileCount":42,"integrity":"sha512-MyYGzTks0YhoZGTjiDWM/7dG9md3hyTuTONsObNJpK3n7lTjQiDwC1XwcDmjLfPprSv+ah4J0wAcXahAqTMfoA==","signatures":[{"sig":"MEUCIQDrmvb7SCiijrPgBsc8G3taSgRKgFzwNLFugh8xMDL5sAIgM11WMxy5a5tsUM7hCzUYOEBeMoza/NnyigQeNVvJ394=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":769134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE44ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzFw/8DhY736SSySdXTHGReZBR/mRRyBtlFT9VforFQLKNF7p0knEV\r\nDsBfZZMdCtXI77TY3EXZ9P6rujVd+uwoJ4ze5Ta7XRKgAVkGkIbf2TnY//TJ\r\nExkRe8BNyyTRGIdlcExCkUBpsBG0hfOV/w8pOQJCp185xRUO2dPsuFgy4S8j\r\no/xzTk7sUFod1KFc/L0/NKA0YB6rjiOx8llU1Rtg9B6ogRcI7lpgBbZr8v6A\r\ntq7pEWJVT3oXCGOVgLJtEg+/xR/iS9WlJ5M2BhuyoOcHLJv4jm2cRC2K75NM\r\nkk5arCXnhoBbCyalgzHPFgbsMQFPPOGZTUBK7Pyvj/PcYn0MwppE/uUlvHU8\r\nqUs3r6/jo+0p29Tx261gDIkdQMRnMXiYsm4NDu+sCGkYNP38XNZMoPpdHla2\r\n9J14eV2xewTGYzvt0tfx9XdJ7QvOj1EfpGnDFNdc15nry2jZ3mZcDDokCN12\r\nFVQ8PDPGtCKJ6qCXdFWXJgg1QUxKVSlKu3wfW6blOVVvsYaIwf1ueReYhRdS\r\nG92j4byPicTOz/p4weMAMitz0fVHH+oI+fsDXdjVznhznW0476hFj7wtbZwK\r\nicokSX6gK2y4Yxyyz1MS4QEFufFCZw6DghcHnYIpuGD8mTJfHQQaEGknP5re\r\ntuEeTk6NyvDdZddeANmewuLcGNbgQbGHqJw=\r\n=WSLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/focus-ring":"15.0.0-canary.50c9f550e.0","@material/touch-target":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.50c9f550e.0_1672760888641_0.18953509877953656","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/checkbox","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.af490a848.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f9e742447f1dc863cd52462c30a8f322929c74c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.af490a848.0.tgz","fileCount":42,"integrity":"sha512-siF8DgWv8gaocExTO2THSaymM0C83/V540gRV4Vsl8Mgr20HWlncOemQKVpX7LyA8LiMWDBJA8VS/yAjeqwbnQ==","signatures":[{"sig":"MEUCICTaTp/VDMN1fW/cH8oolMlSOVOyC9/jm9mfs2PaD2GYAiEAlIN/fNhrSUkQKYooI0IU+VBKY8kncKG4BlWT8OSX80Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":769134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFCGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptlQ//dtcoDrHSwAAhrX3DVucTYl0FOKXa0iQ1ExW6EpbXyTAeapbq\r\nnCZe/4s+FnNB8cJtceTybMucnXoChWlKmKqnLkbA89rTPVbSpt8f/yyLyWIC\r\nxZGXHXhebojTPfuArlEyyZsLn81zdbABcdjwbD/5EyNmKhkfgOisSiu+MZN1\r\nS2iL50Gn0zQG8A9DUfkbNhAqGQ93ywqNLYc8/2ERibb4kKOSBvVwn7W/Dy3q\r\nPHQTGCMc1zpAwkrF1KD6fmAHkDgIWJZY1UJgY75qb9f6yDZTy2yMPgWtVHip\r\nsyNSt422EqjPcXEXE3YPJrXz7kdxuJzn8kq+ATu9/pUWojdYqJOiHYLABFnJ\r\nN2d4bd5SsGZiIN2Aar4Kz8KWHcgFIYQKHj3ASyy8x0gPcW5yYj2A3fCi79Tl\r\nL6nBE8u2tSaa3uKOj0kq87t2fnfRSDu9lIjazwYWkuF5A7W8ZadhOt7tzmr6\r\nFp1wLk/EifFFUJwnxT9jgvS+OJAD8wBzg01j1pVfVmQ4uVKm7aZihzM/wdhn\r\n4Qg2Ft+jF+ejuZWde9np0W3SMscbmKxOFFVj4DYxfBjpVe07suYq9btk1uRP\r\nDcfGeB6JcEcmhdoo6LVi6sxMy+uc2rYANtIt5UJmqrG/1WZf5aVTmI6+Zsi+\r\nI0Nhc/ZZyIJ/gusKjClVlmM6xskBiY7Yd6A=\r\n=TIHq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/focus-ring":"15.0.0-canary.af490a848.0","@material/touch-target":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.af490a848.0_1672761477784_0.3228670557473583","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/checkbox","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4da185276839c9f2dbdf4cea9c4a6dd0e297e89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7cf487c98.0.tgz","fileCount":42,"integrity":"sha512-Mg48Tmzjt686rYoc/Nl46nHumXQ288RykYaUrqF2f4CnNIjvya6j1uBU7PKu44zZGp2AGFnzcR88j7QGQ6t27Q==","signatures":[{"sig":"MEQCIHQ7lh+48yirBZGpmdyxPt1xgfIkFOS6pq3tNM0nYHpNAiBI8uHcbp4VxnYhLMPhwLRw87I7nm9nPN7ireT9caOzzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":769134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroaRAAmIIUT7f7Q5fsBRyORU9I65bWly7W50jWGXBoV1NKNkyw4gLC\r\nMXm8kQWq52FktldMPhK4K8AKtfm+BSVzeXvTBS4yDAI6jZ23WUy6M4insOD4\r\n8EK/4qb65qyhnrzBr+aF0CuzSLihcUaXdc0atugvZHayidDVeb9Cj5R3jOe6\r\n9MVvpy2SGpAwL80XFr15R2u8mFiaygFp8cYaNg+pC5nIqtgEeCZSNAZ2TMOy\r\nr0tBCmUDaUO16sGa79nJ4lcF3fq7Ux/pSnoseVwB9qwIHgq8rIcENqNUcvHm\r\nllFAYTMvSppbQoBMzoZs1LFEjhHcD5Cq2R6T4krq/HRO5GnzgqUkJWW6NXzy\r\nA3XtTdkOsrQakqQrQMG3DAb2h9Jwn/brHT+nzl4+GaIDAS0pPWd7Rwkot6M3\r\nDxXplPqSZsjHzuih4uv9Ljv8nncttEgSMECEJ7rvfQEsEDB7hpVSRxMwFm1A\r\nCuNOcTbNJw3EU9Oxg9OMn01NAgF5oHxwy4n6cL+he175QzqTJgaXFklSTyD1\r\ndhv4HYFtgi4N91vUzQmELMNL74ZVVhDJNrvTaWl5EVGW9fcZ6vi32fAtsxr3\r\nTpeZqzt832d2Hhr/7PzL2UgxvuQSvHbLOuIrer5EGeJ0XTjG8VSi1PL7ZkZO\r\nsfQYOLMAxJpRULc/YQvcFfULzyapxZFYNdo=\r\n=xkTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/focus-ring":"15.0.0-canary.7cf487c98.0","@material/touch-target":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7cf487c98.0_1672767554943_0.3001769849430289","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/checkbox","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f195a3819c8a255176f66b75c9cbacd757e8090","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a52be2d5e.0.tgz","fileCount":42,"integrity":"sha512-DC5VLE8AhFzBedBjlKymyWGKvRnuPSfbzCp+DOwW7QYpwKsZf64NHsFcCwmw3GqF9wTEJ/C0x44aNo/XasXdSQ==","signatures":[{"sig":"MEQCICdniPj1e3devc6cIQnLsyzUoJCHQ5R7kWkhiwObufUHAiBovYU1b8jYpyL1rUnu2AxhY859Smocn1m5ejmuv5dfcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1107121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWYg/+KRgp1qpblgAqWxqvDs64n/byN0okCM2t2U+iHAUHSo68Ea4v\r\nElO8luGatwueCIbHvly/3sK2x7r1B25V6Qct4dFlUHde/BUm0Wd74gPKq49e\r\nNfjncP+Q6FgwNFYzRYlKf/Yyp4Wsoapqvmwdq74iN6qr5AUPb+5esxGwpY7M\r\n8BMgYOI+5UgDihMtXdPyOZQGXxbwNFL9U3J20iYoGBICsRl1wzpqwlojCCV8\r\nTC6CEty4D6m5at+Xmh5uWWLEKGlVZwR103JuJQPixpuk98pj7nlPOhXRb80z\r\nerebRvQb6HkzknUfu6E4rU73lOzpsWNZv6KT8HNVdGQySuoSuEhgZEIv61nj\r\nBc8rTJzfmKBQ3W1RQ1iQ+XfF7p92Ysp3riU5T9MT4cuJehAE0Hc3udwzDw1d\r\n8EQCZm6asO8/28DW5zWVcc2XlpZ+mJWiJXRZAdXVnyuGo/cCcK+d4SXsbdJ0\r\nGhDTaE50EW45RIA/s994RxZnFWK7Xgm+0iZAzy3zqgpbkUksUtBiwdUFUeMK\r\nv1lMnJhJy2P4NZegP9UvLz5AuSYJMHgaFR81A21lUMZB61F2jxeMgAXgz+E2\r\n8GztYo1ElnbvYWOHNyFvu7g3yY6l7iViCGhq0Bs5bZB00oqogeRqpWMOjAR1\r\n9tH8WZBhyn72bhdODXSvO3fReYkLEPQR+KE=\r\n=jOME\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/focus-ring":"15.0.0-canary.a52be2d5e.0","@material/touch-target":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a52be2d5e.0_1672773216408_0.09861201857792179","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/checkbox","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb3a534bac025835d0d267f356a53c2ed83af945","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e38ba17c5.0.tgz","fileCount":42,"integrity":"sha512-6veGhAcXcBDKQ3gnamTIEab6dZvpw/zb+5yLVgYi94uRP9/O84/erE7KUUeChTw5An16Qd8Pwncc/es1c7sIWg==","signatures":[{"sig":"MEUCIHFYN2DfAbssHND1M1dPWOQb97b7DeRSQ+xfpwZF1EN2AiEAxS3tR/I54+ZmyPOslPRi5FoKuD/14LOGqcjiGiHbbI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdEg/+OH6GIBnaYUeNhTiA7R2joaWNCPKSq76imh5qrT3G7c6Ou1XZ\r\nM3BUFhkxaf9onV8Cw5G8brwl2AG9u4wGlf3RyEpb8uVMK1YOGwTP7/bKVujz\r\nvyAkDZWnI4PYTOk+g2/BHjdYWws6JPhSuPcIDa6PEa8lEgFHJV1hLkfxR6D1\r\nZXBqhASLSG2jntzwweOGlDmzEDb7m8Pj8IXCE5PphtmdqV3hMV5O9236OPVQ\r\nVzKgMDhYz0ShCVH30Tsymt7LEoBmhFqjXksLSwMsE7uUSm8j281hkHT0Gu00\r\nCBqrCJHPd3Oe645APZ3tIn3TQND1oV5MshtmwwEvzTlX3jbNUhk3W22bi+V6\r\n8N/AxwSI6b5CwUrVdMrK3gJVZaP5+XWU99f7EmFtriHtDxZnfUh8W0skKeHu\r\nQNlPNR5Kcvn79i5f656YgRdFcqnNadSLi3QZqRTUfe27vkJ5lFDw7EDhqKzq\r\nOllovOO+9WMcy98mRXoE0xYY5kHZwv7lkxQ8BhAgas/N6dGpQeBSBEfUtSuZ\r\nLGzgl0jvABZSlZ+DR2ySNSL41Dxl1/BCvwaIf3N3VvCUiZLkWuXsTHuo2Jv6\r\nUPW4Eo3Fs5svzbYofZlj0sz/DhSZbbC1PPcMp9BUTOL3qhChwOoetzEgWhNa\r\nFPcYerCEALmBFSldZWF09boAabj48GgO4TY=\r\n=Y1NC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/focus-ring":"15.0.0-canary.e38ba17c5.0","@material/touch-target":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e38ba17c5.0_1672785166091_0.22459101729858433","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/checkbox","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751422c63ed1dae160c36244e30d2fd8624b0d67","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.49041a6c3.0.tgz","fileCount":42,"integrity":"sha512-kF+2lCb3MoF1dxQ6Q1N+u3Upr6hSVI18vhsbTBy0OEuRaxdj900s0fLIaEE+89yvR4F3rVZHobnD0w4RIqRWZg==","signatures":[{"sig":"MEQCIHOeAS2g6Vx28l09K4xCUcZUZyW076b3ENSGo5mtMARKAiBUrYEWur/NxPZWKWaFgzEOraDzvDXmTY1zY+f6bbVb4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZi0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/FA//fKvDN1tkZVCG/nszGF2FnV0/Pzaldw+CxwPluX77eszTsKGG\r\nR+aqLIbYT2sosdSGHM6awy8OGL/VvgJwxzPg7GYw7osbKdjWRV9mjvJjLN1F\r\nvHWDl+F/hFbGAt1Estnf3s80Ro2DasEpLFjKrwv29PDrM98b7WWxoviALlsU\r\nscPIfTbm0cXvnCm66fX9UMLjo3HOjZw9+Yst3W9JSaj5LVw3082tr/d2yhVL\r\nH+dWS72MQTmAh4oYrbxFqB2VQiD/FRFKAIAq5KRjJAKquEPGAhUvKN81s1t6\r\nXGKbLq3w9cXJ2UtCYypLiDAs4EP8tIeV/bOjvEhrrilcpgsUQft5SFOByloS\r\nBp8w/AP874sfOaYVOatIHtDS8jOAlBjIEWArKRAgMdA51FvEbdTAN36VanKb\r\nAUgMv8m4Asey0lKNka3iqf1R3gOAKtwLSe6KyrzO0/52gtJ61ajTS3SetyWU\r\nnFJBDNVZrMisery7eN0iczaSz1xhSpS9wI2XeUroAjK5DuDnJ3WhZh0qnl/u\r\nK9BrbwHb8lTQy/foqaZRIsJXLFcqf6mCbA4pClvuuFmABqFfPgnr5MfZzErx\r\n5U7GYR0DFBGZAPab88FwyQ1GURAV+/R2n/zOwliBz8Q343r/IOAsLTpfdvlv\r\nHpd1wmPcy8FlbOI1C0RzuH8AIqIzdkSNnjg=\r\n=O1vI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/focus-ring":"15.0.0-canary.49041a6c3.0","@material/touch-target":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.49041a6c3.0_1672845491931_0.8512311374967438","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/checkbox","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c492898c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0a326ceb81b1db7804646adbb1a987dd3e9fe0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c492898c2.0.tgz","fileCount":42,"integrity":"sha512-Dl4vK4E67UjcKbvJW+hn9gjizXAEc7FPJ4YJopgKrJFDbxe5pkV8SujhGya/sLvQe3G+d/sfCu7ymaRQ6hNK5Q==","signatures":[{"sig":"MEUCICxEKxJPiMaPXfjVKaoCeHR8rJBRqsix8npTCVA1R/iZAiEA/Qig1I57MnIQM72LJ55ky26M6MAznk/oz6UGJ+4hI50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtblcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3sBAApBerWxV4nkEq0Zs3Qi1VVn4wQGvX6E7OcsI2hFkgq3XySAah\r\nfUEUwD2U80ljNo8uqwFhy7KN8eGpkhrFO9ri5iYUqEeJoa1DfVBqTA9lHMwg\r\n0aTj1FmLnpA8JoT7fqaQdWT1/VkhDsUYuCSd6D3kjRAu58FHmcXrenxVuvRp\r\nm48LYgl0k6mI1lx7eNOwlJ/zAD2s6ks4OeEd4I6SmrZfMWV9FrQNxscjN+lb\r\nhxf8ZzwwbLvD3wp+u9Z+BXM6LUAvXL/42rjL7tijzXRGVgAP6pecuXj97pbo\r\nAw2TYQnbhJt/4lP0NJhMHJ8etEp9cFyBBF+l+Gynt038Rq6GjLS0majXn2xy\r\ng+F4X/7Z+xco/LzSKJRsbQOn2fcWzAcdD90elKHEPWQq2nAzhUulhk98ezZ1\r\nNKxH5xpWQKmvWlCPLNtlFYPDaZ3ia0Y+Jkh0i+p5P2HobZasm9VWGP79XqOe\r\n63rbTOGKBv2hYm4nTaLUHaZw+Jhzly5ct3njONXxX75wt7WSDTMWt/2dVT6J\r\nRAilopMvl/vIVOQr05HMo1xfqYnCfi7TdzkBRU+MRVLHLk2AEPl7cBGTim/3\r\nrYW8QqtYJMPS0EnZ2aFjn+MdXMi8ialRTFQ48I4Q7Hhp5cSd8EakSXjny9Ws\r\nNN35zb/ZVt9GRdQGUXNZsDEiDnJCvO6+TGE=\r\n=siBO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/focus-ring":"15.0.0-canary.c492898c2.0","@material/touch-target":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c492898c2.0_1672853852254_0.1798731549856427","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/checkbox","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e44d5cb4dcdfee3cba038d6498f2939aa7b507c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d7a2277de.0.tgz","fileCount":42,"integrity":"sha512-JwnAB99TbLIY1mgZ8rCF4IpsEor87WlWXjUFLJyM5Q8WRoLNWQOcWfoxmorILH1NTxydGRf1GOrLplqtu/7K8A==","signatures":[{"sig":"MEQCIDNAoAEWkUv/SaDEbSImSXk4g5Y0LBQTP4tCIBAl4l3yAiBVe8o1y1xaI4+Y/Gv8uw+kDkUDUel6wq7rrtrgdw+Qgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqfw/7BSeDWHYniM3K+VyuE9wdKZiA5sP8+/6jmcon7VzXoOYf3y9C\r\nEZ25Cgd7Qhqkbf58W0lFq/TSL1B6FXrnYuYCcFq9/t7Lk0Gv3/Cq/8AHXweM\r\nOSkPsx0pNKrOdJPOLPA2m9ztCfuvqp7+L//ZbEsNAtSkHWxKKltNYS1mXJob\r\ng50TxIkpbKDd1P/tX7sAkQA1LiclvNF6Xrzaz9P5kWwroIDnCvaNh4yJt4Lf\r\nGLzaN1lLFwjnRVWS9QTFKWd9jhJXj94EyNaBwxbQMwdTi8RZNvwyFEaYeWrm\r\nS8tPPggVBDXxMV8M+c01uO64vzckfMq/lBh3m3T8REhzBKLVs6r54QkYZhEy\r\nKkyqf9m3PF1ZYVhe2CBPLUjNLgO0qDpIioAmPNno+AaVWFvSHnqNINfo0SdX\r\njQuf8bRsrKJ3wSBp5MIKF/WmTRXmkR1eqWzwimQTYXhwLiOO7jbJC+RvvatZ\r\n+I8aB9uUgBXOHKYvok1VDKzfpSefiN1m/YtY003TPBElqzW09FOz9Z+kd2WN\r\nNIKeQFJNabuQWc+xH3aUYtwmDS7MvRUpfQxazJrfvcMz2HG09+3yKzwGANEE\r\n90ONS9X/I3Xmxv7khELxaIDJcnYsQ7iXeQFDcvWUyQlzIPXPGzzY0ttMOF4h\r\njIBhvFpChhLKcwuj3znc7Gq5lHoD1C/9og8=\r\n=E9LR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/focus-ring":"15.0.0-canary.d7a2277de.0","@material/touch-target":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d7a2277de.0_1672868171825_0.5206629282859034","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/checkbox","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06db6af302832c1b4a13aced4d7847db9300ddcb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":42,"integrity":"sha512-UPxRSildKAqnucLpB4Oh2KdAYeypjzveFFPMkWY3d/p7W6bgTmMg249jLAIFrcudBjPgrMem6J7DPBMiicud4A==","signatures":[{"sig":"MEUCIQDXqcZ2hC1BfL3ZgCFBPnIcQf9LcHoXNm+78bVYJGcIMwIgNHDmgb4lXrxSR0+El73t+dVosk1l+FprMBF2wbp8COU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof1Q/+MPCJhdqG9OflBFP9fs8I3p/jWLHC5/DhS5DB2pD8AiZONKfx\r\nDCmhZxj2GDQ3HonXXhzuRBbUt71G4ZsiUcboD8or9+JI96XeWJiJp/JBC01B\r\np615QopLamCugOLlESLeKUjREYGVOa78ubLX9UVgySTDYlCOUga/KqM7Fe3D\r\nDCOPjHFI8Ud8a0i6xoFWPP9TRJgvFUfl/nfiWKwaZNOmECnJQcSJ7IUTRl6q\r\nBHqTtLn5Zx9Sph0fzeXtwaJOQESp5x1UQXKnLaAxNJMnISplSg7AG1rdQ1R7\r\nzW42yKuQM9WVEiBW/r88+p2gjWtw35HciJc985pIqBpKt+NMv1Ycu9fMb80C\r\nNccN19w1tpx5FgZBVywf0cfKw4taavYvkWfD58pCuBJ55DVfVw8eCxZxo1Zr\r\n3Z/lOc+Gi5r7IyWUXOs6SrLUilnCXzvyl09gA1Gghnlu8coLCV//vd9i9EYf\r\nO2RZkbR8tD17kqJWbLkj0Y7mnQeUDFs31bW8v1e3XqrbS7w2sVkGIMXNcwco\r\nVthbRvngYegh6V560Y5/ul+eR51e6ixAsNxmcikZxxKf9dgtJJnRxFQdFErz\r\nXp0xPvhPtjMJ5BXXmUFRP15nU8e3+vPFfnSsil1fB4h9/JYpyi96iO/sV18d\r\nT16ShSgDIQ9B8VB1zcskT3ZZwU9Xwrvc1IU=\r\n=Pz23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/focus-ring":"15.0.0-canary.fd95ca7ef.0","@material/touch-target":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fd95ca7ef.0_1672880598589_0.5685647690220246","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/checkbox","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6be74b6357fc9f166dd7774c0d8a3f76925327c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1eb44faf9.0.tgz","fileCount":42,"integrity":"sha512-HXir0MJTnHcakpROwyJG0ymFcQ0/07AtnEDh8b7uvwpiCAW6mRIEDbZ0Rq4PLCGjKmPQl045Hjgsi/i+zsuVRQ==","signatures":[{"sig":"MEUCIQDIeljr5DY/1kRuXxan7gF9YN/iqX3VARBVyJWSC7cmhAIgeJAg+w2acXSKf865ntqadBg7ihloDGh3kA7WcLyOLo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8XxAAlRTnvB9W4/3cAm9rswmzf5CR72m5/8KJ5GfKnpCNdubsHeq7\r\ndarROt4otnPkSHbPepCZXtbEIOSvUAGULyisKT74NUpvK+kEETtP0/+rClRC\r\n2smMC/YjY9abELLMchsl4k98fBKc2/nrdDIvZ5PDvUej+jgCHV4Ab464GE8J\r\n+xFeEjOqJ5bJU0ybF7DZ5G6pUxyw5oMTtnKZAJqN08CZSRJuMK2ZhVrWc7yz\r\n6OcPU5SHPOqpqrYuYXkRdYa7DHdjoQhi+3wxbI33+KZqjHddfz0sLZAV3JVd\r\n7aCIYuI+MDMOxaFv+Ho28DyV1B95KL0bLxgWLat+wPNu5eHDrvdPjNRxTOD1\r\nGwvYGdZGld0EB9nlxuhWtxPBeTqN90vn4zyJYz0hP8TRwcGZ9uYD4qHR+JKe\r\njqAyekm/XEM11EIJS7JVj9wCcdD0fjDQV3toRS10G9i6/TyC+VAzTlxJAjUk\r\nIX/QWYLnru+JmiraunQJq9KPNQL+gqqmIjaMKFiTJqBRTciCEvO4+WZmdBOb\r\nro+yypToSCs16S6ETiJqXa1BXHgX7eUNGVfDarXFmD3oql69FQGrQDCj3Z+Q\r\n3VLtjgWiPwQ8EBfZfOHTTlqvsGgRs4dg2rYZ99uIc7cc2kLvZU8mlqO1zPVI\r\nef4Mxe2YCMcEVoss6DOAagIx9n6wNoCJ8Cc=\r\n=+WaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/focus-ring":"15.0.0-canary.1eb44faf9.0","@material/touch-target":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1eb44faf9.0_1672909788362_0.9142777653747689","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/checkbox","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5290f4e15f0fdb5658c454e334980bbff10e31f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.adcdb7db9.0.tgz","fileCount":42,"integrity":"sha512-TLvXquyTOwplD+awup2z518IMXslmZkYNXbVx86izRV0Ouk2vI9gLJWLB6YlCZPyHZlJ9RN10QqDQN7Rds/rcA==","signatures":[{"sig":"MEUCIQDQnh3WLwq/V84s1lqjU1x7Q+HIOV/aAllnkv/YN4ba5AIgPSALEBUpiXKrZS5Cdv4saZLtAIlF2AsZ4lJ4eF2BUKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvkmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8ZhAAkRkLQoi+wpsV6NUwXWpMtIi+JdiSv/9ACqovlokokSa4wKwE\r\nJ1iLXqU/Mnvf0iK1/RwD3N65ZS0K0dQDnSWguaXsdYUyrXyJBXyqBMez+dEH\r\nFt2h0jxigJdjSz67yziKgNF9wH44BTktvZXNMqDverz3E/78Y93S5XUN2+12\r\npeCa9/LPaMQy4hfwCAZRjlR3C51vr1eA1hjdZsWlF1U653sR8aC9wRDaoqPp\r\ngI8mZusrQZHdf7+/12gN9t6ahfUnpZPsDzA85TbCRZ7ei2hQ8nZkwRFdBg9i\r\ndz+V+hFVB50shVw61za5TeX/B38gutQZpae2HQiXZamzfMa9sYpiJy3jFKAF\r\nB7ArS5VhEjEFaYwDJlT3JtuJM0Hezc947O/nWIq6mv83zvv5IGxxJ2pb7nDw\r\njO6f9amvP/u1PJfjRnrp4yfU0zNNLFd3OasaS5MFPw5FrPTfiPis/rSS2Tdv\r\nlWCtXAqr8Fw+6uMdWmp3mJ/B801+Ra5MTBWJyjsTySyZ7CCgb4r+aE7AVOkb\r\nysashffdGjfTcgncCy0Qjxa3jbMAKzMzgnkjeTJsdbKA3CLThK7AOtOqHMpY\r\nkGm+AJb9rPfIwbc9Dzw5sYIKP0vNjUghTK9up+FjP/WcpAusaKyKAx6w7K+S\r\n12OBZ8QZfg1lEpgNYBYdBM456hzCiybXukI=\r\n=lYJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/focus-ring":"15.0.0-canary.adcdb7db9.0","@material/touch-target":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.adcdb7db9.0_1672935717965_0.6609333275328855","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/checkbox","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.067af7eff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f58bf5f24842a39656282d279e4a8b59b69db4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.067af7eff.0.tgz","fileCount":42,"integrity":"sha512-7IeU8uJu2TkIi+wSuMY3cTTRnaKq8X4q/g79Rm6JyGMSyhXgRjcqL3Se32ezjDCCn1JqbziSPp/quSqyyb2C3A==","signatures":[{"sig":"MEYCIQDWpNypS4ZvDw3diHJbXuiDmP487Ec6VozK1y/yix33OQIhAOxCd/FumMfWkHZeFKKfTgOD64EQhurjguKK9H9/aUw6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyBg//YooGkITD3Fs+yPo3msBOhxStZfXJ8mCBwhVSu+wMWrBq48yL\r\nxv+PkXN99a7Hqvaf7WAIBy1s0LpL0fxTruw2uJvaPf22mN6eXZDfSvg9cYJD\r\nVqZJ5dfuw/pUflv+MkoovbQPqC21DfuPxFwhfvZU8To88HD1r28nauVTy5Hc\r\nSfS2Eq3ejDEpdhJKK8gsfL6ksiIB00oSdtGxYkBBR0SqlfXLCkViw58DpIEn\r\nYHioUg5EEqqH7pVtimCG8JvMm4r0roer+5ijyRapykAjseHDO5FFyboaAsFL\r\nIWDxAjvt+E89W2Gamry0hrCtQ2HcYXEPjVqWfU6Opv2cKtzhwQHah0a06RNk\r\nZeg9F++r/Ysy3Ba9BYbFRx+/hQUFRTF0775gsaxHoFHqANCe8JKZ8+LkMzko\r\n6S6wjZQXmA/MeIBhg7sORas89B7K7QoB88bVbn1rTCzg3nFN20C8WT3JjKD9\r\ncxDBw5E3MZwzPHMz3oE247WLvwRVtgi1l75GDNsANCFu/yebVYl5nUglvOLK\r\nBZ+QCL4j4Q7PbwK2+oBiGZg1rUK85SoOBuILeYWHAukXXdTBCErfSuC44G4u\r\nEEhfSObI3RdhSTQyNef9MGAnMRrir/NUE60smEfobQa0yB4YLPIA6s/sALzB\r\na1xFedixBl4j3B7wLLiiW5ooTgDkyHecJEk=\r\n=8vjz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/focus-ring":"15.0.0-canary.067af7eff.0","@material/touch-target":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.067af7eff.0_1673046992949_0.9642540910471102","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/checkbox","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7434cec3755dd70b6f2049fcaf84d807c17d236f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.21d1196a7.0.tgz","fileCount":42,"integrity":"sha512-k6B2PhQwFIbFR0yFRx6X/v1x1RHSBpOONuU32nsqO/OWuhgUe9TrG6KAlGNzjfAbO9EcRdZLmfI55TB1K2Ctvw==","signatures":[{"sig":"MEUCIQCYMl5U142uTIFZ4s6YOQudl8KAJdpSTiMIVi0QZQlaTgIgMbhRx0CFpMgo6VA5gvSvkTj4l5lLWEUQAOm9i5FKmgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCHhAAozj+3847pplIfe1K2M22U6zwq/ZVQy64e5hakK7FHyK7dCib\r\nrUxJqENfm33GlsLQ+j0oInKWt4Hc23Sk2/UIT0EzWW+arEAy5cJYdPNrgCQv\r\ndZTmRoc0EbBB+z/68KfndmxHNsQOvMmHBEJ3xOUJwk04Kqe30qJW+/p6/5BS\r\nxidWEqoB7ssd+xYlMM3VI5RL2EW9muxRcf10xXuw7y9VO5AKpmkvFKe/aoFf\r\n6t9u+/0PW9HAF57HzgiKVAbzb73gXMUfUGIUZdmwDpCMlT6KmgFx4P9SfGhK\r\nPaQVkz+8GRl0G55hgi5um/ZPYuODq5cRMzaDj+1fnVe7FKa4e8xt+pQEvqLH\r\ni5QS2Uv96MoN/EwmzQuvqB7pYhiC7aDCEmeKJJUZHanQEEFjtqq9pf+53dTK\r\nEhZiCyce79u/wKk8ueyoI4kvQY3hThfwzWqL8nqAvoaNM+74R1d7RM+eHs12\r\nZi3tsR6prmJ6UN5CP/b/NamrCEbhg9VPiQ7BFv9SNzvjpSpLEoxNZY45BDlf\r\npAf4Bpyc02ykxZz+mc6PvZ/K7m+Vp6wCvIliO8waibDhEatQPSzF/w6Tyb1q\r\n17YKGnj9U45+5cW2aUsxBsyu2/7LHnOa1yOzxgrLewTBs+xFRqfMmpRbSOEY\r\nkq7wXl5LpabeGbXBgCw3GfsXw5tq9malMH0=\r\n=jE0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/focus-ring":"15.0.0-canary.21d1196a7.0","@material/touch-target":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.21d1196a7.0_1673261009700_0.34957837880786236","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/checkbox","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef51e572f115382129b0a47b62fbd517a15ac805","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":42,"integrity":"sha512-wOxsGSmCYs/UMHwvWA4ZQ6f35dZAApR4WZLFYSeF1pKHmOMeHzspIDZbkB/+8GnFNjdreZPJSL6B1D9PON9v+w==","signatures":[{"sig":"MEUCIQCPHtGvznXXQ+K8F9o9Q7evAcOYC97L+uOg4cltxXewwQIgSR46fav8gHtEQhVeo7za8XIUztj+0nC2LfdPd7ZDpXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq82A/8DCXLlmN6lV1lRcDnyZOvuWjrdu/eLO9EB1wCk8Npsz+Cd0Gg\r\nloadbiWeQUtsUUIjzsNImMM1+9R7aOLFeoH4lWJx8dOEkT95mqZ3XWo6YqpW\r\ntVfupkkYKE9kxgcqGQUT8c2X+EwaNgBW4BDV036cbJEAcCHtKcHJSX7hY8F1\r\n0LHWvMwbo5m07UxU80CbPzfSJe1KxdnpojXTUe3adRV5Qg7fSIiAJlX/F79e\r\nfwqD+3vEL+E5dn6xMX/P5Kikd4AYPRPZ4B+hHP31Ryd2LJa+w3Vrg9+372Rv\r\nmihuQ0Ow+EsoOLPEBQ1E3tDt+KnG7ojQLBATJc+B6HNMeP3E2xv9HTsW2Ieg\r\nSTsP5uhmA5Lc4ZONSazlOVK68koqutdRFdFFUBAP/825qscOG7/9upc6evL+\r\nnWGwHJzXpL9KR2KHli6IrMM4KCHg6w/Tf5yWu3DP1lQyE7s2v2cFIuXP+rA6\r\nzEijy8YHpoeiHky3t2fRSzAjvt3D96fV2xQmddC5VUwBblSwZMlr74Lgq0Tj\r\nSp4ckzykePtIRwlsngHDqXufQBIAJ1Y+fENvNv1YIQnA5BZx38mktTFu9GOJ\r\n/oZM+1YedWGH8S38hpRORt2jXsFMHxdV/287fS2TrV5qvGOhyKsP7Mm0HLm+\r\nNBKwl5Kq21nxFfDrAWFnBf5YSoFF38C2cXM=\r\n=ls3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/focus-ring":"15.0.0-canary.8d2d8d3c4.0","@material/touch-target":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8d2d8d3c4.0_1673303063604_0.6208858730080622","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/checkbox","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26739eb06ecece57c4a930ae8468000a8ac18216","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":42,"integrity":"sha512-F4XS8l2xotAyZrVKa1JuJU7B+V15KqQhBByBMHlFyJYJDB3IuwtVvYgK3RqBKhRkrrB79cpYjeOEyHDFFqSFvA==","signatures":[{"sig":"MEUCIQCwOpt3Lrom0HT7RyKQ7U2uTXtS8lI1F1fEq+HrlR+fRwIgTQxwUmgXbukBF0yGXCNyNEEJ4Cd9j62PJcHTFdZgubQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZIuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0IQ/6Ao8gKPDmL3RG2eBCmo4ElN3+1hJtkQoxUwSpF6R6cpfApNXv\r\nGryf5KVDKyAbQgs+WK7upsMsAyiVFuE0lMe5NyJeZyDxD4mjKOfbiHnZwZgT\r\nxXh/M7BaZ7XWcfgzsKV636HYfb/stlUUQ+ij7/i5OO+jkOgcfhvoogPOZK1X\r\n0W0serxc2RbA9324485fobO/t5VjxAFmkVNXvbWSr54c3vx90C5S6vGmiBWv\r\neNoLi9vYdEMaWaaVUmqBktmp63xhKzjez30sDiAUeox4eVlHrNOjQsALxpOP\r\nmI/LDE+HAA/twBr+KmqzIHI/uA4jZjL4xaUG8afITVDYIfzb1CJ1cF0Ihc/3\r\ni3tughhXJGmHx5liPw24pSvsHz0F2i2ShNM2ER1kdVYFamzy3uxqUvnzYbN8\r\nxjfDiqy1+jXj0qlU7ekOLaOUmeq9XGP/1xp+NN2tsTZJiJTaH1r/dDC2bxvt\r\n0Dps3CG6npDY8bgIsfr+IZbXFNkv3eo1FRufdGXlbyH6TAXs4VY6KhWxms+6\r\nQ5BwoXxEnyR67DPiJQDSjomOdca+MjoBcauDQ63g0JBV1FzMmod6DLmBS6To\r\nBHkgUPpgt6yB7PajXo+gS/0rMqZ8rF5YPcu9QgewkGdrwcn0+A+Kv/jsqpYd\r\nwYu+z5EvYMOtnk9/gZfSz6UqZ+44UxZYIfY=\r\n=2Xo0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/focus-ring":"15.0.0-canary.fc6ee6c32.0","@material/touch-target":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fc6ee6c32.0_1673368110202_0.8505875437518216","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/checkbox","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d631e08660004de7f8f17ee045f426b2d50a765","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.73537ab0f.0.tgz","fileCount":42,"integrity":"sha512-DnYbuYFqFK4DQ2dHfNiptxAvPyAo+gvpbhFl8GsVIAkc+G0qTl72UOAdtlerBUpIXrkp6pWfcrnRS5BxVMy+Aw==","signatures":[{"sig":"MEUCIQCcJ7IsP0pZG56AwEfiobEGML5xVXEa8YQMBwUNKyTqlgIgIJ4M9VRS2gTQsPkch3V+336PoBwYrWo/1Io7fdsv8lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvapwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7ThAAljFggaEVnFBfBC/JrfTTcitL39WyqugKs7j6cg4LzYbUM40m\r\nHluLY7Wz1UuaT1nazurfLoL/HMGd558vwZ0I/zVPhgVoHeMk9SucbQ/tc2kS\r\nOCAWWS2qh48dl1qekKmmMu1OFWTs87aZC9YEKXIHdPhzM+zyZizMYRSQ5jFb\r\nT9e/akOFisue4saivfHoWkJVbcC3gJfIKf9NxS3Lq6SDImvhTFNTeDg8wYCc\r\nNNh7Px3hzMRJvttu0zcvSiydU0XDiNbMeC5d48P/JcV5VlFVpvGhcVWiWpL8\r\n4/AtBS8ZKPk98yNAFFXxujyL6Us7iF8JR5ftjrS0EGubAuSTXqcwAxJ+s9+D\r\nc0qkVn5La0AxvagCblGZF/lETlVYxeD5EG+X6IVlLnui7ph2t68KGw+8+3s/\r\nVEOKMhyGzpDUuVk8xfcaJD+7dwRPH+gRMgenDnD1LjF8hMqGrMcu7BxlnCaX\r\nWTtLF/3/6CaY3iC8hB9FSq6Wol5rzwazvOp54SW6cyonmpvjgJBYiaGnlJAe\r\n9pU1HmHSUVqAI9IbeyiBdAS/tT22aAL6VGrMbNhNQZo8SKJECY1U+JNuWf8y\r\niZVHp1YjvKXvM3KpZ183RPBrhkODsjYVPmYarMk6OW8Y5FvM03wlPpBV0PXN\r\nwgmq27J/PcE7kBGxj+lO3Ztyucg1YsyhTNE=\r\n=YQRu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/focus-ring":"15.0.0-canary.73537ab0f.0","@material/touch-target":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.73537ab0f.0_1673374320501_0.6587856826925358","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/checkbox","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.684e33d25.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b48a55415eab10ce73ba87af8f5c2e77eeb1851","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.684e33d25.0.tgz","fileCount":42,"integrity":"sha512-NFpM3TS924PmVsk2KQLNU95OYCf8ZwYgzeqfnAexU0bEfjUJXINBun2Go0AaeOUMjuvWUe+byjrXgv8SFYbMUA==","signatures":[{"sig":"MEUCIH/JoF1DboPrwtiDLBvwCEWeGzGLcVJog5y1HnL4Z/WpAiEArQyRwmKFu/vKo3Cc+Ab6RXTQmX8SSA72oGrd7d7oTc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbokACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKPg/+PNlwOok2XB8CDvvx7ZMZ5WWrudFlQXI32uCLwj0ta70h5Dhx\r\nc8/g+e9k3Ukbhs29WnT/q48vWexh2WYYL12jRez9TogHxslqnmpZ7cu61xsY\r\nUW9uKeqyIT92qxIUDQLO5plbSTn8ZJtgjQRA0EOOqfg45qNLqABIf0SQK3/Z\r\nBzQkWH2QEEVazYp/dMloWS22KgRtB+nLPAVo9vyOCcdgvsDhv1gQLn20/xjr\r\n2f5MKpDHn1YxAyemBEZGAGTdJMun7Z1NF47fyG2vqzNaiBeXK7Q/4rlyU/YU\r\nkr2fuSsijYkoZg3dPEGPTBfdQ6bVSOX2mnqhKOaLNEpvhSrrA02yOkWTHczD\r\nQVj+GGt1JyWIxC05ApQePO0gvxj7Y6ozT7nZ9MXJnGtUjrt9uZcyrQDqWYBl\r\nXeV/U2nm3CIRaeyUJT40qt52gPtH4BHy7n8sH3MALP5KA/GPX8QzZA5Ws630\r\n6P2GUDEMMmSjzSjoRMB9Rmu5lI9WYU7sp1n3Zjhu16XpRQRmNfhGB5dXhJeH\r\nBWrDRd75Oul9xvpR4I5iRN1o9ys6Am9KVY65o6ZPfCnUAtmHIH9atzGpgIqt\r\nG9Vn4pIwhfn3QC0jzSAu60MaAWbUojqsnmyB8C+1qrZp6iMiyvvcFPCl9haA\r\nIpbVlHhUWNp4nqZpkFAyblpqpJwR1nY8FzI=\r\n=Yf/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/focus-ring":"15.0.0-canary.684e33d25.0","@material/touch-target":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.684e33d25.0_1673378340546_0.17030474817385466","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/checkbox","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03b01d7b2ffe1a045536fde6bf71fc329ea0298e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0e89aab6b.0.tgz","fileCount":42,"integrity":"sha512-8rvPOYfzk/6o7DKso8KHv6bzlx2nJj13YMX4cfbJWlZ/g4sqEVZzvgrWZplL/sioIWXvUxSTLsGiNcJn9feo0g==","signatures":[{"sig":"MEQCIDZfMOVX9CdyOEys9IZOCg5OohPfsF8+ebqMGINDrqJfAiB5X5Ds2WiyZhl0Pnd66DDHdRNr37qJLUW0YtUUE51h5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuE2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHRRAAkfwfbABHg6s5tf5zPpmU5M2oLuykSJAUAMvIlg6GXLkXCHHY\r\n8ejq/sTUAuqd5zt+jcym7Rx4SHdSUZrbAg72ta2bsyONdhe7GBBR+4ArOwE1\r\nfoboBY7/Y60MdM09H+hu/vLjMlKKJ2g3zrxQ2YmjSJgzqdbsrKO7pW1+yYjb\r\nuBgMEGjtINhSH4RklDtBzaxvXhsRPN93X2HSWhnnqxrG0+8uqVfLjPyOlkYp\r\nEDasgtyEvmT0fNHB3VIOKN7GgescpYhe/8JbGirNoMMv5t8qo6JJHFKbwXKM\r\nZa392xW3Q3lRIM2NY2e1W2zrCX4BzplgK5cnPYk+sTmdhjiqMLCx2s17AEwg\r\nhcnIA8vwFNlLvcMcWAEZw4xpVip1sXHXS+aHRzvnZdr5v66+djUZnmDqcUjg\r\nz1OkOE11RI6ignR4u9Tt8Jc954HGr5jvv1Puyh9ZijdX8FmfGEnppxTz5SEW\r\nRAesEAY1of7Fpq7xF8svvzAxkKepYyxJyx0RL7Yhqf3UOwC4hyR/9Q6fucqN\r\nrj2PEiJ9L9FwJhBxaU0+rnDGMvArAwmsCHz2gwmhHfo8J0KpNY4C2hFd1897\r\nG2wuzwN5Yo63/0BwvYkE1sqezIbnppDtlvVrcbq3Nouqf5xAi1NX5SvwKWXS\r\n7qC3n0hoPXBIdJoXCftPLY4QYitoso5lBYM=\r\n=66pr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/focus-ring":"15.0.0-canary.0e89aab6b.0","@material/touch-target":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0e89aab6b.0_1673453878310_0.35707543190002244","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/checkbox","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6491e44d67c646d0c534c504bc0f911300accdf1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b0103d10a.0.tgz","fileCount":42,"integrity":"sha512-wnBNZc+i3wrlYJQywukv5sKvIYun5BpqUud4Tnt6t1jGm/xEjkhHUFX8uuKmOWQXNAhAr3EdSBMS1BR3aTCW5A==","signatures":[{"sig":"MEQCIE29n9NXa4Z9Ms3msVm6t+l9oRDox8q0j1IE80BynPz9AiAcenptA2hJm/nTkM+OkPNvoo5AL5cAs7Wlg9c4jSDJuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKmg/5AGeqogT7lDTZ2W+sQdyOIBUopw3Jo3DFNUD0gxSAzXp6o3xb\r\n41fcT3uKEJxFMDwYY8sIg/mb/inkxy+ZuKoZQr8/5aqmnMJi0qGCvzCpG9Nj\r\nD8xypm2XatDyZ/aDj0OgxeVmEu8EiasNXMU/6tFsIBMIVorEQGgbenRdKp5V\r\nTe3NCRRedxpdoihbKFOslqQS6efbTTY7xpn/igwIFoIAfi042Qd/SX3saWlY\r\npE5dI0n3hX+2sfGMm/Jx38WXuMmtpoxWHmP3fXf/KG8sHd6ZMDvwCUE58Ib+\r\nmNFn8S32nXWa3tsntSl5i5acMlnuojMLZXsoxVyDXq+ujFw4NCNVrNFuE1L4\r\n5u5Qiws0S/fMmjyGD4O4OnYI1a3UO4MITllfWU2UkDrqZaXKOV1+Ad277rka\r\nlZiQXq1wziEzpdYlPbJd1y8DJ98rSgMtNr0KForaY4ZnTk3wqwlvSRA8WuPF\r\nKHMf+0pt6X2wumat+Ce0H+vFBIhSEVkHfeAb/sQJdj/cjeQzLjLR2KynQuPH\r\nqC70N0QUdl/IWBYF9dbgygfVpJjZZCNcQ7IC27GGeX/+W0OtPVhzU5RFIrlT\r\n1dzDHK6Arxchtprdb6f3dmJU1rdGPeEkbfP3KaScyLoblrexHnd7NW+ALrZn\r\n9GJzntQtIPI/lj5DkdBMek6yNk48BofFw+w=\r\n=EEo1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/focus-ring":"15.0.0-canary.b0103d10a.0","@material/touch-target":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b0103d10a.0_1673464365829_0.6157980342463574","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/checkbox","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a71a26b901b8c9ade8625fbad494c43d39276ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.50e7a5312.0.tgz","fileCount":42,"integrity":"sha512-M+o5epqBROpDButNfy9OPOpv0fNwz1UtTivQivy53lAUq39cg4GXAeeQbtPP21EjZw+7errIQsOIKlOrHSU9mg==","signatures":[{"sig":"MEUCIA7gMxCdS7DxHDueIVuKKcaNJmJeEuBouSMB75aK+ImaAiEAz2aieFp0VSNtSbD717kYQGeBqM55OBBu50m/DUl8STE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoovhAAijYUyGt1Rnr1zR/yvNzoxPy9ecZDGJObTgXOVADCKTpeShc2\r\nlat4Y/XsTDH5Vs6qZgnPUTErr71wOSkS31NOZf9WkiaUeC1j6GolkQHvMHxz\r\nhYyX/mxTQ24X9M5xxvgCGqTYPMg92RLE5RHWL9xx2lrUNl9l/L11qEcUvJ3z\r\nsVspXc76CB1MFYALl4tgOPjd6sT6MDT3kgCyMJlrsRn+1tVcq7nFbG2u5zfb\r\nZ1uChvdrW2ZbO3VN3pF7spd5KUhGT6nmpFJUjayrOolwCY12v/zvBL8GHBKS\r\nQvmOgctQsjYkftetbHRCu9XYQtDmjIq+E/3ZJdqh6ZoY+tTVzLIMqlvRKqET\r\n74mqmOoIA6iMUVXE7R+hGhBcb1+bW5grKkKAh/qKPtpztY/kQ5nzRiN7degY\r\nqV4WaqOEkzx+uWdWN561vhARC9uziyoyF7RbTSOju3OPkzRURne2SrjENX2/\r\nU3ewGvRLpJHcXlqn85pPins13a6IPNlvimmz36beQ+/4mhUVoueLrOBqgum3\r\nQFU4pm6looaMmrysfRtBrUZWoQ3Hs119t2MJY/FwmYjMpkXY27+qZmelbiuD\r\nUxRJxBeEscIOpw/TMA9RZ+VSldaRzbzK9uB1Far14xFrVQtmx3V+aa38FBIP\r\nr2Zc+A7QwS8vGIosVXZs22lbrHnbNIR+5xw=\r\n=qZ4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/focus-ring":"15.0.0-canary.50e7a5312.0","@material/touch-target":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.50e7a5312.0_1673470481282_0.5626770614728642","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/checkbox","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.202823f54.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4788f89a73ae87bc0cdd9849f072223f02535d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.202823f54.0.tgz","fileCount":42,"integrity":"sha512-y3za8hZKNwTo0uB3Fw3Y7O3Lg1cyBRVDQHFfAZXOVm0E0b2d2BINXxh3h83dVgFa3Viwdc3i0BkwAIK9ohlfqw==","signatures":[{"sig":"MEYCIQChTi5AavyM/MGWV2DdmKeHcND5vWYHQtAD1ADeglXwEgIhAOawbk4y2s8Lt2VT/txfYPWPW3uSxf2riSIRucKjN+G7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6lw//R0es5d/JLvuUdydijd54e16rXWu1shsp2EgzzOBFlZ9X+bSb\r\nHLbXH1P2USWH6v9xf16hkrKEeJ0/Na+i/BI+PWoettXiFBWT8frDKA3BoWTT\r\nMw19bXix1fJAFRfzUrRYSvfYrvje3t0jrJ4LhRRW46Ll2dSFkODJ/rJ8lsB6\r\nxSKsRYugTtma3kryL/gQVWkm8u16qFm6IrKU2U2bZW2WGv9F7gs2OQ9Hk73+\r\nUtOWC+ScC9IEV6NJqQ5QCgDt/Pe3lT4nK8NPjBKiaCcMv/gUEa3ZtLNOwbtS\r\n+hRNM2fnfeTjS0T8eHsOHhGOrGKNMAOC2KQbbgInsqKEetlzFt/Qe7DJfEDl\r\n7PNHTsD+ofdhp04rubQHY83yFkTTKlT+bUIT81p12A5NDBe1pB0v+S/1aGxR\r\nk/JUo40Bh35Jjh1UoEHyeeazN8cQE43vVXnwBhrOqRJoTlVBAIeIrxruofvL\r\nMvrm/+zCOuVpoFXXSfgEvWvQ10TCNK++vKoEI5dkG7cQ7Gk/SQY4Kur8gIbQ\r\n+LGDsYaVTBw2ii4LcSm69IkBBsU6D5+RfuRBsbYQhvGodzpD9RgQWHFI1Wss\r\nFIzqYeRwWH/ZR/1sy0CiRMxHPVp8I6uWmzKUsSgwyjrtybPUbKBqFEp/khR1\r\nn8aoFejRM3d2cMXAfGdVSNA+chKrBkWlAZs=\r\n=6QqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/focus-ring":"15.0.0-canary.202823f54.0","@material/touch-target":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.202823f54.0_1673472972163_0.3884050795976559","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/checkbox","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a58cb436d49647269ab2aec07fb2a530ca67015","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.199fe2a2a.0.tgz","fileCount":42,"integrity":"sha512-+eWxbf+3fyM/u20nvl55R9OBSOF6OV/I55e3J6Rgpc5kVrusDHBoY8+EcdD+BEa5m/UIe8mGRiRdtKcLRcYGYA==","signatures":[{"sig":"MEUCIHXeYYUo7YoqtnlohJu1Us2tnFuq+nql8WbI6PaoaXYnAiEAh46+s5RS0oQVIATKMP1Kn9QOfDU83+/BOFH+V+oru70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzB4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF+Q//QXFPc1MYoZUJTS04nWG6ayLhiNFCypyr5d0ZZ8/folZ8j1zn\r\nk5fWtZaSTjAi5VuJHurTQ2I5+QDNMuadXRFJDjaGYQoaI/2Al7ANHS4gFaFY\r\ns5/e1CvPpZya2eqAaOMAtDegM3MRY/Q/yGN31FqUVYhR+oTUKuwpyrVyJh8N\r\ne5eibFFYeYFctdq5Qvm2GGlzqGcCV27nrXxPzVmwPSKhRIeY9oIhej0J1mz8\r\nU1QrUhtQ64U6gnwxuqDliaqdGHY+jy4l4cwyz/N12GAka598iue4H+n9mLfR\r\nIPh7Nq4a0+wSXP6EKkfb7Hkio4yuQkr8E9rEACgDuJxUFo7j0nkB6JuwjigW\r\nWksCi7WlCT88gsVmU0BzXmeQpWUm4qf5Fmj1y0rStfGC7+5Odk4wdA81uCFT\r\nhTL69L1h8Brs7BcnYcxntcZIS7bBWvhVRCm03xk1poQRW51YI5bAhFJq8kFd\r\nETsQZJ3yn1KDGrQDm87ocCVoqNKKfe1Cc02yG8YVGr+YpHzkUnWuYjimi3TK\r\nL2yiGm3bs581j6safr7mew3pTBaQNp2O4qBks5PO+69M2ChxmofP4TMXfQhZ\r\nvccXq3SC71HnuikAQmyWvlCmoLfieW3YVQ2CqYT6zBLywZy3/98gBKvAtryF\r\nMaNzF3kXqWqtJyxJoCUUFNX8iDE9tlqARX0=\r\n=50an\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/focus-ring":"15.0.0-canary.199fe2a2a.0","@material/touch-target":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.199fe2a2a.0_1673474168520_0.36442507877889807","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/checkbox","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5be085845b2ec2ecf661f1ae6f2ab80c9c00c2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8c0786d6f.0.tgz","fileCount":42,"integrity":"sha512-6fMmoTexfqLHFW/GQCSlpIESTgklyCt8JMgAtHY+xAJMPdjCLVeoNVSAbT4ilmKmicVIzp79ceue9J60KjqQNQ==","signatures":[{"sig":"MEUCIFfHkA3Vs5OEZodvtUKyQpIvSlfEg/gqoCoG3ZDGqygwAiEAmNYGoaCwXz+lE6hXYf3BnjdJgroDTL45QngRddTBj3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBr8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMcA/9EXBz1+Tazl3ODh0saR5fLZ0nXcqjYl19Cj3n22+dIpDHPGmb\r\n2CTecdsKfgSxmZfXaQvrYkwLOLxvQS+vPrS5PC/gEHvJ+T+cIbQ3EPxl4YOY\r\nYY6ei1fVLKhuZGNrmYveww8i+iMaWwSgUGp0DKySodrACfIgcyMxhNyDRvMY\r\nDzKEQQAXFMNdoc2br4SF+bKA/WjuuhnF3w9JtvfsapnBPxy8ehrFMTMu/qer\r\nTBsH7YqXjOaP06oIpsIycUhYyGEfqpgK0zVuAjOcBk6BDnNc6eKcN9fozstx\r\nCXGJdqa+fViM6Of02WrBLrBJcpuY648D42sxx2bc4Qfk2quYe0DxGC/1vIOY\r\nXfjhyW/gt4tm9g1zwKfC4iCKMYXoSkwhanHgrrwiyaFi1eRfYgE0i1g+Yqzf\r\nCT0iAaPAZNDlZ3FcugG6R01mrYfIsJ5EDMCBDytKxKUYwqzHyH86QvRd+6dc\r\n+At8WjwiOWDUVKzSVj2ClBy1zNsqDLdKfIwQ8h3Q0SDH581opA7mGE6yXJEa\r\ng3kagnE3VRB6X/4TZbZUQEVQjeUO92ZPjvn3AeNIHu2slu3tdtUf5gvkPva6\r\n5Sx38vU5Il3pKQd/6JujaFuSmJIj+9bwUWd/Gdz7/bkjeSTL1zhvv700VwWb\r\nGiQ+ZJFoe8QHNTAbXgpV6wv8WE8bRq5RLpI=\r\n=a7IY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/focus-ring":"15.0.0-canary.8c0786d6f.0","@material/touch-target":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8c0786d6f.0_1673534203929_0.3877823986133597","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/checkbox","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46e8d7d919435500611ffa23fb040add1d9bdd4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":42,"integrity":"sha512-Wpd5MiYQtXbep8NGUMkwpBMjwAPAvfyO8uVv+4pufBijQIyGv/HuFYUhRS7XRfF3KepbCEsNw7u4hPY2Zu5SlA==","signatures":[{"sig":"MEUCIQD1XOg/2lyYGdEml0fXHH63kpEWdnWVuQrPNJfr+xXXPwIgTYkaXQxrRxQFTZV59hZLxsD0ZLa6akbrlE6yAl0w7Xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTnA//XftTUrIEJ/WxukdcVF6+6Q1ebMuYQPKiITVQosZ+s1Q2Rd0V\r\n4c87BZcFWPBgY3/678OS+aUBaxHxtebvw2SrNDygtnhxAGuDgACgSnR1wiFM\r\ngQe1EEv823G7kOJeyiZo+iPGWkb+Rkdbl4f4meayK0ZvUKZigRlzHcsdt45J\r\nASpp/owCQMk2xvax39gvvS1bWCQ05icRS3o0ZHi/5HAS2Q17O7E7vZ9VWwDh\r\n5xWVrRg2fFUlR+vI71eqAsrQB3Bdtoktf5PKQ9GWZmp5/PP/eQHfTYlTKTUU\r\nApcmdpX15tHXF1eXwmBisFLDnrgeZzOvZWqXShgVoC+GNM7vmS4oAE9Vx+oH\r\nIkVI6dJOokIswcHD3VVwCqXrS/FmTvU2VTllWrcX1YkZ7yFmorTZHqf5u5Pa\r\nvk7JGM6OqUjIT+KOQ/oT04SWDBpN55/XGiA4bvocEQw/aoBfnEGZmwttWXD9\r\n5xWTssgtyblzpfM/9oqH57aaUKxw9VNZue7OeX46aHssTBOv301r+lKsaCHq\r\n3CGRqxSdN8uCDVN/Fw/PH8kjCIRZiKVUFBEpcETwvEV33SLEY2WmA3Mzl/jR\r\nW4Hfl012cdotDUk7XVKX//1yt099WQrm/DO5Akw0vho4uU4QbWJZIi6X/eMG\r\nyREaTmvmb+6FmIl1gZAHwslu6UXlpMVcjCs=\r\n=1jh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/focus-ring":"15.0.0-canary.8a74f7c6d.0","@material/touch-target":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8a74f7c6d.0_1673983500587_0.10938319487253811","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/checkbox","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"310c66748a31be7311e7919efa7480fb75b1c94f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b4687fdc1.0.tgz","fileCount":42,"integrity":"sha512-SwEVeA8Zem9UWtqrrVRPf7SUzLwsFLUt0A1HhgsRXHlqASzTkO9Ec3FgChQb7k/Io2ZQX2VOcww7ZctzaeY++g==","signatures":[{"sig":"MEUCIQDSzC+hCgHw8mDSLrMDaMKpJPR9omMtXhm9s4ryI/yQMwIgTRYHlz4DWJeQQnFtDjLvR/Yoq9KWw+f/+VDJTTzGd+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoShA/+KBJ9b0rDeGttyEmILlenup8FfVfGD9MIxFVmUizJTwf3zBIW\r\nqcF+x1Fm0TWB6hfCjWpKVjKcStgvM0J0p4TEH6Re60YQeFMrDX+mqy/9F480\r\nsoQLbYaJwi/7DxmnJvkJWEM3selLRVukR+3LajWUEBseuKwDSAX4KpM3blrW\r\nwb0UBDjhfppx48TIgtnBq2+/e7TwiOZD5mRkC6Eiofsheik4e8ZOdiNSOxUi\r\n0NNGJ302OL4HfRLZ2f/c6j4lhxHHmeFqgDyJNUT7m4Fn+lo/8uZzkE712nb1\r\nTCtXZVHhal8za7K7GIr/0YhoGf74DHbZUT559qqKQDCjs5yw3/griSg+CwgY\r\n6LK/iM8wYlx7OPEr2dDptSNy9KWOT/+b9b/D2UlCLhJkGWodbr3zB99eXymh\r\nnICJ2SXGhX/u82KJeLpd41pa9m4YZyXJGieG8dbjsnDzUXvANEitAqfuhinm\r\n3kfrSozom5Py0qx5XxPHPZjRcrGxM+JCuM93ad3AuI/gtZ8OaDchhQH6chJU\r\nAF8lmx3d6Hda54lG9jxhFtV2J0PdGHDtBuULkc/EXETciJDCVhI02PBNdvgs\r\nGtTgeGNBUG9gSqvI315ylVFFR/w/osG2VnV/3TUbOBT8ihrtO7eoKsJmmhr9\r\nLOy1/mUPj6Q9NDqVd7VrNeLU7EkQ4LONd0Q=\r\n=QMzJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/focus-ring":"15.0.0-canary.b4687fdc1.0","@material/touch-target":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b4687fdc1.0_1674157783458_0.7623981134857343","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/checkbox","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b836b9892.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5361b6817b5cf2294450412b5b002f29e31625fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b836b9892.0.tgz","fileCount":42,"integrity":"sha512-AR0gSw90RWYKTY4Qc+ZPe2lTCEHy+Hf6dVjVip7I+maqXb5+iWhZLqg5gKqfBheRSDaGZUob3A+Z4FUwxmK+3w==","signatures":[{"sig":"MEYCIQDYklMe6jC4NKUkhXWgHeqsQ+8sGF0j6r/sc5gGw6rqBgIhAK/kJ5qsojepm9lItfeMxgAhg9vdaddqhTfWkdOEvaST","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQgw//QjOqDhkToTbpNquAGCJ89O+jGaLo1GCaqNpl6WztFp6ZYFmd\r\n0ptqfqqziyJRbOBDJuOFNMF1wIRMAzDEM9pWQB6KHwUhiOy7y4Uwmq+FrUmz\r\naHGLp1m71s2RVXpVXyvmkWwWir2s8Tmx6Ha8dH8w3OKxbnKxhVZRPrtKOxzn\r\nS8akjodnHNYJtHJtlffK8CaBjZ14Go1Cuu4eilsAyuDeKVkB5YyqGmNWnE8O\r\nMffyTnsr85SKzKXnmkNcTLFpTM5ltAsFCHJ2s7bwsSmlaftaUJmqMM52uoyc\r\nLDjM+Ac67jmwd38m45rxu2hpivmYpFnx1pcxxMgfLeXMnqgpZr17dANXhCXm\r\nTEVGIb89FqUDSNanOmUkObJYeSwNIzTYYdFl8cG0aC1PbhXbhNpGzG6jaIx9\r\nub7NwmZYNoICsBco/Xe4h/y7ieUml1vE4eXe+jmekSGRFQZe7hWvlRv0HdpV\r\n8UW5Bu7ab9/KL3A5zSQPBZFpvy5dpvl8LvORusy0ybCsm0Eugme2sqQO3GJo\r\nAk7X88Fz6Zl/+0LpJN31+IvjV5SvgSKc+vfdlSJa/HQJXlpVT4O1Wi/1imqM\r\nzB0GpHIhBc4x7e990XKC9ji4W1+L1HjYGMySeD093Zckc9qZ/HGdyQkZaJox\r\n1mPkMrauuASX4a5K2j0BjTECwW0AJ23OzYQ=\r\n=4huj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/focus-ring":"15.0.0-canary.b836b9892.0","@material/touch-target":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b836b9892.0_1674599976730_0.7314902583316569","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/checkbox","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9da2b92cce8dfb0f3c75cab47ca7e0c743a8a488","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e8912fd37.0.tgz","fileCount":42,"integrity":"sha512-0TnqQ6nvjxKjKvfBuuI5WBwnteSWcuYaGS8PKHQSSUE06SaB2q6E2VnpQbohl7r8Lq0gon5hPa7qCDX0299rMw==","signatures":[{"sig":"MEUCIHlH87MF5HqZEy8s4EVVQoZ+tozuX71nHTQDMgmu/WooAiEAuo785CmnCSUcUT2Vc3B1POL1qQvyt8TksJacN1b2ICI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfvQ/9FFfYqx50YvAKgXrU+kp+7PzZnct/MS6igUCx8DcMPDotmAfJ\r\nlM6/Rwa6nP2uCVkBJ3POYaow/050RF0dUKgIOssNaQvXvbV67F7/bMvjZza8\r\n77b3PdOIDNKQQFlFwUi/MoUgZT5GEPh1lEsJpO0VqO2fA75iGdObA9R2SN0P\r\ntRYA9oWL8PaZPOi4EUms/ZsXRXAx/d2JFgIgsoLY1c42buk73NFnZyPaCy7x\r\nMYbLpeoVIx59AIS9CZ6YjjJhSsuFHHNXuOpboZPH4bDHL/qmCegiKmi3WTB1\r\nJ9q82S27NizYmli0LAIs9HP9VZukyknDHSpQ6sQTXI7xChpio0JfymktKuBp\r\n40qNxqV5qT5kF/tB48tk678oOMZfiaJCabG7Bm9UoLsfYqr+e6IdYoNJ1VXy\r\n4pyThKXIEzUZoLO79pAhX8f3An92nHlpBMvatjvL4p+eA2a3aABXoe2Yj7sq\r\nUnRb+oGT4hB98AR8Yv/el9qb8jZbUYDmBjmITIZxoNE3BPMJXCbhbgQoZ9h3\r\nQADYJxSTAwA070dcyRlznaW2Wye1aRgHEfb9jFPzYQ7pul92iv8dgj9U4RFL\r\nIljlkNJ2GGpyhgAMTV9uRruSD9w79aw6pzwI2SC2xp12KaaMzfSVpAk5OHIz\r\nxw8y4P/1c9wkGpomIMtxIjuapnPROG2BcFs=\r\n=yU6+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/focus-ring":"15.0.0-canary.e8912fd37.0","@material/touch-target":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e8912fd37.0_1674757812381_0.4325358669823056","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/checkbox","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"049ed23a344b918c382085b7957afaf8174be52b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.16fbd30ff.0.tgz","fileCount":42,"integrity":"sha512-O6n4UTrlhG0nWFwA9UQ7iKnBSHc/X84vfLXN9Ra6OStsd2/UIccNWIliqKckpXLFcMaDnZCG7zhKwqMnZdkWcQ==","signatures":[{"sig":"MEUCIQD2UmHE950IUzy6hw0usdqErrT7qZ/7S59wy+SeISzr7gIgJYqkIYUjbXZZlwGnWxJaIOsQ4OrgyR4TQ147F9RHCsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sffACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfXw/+PqlWz6fsoS71nZf9YST/yPA1bMHu6RDGAoQhs/bgkVCwbgeQ\r\nw+azU9B3RqnGqF5F3h/NiM3sjBEe0iPmS+3LQnghizVjrkd1nT1gsuGQFhU1\r\n/kkUPaZxJPiadFGSbC2iWtSKHe+EitXTyIgiv7cbfgeL1Ve6iGCxn5U1m/q1\r\npCjpU+heOJRCCbxDk21CfLSQP9ypf/1Woc0xXNLJSNG+Hk1mbtPZh4IrX0Pi\r\nYL/wx51urDjXZnCUKiVWcel6Ml+CE0JBVIGAMNqYgefOhhlrP7pF7UmEKHs7\r\noX13NZyg8elULrJesLjfofwLWJIH5gXtnynHZ1DpXp65TYlcpzTe30nHu/Ev\r\n2q9hi5BtwJPrUHFkeiuURX9v3Ys7HaRruYTPeE5OIcwlqmULd+eb5H/x/NMH\r\nU2TGwULnZhkyV2N1TUAHBM/EIAwIDpFOPPPka0gdayu9+e8fJinyTyhHRjQ2\r\nd2JJ+/hX8HaiRCGYjV8c8LBLQiacVExHFyzikSrRPlo/cwgacgSRnTnwB5qV\r\n6dmmMGtwqAgf91BcTa4jSyHR1tpE2SnGqWJInQX3ru8gord/oOAa12s42jKe\r\nty6WN6C9ebxwD1x7ih1KNi9pGfJLJmK2TaqkiFb7h10l+KvPYNGPwXGWre96\r\nkR8iwNGqPXwqwIkhi8U8QPHjeRpc3c3sUHM=\r\n=kSbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/focus-ring":"15.0.0-canary.16fbd30ff.0","@material/touch-target":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.16fbd30ff.0_1674758111261_0.43314991173161155","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/checkbox","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.033ae083a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b494b4b5c33750f8b609b15761a027e29b6ea438","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.033ae083a.0.tgz","fileCount":42,"integrity":"sha512-yx9SXYTu0XOlyR1ue+dhOhSSrGxHTIOph4VxFA77kMK44cEUheKvOCOaLk+S1mcn0+k4jS6EiWQbNr1jhS9HSA==","signatures":[{"sig":"MEQCIBgzc47pDF1tx2gG6k/rDtsVxCy/swV1zFN5As9NEvkNAiBfuVV5HHGUZPc6BvMdLnobr85ofqBYkxgJDQn26z0pdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBeg//VBVPuOEueJzuOxB+Jyam0eh+Nz4GxCD8vR71ExQ3augccePn\r\nCUNHnQE+SeQbWam4eNochmdAXQ2dBwcOYpyOziOxKX+XrOEDI6Cvuko83PMV\r\nfOvhR6N9RbnvoqiJT5Fx4jP+YOqQT+swWb2FVCHxNk7yUc4YQLCvtGG7mQ+3\r\n2F9NW19aV+xzOVdOeK/kupykRyS7WqoEAHOC8Q7CmT2MlevL/4EfZaMzrd19\r\nMUhUpqn05gnMDbKJVUkyFWoBQBF1F4EIObYlz9bDQOYYlT0kOSToTDqXHFr8\r\nkocuPdIpEfd/v5Oh9PnRpJczU4i6dqNOXCgJ5PSQI5HfLv5AU7vJElQqbt0W\r\n7lsWiPc4W1JX67hoTSa79wbWIuo2uvTtv+H6y/dfNzRrSMG1qDYy/hqgldBH\r\nLRNMX1s8rNInMczXpKn/rcD8CY8Qs/KN3z2AkdZOygCG21OCA83gtpromiHj\r\nkhtJd48/ZMxseE3riyfcwdmdNj6r6gyWodfoBCcmoeZJbK1ZWNR33wKyEmHp\r\nNsArsrNUPWYXZwMDp0HrrOZKyWXxnk15WqymAaq1HhcUweFok+pMdvQ45rpb\r\nuACVGJYhMZlB4xqp5/pgxCaEe4cYMtBYAhVXFK3QNhRqNUvDj3EBpDvMJCY0\r\nSJtmzuv+p0HgUxX6MWduemX/+xij82+VA1Y=\r\n=FRkc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/focus-ring":"15.0.0-canary.033ae083a.0","@material/touch-target":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.033ae083a.0_1674761235055_0.23675178989766188","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/checkbox","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e42b0c82506660cb0476f8bc816889f007ce9f59","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3a705fa1d.0.tgz","fileCount":42,"integrity":"sha512-HC8z0rxG/sa5F9jd0vqh+VBV/Mpe2M++Bxxlz8T1PWYP+4TexLOIM/bZaQgGbmTPzHNwnlzz1uFuNIPQcr3OZg==","signatures":[{"sig":"MEQCIFxUfMfFSh3slXCw9Yp28Keiz2NhUjS14jtedgr8aeO0AiAsuWNRfCYToWoRCBuc4xC7Dpad1L5fi2Q1XPf8jRpoig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqbw//fFpvX5l38Lf09Yh82iNpYF2wS6gRj5jwxCa7qSKritS4ernJ\r\nrY7pu6kRSPjnPRBRW+QNLtBdsi52pzBGs4kIlFKmQHVohK7yD00Wmq8GopP7\r\nyceTCwKek96CQycdBzzrhTdYiebez9sEauMNpngYqCW0L5GmEXJgN2gEZGrK\r\n1HGtt1ARupoZD59BI78Wg3q+CTDdbuZb9GqvH4oxWXPy8FE2BAXGc15GoOiT\r\n8SUBdUQILyCA7QG3GeMX6r7pVsm2R/GxjzkJ9W27uJpl4YeFRzVROqSpXigo\r\nM0iZr1rjtSUbdMTEW4pno5qjBAJwhdU1EK5Xbj+0yhIEDZD+ue5/hn4JJZlS\r\nKPfDA5WpGK5wdSayCZUGCPs1hhJPVli5+SlVrUuA0RAf+KdoYJRgs17xCmID\r\nDoqCpFItnvBLcGf9s8ZjZkhb8/pFHvH+0j6X1R7Afa5gofcoD7ufqFt9ebAq\r\nCVfe0lzKRDTtTFU3TVdeJFKjvgwkvp1f+Wwe0SDo0T7qq9/hV8HHNnJ+Sw11\r\n1HbD3JjTgu5EN9tUCDUttAw+NnnDNKKmgyVfaGAfUKh0cnFo033uc7aSnIK/\r\n2/feE9hCkg+lecgdudLeJuDMMQ+cJx7qzB2nFtZCfkU5DdsYLu8a4Z8P4SOF\r\nna0t1rNzvvmDnmf6mCW7ucGcJPvQfulIlWU=\r\n=2WDM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/focus-ring":"15.0.0-canary.3a705fa1d.0","@material/touch-target":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3a705fa1d.0_1674859439757_0.7943411234417779","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/checkbox","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43db94d5b1e278064c130493047936b264927936","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":42,"integrity":"sha512-VIwX9Vc2OOQsOJdJjzoM1qX7XiEuLYAWYmL1Ui7k23OPwVQp6Cf7rkPxcWNVsTMauzqcZubc7ljz7OVF0pLjpQ==","signatures":[{"sig":"MEQCIGo58FK2HMVAEx88gkYN3wIIUfNeb1MDP4SuFYWR+HP8AiBT8zY9DHA2d5GoHzIHtwHrXPecEfUeroXnH2+mVRVuLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocLA/7BTqdnfXpgCrYbP49xAarVk+ahkaCOu2kvgPMBD6KvEwSd9QJ\r\nGvziXspU4o93fWPOJUO38Du1Bg47lUuiYSWcIfk75+uAmq/mP6ohAs2Dl58g\r\nm5lir/PVxKzvuVvzWU/tX0MHAr0g6NRKya4A4nEAvCN6iUggFZsc9iR3rtDo\r\nuC7FSFtFnL6d66yNu25LR+4x0AUjvAI98iXZGMdbwdp3sMT4Ic+nIlHEdZ9a\r\nqXtloqmq41XKNDBScdOqUp85NFJ1nlrWc2ITM0S+4gn+o0PNITBbZYzSAqFk\r\nPo9zhqNlUoliCP4q6YpVIbz9w8rUPokLUNmxZdbn57u/ZctfFWyjCJTj/l6I\r\nLl2GN5aTIgRzfMIfgxd0JTRekyboK/rLrMX7hbpjHFmIWXdp9aN3q4zJEzfH\r\nl8RY426wL9C9ajRkk9ppuTtAYxfSskbqlpx3mHOKD6whfXZB5XRx5kFd2SSy\r\nlXISbbNx5In9X40510kL3oAbAIt0gy7VoU+CFwxvMCSKpiYhHSd3blWuggUn\r\nTyj7VeImQqgf9055YnAK4RnjJ8tGe3j71PMhkuCG0xeSW0uXk+ZbAfmn7if7\r\nC+XI7xk4kljuzQEE6YqK5rCel5/ax4uO8d1NACmLhdlZ3SsqpHdOw3kF+IDd\r\n6RDbadMCCsuCXhlLOedyq6lI4nj5hNxAc20=\r\n=vau0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/focus-ring":"15.0.0-canary.d6bea2ff2.0","@material/touch-target":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d6bea2ff2.0_1675179029123_0.13300141950145838","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/checkbox","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fbf8213898e2caee10e45a57774199871daeaf0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0c94182c8.0.tgz","fileCount":42,"integrity":"sha512-/q9W/hwnA5UGZKLN1WYRIHNViFAu/0TFJb30GFsrckwypXey3OVrZgnr5zde1OXoo8PoN8rgfwwYouQgA4PetQ==","signatures":[{"sig":"MEYCIQCZKTHUgBeXNd6hsdVliD0/ihhS4b8bMDApD6ehiHcSwwIhAOhJeVr8KOJQAdQsktzugii/UxO2KtLgyeJvzAoE7gEq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+yw//dq8M74MkdrOCi24It3QoSmMhIxD3d2TZNc1qmuPtS/kq+sQx\r\nZY4+meJ7kGMuYuVh+YoFREugbRM934SFQz0cVvfzjOr1g8brKsalMR8uNE40\r\njGehvvAoMDl37I6m04XQYShJIjHazd3ED9/CoYJCQvlUxA+KicXjYqlAT2Ai\r\nSXTOxTlZKn9J6hzPNtRbShfWUgOTg9+V8jItzwDGuBlYfxvhLlxNkM3mrYAY\r\nzGWtJK1rBzw2P9W8JhO/zH8H2I5WkDTndCRP4KVwfGOKf/dRQoI+v0ytUfz/\r\nluXjlZn/1x89J2Vb1NFa1CismASxqF/4H9NCpeCriLLZcqWn0YM+yTrZG+rU\r\nzJHC5bfV5UhHJaK1mckYTkcd4jqIzNT862na+XEadYu+t43lj8eLBogYemu2\r\nXMSyebVXjLeeKXViBxQTr20iJHaZ4Ox6N8Qo+NUAoYmPd2IW0ptAhIJ+ej/z\r\nGx8cIr3jeUmmRYYpyBvhm3MPTSM4dwT/9GRUKWRzbAlJiT7od2dO0lAzqSEB\r\nPXe8iFg8pIyYoOJ8vZmChfis7aKXWuniQTvEIiGA3z9itWTz6IeJlAcuoHhB\r\nYattJJXQwHgNUDIgXydHgBsTmnpMSmLWqVzhG3HDovoVIKMQBmVPLogYfIUu\r\n+dpkWkExmfmaolU2Np/FZdPzQC5Lqd86FrU=\r\n=Avlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/focus-ring":"15.0.0-canary.0c94182c8.0","@material/touch-target":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0c94182c8.0_1675273474787_0.38915522895536725","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/checkbox","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.15b221540.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c083f004168ad5678e1c8cec8f3fcd096ba0cb5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.15b221540.0.tgz","fileCount":42,"integrity":"sha512-kURgeUO0pBqFt1C0lmvdMBRgoUfeGwR6hotEE/tkA5XeFWWe+PVf9TVhTqM3ti1CNr+ivjArdiKeQmuXCZpEzg==","signatures":[{"sig":"MEYCIQCRSIxml5WZ4CykjpRGqGFSWxgKyvoHKz6wkQTRJvgrbgIhAKUORktB0l9bAqIaroMSA3FJZqCQgtxJ5GNO1MSoYnlo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qb7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxKQ/+K+vi5UaKdxDW839rf0HTqrADAERfnoFTFO/2Rzm/AFBH/AbS\r\nN3/pihL4o5/QyjC2Ld2E3d1hzIF7pUYVpYcVRZ7yqPGqvsPg7NIcyFkgDsR4\r\neklWU1h1HgbLLeX7kajKV0jT5GWpD1d7TwQ+B37Z7xRABDcVRA/0mbGYNAel\r\nRdGQxPGoAPUti/w7PdKBP8jAjF9nJdajr5hnLz0y76DZb4j72crH+39OYfA2\r\nfLX+FB6Wp9N8fcXd/hf7JtMWBQfuXpKIfxpqQXu0NWDS1V3HhreVuuc4hn82\r\nTlvn0VJUjPAUWDRgN8uRBHMrQiDa8pRsSY3hd14ETudtyH1U21tgO5PQHXHN\r\nb5E55Af3qDfKNmeuHfpAnBTc/x+xA2ktl4b5yYXwR/eH+Zd1WB4szsIGfgP6\r\n/KNw6GhnPSv8+AUXbxwDqNyKL9/S6DjBmHa3WOqABHDmBHO6CG/6/mjgFCrA\r\nxdoEnAx67HHQXEQhjbU+sw1HG9wobgghaZnKhNv+PvIHL425YH3D6ldLU4he\r\niqC1ob9paPfZ+/+AFNxhVNquB5kJnBImwRaWVxBkg6Oj/wRfBExRB2RgjCXF\r\n2CUKgBOVj8ftPPTwKqkD1opApMe/xF6qbo96GCP1DZXhbq6yNT/Etjv/rGTK\r\nHTuVyAz58N3ABnX748DNi9l1f8361/czReo=\r\n=upMj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/focus-ring":"15.0.0-canary.15b221540.0","@material/touch-target":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.15b221540.0_1675273978897_0.32061886443460463","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/checkbox","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45beb2f38d72c2b77ba2f50ccad6a7bdf89463bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.eeebb8bba.0.tgz","fileCount":42,"integrity":"sha512-N3pUGf9GNW8m3hqBaCnVEuM3PB1G/YrIC0TGNjoaGa1hw0jlnTbWd9mDcqtfIRu9WX92msSgY8nVLL/vfzqt6w==","signatures":[{"sig":"MEYCIQCzmZqdsybI4+NHLhLMIplzCVfF74EIX/Fx9GorqoLszAIhAOZjJy6AczJZxs7FGlp0VYrmjCpLgjMz60N6r1P7UvTk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q3uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqeqg//Z6a4HfC5sWFMGaTNmGhiDoxJxmYP8qwA9ImRclqAakD/9lJg\r\nKNLSuzodlzYZh4ozYwBW4IfZapK442L68KKk1LiBJCd6+lflylp7u6CR9jFE\r\nQsrx2IS4BmpGjbq84t+AVvORCit/0r67jexqZfbvvDIk3+v5WvLW2VjqsZA4\r\nzYN0I80HYaehtm4ca/sKKpjLYUyngdnQ31URMx0ZuyMdRWch0UyYkQfPZR4p\r\nebrjcdSEq+H1Kd08NNFyAo8sVfKlfvpPUVt3cW0L363TQglZmYu5ubjGOsL3\r\nUwZ1c3LG9yo7TlcpKLzX5/qYZmXsKIbvZrvZfrGeyMWNn0Vq2w27NdQb4Uee\r\nG2Yl/xxmkMfyVv03y3soC0XlVDtRH0wu4acShCtPakRftpydk2aP4FSeT4+z\r\nmPm+4RVX2pmFPvbQ+mb+5dUB67hygulucKnNYGtMi6H025XwbllJGQsR+NEh\r\nY5NnsXnF7PoqyFrixGSAGzZZ85gzNCIUUy6PmV354kJKDZ2NuBLKBXqN92Gf\r\nMjIXHq5zAkL9c2lOoM5WgUHTbDpxDZ2R31WIXb1bNqTvD9rHX/xDRx5FjG8l\r\nhFYcdUIg7EOmR5VPlHpG7uyGHK3z1USe4ujTOYGn3t0EPH4+MrF8V2+eecSp\r\nbNnI+M3IClczP1WXfAgIJ8XmgtuSYNL11NI=\r\n=abSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.eeebb8bba.0","@material/animation":"15.0.0-canary.eeebb8bba.0","@material/focus-ring":"15.0.0-canary.eeebb8bba.0","@material/touch-target":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.eeebb8bba.0_1675275757954_0.28386489723416175","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/checkbox","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1daac47a3981a3f71a9068a558e236eb2bd19965","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6a4b3f834.0.tgz","fileCount":42,"integrity":"sha512-I0h3rizn/cFY5VblKu9vMi2EGcSoCnYRn5boTHEzsDOUkLhvcFacI1UWIKvDnXdvxYrO2aSJQ+BS9X7DpwZRCA==","signatures":[{"sig":"MEUCIQCGOoWckWJZ6TPi2oQZcgBQWzB+2jF00irk9tooA3INwAIgWV4iCkldqHKcWdW7BrvGsVwIUqv+7PjEPBnaFxEFE4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYsg//XXPdeZ1wtkyj250A1WwDBwa0AVDvRK+30FUhjHzOU6IZlt1M\r\nNNgDXS9GNI5RYW64IWLvDy2MAMZqlGQy5Nd3qLxfUTK9RwiEeTV3yGZ8Q7IQ\r\n59p1oDJNrkQBRRCEUC3X5x7/KC3YZ8ZhtELVfJZFBfvPHEdKxNwCNOzKnJ1p\r\nTVPsIEmYrmXyTx9nZxSAWV2AzcWQiotXdxoetB0ka5yrCmEiT8prD52h0YtL\r\nNcrI/m9M2DbSgKtiJvBP2bLAUw0rlOGdieZgMoLEqOSgiHvhPaBou00jKBzo\r\nKk/i1oLNZrboAqCi6DUArICMgDsrzjtjkfck8NpYllRBWIsmWWUcX+AePOLy\r\nqlTaz/Bvt1vlk3/Ufsh4GMMwBEYU8UZZEJBGJQXOjmlJS4vbrrTtF4VYjC/z\r\nww4H4A1na8qruJ7/ZvFJdqrogIKa9D5PFnad8yiVrPQncUDJ3gyOrCAdhjyL\r\n/7Qp8XDX2TDQugLs6R0FtVo2hsK+geCoemBi/PUla4lBgz7B38TEAtckmtWz\r\nPgxofItIALSHv8pkwgq9ZBAoqOfukxFG3QdDy95rTqRXQ/GYehkL4RnM6uuG\r\nU/zHoJfdUyNHyuOZf7MrCDKVUNi5PbLqHb/qT+7oIVzk7pqIFD0WroJNdUwi\r\ng2erq4OQZ2nkHE5EvX+5Zbj63gimH0oYTy8=\r\n=m+Mj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/focus-ring":"15.0.0-canary.6a4b3f834.0","@material/touch-target":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6a4b3f834.0_1675277929915_0.5319336275978805","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/checkbox","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7e5e096db078756f5979a9c4316a25ef55d3153","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b177b40e2.0.tgz","fileCount":42,"integrity":"sha512-Tjm8rzNF4ZmN12krWyBz4IkkaAMShjP9G2vcx0vNn7NSzLviorsYLFlEWIFhX2xO2SJ/5iCdM1H+kZI74hEYFg==","signatures":[{"sig":"MEUCIQDzq3PnbZ9Z2/1ql5KtL0I+GKUX5UvlBSlfAZkFS2bAwAIgPgu2O+x7P3KvS0vGAJmGQ+QnZpjeK2Pzcj7mqhf1/gA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdvxAAjm9sf2nlgef9o8WkkT9v8yBRTjHw2RlWw6KThpi/oXngxYjM\r\nJGuqViqb/eMCby44xQWoyNMmGiNRBF1gzhVPtVnf40C3NvczVAGLtqdM6WRg\r\n3KG+ULbuuENWcCHluh9fgq19O6XGNVdNtE7EWwySJt6eDxH6b15YmftDF40L\r\nlfglp+MsR7zpvl8tVjFofROpia6CQus5Hi8rDaGXC+F+ZxxZMZ/dOs52AQiC\r\ngti/RxnerTak/s0OaLK54sicSAFckWeyvRLm3orjijjphq1qFYCA7zg8KwL+\r\n5XS0N1RM/4e2KubvDfg4uag2CcfXjXiXedHDaVujzT6047CF5/yESxt47Cl9\r\nHOiY+tnmnoHd/+eR2Yn6IAJiMc+CqhNTsyTm0Tbb/XcRzJ2mqB8Uk2mTt1pS\r\nl1+xUHRLDwXHa9Vpxvi5zOr6KzaEPKbnYPjRj6FYVm7PoR7E2GymrceEahfY\r\ntUoxgNyDERfRFg7PByOVMtmVoQcYS3Tbap/acxP5cmR6+jhpD4Y4Cr/S9cvP\r\nyDKuCJyPVWVBrqum2/J5danaerOlOSJ+cATrA3H4niFtI2y0pU6MTqT5AGZJ\r\n5G+KR5UhpJ5gk7wI56uWVjuEie5DHHZOhVGeYWvGpzNgk0qZhIgH5m589Ksr\r\nXTJNzGBtjhAES3nJC6aHOJY0Ph0TaBCv6Hg=\r\n=bnTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/focus-ring":"15.0.0-canary.b177b40e2.0","@material/touch-target":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b177b40e2.0_1675308873896_0.7586298311205388","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/checkbox","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d9f821042.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3dbc9e51b7fd1f1626214a4431357cd570d3764","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d9f821042.0.tgz","fileCount":42,"integrity":"sha512-PLSCWvEpeuREXVXq7wU5AdskLu2LxY6VCuwG0arF72wXoPiYDl+H4haLlVRvBEvXYQdN/1JIDkBwoCwHMOpLTA==","signatures":[{"sig":"MEQCIAiwchPbz66qJ7K95fNnbGOuHBD4YIcHIsWIErnRmsgjAiB9I6iOXKqSwLRalakoo5mlE2PeEIb+nDl/wvgedYUWtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGVQ//UDeaR6ajJ0GryL8ailtyF6J7XWJjrUVWtlLdXKoymZwaVAiM\r\ngT4zOpOXURvaFA3QApa7xGfWdzZa4SHQ7qnDiWF+qLu+4c3X0fkRoe5YfgBY\r\npedTpsHYmfxaYB99msnNgN+kca0xq3mWPFhg/Qo/06W4aFDDnfJIlkzARdA0\r\ntXaXXJmD5Umlz5Ui0fM11SkOTwQlR9oT4zB5dY0tpfVFa91yLHyBn6+w4r9Q\r\nlh3gt43rPUO3HeaPPe6qHmitRY3ac43dzn0gvF3WY2nqPkHoCnIHxyZE+as9\r\n4589QY/GTFkgQQElTrSeq97Qr0IUV5mjB1RWk4xSnu88lhOm7R7RnJUFT+Ou\r\nQNHA+L5SbMZ1deAjyR6X3uYyPffrJHz9A7tzX6cVrRBGWeg4cHdhJLBY+dfr\r\nL508nEq7HoZLhnDc1Jrcf1nZOu/Y9H422ZcaAbVtqL0Sf5mP9m3105OBVEqJ\r\nQadCi+uaDH9tNEzhjxITRoXQVDgx6ElCqxFwj3iA1BCg6Aoes7rXN+Zj1jpC\r\neufQBihnuhz97SYANd8eud16kkO/JZCgX86V6/rwx3cFoFGqKwB70RhbusxZ\r\nGsx47v7+7b12DPle0i3aDujaBIaN24ALKWvrib51/gOwgZ7T1tUuXTYRdSUj\r\nhc86JXFHElSrmdSntZZs5kmmG3ddsYOxSSU=\r\n=DiOj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/focus-ring":"15.0.0-canary.d9f821042.0","@material/touch-target":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d9f821042.0_1675359522775_0.5584580566424371","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/checkbox","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461a6061a5b8f55d085c63f32508d580be1a295b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.47c7deb19.0.tgz","fileCount":42,"integrity":"sha512-7U487Ie5iods5QQshhiAnu84ZAuQPN1WG5Buga9kKcLNpOU6392l10HFyNVULdx09Q2h37YPBtHQ3nuqbAgSLg==","signatures":[{"sig":"MEUCIQDyLiXhsjmNH9HCXYDrvchFEEhKDvjgVCCBfmL0MRZ24gIgfWtJxD9gDwy+CH/w6LcqWNuQrfHmQiOVca1TSzACEww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M8/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriMw//b0tc1gfeN75Qd6JaW33uniFi0ICe73+ogVAQHGmlZmotV+Cz\r\noVN3wz5wkPkF/4LJM90jYRzqVl4ypKNahefUujm9hxsVdChWWG1WnDg/zS/z\r\niwq3i0A92q0wBmO+T85Sa2tUJponbZveLJh0SyxjM89Rv0k1u1DrNddK6vQA\r\nUYlcxCz7oG0r4zLm45goFOyeph1tSvs8YsqFxUrCeZ1qQWl+bm4gTFDetnce\r\nDfDzaYc3vS+e00LuYPi7lBdEdp/0UeSaZZW3/g8UiI4QxrFXmRdytSsh5WmS\r\nMwJE0WuiMUW4dVeWfq8NhdUeKCLPdsk0t6venr9PYoaUHQQuWm51jbIq9rwH\r\nUcPjdKQnazxPisQAViYYc6c5j62ud7BkGrsvubMgprOcwZMPBJ6LGR/r5NzV\r\nlIxDmmStWU1GGGC9qMVOp8/GmAViNHjpHUtiojZGG8mVB3RVrZhW9+naRFf7\r\nIu6Temajq+oiDSplBfU4pS1t1re3wwy6QL6n2KacWWaGWzUcE6CqzDBr3MYT\r\n0otxlZmai4npHq7a3RDi9UTL/FvA/koOrxuI1uTCbA+KU+aWiQMiS3KP6DeJ\r\nD71FNkWb+nhFPYGMSSdyXr5BrNZmDIT7BR4+peRNANwYmY3RYSiuVVI4vdZi\r\nS35rPPH/YvFGa1HG1MxWsiwGCMSy1iBFEoQ=\r\n=T/1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/focus-ring":"15.0.0-canary.47c7deb19.0","@material/touch-target":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.47c7deb19.0_1675415359742_0.6008387326421445","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/checkbox","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4aa60ff901b861dcf360d2a5bb08b46e827e0c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":42,"integrity":"sha512-kBs/ZCDoDDJMDmFlJIO5nbWJARwFzh8gyEQde4CFuxE8ZkSj0+qqKqyBoompzHOIWvAJsub8B65diSDxPV3q0w==","signatures":[{"sig":"MEUCID3sPt2KCLi8l8yBiksLlR2CsPFgYuWkg4r2cVclwCeoAiEAtR4uIM7hCIgmrgyaFREPIFEAyyq3y1QURu7Wgng1Uyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRjA/9HWBwZI8Az7mys9fmP6MNA6vzKavjoX7z33PETiaHe/q5FhGU\r\nJoKUiu/piC1Sm+jk58FbzStxXARbykB0Btw3FG2NaqTnE2J/TbkmV/Rjxh8s\r\no3gJO3+YhHhCjTyZiZq+I4hQewI4jfwRmCyZhRrSEVITiW6CkG4CUKmnzzYS\r\nrXa74TpQY+k1CuEaTm7riJtsN0VTWZ6mUttvu7fvgUaHHYFKPWoEJqQVdMFL\r\nuj9fy+6pZJFR5IHYwJTdUwgT3Tsi8FA8G08UusaUeKjpqlW9LJfJJO+FVjsu\r\nRPOQ1RmTwH8q29+CAbDeJ8rCHPLCAzLd49MXgQ9G3tIrwdzffpLah+cGV5pJ\r\naQ76BGbDYTkGJt9tzjzU361hy1wqkZ70eTLRQootxNbVHAo+7kx/pkBWUioO\r\nwjeNQYVXxjWnVLSYQBHBj7ylVHXpy0JjzjiDvEraMQuoR0YW4KoVpD9BHzdb\r\n571pbpL8rncBMIK63fdGw/E3NQjMi9zh18nG37YSpWbG+19MFCLbaibjGp98\r\nxsuKb7dy6t50+3tnO73qPfLlKggxnTcg7XRWynGxITNTZszYJsEh99GGgLl7\r\n37KhsrugzpNt+0NFe9Y+NcnWcXuV6cqFqBm4vfum7gurLYPccIdjhv8/KifW\r\nJHUFs+nSQWrbfhVdgjxUtwLYMYyDtDqRICc=\r\n=Z6uE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/focus-ring":"15.0.0-canary.a16dbd1a6.0","@material/touch-target":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a16dbd1a6.0_1675491294422_0.1503797715591253","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/checkbox","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.93416f87a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d243e49aba64f9740bd220b1d00fd11b7cead7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.93416f87a.0.tgz","fileCount":42,"integrity":"sha512-fybHk6MFf1UwYV2f8uCq7RozViECp12NrEExmb8EXNUVJ5wJKWl7hTFYGXWFcxLT7pxDvy0ghAXqxLV1mrWJaw==","signatures":[{"sig":"MEUCIE8V9F4Rm+WKztK+NHIC1J9M2CMzYzwMfPynyqLwmdWZAiEAnSMUV+q9QlPQh01f9tuF1XqsZO1C4GFnQunMlUGCkkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lD9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrURw//f4QvbDhJMTECubEg+sg2MMlXhxVpBGbU1Gpmun9xhi0F3MAq\r\nWkqA2yL6xWPczIk1t4HhmszT6TqE6VgkDezurjCgklfrB8S0HjaP1TmQ0ogx\r\ns+CpYjB+MRIa3mJdr7EjOymbKFU8mICiF2goUtgtVNRklWjW5nnjLNnCeo4e\r\nTAdyEeE2TemoC2x0jLlpQabUfjeObPmXebuhJP+utpR1gLKFUnAKlRNEAsan\r\n58UJHHlBUepEh0mB2+QYkPBBeFemXaw4eUw2oNziCsbxDZuUmwDr72NKHQuT\r\nimhX5rK4EYtrb2adSm3lvGCqawCYlY3poeRTKO6Ww/qwkACvqNUiCisjlm/z\r\n6PGN0hIPOvUBz187Pkm5noyB4VVTAZld6x1XFRkZn0Mowp0G7Qy8uQhqC0uU\r\nU7Bfa3GJ3FCqgshQooDkctPRgt7WV6ta3rERgr/1W34fk/6UrTefcEosDyby\r\nQjQ2HXhFn+R4vGI5YR46uAMAKQTyRM+cXXimqKWQu26e9JB4m70qb0OHIPZq\r\njiRo8JhayxPbtqSJUe5dX1ca3r4uM/opAjEd3Cae0pXZxvHyO06yIfigXnIe\r\nkwC7ser+2YQU1OrOw8sI9EQVp2WkWIjNTAnIwaeqvE4mv+90JPCHUr+1Dh7v\r\nGGrXpDwHOu5olfCdXVY8STBcj5IXDTZCCfc=\r\n=/Xhf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/focus-ring":"15.0.0-canary.93416f87a.0","@material/touch-target":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.93416f87a.0_1675776253247_0.2464655690272759","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/checkbox","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42aefb314976a1fe170df11b21cbc2545560dac6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.49b8e7442.0.tgz","fileCount":42,"integrity":"sha512-YutMRp1L6UD+Dv9J2oFL73L/xRkNYEB/KGJlg4Ewe/ZkcG67cRUI2mdsBFRmayM9PYZonrh1oPKbXJxwag1+RQ==","signatures":[{"sig":"MEQCIGZxny5dbGDR5E0Q5an2am1HAQg9HT8OGpiGjr9xeAO6AiBwcU57gic7Os3UN2Vljyz3mglRS3ku1ycViTf9dl4TOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDMw//e0g3x+cYSt28x80yP7ZlPUkVjjFwczUSYANfdXvktOr36sCE\r\nnibgpZ4HNMLvd1TH+B0MEzYrp1fM6C14+1H6wHYzpIVPsEMR6kZWNBBf9QqT\r\n6PKclVmtN9/LCB1IE3tjio6B0WZjTO2rv+6bH1YVqZhvpLXY0K+8JUbeF/Ca\r\nblznrkJIUkhKcm7EsAuHf7dNaqQ66fvgU2Ck+IkvDWBotpa9167CShZeGDLz\r\noHRw4+CbPrkhSu4lbje0MLYYWDu0MySLXFncC9G9u2d5OmLxDzNu4fReUQru\r\nQ+PUxXthlX+pMk+QT4qudlMn+9hFKmX9itPzZXgf5f+IlUTgRmuOjK1O3wzK\r\n8HfcsfUOPF/cKlxOAB7cCFEUj0kwvqQE7GItcB9iraXCXJr77his94Wj85bN\r\n0mOgPInlmusqCyNl1/66JToCvEG0ReG3shOQo1Iw7VhwzBxlDtz2o9XQczRy\r\n58TrtpzZzwxKpZ26vE0BtBkVaPX641SrerO4I+EPEE7lcF1/P1MYoQNbCLcN\r\nVwfTkxf6fu4QTkW5iaoFReT/N05uduvy6kKygHufVweI5+Xwue5ybBbL+aC3\r\njKuG/TlYwD6UPPn3ojbKbH36Ke96AigeOifmNJj8kYo3KL36WytgLf/z++iq\r\nHGubhJ9QknMOMPH8Za5YUe6tWxPifnVHyOo=\r\n=6OXD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/focus-ring":"15.0.0-canary.49b8e7442.0","@material/touch-target":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.49b8e7442.0_1675811395090_0.9836642659460235","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/checkbox","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.de38de758.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79d91e1a065e07d51153410f0486108bb7212f1b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.de38de758.0.tgz","fileCount":42,"integrity":"sha512-OUdfMCPnV3zgPLT3tWxa0CfkH5L2beFVKsCDk65kdGvFit68q/VL8I6fkgmmEQ0KWhCUfWjvkhPovLytHhnt8g==","signatures":[{"sig":"MEQCICIrIx+jPr6QHL9Z5PTZwBy1QGAupqMYzLq1LAQYCZEmAiB58mwmeUIhc8f0FoMlULtb3jx7NGKg2sNYhBBTaWdGkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RR3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD4A/+MKwcSCrcxMlawTQxCEdfTYbYpWx2y0iuMlAloNcP5oGv8TH8\r\nvL6lFi8UyzUXwJCVjw36SWUD6/9979Aa/G59JyybiHzOuBiLnx4hxzydoKYf\r\nD3FHMbUbzPJ4/h93v7mQqHLtJUGyGhGdMQ5ZcOthWbO+PfIjZgudHBFbhD2E\r\ne3PzOHvakzL8z6AZ8OuXB6v7Zgn6Y/8TLpupjA0hq4qJKhlKgKwBWoBHlWtz\r\ncyjixYvBahwIhGL9RQ4Cm6ITg5t2LP2l9YtO5BZnloTmFbJr4X1/sZFQKT8c\r\nk/XXF0k0B+rYYHVip3LSqpm9/Ig8KjPt9R54/Js2wnXqCtMxIE5BYvq6YCb1\r\nxNuvW0qvIEezFCIVcVU/eJorwuG8DjLxPJrEk+hW8R7PSzAwcx7i43pZKFEy\r\nic3J+VT+zDdHjoXJX+kBMfv1gWRTGCXWcOMmCW0ywmOEtVbq89Y3ZxS3Ns9l\r\nEG/0u02+p0Gh9fCjb+K9ORLztQ+q2CqNSxyZltmzZy1b2Oxg95TQhHJsAGvS\r\nqZ1YIZ55YUI8NyBGav2tbHqldT0st1qUZqr2sVjWdERztKH8U6YRhGtJJ8aD\r\n7hTYPmh/kiHmnmXUSjXRXvewkWhAc9pX5ZGQY+kdxqrzk+2p+zFOyLaBC/dt\r\ngu/EcXTmi512k30Xfh5zAsXUg2yDp0LaLaM=\r\n=nhQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/focus-ring":"15.0.0-canary.de38de758.0","@material/touch-target":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.de38de758.0_1675957367048_0.3894441958133308","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/checkbox","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b650e79658cf56d3104f083b78244ddc380a2a2e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4d62de70c.0.tgz","fileCount":42,"integrity":"sha512-pEET9dcnTpsAMmtQSEBcAU3N8KySyQPQO7CGImlScALXoBntX1rerB1AOY8+7YLzuCVTAG+j2UugavUuEPYvgw==","signatures":[{"sig":"MEQCID3IBUHcnd3/+/80EBjFcsa9gThm8MVROOWCk/0cXV5EAiAb+Rk89WLVB/VfmvTVc9tsd/CJBzhTacaW0hKFuczC5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W2vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosGg//dnI049siXIgioNv3v/uKRrLlERZL7B5G4SNM8CrAoHQopGUk\r\nwGxi43CSlvHatEct2vS1EtxMwwpA7h70cuceL8Y0gMvhkmeWYdPDTkUUdScS\r\nfsL5oZlqIZ4NuYbve55yktffSItTK7ylRUlhaz8jEbY/rVo1IrSAtzyHmxxB\r\nzFd8pP/Ko4a96ImaQiNepRU+cV2eAENOa8ZLRKT+l4Q9HJAbMEML3Eip9UmZ\r\nfX2tCE6nVc6oAyH/Mv2HL4kUdTw3a/r/LwXEtZmrqjuzKpLpuDPoA5d/h/ou\r\nfB+lMA4CCBWGcfbnC6NEiwZajKLZDiCATM6X/04dWjH0a6aWK1wv8bqtATW5\r\nFniF1Wx+4AbPvLVw5IwcZBBPCRx/on/J1DoiLuIcXQkcfgdPN2UsNgsumJv5\r\nGM76G4R+FwuxZmrJMRA0AE6lbL+3dAD+oxNRw05ZNDHCLYOnHrBy/k9ppHbQ\r\nrLevbX+bRAk4HT+x1aJ2EAKxVi5fuqa37ZXaghNAK4YQouRk5kksVtxwnDVi\r\ni4NVbLJQVA/bcVnw8YnMPuFUWGT6SJdjGPd/1tQqpRuttR0R3ZdU3Y9XRfUY\r\n1cw1DRmx3Bw8ucXJ2RbSkdsGOySQtlUUVBEdcmMr8qecKKxIg7N0P1ncGGrU\r\nXzOQbJvfD97QQgMJB3qB6Zm+l36DoLonA9w=\r\n=U6L0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/focus-ring":"15.0.0-canary.4d62de70c.0","@material/touch-target":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4d62de70c.0_1675980207400_0.24597247700467006","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/checkbox","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b842e187691a29c31d57430a109c46b27b3b155f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6fcd8d418.0.tgz","fileCount":42,"integrity":"sha512-CWMdLEd/qx1P0v+T/6zHtAHzqdm5quYsIxsyGgTWFsq5xrnF0DlD9p6CzYeWL/p7XVxQToMXCTJQLBP7ZriYng==","signatures":[{"sig":"MEUCIDr9nkYP60lveZEg5FeaV/MSFIT9eGAFIFtmlGudz2VGAiEAsnZRprJWZEXHnOQZ79WdK7s/UaERbCeoxesg6i9UgfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iP3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgQg/+JHQNfXX79VjMCPhQH3NLEHT/hXvgM8gXqWTw2H+dBrlrq5J9\r\ntbI/S4GeqRWPXjzprM0WilDJ1fUjX/rP/RJauOo5NRHZSBzGwYH5lghroPJD\r\nN/D3HRyct5KfVn0NEACYbx2pwqY9zETQQAYZK1KiMI6ICUTMJmhEJ16L455b\r\n9q6JC1DOMDQn6BmAK8vrzZNmWR9pmgBStFcxFUtcc3PG3E9a4MsYaJK23IaS\r\n6HkLZBG7PLKzLewG3V5FZdOtgI6rKdVE4wfqywzSYSn6sejJH6xD0I7OeEnP\r\n0ziRE99gBj5qvTHnvxMGr4S45klfBL60khgIaIBMKznzn0fbBLwexQK2H2L0\r\nYC9ayXp9tu/CVd8estOcXMXY7ZW75eU6CL7ljFI4NW+55FzUnnqSvlmQiHyM\r\nd5wRO4ls5x+SzSPXyxOdcb8jm5gnJCSLlTLBAhgIMha/d7GbeiX1vh5G5NUC\r\n02kaAfu+1XD6EmaYhAXG9D5yI0r9vpwRNkqIweOO2kZKs5DVol5UmOhMPVtt\r\n+J/y8dxRmSSEKVRobQLJ7f6KXwRF1ATArXTuYhhWwsp92fC9bvFf6XpxjxOr\r\nyIgi02JSBH34TtEy9aqSfCyjMi+oACFvIIMWPR1hr2uxm/mUUlU1oQ1PbJjM\r\n/KrscDjLBwCmriLzvvQvjeEp+GOcQ4Qxv/0=\r\n=jPiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/focus-ring":"15.0.0-canary.6fcd8d418.0","@material/touch-target":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6fcd8d418.0_1676289014981_0.05771979368898372","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/checkbox","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.066d9439b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"923c5e702cab515c5e0d2e02de458fc10913c4c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.066d9439b.0.tgz","fileCount":42,"integrity":"sha512-FIkFMHh2KQ4mRZ3QE4zrKLaNf9ciUzCY1vRm23hpCYIT16E/Q8RX4riO5FSTJKRxGjT5viZ2rmwe5zZWB28+Lg==","signatures":[{"sig":"MEYCIQCXN1mY6v3a8o+z1Iz/j1cg7QyVFE0TjsdgTNsPKNafugIhALgI7DLPVaru44H2lTxux3ZnY6sihvqL38pHHnZjouev","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN8w//aohDq/fVILM89RdN0aBeZ9Ow1V5ie8tup3nOdHDL8Sx9uH2y\r\nJY9vzCeo0UxHGWs8Zzpu9HPvnrklXoPN1bw+8iUbzDIpO2aZU6jVKL0XaUwn\r\n8sfymvjnhLC29XzI1JLfmDJO1XbrWOJIQoo/xU3/ZhQxDunH8/QdZmFYKQA9\r\nUlYRdbEyRpzlWHzEi56UF1XCVqbbnAfcaOMhUFbDHumBmJ9ZM9UqZhiqXdyZ\r\ne+hqM6SpJKS74fflf/+I2LZWr69H3zVOHUpx/4dpZDG0dZfeiuiqj+W6Tf7X\r\n7ACJj+kCB689/WCQ/PhjozgC17GK8AALHONeKLfqT9hWmO0V9Fh6Arpd8v3T\r\nYWMyJQOVJ0tA14I13wOgzo+2wMiqH48Lk1/nyiA4EEfC21im89QuwVh0g1Y+\r\naM7HWPoxlB4BZWO7tNA00+ZAcnhqOA5i3mIagMcSuqTUdmD+rO2zndEwej3l\r\njX60gmrirOx1RAPi0CCIjU1DXv/sVjxYAsCns8MnqP41C56WYdW0P2XAa4UW\r\nbNyVwrQSm4N+PhPHFJ60bP5u/fHqkgF2G0wAHb/3tmIvleOR7EmHPsTqQdM+\r\nNv5IJv9iIiZXsUpzu/75WmXsAu+EKG+G0KH2IQ+0QRF2paoO+pnjX2eoxJwf\r\nARKrV/KLxvlNm64JwY2jP1TRfnT5uN+0t/I=\r\n=+O2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"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/density":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/focus-ring":"15.0.0-canary.066d9439b.0","@material/touch-target":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.066d9439b.0_1676491089796_0.7576339712071283","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/checkbox","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"662d1952c658f31df9db19fd5540e80dc00e7d90","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7ab32468c.0.tgz","fileCount":42,"integrity":"sha512-UYx/380Z8IePg5yGiT7TCIEcOEvAj8jSgUqBLlXlgfcGd4stsSWU/LhUVOZCb4IAI8zM00WembkzBxdadr0aiA==","signatures":[{"sig":"MEQCIBIal1Bh4xWXFhiGPhzbsjcdqtq0s7VzY7Lwe6jwkggsAiA9srWGkwlQRyiIHfwv101DFIG6bqYRfQPFyxc6qIHELA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q65ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmostg//WntsdiF8i/giBRFBmizVGI2trw3gXsivoEqQondOF7vIj0eJ\r\nGtDiAZ0vw/j03emT4cFYrkufsg7+3dD2O+kk1PnUrJ72pfvNnoBzhHViRuQh\r\n0XnaEBiDHY6XbgzkQTnTjTuFSKb1lzpCr+9VwVI70hGBOYB2TVukMtZYATuS\r\nrFQBrZPR7kEiPVruZe/hmBFItM5tWzt6kNkgKcCOhCfdvaqci/9m1jSfPwFZ\r\n/kfvxaQj4eFK3HM+6MqR4CYM5S0koa74DnFjnSaTbmpoyRROyv6ogTIVBG0L\r\njhfASkGu3HQeHDkwofEZ/qtJACvd+y6YnVDg2X0jr3b9wmICZOqwpIhxRGO1\r\nEksyKnrvj3WDhj7W6+yYXk7oxTPOhwc60VZzepd3lVAze7nyWi9ZEJVFxgCh\r\nWZx3cqdr4A1KaRCnnGIF7gRwMWIJuoGHkiZfkEs4lAlFSPB7Y41I38mhpEJd\r\nHQQVYeflgT4slI4Hezmdh7KdiGwKSReTx7GMxjSX2Rl+M0DqoWlyax+91Jc5\r\nt1SnOn+M/RFkmEVEJDUbM0TsyoWPs/UkP22NPPvEKvOSEhzg68or1xrsrSZ3\r\nwU3EVRgW+mUxrvjPJsoA5j9naYE781iGnOTDCiATUzNUtbf/Zg6HqzOfDe/4\r\nM97PteM24vJvuulLrqe+kEzNsWOlGu2HoC8=\r\n=0xL2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.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/density":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/focus-ring":"15.0.0-canary.7ab32468c.0","@material/touch-target":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7ab32468c.0_1677004473709_0.5132271652559384","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/checkbox","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a261ecd347f6c0f006f5f4db26a7cfff70c8c97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fa27ba61d.0.tgz","fileCount":42,"integrity":"sha512-NmhClpC0uP0xL0GlFyHTWBkJsBlwlW6Uue2CZIvhy+x1iL9X2tSoK6tWB1FbJkJwcaqArsQ1RPkVvZrffx3ESg==","signatures":[{"sig":"MEQCIC50ma43izZ8R8WfHgOc30ChIzc3etw+spcHwwE6oKatAiAP7pqD0IgIn9puHPLin9Qtg5Qo3WcrSWU8+KHTo3cn1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NgkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9ug/9HtrXo/3vfimLexTA/t/wUq1n/ie9f35cAaT9TVsWmWmwi0Iu\r\n894izTZU7EHWN1pTpftESV4cVUeYq4qn62iFV/QNhKJPnvFyv8M1m35SSWmc\r\nW+l8KFaG4sEtk8uZyTzG6zf6Lhx6YAmox9YCc3i8wHsnpSh21Z5IMX2N1oN9\r\nRL+Qn5pNAfPb8PTlReLWCIu3kCMd2nHOKpx/T+nsWqcvVDI57yyi5SAE+Coj\r\nEyjJf0RSEw5Vp9hu6kKyg1DNPhGyK4fv+4QIohWCmUSmHPO4G+OpkwaDk4a0\r\nzbNWHp08RKzNmYhrE+5aM+Gcd+mRp1V0R34D0SPhW3HkAfuiBiMfsVXFja5p\r\nG7c3K9/5g0jbOmyUyVlMrkNcxP2dFj9ce0hkbCZUn2XXkbemYxcQk4/Pq4MM\r\nQzd2d6EyDOt6xgl5SKwTZ3dzshYF/JtgJ+eWr+pJC27ZIU5U7R5nrA52cTU8\r\n1XIwT2HBgSLy0IIJ1wEclivhtwB0x6BbJocf2cy2/VfVSrHLAwdOgGeNemdT\r\ngorar+ys25Bf5luafvgoNNMXEzylguW1YAJbERtQKLKSwJVqdUFabPt2okm7\r\ndu0ZOazgHFYQtGRaFwcjqugK/R5uIPO4c4xv6jhQN8dxYlDQRR3KWRVgepqL\r\nmKzsMWDvuaL5TGkdmHmj6G6TeqEHNmJ07P4=\r\n=nUSm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.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/density":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/focus-ring":"15.0.0-canary.fa27ba61d.0","@material/touch-target":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fa27ba61d.0_1677514788006_0.7355044262059349","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/checkbox","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e5f7cd70ad739541b6ce062d2fb1da10e7dda01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.311ab4d4a.0.tgz","fileCount":42,"integrity":"sha512-YYCow6s19j+CxBV99IH8XSchGAmpHUmw7SKLPBKQbIK6/pfIXZw7oK75oSJe5kSfMHI950gvu96gTMSUIzStTg==","signatures":[{"sig":"MEUCIDDq1KSDGnIZH4TPFHK400xz4dTjDVsdhen6uA3/4VHAAiEA904dKaIIRHVLYpo4UzwL/iwVRh4d4Gc7xK6zNkUqPvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzyA/+OvbNwjX/KL1vRcK8agyiVf2SgufsXqRNVnv4qN1zLOVDnymH\r\nBQBSv1FqJiR+gAPtHdw3henjLABejt1Kr/JQv6ujHqU1yodp8V7ibUji3BU2\r\nwMiYeU5tjH5EFtUdABM0i8c6pUkwcbLZw1nMolh0jLP1VwbBaNfhEWG7/2dD\r\nOFBAGS9yfayyqdarLDRCRT2soLijOhosD7jajbd6rBo7vCDFmmkbWGVTVmXr\r\n32qf3S09VPGYHRkLtRKo1KOH/D3HQGUf+o5tHHzMsDhpmScVLgLMnBQIh2yY\r\nBqipYBhDWL5+7qqgWksE8UORvk00OTtqXHUSz+fPLt+m0MCNJYi47bekgcS2\r\n6+fC+at57RgAyqBpRRJw+BrrtknRynvwCHL38Uu4jsgo7/DsZmgJYpqEajY7\r\nprg2xbC3WacpPpak+uFoTXF/cbhxfGZ1aUk8z95oHBVUxNzpNUPb5cVmpDWw\r\nIAigr8GWOTiXbiDH+xvGSVOByOhB4DZUyg29aYzX33ClYO+hYm+DNKivDD5P\r\n1XwXNehDP+yHDja920aiELY0P0ohbKqLmvMXQeY+iO/EGEYkEvYzaDJif0Hf\r\nZDK4qRodpydn/Iz3lhqexA/sPZ/7K3+LamJkHmp6johNOQ7gegZOCJxVHfjo\r\nSeZPbuCbuVKClB5CCKVyaTIoMefh/y4ENHg=\r\n=h+BA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.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/density":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/focus-ring":"15.0.0-canary.311ab4d4a.0","@material/touch-target":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.311ab4d4a.0_1677516105343_0.4875295602769445","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/checkbox","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.901c83e77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5278a1530df58fbb61ed0b5691142a6ffe0f7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.901c83e77.0.tgz","fileCount":42,"integrity":"sha512-ASlJI/L/ckJBDOQ1yMBvrVGeECs2hlAyUirSpUfJtjMh6o5uI55aB2EhPKF+A9xFA08c8Iep6nGrF3hBnWwvDg==","signatures":[{"sig":"MEYCIQCOSwtuOHrkI7ye4BqrlvjIpJSyPhNvBKEmXWUkH9cgyAIhAM77pOWvT8Kwz7tPv2hNtqyZLUwnmLfuaEp//eBSrG9u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PErACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoqxAAgRwj836FxbOFEw1FgapE6OYhLAYzPn4dajKqOIzfAtKxgqhb\r\nViRbraaxujjUS/Y1/hmlGnWSIAzhkA3bDPhWDbZHhZtiy3j34ERbTeGEvwSQ\r\ngjC2kO54A8uU1GBexYmfuH+m0E4Xxfoy5VTIq6oXzTG0E4M2hj9JoPZowZhi\r\nh/3ADqOaiiXBXNm9ZhsiVb5S0zgBhc60mu0Wp9q5St2s/8k+wbd2vUxJWEkY\r\nexB70LPGNBjty1qDrtWgJHukEfhgByjtrWRIcbbsGzeVCMSUdggSwmM2+tO2\r\nkjpvMCfkMMcqLys2V9BzOHrEJEQsqr7Tj+5CmknYggeD5Go+pcGDdjLQtO4S\r\n87wwBRRNKXwnUQid1xNIp5ZpRMTv8jbO9gxSNVrBsSRZNO2dan27ApY8fsMW\r\nhTkWTjnBO/Z01z68tBZrofRS32o1FEVeBDUwJhoUOTyYUkgjxrji7V+K+421\r\nlXSbFPbHzgCBvdUMmfEasnWmIQY3yBrTMtJ9k2MfhZCX0Xz5jCWgB3Xll1Ol\r\ne716oKX5LecLGvReSbkrsUQVBB/jrWG333Sz70caQUmwOgrGuNGYBhmorHSO\r\nMpyChSlt4KEvs3LsqsseIO1yyq4EYY6GqB8HAL5eKv/M5sBPdoCA8K6rh8V8\r\nzHQGtVJOVo7iX+7TNj2WfSp4YYGq5qSteXg=\r\n=GQ9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.901c83e77.0","@material/rtl":"15.0.0-canary.901c83e77.0","@material/base":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/ripple":"15.0.0-canary.901c83e77.0","@material/density":"15.0.0-canary.901c83e77.0","@material/animation":"15.0.0-canary.901c83e77.0","@material/focus-ring":"15.0.0-canary.901c83e77.0","@material/touch-target":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.901c83e77.0_1677521194822_0.05966460287650355","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/checkbox","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e219ec743259932ae3a96da7c0bc759afd8194b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5cb8e2174.0.tgz","fileCount":42,"integrity":"sha512-m5s6Apg3yFzUFLRr3YYtIZQN5axm3NkLc/WnuAQI6uT3J9G9qtfKfVzd5Ci6TGBsDX3T/EroxC6u66p33Q2wxw==","signatures":[{"sig":"MEUCICu4XArVnaAWmPbOPNukw0JfoZ9PYGTgNgUBiDipmvh9AiEAn4WPG+O8GCtFEef2yvN4RrcTP/C0UeDQ3n7OdmbQ5dI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/376ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6ww//Ug/V8HqgQYTnJgoXvIpu1d6La1mG5T6EIES3MOpVmVfJBGJi\r\nPa5I7J09jTvS9PxjttXe7eLzynFq4Mll4zJ4GY3G46aRzWm8//QwXaMXDeYd\r\n6m15XXzzNg9tPQgNT0u4foDFWQuolQzVJeYuBW/lhJawm+mSHzokzTLBzFVI\r\nVHZ+hwnAaGaQZfBEqUAv+mfBK+4MLGa/q2muMC2Wz+u5fhBfVIKa1feWb1fq\r\nXGY8XSlmqm+SpPY75unF7nlOFgFYtndL7tDp8XcyHeLKhp/paAvXK4ZOva93\r\np8GnNkF8qz1f7zKZul0MlDexyNXskYTn+HgyjwQaZzbxEd4/zWf/A+sBdEvL\r\nH5LCT7enG8EYidFgefQEPZ/2C0aa+E4LJIM3E4FXvQks3jK+XoWSsLszSyy0\r\nx5+e0PRJfnKJDG6tlIbPYC7Nm9HnWH6hIvIji8hSRhRtNyhu9+Xrl74i3AP2\r\nCHnt4B3Vi/f7YZmD+1LqnZYkmOOfSsROeFnXkRppXM52XjXFAslyz0uy9KeY\r\nt5qyMFBR7W7F9dlGS1kDu4a5ES0YMtinbsRfjfxioY5AEbeQldVBx+tu3nhi\r\nDKqlR3V8fOM97pJR6gTFWAVzNAG9ASRaBsXbtYVzk/mbInbBxF1+09lpta7D\r\nLn5CnOxAX/v0pV6ZAoCy/BK/LzR20pD97Bs=\r\n=Yglo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.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/density":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/focus-ring":"15.0.0-canary.5cb8e2174.0","@material/touch-target":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5cb8e2174.0_1677688570535_0.8309909288121433","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/checkbox","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f32339937.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f713ec9b43a51cfbce1e4dde3f076c1141fdea66","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f32339937.0.tgz","fileCount":42,"integrity":"sha512-rBkVC9/pdxlFMPSkO5TkNj9lf/T40NCg9fYut3zvelXvIEAaeUzngKSdmVXZ/bI7fF8hp79TcxbmGe3ARWdBOg==","signatures":[{"sig":"MEYCIQCm0WXhU17LZ4W90br/smrPg5VrVfpXzADiS/C6S/GdUwIhANDs37P0Qpu6CQLtgMO+mx0eCMC5UtQNQElhhRwyCr4J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgOuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKaA//RSN8GdqRpiA8bU82giTVmfgiwVskNw7Nnv+FOIUPES5bpH6T\r\nEieSwTasLMG0R4i3jgPBCsyJ+Gi/rt3kbaHbgCiQfEO9kjVvDm6dBqy63qsh\r\ngU1m0M0KeFtRis0FeB1uo1mUylb+mmoEOFcqqrZUx9zX7WoxWLmUg6iJQOaf\r\n+j9D1JK5ix+kBruHFR+cioBvBJs5wdmC8mn+CevaZTT84ICCwMuJ7ZVhG+nm\r\nP2Usg8c80gNuDoyQz8oi6OARMPfuWg6kU8EtXY2nsn5M1wNnACYRe9DWBf1A\r\nnQvgscRHcOSath9OvoBTCi4dhMPwURxUrvW3Mf3tE1SFQDHKulXI8tQCQUgH\r\ngBYPcT/DVTCGD0OUg3lKGN33/MROXbYnSxv4HIMcwgg5NenUV8fpesbW+ubT\r\n6xobG1iPcerg8Ow9FslIxpUPbGwp3d5HYX+2ncuj9wPAwsqsPXGznJ6+WvQZ\r\n/+dtYFy8YtYWvFiOelyGOaP7QfbWPc1cRAl0SILcknsc4In7bk9nohpll3ZF\r\nnpVYbYnJ7JC+FAThmhX7ijIOXc8LfoBkKyD/XV9vczt5Kmw1Fsph+x6IGSUl\r\nyeRefEMPuTWDoX27uK27ytYyZSSoV+VSV7HIYSzgkPVI1WFcAjfOb+ScFUrY\r\nUwkxYDbjnmH/uPTEwsLF5p9rAi65nFUh3G0=\r\n=cF2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.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/density":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/focus-ring":"15.0.0-canary.f32339937.0","@material/touch-target":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f32339937.0_1678115757775_0.38117640295056576","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/checkbox","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d1056073686d389bb8446a7bc85774d2daca5dd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7644d63d5.0.tgz","fileCount":42,"integrity":"sha512-ox6Nia6snTG3CPyrIcHvvnylQaw87IfLzHOci9YNd+bK0353vYApl4YmkfS95pCfkF0HzVZ4ClbQdDigN8hWSQ==","signatures":[{"sig":"MEQCIB1ii0Zl1+iwH9yLaWmb92xkRWfu5TIPywBYL5c9NmQBAiAIebV6UssbXiI0qvuUiClV/L+lbzY8UafDrBZ/f46bUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqknw//SK7TFwHzW4PzuhmPgU7Gb3Cc7WoY1vU3XumQfbYC+cUhc7H1\r\n5IpXrGvWEiwHofOj7RYPuFq/eu2FS5Po85VPykY77396uUXPWiMT/DB8+VDl\r\nJayOzAEZFXDaSte37I7qdADpoTZsmeeysr15rxbkaB1kYyKXjUcyLD2OxL34\r\nHhI65S2HgWOgE6m3Rx8xrKKWeZ/Ci1KkJxwF3vU+M5CIWJxO3xErWjFPh0as\r\n+yzL7trhJnfTrnKiFkSXFvcmEwR39nQTeakrmj7kTc2eernjXycLwCenwUA+\r\nmzbIQ1dYg5pgKEhGJHGPCHbT8m4RcCEMLsfyiJsOz5u3JTsHmL/LpIHdU761\r\nhXkgXuokGpgrJNJDvf959NFWzrdwpSWd/UOG0D/NcONpoYzZ6xOv0bAXqKwF\r\nHqvAnqlt7ahg7JQS47OT1UKsX0Fle9kPB43xsVRnGLDlXwZSALeP8uiDOxsW\r\n/hW7onz8y2sQOORdqAr6OVsoMZv1TyoYN5GcHfJ3/zPzLzZlqpAzsaVjhnM/\r\nYw/o6vVcespbLbVHjVYGCItyvwH2NZ3eCb+Lg6Cuu2VPds0hyOndqsgTiKW/\r\nqO9sNFF346qBfpbgQmt7qGdQBcq0+LSybQceAwhO6wHPA0O8GeTrHOch9/Mg\r\ntuy3Urz3vuSFqAcBC8uI1MIoC0a7WwfsdUo=\r\n=miFA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.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/density":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/focus-ring":"15.0.0-canary.7644d63d5.0","@material/touch-target":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7644d63d5.0_1678141671612_0.3888841555807938","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/checkbox","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d96330c08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a3302dab0f5c1fbfb5fdd25df68f4f71155fd41","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d96330c08.0.tgz","fileCount":42,"integrity":"sha512-eTXwJI1Eo6OJ1LuKR2SwSVw1H7adcGb2hdjREe+cukuewj2cTv+nMN938PeoXG/T6N2bmuzfT7B5Lt2Y0VHjnQ==","signatures":[{"sig":"MEUCIQCT9ODmFvzaO1g1b0I3ti4l38CzmI7qmeP/KF7NjoBYhwIgZcBLYa0IHov55d2ez4lozyTuWK57Got3f8sdW8W6IBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM0A/9HriLXm6s9thaoSivLuOWdrM1014PyDIO8hf1r9qgA0DScqfn\r\nFHEocgOiyG98QLpAgOxPVF9rTV7/fBNqhSVfkiIGW4Tz9xjytX/UcJn9GLYz\r\nekOhzlE6LRgSzTVliQzfrRY/PjV6ZoPonAFglE9P+kiFRZ8j06u/PQ3UFriZ\r\np0LvI/+1C7Sh/BAN9Dhd3MYeSaiJkkuF8zUgRywPJgsSL2LiTLZKERWilHLo\r\nSQRfJk8Kuknvi1ZIpNkx9F0Tc5FlnVh0Pl/Tfp5960HAkAqBGY1gx68kOX0R\r\n6i6aiXRZgoWyJwMhrQAhFNK6R4eTttF13XMAU0HiBrQeBXOyxp69YXwFCyK4\r\nhbsw3Sgb5vuBBphxsSNBk9cNi8nxscX72R7bsF4b8ofpDgRoJ9awMW9R/R2g\r\nPWmGLReshSRRxbLRZ6nJZBFyV+UgskkavCkTMBsXSjVRBYqxqH71RpZtSPf6\r\nxQ2WcINxS5JbNJYUB1bPGd5XJGQTgxi0i02nrZykM09E0n20oVPher7l+cJO\r\nA2H+mWr3eikvQiKq4A5/PQjWAiTU/EUj5hyb60yCf0ANHcPALGg5vYg8WIrL\r\nJ9cLQeBl4kC1s8GJZPurUkkgFDvBLq2lzCu6wwGBBa5EA7tq1MkxALAQyX3x\r\nBg/SbJ6UsbvIL0JHE3QFBjQhhZxxIFF31ro=\r\n=LNNp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.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/density":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/focus-ring":"15.0.0-canary.d96330c08.0","@material/touch-target":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d96330c08.0_1678275731759_0.9085621081268092","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/checkbox","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0779048749b0fa69ea3bdf93184c2352d24aef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c99cae77c.0.tgz","fileCount":42,"integrity":"sha512-zSaq8REQmRBvQp8YaZ37vjO6nxlmoW3SDYLvnfyRt4clIkIwPzmfpEpYfxvzYQrvfK+9eK3yYzWZCmQiKleRmg==","signatures":[{"sig":"MEUCIQCBDpoQ6wOFr91cwujE/BWoFHln33Mw6Uk9lwSg/zkd0wIgH6OORu7s6KFSjEtWF0ISnuPQ/6CIR0htJb1gTQrk//o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqSA//XWkYhReElYGN/t3s/J+y85pPNEFGSHJurgPlzP1h7s6oT/CB\r\nyVdRCpavRFLiXrhZPVD5yj7b9UPDUmoCNGfTkQofbwQw4a6fzGDKNflTQdSV\r\nHWZ87w6+r05G+00Fyk9Bz4xMFfNjqxm9SoYqYew+MnG6lEORUIFXP3N8DP0e\r\njmjDtfmJPLlMASE5QpCKObsZ7ZWHH4Z9a+AgSXbyZq9hKH77sprvcjMx+oQE\r\nkkfTOtaF6lUnNQGyQreCZ43GxWhONiQMRSe9KT/vj7POfAoPdW/W+5A6nJit\r\nm42PBqEK+2kiFzT2P7snSEzTR6lnQgZZ8kRrT6bZEka/GPNRuFlkt8qbR/PY\r\nHo4zpqHkLfqWKfl/SiBb6B0HkIauOLLQxiS6i/I6iSAS5W8v7wSL7apqIsia\r\n4sjqMTc9HtCQpI6uqW5Q62GdguPtaYAZ+it8VCx96cKzybvW5SOm+PuZyFgZ\r\nWYKAFPg2hNFtHyShSSGsGzQnpqcBeEWeCRf2E3uXeaRJ3hLJ4j0Su7pQ3pW1\r\nrjZxPshTDyS25rg7N5y8QenchpCJP/BiOMjD8iWcu1QgJ+ey2PG8H43QB+V3\r\n/bboscrIdC/6coKvrcyO9mHMVHy7I5l/UNuSZPbFxkZoikgr8V+/WceZmBUA\r\neB9dKd4uoIiccy8Ty9iiYLcH3zs8Mkl0Sk0=\r\n=GXZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.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/density":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/focus-ring":"15.0.0-canary.c99cae77c.0","@material/touch-target":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c99cae77c.0_1678318998612_0.8878065300822131","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/checkbox","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc9b45fb053a17c7171c968d890cf469534ee76","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6023b1cd3.0.tgz","fileCount":42,"integrity":"sha512-+Wn7avF7kDTCHdvCx6HHRecfUiUXHOUyW1CcF4GEq9+czmlkne3dsvPGC4I0UpmkFbg+4XsvP8pPiLeThXthZQ==","signatures":[{"sig":"MEYCIQCLljOv1UfNRx9MrM4wZBtKEdT/y0beKz7AhaeoplV0BQIhAIy12Pik3nERWyWpbvBMUdY+uwXdjGQqf0BLmp2UiLMd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeykACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogyA//S43++T77vtalD89JW3gATSMVmIkocRPENfWhIUEoJbW82y1w\r\nhNE63db8soDej1+XwaN8JlqfTbz9TXNmUzAd+e3rAg/E5pkN3ABMs/Uc04Oq\r\nzEKzNRx9oTCNqGd8pHVj3DDyfukpWow0cqcn2GTRAj0g9ktwHXhL6+jYFASZ\r\ndvmn3MvXzIQZ/jO738DOPKcw/lr/NfvpMswO5K4kJSV7CFJMykX8blWToaL8\r\nbzsx7TqyKvtVXKrjhzybUeRLFLzW6TiHl2Lq2BF5Cbb4uX7WNsEQbQGi3/G2\r\nm/M6jkRHIq0JMB9lBaaIq1HYMmNUl1hbvYYQiCaYqu2UB1/OSERpGttoKWui\r\nyBzNQ78PDdfTah1Ql8JD/CRexQxYPmrvTiUk0D0Vyc3lsGJn3y2EcEFygiHw\r\ngVOtMjMZA2MzAsP7zpBJupzMEhxDzd9PRvGseUpdGFI2IESpUhOCPtQFp3UQ\r\nLcs+K+Gs4XcAK6embZ+YFwHW7j5dn2ys8fTYAnvset4LE3ia1zGawhrIjzmc\r\npJf8uRT9VewHRewFxo3n+l7C0HYCNr0jznMNbN7XMsBIUrdnZGHTmaSfidJg\r\nJiY4L1MesfTaq/2rQlBbUOmEpWdno9IwqpfxJQsdM4hOaYKqJI5TwraXPVwQ\r\nRCPspHQoY/I99C6DRcOonTzJi8mHmF39gKY=\r\n=I1Lh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.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/density":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/focus-ring":"15.0.0-canary.6023b1cd3.0","@material/touch-target":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6023b1cd3.0_1678372004644_0.23329450442836253","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/checkbox","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.274610c77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de5676dedc25117458b34fe8e79738e89dcb1dbc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.274610c77.0.tgz","fileCount":42,"integrity":"sha512-tB7gTJn2ttmkrsi0opUAWZAg7W/waC9PmU8MW97+V3W/qY8haZ3hLq13Tz9WAeFyKZdqktd6evLGTiPET6/Pfg==","signatures":[{"sig":"MEYCIQCQ8vx4kr/OZTQuvXcj2TDoGIPd/Kfvg7kdJ+IOdHpIiQIhAI56niNJWpzu8b+zVELHLUp03YVaGUgrBT85CEnRX0cT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD1Q/+NhOyELbO9vD5PIfq4hnF39UsduId9JSUYEESNlzLTKPM9Iav\r\nsd9BQPsb+nirGhqEu5ev271Pg+mPjdfvMS3Z1NH7gwwkF4ym3mVTYV1SaSH8\r\nJjp5ZXih/gRbcPDemqSbXn4IeH8v2/4WeTPnK1Kna9LX2/CFBbJLNvkwyR4x\r\nUjy43F1ULsxe2qVNg2X9XmmV5+6B1oOo7vkzaHrFlXOs/h30R8KsV0BEIO93\r\nPMOAtpmDm+a0oEn8FZcdksBjWi1bVCFZM0yFxZPuwtRqoZtQo/dnFSPAsB+n\r\nR+gTMjJCR6T1uRjsOEgNZ0mMQOhJfXIffJ0IdRzAveaRvi/YFl0ZwUB9m5A4\r\nzBUmqlsBCkxbg1mZEtyKRhbn7jNrunyznm6dBerTeCHvbSUkzwoVYRk4GFI/\r\noA07632O6D54RX0dTgNwdR5kuroydYusfaTEe/5jKRKPu3sL4IICemoVbfuQ\r\nm6qBKionL/VU6zXYNKOCymlyTOADejp9KMcAqdmw8RKs64XXMsgoImU5jspi\r\nQ1rfrYC8eLi6iuqdvU1KCQo3te6ONO0LEt4UgShKabD8D89wptLgOvD3xj1m\r\nXPLJznlr8sHlWm4r3UyiFSfDOTnk2wnBfPS2vccFKHCDxxuKHsURuZNw+ZaQ\r\nelC4+o/DO4GWU4TChBnE0T8bTGHVjRfPmwI=\r\n=voOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.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/density":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/focus-ring":"15.0.0-canary.274610c77.0","@material/touch-target":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.274610c77.0_1678373942711_0.5192856001887916","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/checkbox","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a274583b9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99a8a419f20df39b87508122bafb6550a17127c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a274583b9.0.tgz","fileCount":42,"integrity":"sha512-44y3BFocPaHMOOwwDEBhmalOyRFN2OgEuToXX16/iBb0wIbZ1dNn5ew+6jMfrck2zrEHR1BJmIdTZ34I46Mung==","signatures":[{"sig":"MEUCIQD3v4qjpX3iyKAByEQ5rtCusJRUulib7mziSngfyOdu8AIgVEciaqP9wl0LdUfRZq1bCA7mdbzXh9Cyo23CYwm3cww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Bw//dVLD41r+1FVbtKhFqlwzJkPNwVzORdPZngtnFEzuJyl42/1G\r\ncaYHfMURhJ8UTcLeMULo79TlWNKiKxwst8bmXDFQVzufGkCPZOdGKjYLRSt6\r\nY8P88HDwPSRBt6vDJRB0U0Qj4CXU04SNI9O+IxXNpBpPWPeDfEiOFTd4ZBsU\r\nX9ApPwgGlc6q2ujO858RNnH5qHp09d7AzKWX20YBYyAPdsudmA1TrYEGXYjZ\r\nqpNLc51WWwYGAq3HKLoehn7XkEkdS7p7MqSR8H6t2T1gRyZYr1tgGKiuzJ2L\r\ncW2xyjVSbSPQXiRWJdISPI1MxWcp3TSjJCR8Y9bM/HU0tuEmvwvbD9FYfNpc\r\nFKE8cZjNLL4FqTdMhN8rUF2N37rmWsEJFmt0+KuAVPG/cheUOFN23slQf+ld\r\nCuA8VtFvTJKEWVwmSB6KQIo8E9kjTmeWsaF4rOKMMAtaDY/P0EMmTUQDlv9D\r\n3g6MYc6d6qE7WCYRpTl6W/J+sn35gdbuwjXTBSX1h1oczb9FMhwJlfdBpLwG\r\nu7AEM1kIrNRPSDMpfTgsTNeionSvXUka/0Wvix5Lwzat8aGNH/4ZBm0PWxeh\r\nFXcJaYtIXbMbqBHYlRNUnB8rptJNxEhpLHPM1IZgnbH2gl0EdmqxR0BNeruA\r\n5AKKmfmRuf00xU050qUvPUzwvAUzyAc+BU0=\r\n=lUl4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.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/density":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/focus-ring":"15.0.0-canary.a274583b9.0","@material/touch-target":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a274583b9.0_1678391581120_0.1427936538959611","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/checkbox","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.da22ca960.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3471de49a539cf8803f2f3995a5496daf752c88","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.da22ca960.0.tgz","fileCount":42,"integrity":"sha512-ixnv0g//wRsxAJhRCq1wznKQ3y8VpOBRwPc+3IqjYP4TvRTO3vgDeQ/vi4NEEJSqGDPTWVHk4yujJOp+Z23Ojg==","signatures":[{"sig":"MEYCIQC+MseeX40YzhTg/j4kKZe5t4noBW8FQWD7UVbAqu+QyQIhAO1cjwAgSxOYu5BygP/ZOHebpPcndEShP9sxD66XgVEL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6WhAAmYRsvp9urJFICYMi41jsJWEh9o4uY5wsKJ7OVShlNCssKdIO\r\nwkUoslBBgirRC44eo2ohJzauCOwS+WcVzRr4/50gH+4DRPhl3K19tIILJk7l\r\nFNZdJIShoGKV7hmTbz/+T7+O3ELYkJ4z3a/hbWGaOuU3g+w9lj6/ln5PGAzq\r\nL9Y7V4U3ITYQELYEKbr6kR4TeRNbQNBrLuUSZGrogBo1ThlbUmmPCx7bWTt4\r\nAkpUOyMRO7ri0jswB9daQOa4xOIwRP31zz2f/xN7dPIps/1NPl0AjHG5qw5u\r\n/G7KdowoUVzrlIje1h6gWw5YzZqESdTbHX5VqLKxRk0Wezabx09mBnehoucO\r\nJbbcQ+lPNvlKrLB1ljzN3TUJI9fV0QI2q6yjtbfljGj9veSLpIsGFDMepuga\r\n6dDuMCoBFDZGY3H4E4rnqHtZ0Q2KmchhTIvhVYyCAsPVkJHRUjO1JgE5t7p1\r\ntCXpwuF+5guAgX41QJdc/++kbb6XxXNzc+ePznyxjqaRiC330XaRj7avdWP7\r\nEE2nNkeeNmK9v1g8BopRFyPlKDR+QP5c6d6oGK11y44piFjDEAuGhYjbnQy3\r\nb6mwCdEntUFeXJyu+AONLHSmlHjL/YD14g+IebTuW50xL8N/s4GWXWMPy0zi\r\nHfov1UbaulZa33xdwbeWttU0MWjMONLrpBs=\r\n=DlIF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da22ca960.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/density":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/focus-ring":"15.0.0-canary.da22ca960.0","@material/touch-target":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.da22ca960.0_1678393115618_0.2761359910829322","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/checkbox","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4edd05421029641b0460d53e26ee8ea37afb88cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.304a94e8b.0.tgz","fileCount":42,"integrity":"sha512-c547pA2KqY9c6jrFqC6ettzGWvqysn2gN4xRcajbxokb+HzAfEiEzglwSryoLMddKzJlSbrksisCa7Ij11ioEg==","signatures":[{"sig":"MEUCIQC53w9u0Odzwk10WQfIJegL74R3OkRHOiWKJmQw5KmUAwIgPwxiqQF7wSJ45IxYe8izwXxVlze6u+Nmr6mGgSTxqdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkViACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOpA/8Cx3z2mnWMUWmMfbjLA+NJRqprOuRgTauLLiyoyMiC51YXIA+\r\n2NFd1I9PbvOfnxZKO/h0XxCx6jS1DKERtY39GVym+VSmF1UJQ3JZBkXK+3Np\r\nriDD3Am4L9O88aGM+An7OI9d6tDLdd9tlZsDY3X0Ziy0TNin1Ve2y9qwY1zW\r\nImgoL5sZmHfyeEEhVJ9Sgyn/4uThql8lD8d4LLbWuJendoidD44uSQQCrSyo\r\nw57oCb8lYMUTp6ymSUP0yTZ/VqVZBXvmWD0sonaPIDqDHwtRmb9W3UgCyr+I\r\nbPPPqSDEypMLiM1BnpFiUYwuPClbWFo95EafMdZbnCcRAMaJC29F9IrsQ6sD\r\nqhxqCdoMe+D3S8HNmgRv5wqxas8vwvvEJjNDp7Qlr7xymjz46t8d4rR2eCJM\r\n5ylQ/MBHZeXFgD7FxftIKdKZT6Eja4r7cwLz8UH7+VziuIbkX+sRtlKHKvQC\r\nTHcDLng97bbg6n6Hzcj6YbZQ9nbiH/fb6Rf2AuLzcoFANIsUm8PumDOLwdTo\r\n78bItr+emBHUdW5hVJYtZi8JyPag+0mubCyFc9QHQlj4nuuXPCJFUtNhs48c\r\nSBv3cuggxmzmZKMnqe15G8qFoVaZySk/ENQbTcQtr5yX9x5zoakpUMKH5S/k\r\n+zkA5++nYLOu9bJME/i/rb3u1pbQ0HS3hpo=\r\n=60T5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.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/density":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/focus-ring":"15.0.0-canary.304a94e8b.0","@material/touch-target":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.304a94e8b.0_1678394722256_0.8994692602812844","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/checkbox","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6c265915c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884ae609e88891bf2c2e8a152d0afdf721cb9f34","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6c265915c.0.tgz","fileCount":42,"integrity":"sha512-p9BgOrOi7v5EvoT/1wEpF+f35YrEmXTn1CYf8R9i0O8fC5STG9CrS6viiboI/URaDpDXn7ooG9vo86fFUkvnrg==","signatures":[{"sig":"MEQCIANJkxp39jnySKCKUwvpmMyhbAJB8aty6Ye5/GX/N78OAiAOtHAGp/l1b72YAVNh9h4Bp35p5WTya0K5aZol1A7Apg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+sA/+N5Vi1yq65dk/s2ZJznTA0xalVKrBj6xtbtrfNwnbxM7IGPap\r\nv/0+8AWXEUHur/3bScmDhxHxJC2voR6uRrvaiLjYbzeAyhXeO88vt55G2mn/\r\nZSb9QEblc5lNfbAdOnUaokQ041zyMBnU5y80DqFiB3bURcbCAEnF7oqZ/5ZT\r\nZGzlENG+pGzIEqC22TxSZ99EizCrXyXeMvfhOOHmN57Prbn2wzS2EUPTxZW1\r\nBEaY18e+Lab/MfglbM0y1oT78aHSEq64EzPE5TTaCoPOcdHIpn8k91ry09Xv\r\nDZJdtkkIrRSR4wZ+eq3JEyvkXvRWDR2s351JP/p741XTFb0bth/P6nM9iUq1\r\nvYRktxu06XbH1oXrlUJApPfwoZUV33fmnlZB7dpDdWeDU6kPQgzK5RfMZ90+\r\ncPOuOjNdaMBBftLcx/7XxhmYQ827yprwNLmMhQ8TouzuZArgNjBDsaxqLLxT\r\nY5M/2IakOf89az1SF+sBcWlebGCD59IaDoHCgTmnLAB1Qqg5sowXogm5Ap8h\r\n3hf08yI1IqeIta5iYmdoeP42wFDIChT2EywkrXQVeTtYJnKuKppbg/itTzv1\r\nv/S+/XZgSxm1j5IvCG8XLCz9U8ePxkcJ5H5mKHFRqjMMw8NFhUuGYFwvysBC\r\nDKYtEGqtfyCpezSpkB9WB4uJRPhSj/D7oT4=\r\n=mHWK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.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/density":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/focus-ring":"15.0.0-canary.6c265915c.0","@material/touch-target":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6c265915c.0_1678398458395_0.5147904254035012","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/checkbox","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.de5224633.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"931b4ebd2875d08d09e0bc500e3784e3c0c8d71e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.de5224633.0.tgz","fileCount":42,"integrity":"sha512-nVa2EimcQHPkjhy0UWU79Zq3sfbTvTHcjqXwcMGiwjGTkN1T894Us4Wjlsy9uRvwnMk5hT8EkG3B4QUQ7yrYsA==","signatures":[{"sig":"MEQCICThMWvEduivNUZRY4UFIbWbZSS0I5yYzHNmToSNQ30+AiAqFqd3/GfzEnAwCqmAGS09IK7XsuDj7jikJQ23pf8k4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdZQ//SX2EIl9HgwQUBpJM/t7djnl4z3I1K6VNfpTRvGLigRVg7ca5\r\nb60zuBqwrU3dl9Z/GSXPnIjqqZKDQeGGeyzCdPDm7K3/m+ImkfeeAiOqg10K\r\nhaklVOHC7NtZY1Jt3tCocfCRyUXbK9FVx7BNiPYesOJr6NeWxLNXUenIZmvo\r\nbFobHZ6UI5w74Q+1EmFLO6pQyflJi+SSyvZZJoYB3U7MVoOMI6wlU/NcjKEK\r\nhaFNd/JA9Ulnc69KyL8ucpvbZh8PmleVmSrRW0psxUuvClAKM8hrwcdRbHxC\r\n46qzfMYZx1CSYqWx/GTZttJgq749kXw3b46808RXzcOgJKi7SYdBt9C24YhJ\r\nL3l8J5Qb7zYnd49tlTS+K3/rjUjAg+nR7NhgldSG+fAUFlUvqtQAkCaGFy4l\r\nyn1d6volwoCdCE7bbUzuL+39oFTYHUYjFAmFKnjlu0jll6KKolrh0RCCPG+9\r\nOoxFfmtd8dHzGNvW4BmdhEnMG3djuqP7coO/OLKnnBMgdY4HAZSZ4AfsUMih\r\nx4EnHFu/zqsCzE4uz4SXWf5gCHAwabCFhf30dyBrc+i6l1asB1TQobfUQSu0\r\nsSatldDqIBMi0V2dF+k3qNqnN3MGzbmxHA5OMBuOju4mNIC6O97014vKgK+D\r\nanMfcS8DAIiDJhc9kN84gV49ZZzvmF9iJCk=\r\n=lFMq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.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/density":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/focus-ring":"15.0.0-canary.de5224633.0","@material/touch-target":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.de5224633.0_1678406164667_0.7778274237331153","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/checkbox","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8879557e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4426b4aa7586f454fc4daf9d0932edaee3033f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8879557e6.0.tgz","fileCount":42,"integrity":"sha512-e4vk/MNWZErWulPPbC/TVMoxxgZVSjC47W1lTKGdkwpmcQvPeMITu5UIcIzJBlXuyTyQZZf/t96j5c456jd+sw==","signatures":[{"sig":"MEUCIGnmJA6WfjjXcUWw/wN20LAL3Ctm6zdHJfXIw255Cxb8AiEA+x2waaE4+v6wx4qK5/WHD36w/LiC9DyAc53v5glKChw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOeg/+MhlFW/NKU8ruM4tWO9jI89Rwon13a1kUMvESY8OudM36UogY\r\nH8RyGUfgGEor0FqxgiOBHS0WXr2BvwoZs5Erkk7SD2cCNEprPA4nVcMvTWeA\r\ntUGBrggWMzFTuGkJ4IeVlQi1LhNdlqElxTa8SpwPRAW8yxr2+cO/AeZjR6lq\r\n3zzuFDvp+kb9IIJsmvLzCWL+s/EqEFxzmufrW6qW6k0HsuIt3Drtkl+r+i7t\r\nLxd3SWjy1HWqnnaqxSttvBSceQPyBtjk42MiMo663Ya1mD4UNAhbODq/6wHS\r\nqiJw2GusLaNglibeQgymMPsyLPLNPYyo2EuePiZkCzTEhIZsNUvkjdMZ3A1t\r\nO+BEIbPIs2VEbt26TeMo4UuYXafvKSudbtNcdhymyOePm34YIKzWQsJ8NGt0\r\n70ZY8rapExKhMA+sPGEeQits0CS3pgj3+ZBxFx4QOF11k3Gw0ozQwmOGE21R\r\nmaL0ozbADWL0GQBPOTpTwfttwiMYFwMLuBLFy2fazbmqGlehrwQr5cxs46nT\r\ndVSCWMKXSjW7rce4reKz9CdX1T0ucJL9FYnJ6ECYBStdgXVMKbLh+h4WGDon\r\ncD9gBA8FMtCm0//3yQrEBQLCvhmsbGkYOxY5nQtNCW7M+O3Fix8sBASmtZEs\r\nY3/FtENF1WA8Ao/TpVe2pQ/shgkmiHLCZVo=\r\n=3ybY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.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/density":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/focus-ring":"15.0.0-canary.8879557e6.0","@material/touch-target":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8879557e6.0_1678457294643_0.8488921931090303","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/checkbox","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.23073a303.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f47c9884e91cebe6a9d0f27a4ae7641607b12df3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.23073a303.0.tgz","fileCount":42,"integrity":"sha512-iNakHUa87wopD7sR4e653IfY9puCUL6YZu8zUKW4FRCJImhFEKshxIzRDWpQABfe/EOFDED3bXVGtzQ5slo89w==","signatures":[{"sig":"MEUCIQDVK68RvzwlSmlL3Edf7b6WKlOU4q4GKGKn45ZSedwerQIgDCrGWtqN0mz6C8b0erdz6vOPR1eIPRq60gbWKfxQ+lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCztzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh5A//dcYo7FsI+CdQJNWdCs4Jn8Xwr4+MKo8fwVFkCSgJNsBvjZDT\r\nzeXNmyUtGf/sX6G2IQcd5w3dr4e/1aFtFvLwMxSsWm2cL5PAqx30VL+Dtub3\r\np1GBckKb6R7jnBS+Dx7OVcVTxs4LMqwamGpsAjmUdVAEBMacT8z7PSWw5ccS\r\nbHB0DccB3iysID9bW3ry98FMad6/2ZEd8lddMrRARtSWeJW8tm967Rl29bAF\r\n/k2ZYUixcOd+R2Fx4YtKZDo4zsHeJFw0lx2glld0ib7EICXul2qCOgYou7q7\r\nMD38COYNJzfDU0kuX9rwOzYCKG0kTNmGDeGy/787DDxDBpihVPF+hZBnTMaa\r\n0MFJfLz9hoOz8Tvjf+ARdFsInNBBUHqIUirVTqt0kJyc0JjwkFjYiGk2bTAv\r\nlc6JpcPvPMCwN2C6t9wbNs5a0r21+RBmVdeqTM5gIV0gt4A1hFae3+QvTrHg\r\nAmyniVGNrXiotulbGlIW6uyZhvrv+L8jw0gLz5dLVTl1MnHlS/jKtydzpqgB\r\nHfHP6YPmQ8RsQzkaM96j/2xonoXked17+8P59jdLOjRYbU3fDkt39wWcRLAD\r\nmEtq4i877g+VYGhbwkCOcZ2UL592YL+7dUeHdsndJCtRlIz1S7f6etESC5+L\r\nZUkMpu3qYWGqYln+5TqaE+ikIl1egUByqmM=\r\n=OGcx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.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/density":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/focus-ring":"15.0.0-canary.23073a303.0","@material/touch-target":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.23073a303.0_1678457714885_0.18832833669576","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/checkbox","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7bbf0a6f87b852bb1e798a743d144cc7e427143","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.51c7d4014.0.tgz","fileCount":42,"integrity":"sha512-XgrA5CQxDQo0lHCqz6N2AYxWVWNLHD29fN+oOA6ejJAsWhxLpmodugeKM635Xf92zhMrnCInQwpxcs0UgTPDGQ==","signatures":[{"sig":"MEUCIHujblQ8yGvk4AIRm599lBKnijbHzWQvs7aqybWN67EOAiEA5B7qRaepSrX/hIAGdrW7SqH/DHyZNv8QtwBrQW+AfeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC18wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRqxAAjENps1d4GMlZ3EDNvtMoiRNbXqQBMLyy1vxkya6/S5SCcEwg\r\nVlGuPmEhw+6w6Xr6u2YJeMJzXtTmLMmfSXwJnaLabMpPBECxhhgJcD6lZwAw\r\npNmnNqogvU1gSPIQCiC4kSLN+MGnU12ot/12Tv4WlfK5durxg4PG4H1oPF4S\r\n4zvolfvGr6aVycH083VggPx0WXCxzxIk6G/7DzfRJt2w660SF6ZFkG0fxg+g\r\nZB0M2LjLRTZydT2H+Hnb+L8qUVzL3eGNuxigXYDXsCwMGsvDjHze5E3uhjtu\r\n6r3UqLJ67GgiPXsMHNrSiiH+EP24YwiUbwa1YbqXqhQkP8OmWIn3KMt1tKxo\r\n0mC/utxDY/zIDPwugOBjpOOsVBhYtkZsUUGrTqzgsQyeTVNBybDXkKWNCVW4\r\nsG4YoUNY2UYU3Hkd5YHczgrVxIoByUUPLqliNPP8RC745+ZTEWzfSZ//BfH5\r\nA3N0XXQtwzKe5rNd+qbICiHvZzR3ZAHZxabGWdgiojcR9+zK6iD6sVKPCLsd\r\n6f0QoxhFOmNczGxKL6k0ZkBFMpqAXLtfLJbFm8qhyQFF04N0I5swy4q2DtnP\r\nFTWB/vyd5qBZAdlJUmgFhYDk+zpWZYJUOPB+/XfsOwvSRy6r8/zx2EvzLJmY\r\nn8gXKHjm4grCBF2ldIh12rqgl9B2Roo9l4A=\r\n=zjxJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.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/density":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/focus-ring":"15.0.0-canary.51c7d4014.0","@material/touch-target":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.51c7d4014.0_1678466864628_0.7953250876774036","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/checkbox","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9341380cd295e94840b252cbd362d5c4ca9d8b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1175a5be0.0.tgz","fileCount":42,"integrity":"sha512-ryEsV4Zid2rPllFzA/SlpJymww1d3AEP+J/jXyBBr0L9dBgUbaaHn0IyxnSH6K/Xj7K6PPFBNLr6TJ+ddUBSCw==","signatures":[{"sig":"MEUCIDxL+lOlYEXhVAKFNXK2LP7rt3qGd59f/gDIMaKZEi7pAiEAoLWBh1dakXJ2zn3KSkNci2+vVdgz1guVN1kYIZFrmIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5eWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOpg//UMAa4vDIFCnyViHwysyo3u2Hff5GX1JrWBwHah5UiRJmxPp6\r\n6POGBQ0hVzgKv724ofmaGQx+ZBMLdukgUNRvS4/2Wh8+502vlmBLXeyjpFLp\r\nqUvDBddHmBmWlm+kM/hLwTKKcKwG3dteaC5QjSIEGbthlcgp6/5EPAY+6MXQ\r\ntawrbWduY2zL8zaNA6WDBxyDnH/vOF21WP0V3HcmIWO13DaWc805vVGHmcd+\r\nBpgjrXk5N894CGwhp0KShWeSawug6o20vYwdAqUkrMJKVOSPs/32wjr/3Tn2\r\nDRo6v7IKu8D2rfPveoIKOTVHoNqYE5P4OvU2H8YscjRADSsVNvUGjWqgrFsS\r\nXjwBmEI/6yXoRczRf55la5wIO7xyMjL2kMmFqtuaPCbirn6bDNa8JTNw+taV\r\nI1jM5fY2AeDK8786tiv2NZ/Sm2TGesIJ85qIgW6O/hte4f8b6U8XE++4qWKs\r\nrMMHrSS1lxdsa2fSh0WWUgYlAFjq1ZhaOp87hl4eeHm8uUaS/zyQrIzq9pEq\r\nb4KJlBvLngfo+oMINeYw2LmgTmwuXSejdPt0TQsj9+85zFy5Ia/suxeDxL2M\r\nMTzTP0EjzUlkI4ESJvdwIp/GmaGbJQc7pBKolgb1ISGBQ3hJfaBUDVbEUnsQ\r\neodDsePLzjzl6x6mgsTrYN31MZ+jBCOboHc=\r\n=x2Kr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.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/density":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/focus-ring":"15.0.0-canary.1175a5be0.0","@material/touch-target":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1175a5be0.0_1678481302609_0.8278234578748094","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/checkbox","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b92ccd90819f1bd265c68e5e4c9658981d1921","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7adf3af80.0.tgz","fileCount":42,"integrity":"sha512-m2q3HiQWf93wxsL0itUfaPC3QzFT+LY25zQJy2NdgynjQGVxTASO7/uOcWIBKxeEOjD6fuXW9zdghDV6rmzIuw==","signatures":[{"sig":"MEQCICisrL+c27Ub6CTa2RZJ6VbPYop8ALNll15tWI1dwu8LAiA1Zfg5Gqc0HHQ4c/q6oaqdMTHGnjRNF+VqR39HYbILHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9iAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKUBAAml2yWQAuRyKMj2AB23I89rYt/1xp9JbrIdOVh3jqmNHw8Mn9\r\nSpKkyX+UqMFsFJwhLjkD+9YsJGC66Lq2LPdYGw/Xqy5VY6H4tSCw838o4Q71\r\nMdswn38pvsT1nlqbZmAtgzjYrMYJvB9VYkJJ499veBquYOzAHBa2GE+uPg2U\r\na6uyfm6pPakT7x8miHrWbJnA1LcJ9b3/qazUltocVEXTieXYSXaAmcCDLpqd\r\nA+9wK5mz9rj1NUFs7+MwVgu07agbsmasU+WkkWbZXz2IQx08Sm2aFLtaXHa3\r\nR3b4o29HVGa4EiNwmNpY6v10+JJUHsllEV+H5Gn4fh2nMfK1Vot94ARFX9Nn\r\nofoXjy8p6kLszS/GnjiZ/yXlDupdnLiUse9jr01CAEX4+OFNzc9lhgMwZ9lO\r\n+pXkAw+bf1Uq2L2y71lqF7iZU4b9L5sew9Sr1zYFF8MgWUi77mEpCnfMqj1P\r\nfyGQBHCW3+Q1KrOfxsKQ8EZc/g4wcnVIwOijzYyWNTq7b0wiyLYORwbBC/Lb\r\nZkKZn0QNE5h2BWxMEf1vJgAyeXvuFBNwQfFo1aPXsqJ1Qx0RhIuiOV9kkhBN\r\n7rJB0H6f1+CLAU+SoUh1f7Ob9d5ezaNpRQnvUGsCHI4o5CAHYwDJhd8iNczp\r\nh2XoTgxSftYq6Gek3lgVdYwp+/nRzshTmog=\r\n=ZLzO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.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/density":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/focus-ring":"15.0.0-canary.7adf3af80.0","@material/touch-target":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7adf3af80.0_1678497920628_0.30799663816003786","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/checkbox","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.82554d770.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a23ba293fb81940e49f145aa2dfa0814eb205c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.82554d770.0.tgz","fileCount":42,"integrity":"sha512-huqS4pZTkcrAFvkSi+tJMApf1eM8zLnRRk8NnwTNcK/MebB/l3N7euT96fCRjjEb9joZn0VOgsvCsPVOej0scA==","signatures":[{"sig":"MEYCIQCZyyaeofsg+lu90bEe6H0QRv6Jvr2rNniW5dSP52C3gQIhALCdVMA6+YjVd7Ye1QN4YYQylwaxKFuIT5/uiW1N+qaa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0XA//aOSRkK8R9C2BYYVyOTH2ePUbKpGfrEXQ98ypYtgyRHKn4581\r\nBNeyl1AVKOGpFXzoh3VoO/8k/yOfwiNutPIjbN6KKv8NSUHvI7BQmGWnuOad\r\ngVMKtAGOxm+ptTdsY7AvHGHJjz01kxLaPcqv/vqRA/A9JVU4+E+e2/DDJgMS\r\nJZJb1yd8a+1koGnmLIeLf5Y7b5Bsjt1fADH3zzk6C7rAQu21hjSDu94FzpGj\r\nbfWqdBS0ENfaBDyrfQh5weH2N5AURgMJEi9jrib1aiz5vbZVyKcuUS1/fzQo\r\n9reAJmji3YBfSsEtRXpXhkZWiXiLb8ZCwQHNkdPLoGaiSCffPWE+2T4eaFPU\r\nPFERdl89yHaARrmbk/eWJawhP9eim8ibVgFKlK2NfpaP8akuj6y37zFAHzFV\r\nbSQu+IwEaq/pymU27zfpSCGET1coBNfK2ODj0PHYNusmf5I7qB52BZns7KG4\r\nubzZWmH/3HXvbINEBEKFQ0loDc6aoP7UOsHNE98jTvLJ3vqw2DEdetit4L6a\r\nT88pBglVQUmqPQYwcUm81Toi/lvQFiTq+wGoYfcLa5Y2FtBIMll2bxs89H6Z\r\nXujLn/YAfqCujVQHmrHL7IpKdpCpPIWQMqC0o9UFIF8Ot0stX6hcUrqT2GaB\r\npmBW8mekImBPPJ+8wMBWBEUjuwsQU2wUyuk=\r\n=QhGS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.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/density":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/focus-ring":"15.0.0-canary.82554d770.0","@material/touch-target":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.82554d770.0_1678498655608_0.3201016847708247","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/checkbox","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f8028e69dbf084b8109c66d2a7d2abcafc469a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.93fc524b7.0.tgz","fileCount":42,"integrity":"sha512-it85+grebM/RKyJAw+Y0HUoTsZSDhalfHNq72U+EDxWerCHzcM9oqHQAZgVaGsciZwt0JP6SCNn5SC6UcVoc0w==","signatures":[{"sig":"MEUCIFRvUPYn+kujwxgnCXTfWAx2r6kAHOu7gne0sob8rojYAiEA7Dkd9oa8ZTlZkznQ56yRAYS49+vm8OCZY3RPaRJlnkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuEvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz9BAAn1ClNsONXVGpdMibblHf9rejWRVHB7mj4LL4529lvQNa9O/b\r\ncSdHoYYMdneTT0QRnMebhoclz8JXYFoqbROMi+L5DULf6KRaUXtzl3cslgj6\r\nK9yD0/LFXvl9yYX0mto3cPrtiwLcgSahvn8c5C8qH+tA2xXjf1K8dPCYDgqc\r\nE1nxvZrucBE1TG0fl5k6ZkdHoCAMR9UiiPv82vHHtlnkBb5uqMHfce9L/Las\r\nBY81G/VTmqQBiEzwx8rEV1uaLyeXY/7XVbEfrbjFb1Xcy8bi+GZ4fjGsuFi5\r\nEaWcPbF/qG7wFeXytiy6egImwS3XDIOr5hIzcDSJ1macoLzBFu/5BeNk+Gqt\r\nKl9NOcTxiciDwfoppH5GdDnH8KbdUmAZhAtv/BGW+6vniU1dlqkR36OcVL8O\r\n9FBntxmAIihBWsisoU0GXrVXO794kR0JQlJ7+xqqdytC+Fe12r8OkZM3zDDD\r\nqzyDziueCx3n63YmQ69fbzWmUFl5Tal+w3f8lJMEB5sJLDf6H7dcovuXbLMn\r\nDZotsvgutzKM+d8UL8d2vTgvZP9sPdRWQDEv45SV21BBbUfZ/Y+EL9bNSyoQ\r\nHHmrvpfh2jLjFEcIUpjolTZaIxvI9+hX7qDIxWw9R85J6D6mp9s6rD8U+i50\r\nm91b+g5Lyi+EgUWjHHbC7mHmoh0P4she/Rc=\r\n=ckjz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.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/density":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/focus-ring":"15.0.0-canary.93fc524b7.0","@material/touch-target":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.93fc524b7.0_1678696750823_0.5782513630555592","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/checkbox","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09eb8123cb5eb3a21c2152297bbd7b0a563ae4af","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.50be0fbae.0.tgz","fileCount":42,"integrity":"sha512-1Qrsg9yliLyzQABFTr78xyVjFTBBnHobVveeZI/7yMOtnpMH0do6HaDpyZCSZq6ojOMXj9eYjyIV5I7I/kPFzw==","signatures":[{"sig":"MEUCIQDOAowTYPYAPutDWGzA2ww7uonMffHADzyQzYc9Z5UWmQIgfMmmBJ+cHdTb/YEpqE732+zf5f0N+PPNR1hVcn1J/84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2EAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjQg//aSvPUG8xW+ieH3IlGJHUpAPG4FfQsR0kUObB8oIRQUUmjECV\r\noKiSsp7qlo9I3xlUen3OY39DCNW8CPuHFG9oqBeh3XKlCNMVWIr6Q4gIkAEM\r\nO//YDB8VhZoSAiUMBP79s3voDwemCPcZlb5oQfhInKfvqIXvrEUzoJSFBdyU\r\nIWfgl836MZASa9Y4Zt3MfyLpj4vREewSfUHv4HtChsEw9aPD110IFhuOjQ4O\r\nv/OSRMd5xBPnYiFiyyHSh+kipELhv0hlY4ncSIXqpDTw+lz08UpXSECXpnkk\r\naMc556ABsLa/z7BoPDKAYqbQdnUCnOuoSpKB+Ia66+M3QLfBjmGbO4+qiwAM\r\nBmYYNm5nHxykYlz/aJkg7/QRWn/WZJS+B1LLr+uu4iv5/LElMo3DRBjfwHrC\r\nU5snEHGA5XWmxk9mOfN/TAL8Ayw0fCw1VI9UzRL2pDaIM2r991KvsW/t0vWC\r\nT6/3C4EqxdWXOBT9c4iLU15hVp4akjKnhS2tALGc54Rn3B4nWh0K6qPo8rsI\r\nWhQ7f7RLnu9Tu/DjlUqiGT2k3Y6nYAw+GvpgeSY+J8jLbtlylkPZBLsb/VhA\r\n3Pu9qidRaDSGwqZ0xkmcuborlAL4HYUjeFyVoUBbH2AWiYcF3kL/G1d1Z1kg\r\nlDUk93frpm55lZwYOZli0lT9f0OPXogY2/E=\r\n=6az4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.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/density":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/focus-ring":"15.0.0-canary.50be0fbae.0","@material/touch-target":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.50be0fbae.0_1678729472551_0.8593243494945886","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/checkbox","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"998444947c397ac01e150a07ee81b99e8b28e516","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":42,"integrity":"sha512-KgomR6xM7iYGHy+ILLxkIL2ScBP9fH4twK0hyhM+MoGzQV/oxZi+Q69B8uVSe4xgSM+Y1Q1mCKALQk8zzaPbbw==","signatures":[{"sig":"MEYCIQCT4SyTkDa25z8YjnNP2v0eedkmXy7hUoiXH5dKjvBP/gIhANIc93QSn/PlDbAXk8TAObdoAQPfEcpoVOPOzRQwtR82","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjdQ/+Kn0AbA7iN3VjEqOK3cnXLmnN9gSahKja/70jiUFHK/MNBIW3\r\nCCll9HUTr8IvxzsOlqYBFWsnxRNMrl3RNux+L/BRUzggI/DDgyKdAQHc7Gu/\r\nMWH4EMQ31eQiwOfLRCcshXXJGKu3S0x23SXQAR+7p5b5hpOTlSe3sWDgjH1h\r\nDe80T4lDcu5UWuqg1HkjredxXDvdDPVzF/55lmHE5EQ0WzpoFGGXslvCm4f2\r\n56Hv5ucMHmxXRrsSYoVUiEbV9VPROkjxQN/t1n7xLbrrSU8u0NxtGBQhL0mq\r\nCKRO17+HLmfh73ihn0bQdkrJS4ByMDahTpn0VJRJNxWwbSG3rtwI4devQ14Y\r\nLjfMW9q9gZvuzg+EDsUQa0uWthq2SSPbpE6N65pbJytPoYOwInjPnmp7lMIx\r\nnd6O42XXkw1c90uL/KI8E75woVC6ZJ46EN1tB2CyunCG8mFG22bd1sjWAQEn\r\nzgLL3XpR6kX885T0KXSwy0vWjCtUYTf3PhFz0TPykREOJhzNusOBgG99oBwU\r\n9eOnRj1/0WJkZHC8EuP1e0fEouWp2dbAv228MgQZdIxnLyIu6fcvp5zHuyom\r\nZKoIrPfD7+h+h0Pi9vxEbCFa6nCfsOn+/+KbHwNwxqr6YKYf2M37GCaIqJsc\r\nRdpwAbAF9RUFZJ6NvrnjZQ8Q8LvRJIZkidc=\r\n=43xb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.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/density":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/focus-ring":"15.0.0-canary.6b5ffccd9.0","@material/touch-target":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6b5ffccd9.0_1678729673739_0.8154675157542643","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/checkbox","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a71dd36ccccf85e8d84b23933f9158bc0fda16d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1c8013f4e.0.tgz","fileCount":42,"integrity":"sha512-2xbSLbzhHV6XyZ3EPQ3AvrM592KvdrVIMu+PaHrTav3Fy4f6aePzJ6xvKAR2fuxOg+3HWLj7LxaDM1FWdZj6EA==","signatures":[{"sig":"MEQCIH7lp8KLsNbqQkKdMQl9gbtOg6MTkyMC53E29b0CxLa/AiBBkfwUxFXDC3iP/ODuDGIQGayN7l19WaeEGRFMqxezbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk9g/+NcXPe33+JW2NIB55rJY4UqXZWwF1+HikgKDHycw4Czhf/TAJ\r\nbUgz9IuyWYdWkoDnkr8NnHOBu3n2WS12HWbxxKQBeDylY6Q5hU+K5SWHEoKL\r\nkJE8SKjrcUSwatfks/GSkh8IzPrwWNqhc8RB7VCGmTmdZVwLk0nrQsYGIVmx\r\n5oWCo13nSwkT+Y8Qe/BEZVBvJ1AcQ+fH2QNir8iNs7B9r1u96HVbJdavE5Ux\r\n5Ai4KJjWROVtBUuhbbA9c7SQg9nrOjiq83MCy3vqpxlNetaBLJW5+CUFtepg\r\nvDRveertiIeilvIL8BamjL5ckFTQofAszVWRKKMzPc/mB30kkU/qZNFMD5En\r\n9CqgoWMk92JXiANVs7Wb8kxNdasFay0/syb1/QzfsHWAUWoUxdgXwbJ5TMJY\r\nEbDOux6zBc5bH2qnW09y2zU5XCvE3EscrlVn8AzKlavbk00q42kp7m5NYh/G\r\nTlGT005nlcB36wwQkmDVrbhCG/2dJ2GhwfW1QC9as8j/CvZN/htlrGgRa0mu\r\n0cxMl4pP8cQhCab8zlczij7jCDvRX+rCkfs8CiIFTlnBkMaKhT+qpazarwRX\r\nQ0WkIA2reZdE5AgCCatwGjLpDlSBhNc2VkrDj68MAGOSQaihoDtgDHgyGzqv\r\ng1+SvZDgI+q7pqRygg481zJdCP9S/T3OhvU=\r\n=u6wn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.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/density":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/focus-ring":"15.0.0-canary.1c8013f4e.0","@material/touch-target":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1c8013f4e.0_1678730587562_0.9333327516730148","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/checkbox","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.112715df5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3624b4dec6bf81d75c562c7dfe1d4bc3f7660cca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.112715df5.0.tgz","fileCount":42,"integrity":"sha512-fiAQPicRHa7eodaDa+RjDM+96BsI6XGHlNJqd4yoD0QtUGYojo+/IG4HmCQQeWk65X8lfONvdLBALLPUHYihjw==","signatures":[{"sig":"MEUCICqfmO6WAi6ZVEfaIPom9s4emdmGQWhQbwZiVSm4lXZgAiEAvMy9KOSmHzl5RAnq7maWJp/H3ONrpi44PvkIBRPfn6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo05g//TQVvndcuDWur7bWVeVAMocvD5faMmpiCIIIS78SgZl54f7SS\r\nP8WEVIHy90Y5zZqYEHeQEPpYiKCwcuj3HiW4kLhpRav/2DzRCtjTg0DcQWks\r\nFugMX/jSlID+hqavDBIkqfXC7a/pzNliSOHwiVgLfAVgHc+rdACpl02BsqmX\r\ncziEebhlu9OGlGHXw+Q1z/CxEh9Rs2TjlrOHXL2i03BwUjpzsUXy1vJxRchG\r\nvbQpxcen2tU3fzNol2NrMpCxbFK6WKAthR1twIy25nb1hpr9waLSQhoNKFlZ\r\nkQMFSJtNCsthcghwJphSF/Q0s8tKk2JkpS7hozAfMuoSclBxEUa5mbzLbQwv\r\nyxLaE24dbYkHBDdQN1XDWhfQH6TJVJuoi/Ma0R/9jCi67EeY89umZ+b+zUum\r\nRE5ZXtojQ+xszyQ9UFv7TShJdzvU3PRyVoI/DOlhvis+nMLW3o167xygzEBl\r\nsta+CZ/BSTa3TrnZbmaIYrCn0SXzt81ZfphPHvb839XYUA7QfIDbX+lozp9w\r\ndWNstJ7pP3EJRtdMieKTpafzlVr1HPD7ZHK8EdAHavYSIGDhsOzq5DTVlPx2\r\nXCf2EYdYeNIEMflICKEN5wH+lk9TASEsA4SFLDYwTrFxkVW0e5EG6j9XbxdO\r\nR+l4LX7WR9FtNm3t6r0kImxIpZq2NltC16o=\r\n=cGzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.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/density":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/focus-ring":"15.0.0-canary.112715df5.0","@material/touch-target":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.112715df5.0_1678732774595_0.414762992060663","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/checkbox","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d250911f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47d344c80667696a57088a00d9f8f588010f48ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d250911f2.0.tgz","fileCount":42,"integrity":"sha512-GZ7D989/6WIUiZSKWsVM9B65XHcqhoslnUDL9Sr0RL74Bp+83oVzEBE4YuxF8d7e2hP8iuXHR6cTXICetQud8g==","signatures":[{"sig":"MEUCIE7f/xT2tnqjtNvBLdtoqjE3i9trIzTatx9IpRDO1p4bAiEAvCJ+q8VbczTrJYebcCln6yCyq+HRP7v/vta+n/aLrGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3olACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXsw/7BgxBs4LJ0SoesFWR+auaeyy8YWePZ8NeYg4yZq5ud2wWpdQE\r\nbvW3m7FlvafVzgjwLNr2bPgCuIP4kPf4WCOj6fuDmGZNBJ+tlE3wBXl9qGwI\r\nHt9nitSsFcykUIn3zlaHc/43Kkuigv0XAqajPlcyjfnzluEtBy/UIRZx46wF\r\nRIUbD+4PGcXOkbPkQCKojTwgiECopPhK6c4wqEbFpf9F/5QWgZvahmqz+Hf6\r\nEMuhaVNnlmpLV860Gpo0TJcH0u//v/Kmk8tfbyntgWgEJ4Dh6w25wQ+gPvdV\r\nnKPwZxc2nxBe7LrEUL7kKP6oZK1DJSW0rZboDn04RVkiHge8KMlg8KoKE59K\r\niJzF4rUoMjTeDvfecgAJt2/2KW/0Rt9Tj0w6+OBSpBRSloRVpBe44ZflgE6T\r\nkyyk6IM+Xhnfl717Vr2jWJU4u+WCq6P+HybLxhILjeWg9eO+8eeWpcSibSZR\r\naxfq2T47lIf43HHIZZn4HHYC/MwqovJ0aRoNK/7TYnTeNvwzIVncL0XlWGQw\r\nZifK/D0IuEOp5AGULd0CfadTjld0yGYhGajUfkbYTxpbJLxuWnufefaUkU3m\r\nU+bpRiqWCX23a/wG1j3aK1DdizZl9e0qlRAEB/5Ba9rZ6vsx9TGbyAJ6DvcQ\r\nH9enCGU0ntOqw3eT5nA0K7ouOgPGqrjBosQ=\r\n=XR3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.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/density":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/focus-ring":"15.0.0-canary.d250911f2.0","@material/touch-target":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d250911f2.0_1678735908777_0.11058931199546418","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/checkbox","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2686fa2cf4c71a8e51342f5f65b66a54972c65b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7cd925c12.0.tgz","fileCount":42,"integrity":"sha512-uLdNrqPSAwufS8JGDF+YopztF6COFz0Utz37XDzQtU2tqgeRYMqQm7HrtBQvXBGL2TvsdKd5YsHikoipsLVtOA==","signatures":[{"sig":"MEQCIBlaRCm8l+4AOJNH7NE6bu/EcJqn4QlYYadeCAV8d5OUAiBxGy5j55WuBa8xbx1qSyz5IdvML0WZl7a1hgfak39iqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptXQ//fqI7CeToeacKBpInplxa+/aQbTSeDioMgf89uRoW57esfMhp\r\nRJH/tf4ykwaReVGjY30hTwUFE8eQL0iPLiiKOAWw4xyDBbBBwrvsk40aK0HY\r\n5pAQpme/zEfSt8ieQk5pQfUr+LcFbaS1u5rWHWQrNZayxaOY+rZRAoj7F2S8\r\ntD4gWpBKDSLzEyJrmZDrYGoQnzc5USkEbH22ekyljW9u3pID216PggND9p14\r\nTrPndlyFdY5hOVkWkK7ynji5jZ/La+DD7qGZwl6/jSN16Jy2eZ37tucuR82B\r\nRe8iDuR8+ahv214t7xXDuYjGF6+mCXNvCoOaAbdZCvN7dlYREHQ+BeS0qztK\r\nvCeuooS6X+hILtNfuqlg+7vFxtK7THFbzc0ZHy7jgVGYvTMcpQ2V2u4jV2tp\r\nqMgesgGTOvYu9ltGyGkVv2dCAal+YI9Tuf7apVNbkq3GSfqXurLCKbkXLRor\r\nZAdxv0edYpg4dZmSsYkybMk0QbF/KIr3vRP1p6ORQUAKK0WCRIVh1jbdBbow\r\n4DGMc702CTWU1l9M04IMwO1+Ke7wKEwo8YuTKiZ0iHoW5a6DdtvMTy48RIXN\r\nd6KN5mDKcSyCXc9w96NWoeAcoATPwziXZtb94p/kKohq6eeTD8B1hzcXGVLx\r\nzA9gPhgvPOGAyWvQTsP+BVyrA4sBWUmTZaE=\r\n=E+cQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.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/density":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/focus-ring":"15.0.0-canary.7cd925c12.0","@material/touch-target":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7cd925c12.0_1678736361549_0.9250631564026595","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/checkbox","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e661814cc726b8e91aaddc9082524c4f40e5b76","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b2ddacf73.0.tgz","fileCount":42,"integrity":"sha512-DpMCxqgQM438/qx9ijiioz2FeWJ/g+q5+SljiwAq7w4Vy1dnL2RnmmKP6HqLYQRav+aGxbFnhc9nRuV81C2tlg==","signatures":[{"sig":"MEQCIGYxe/Yg+sWLRjofAdDsw3efRWKVaXX1w8eBZcyYixJnAiBM7IjKPEQekBxIZgHXE9shgOUUAZHxqZobNqwXXd7gXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHBw//Q3lXWLjoBg2T91KDv5BbfXrg5JmHk5iqsR655/nv9HuCe53P\r\nGa4C0ES7Yc0tPw4fVtblNHhi+y2bNxyLEr2j7zHRvi3i75922xkD4LZPzkvd\r\nmOKMX65SdLXId0swKmtWn7jiCJuyMMDEt5Qnf++PHKeNBVaa2/k4F1JYMah+\r\nD0zsXCGFdXee0RHgkIhW3FCbjbYu0trEg85DObTFCpIHdK6NhM0x+R3paS9c\r\nLp52F3qbIj7ajgin2aqFQUbxo6v5O0191+b15l35SCPm/iYE+5c45mPn7oh5\r\nFo7jKeXWxUdAXoXpGp8BVubOQjVBC9OT2BSyKe++eT4NSrTyX5dXPCAipA+o\r\nAxl4gIPtSQqP6B0Gz5dTOhh98udGMbL3FvVX1nULeHxXl1nA3qOjf4tTaTvc\r\nR5ViWTaXoyXPau5iRWIamlcvqIcJmbgIXpvrZCOGjJW5FLsc/Ix2fgVWngRJ\r\n3fHry5aLyq5zoQu5ej/dFeCRBY0wqX+5lSlCkYaSUL6UOvxfOeT1IKuQtV/6\r\nk5JoBEmydnEt7BQWxUSUGiahDqMXzBSNnBE78uNyvCCwUbssZvVU45ZkTgYf\r\n6CM2isDMlGp/VEoqC8doexsTKMOOhEeu48+CyQTdizfj+2o/AZ+/VxpOkZtP\r\nI7xT0dgZijDtmKUZYjd+UBKE2nsk52A/57U=\r\n=tD0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.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/density":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/focus-ring":"15.0.0-canary.b2ddacf73.0","@material/touch-target":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b2ddacf73.0_1678736626477_0.1695285384189904","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/checkbox","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec786943a5d85295835bcd3512b0a30f1da97bed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.989ae2ecc.0.tgz","fileCount":42,"integrity":"sha512-2garCOrzVZ6Tb3MsT0nRLGs8Znn89wRCCkIhcbkEqjlRw+uwTtwfztrHaWz/yWMcYGbdaIzHkPH9mGvYDGPjDw==","signatures":[{"sig":"MEUCIEOZFD/78+lW/jt7pYj5IUqWO834VVaKVBUunxdf8R3aAiEA95RktWXY3MEGv9fOU+x7xL5xBzNENusawocGAxRw3Mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa2g/9FMsMsYkwS3Aym6OFj3uCJwNVZgDMlAVGc+h0UPP4iy89MPgt\r\n9bUfsZjUXXSxDImxJeNv17Y9iHsUXxux4zKmINuxnNIPnZC0k5VGVazz51yW\r\nuGnPSID9ewstTstFr4UK82lnalLMmULhNusS60Rfwl4z2hHjGLjQub0WCfup\r\nr5U0h4fYU1H4DMeroodOQKpNp8R0SQ0NRmosyF5utDoN23PU3KWm6avFyVkA\r\nT4CuBElF+u8fMlpYgjIbP1buc8D/brERK5B18ohHYgYKoacVxqEtGf+zQSXo\r\nc8dxZ+lGWivoNq7UpuXGuc85PTPePTKbzMC9y3L1FXHzbXfhsXD2h1cMYyFV\r\nx71NusjhVes+V/SffoaNNDEoAa5v/QA+/qc45EK5cM+DHDKVQ+uSl00/bCVo\r\nVG2NJv6n+SJiwUyLAqGoo5EXCY5zRfAoiykilKcjf8pRYHJHe7iFk6IwwuDS\r\ngvb5bZcRHjNjhKHmAPZixyoITu/FNZrIE1q1ZADTpKweUAtUq7kbxFwAeazf\r\nDe2Qg5ArNgDdo8dLzwQXLLn1kWYgF4vZgm7sNGJ9sypD6wh7RfaYY7wU6DMA\r\ngo9beyCBi7ef6S2IS/Z4Hix6m4GVQ9ms5G77l99iVMMrwvE8D49W2oQS5pnB\r\n8MMRi9o9203ea61iFHU8LNBQNvBDW8Gasfc=\r\n=8nh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.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/density":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/focus-ring":"15.0.0-canary.989ae2ecc.0","@material/touch-target":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.989ae2ecc.0_1678737179272_0.4245059261610622","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/checkbox","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.89c66483a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f50e94d695416fead6279e83d8120a0f67b9c1e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.89c66483a.0.tgz","fileCount":42,"integrity":"sha512-SARhlCfNiPxg7x19dLHNpb+ZzqgEJswi6rmWYlc9BOsxt2KElBaqjh88hGZFEipPk8Qc7DXPBNMHvKbGiiFSSg==","signatures":[{"sig":"MEUCIQC/4+g+NIqTgKR5q2ADjjlK1iG0R1x9RAky8ZfysoyUfgIgObSICcw8bPHfv6ROBpMlt+JwHaPlGf0GZyWYMM84K0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4SuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUbQ//WGFs57vnhSn6TsfF0yiGdvQz5dI81qBKTgqLMAbSn0v9m4SJ\r\nDMzjtAb8UdUrU9MLPqCaOSVBQ5u8iYz39RKk9Ft3rx8p8D/bAdekzy6LQJor\r\neZPQJX692lHUAzCn2y/x8TEPdteTFQdhucyIaZD3m4Bu877jbXQQX89BnFUf\r\nLxWI3I9cD2HygYr3bOIBLDSU1sjcnMVufFE6Oo8Ll8oHLFVXacj7NpBOBJqR\r\nupaOnxOe/18k3verZsiqIRx+LUAbofyEeCacvtIrWIiL7IfsveDlJO+W0xC9\r\ncbuUFuDjxuimyGVqOM3szzPB5sO1VGa6d+xBae/4AA5iAeWDmgPg5UPe6nDT\r\nVPPOhzKFl9yyAxjSywKrwSVRfVClan6ODXrEnUqLwPUJVjfmZ7HhyLn/lwfw\r\n5SUuoBr0XV/S4M+SGI5qEQWS7edzWGHTupKDT0d/YLRyWVi78mkuCWoqIrEc\r\nATCRWKKvv/hgHz4yS4UtRglZjzWxVYLQjYowq9UHXzIMG0Lmnz2O5IxFabd5\r\nBz2pLVhAEyYYPoh76BX3vgpsB8SvHNt5F6qEl6vpRhQKB3gCCvm2p29FS5bA\r\nsv/bC9UDGrPZoAPkyhhCCzz5kjGfv61DNOOL89ULUoMNot0dQ6MiRAm3wpdr\r\nVW1s4rb1e2bT1u+I1nDUv3Xu3vDbffmENd0=\r\n=vAvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.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/density":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/focus-ring":"15.0.0-canary.89c66483a.0","@material/touch-target":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.89c66483a.0_1678738606177_0.16131121109691282","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/checkbox","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0aba177f289073880aa5c5e7d9586cda6f1edf9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6a85742c2.0.tgz","fileCount":42,"integrity":"sha512-jR+WDXGxJV/YkENYHmR2Ju2q+hqkppHPYZIgAyiLzoMXcXu36csT4i9Yc8UR1Veuwy5zDJJXxY6qZ/t6rIKTuw==","signatures":[{"sig":"MEUCIBkGK5uLl9nKbQ7FO3/D/N/r2ufJvq3opBabqeibNGW4AiEA/ocJb2VDvTyPU7vo3eUaAWi67cF0PgWgU7i9mpdWeLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgRxAAgJv1e06CRt2ud18JDTXmrvSwh96OhavLLpC8ZZZTrt884Xiw\r\nu+4vOA+DWF0lMhIuZBKOy1aLHF/xqX8cnSC7AhJWiuzYXOd7vK8/ZEN4ADNC\r\nNcfyqVc3KjB4il93wcIHWGv2dWXSKP9aUTL+trSKC3srrIAVYmp4z1QmHW3I\r\nR3ujumDYKGm9blyrK/IalJxLAE5zxcBGZ2zZZZVjxCW5Qui7+fo7UFl0AYIn\r\nE3n+4TdUTX5z8AQScAbgo/fqfN5Pt8dY6UNgepxfgnSSxkwqECKnLgvRsv+o\r\nalBgXWgaFQZhfMp5klcjraFrZrf1XCq/nX2b/YKBLeg3xibE9p0rXHpA+ztz\r\nca8GqHml1KyRI7Tc9gV8gYt7QCK9w7IKZzGBabm/FvjXXcASy8kquGE5gqB3\r\novwGfQb5xSuW0TXF8ER7+33stRjuAvoFhd8QhQD8SIlCZNcDrmLKpHRQWvhP\r\nuckp2YPvYZ+xafAo+XYHM26+L5QhEGxeX78ahP+MHto47JQQIl+MmMJOILUw\r\n6PLqJevSX0nB3d2FxwOyRi4wn0SBZ+XZ1H4nb2qfnqlFgeXPLNHcFRerpwz5\r\nAAepYZVWPLPf+6n4qji3V2YVqbZFYxXDc2LRAwk03oB4q327giTMYoaF/slt\r\nvc+eMkbF6Cx4NsLew+HRQl1kIugJNIRoRQo=\r\n=Zf2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.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/density":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/focus-ring":"15.0.0-canary.6a85742c2.0","@material/touch-target":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6a85742c2.0_1678762060356_0.004821217772739583","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/checkbox","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f49faadbe3ae1fc7038ee4764fb0bcd1ea2e5eaf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":42,"integrity":"sha512-FxgqGTfcxno3l4BFtfzddJSn4k/Dx9SiOu3orXhg49sFH6e/SYh3CFbifCsUUBoXAyTldNGui+7m3YuqbT9SYA==","signatures":[{"sig":"MEUCIQCAewMDc3kH2rlfTx3xVzNmszxpeswLC5I34goleZSSfAIgZnH2isIr+Ds2roCdUCeJ+L0pwxE7xgfLwZnqlBs7xsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPJQ//UkwpEY+7i7k2Bm5Qihnk7aotGuKzyPhC4wcKemyMNBNylew7\r\nRpLpYceUnlgYQcUWqtmT5K3Wi4D62fGkMzrv+1cFAUd6vOOsTNSDE548rs14\r\nxdbgJ8Y1MXU4WK5U5HMSIpxp3kB0MLLdURwpPdWggOf9OsVRqjiW0XwOt+Gc\r\nVSQZNTI4/Zxysieal3Wdm+2a15FLJgsQnezGDQKbrCdDmQ2BB5HDHnniM/ug\r\nxafaqWc6z89Qq5Q4OxabdBD529zFvBWw1uSBhm0a6KlknsEPVMIKhYxtSQ0V\r\nxT120mfRvymJyR/oWGQ6mizmofr9/+hdUR7g5h+w93Zd30gxeUHmpavgSNLx\r\nXUcBR1hsCgOts6QsJ7KxFME+mBSksmNRXy73DF7dXB9jF6OZSPAc9LIQ0UjQ\r\nB+wSIRAFfhIUam7013t+0rO+d5VWql5P7Yavf8QVrN28+E2pCIyrSw1H0+ag\r\nEwDHIcdBNrF8WHZjUAldErHPAmctSh4TbDwPrQPnSMCmVoOzNTkNfjfniWfj\r\nsGxc6ELSxrfY/xOgQHbbL/FKoq3Kqv06NvH8LrTVQZI2ZYsO2JA07k5H9wN8\r\nVoxmwVF5sAHgQp1oADuxnhJDv/z9RxpS7+yxMc1EiRUvhheQ4xeek1r4tMZd\r\nuWdZr62BafBosDqa5bIQdi0+hRQQLqOBdKE=\r\n=QaoC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.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/density":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/focus-ring":"15.0.0-canary.bb6cd78d5.0","@material/touch-target":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bb6cd78d5.0_1678817829181_0.05519211142452107","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/checkbox","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12a3442375f085e9da38bffdeaab6eff6905e361","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5f94aa37d.0.tgz","fileCount":42,"integrity":"sha512-4VrcJnmtibrnaAn88QIbJc7lUCTen3te2ekJqs55xOwv2w1Ke2POFlIBLSq1jvDBSr2XqFoOfLjNPoAoctG1OA==","signatures":[{"sig":"MEQCIBdto2ZZ6MgNuVJYNbztL+8iae/oclVFrrb1AJXOcVmQAiB4Gudmd3n5MLFfjTvzBOVuE8yGT2vaDSCEeer+dUYOqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELrtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmryww//cxIYNbXi+x0ddY+SypwgSFhV1i8dyGTBMK5XX8GW7aa6htpB\r\n2ZLNT1nNcFlP+jiyySVQreb8HgxmtGluBbLvIaJcc0CK/Nw3+pQ47nSQmDe4\r\nnatYtT0oGIKSNghWuQGFEZ5v+EekrGKzYqYG5RZxNOQfE+a1DXgPrteSHOUP\r\nSA621+uj8ktR/EtUDZs6jGSzZbXM8/7QLAyiFKDoob0MWC3/ohAZXwxVy3Zm\r\ni60sxqHiI6ssThHT5aMtppDzdJHllxzrYwZ0eR11OKacUO4q+eSBQXTarKYq\r\nwtDoUZ2tSs4Urf58EM9TflSV6R2wAgSWDWZrY5FSHoRxz/NtbPryN0+vsCvy\r\nt1eiWzX5Xdzl60UoFqUVSlBrjFmA5OieyuG2v/A2Qd/gq++sWZl+RETy5ct8\r\nl1MiJWwZ9ev6dP4e7kBEN3/nJGTIofMUr6cbWZogc1C4flX7ddKoFJ8C7ZKj\r\nP1dKErA9UMq2huyLBgshsEgfcH9FC2LTZiyUKSByB+WirEVVj8kH3skjXfh/\r\nCUUjwdJIpnYXp8MMPHQPM/bPDgxUV7LA8bcXsDe/I7ivspQ3ujaeKQyoiP7I\r\nPn8B39SS4wC5o+1AQv6RNz8Ob8Qf3FEm8DYWJms5RJZshi6SsB4+3fgvXsN9\r\nBmbtB4wl5MEY3FTbH7osehBQAzIiNZptpUA=\r\n=mL0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.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/density":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/focus-ring":"15.0.0-canary.5f94aa37d.0","@material/touch-target":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5f94aa37d.0_1678818029562_0.559279443129211","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/checkbox","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1bd317240.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ea25da6ecbc9592061663ad9fdb2f7394046099","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1bd317240.0.tgz","fileCount":42,"integrity":"sha512-ZKt8yIEipSCh+1LSh5rDNZrhLR//0ssFRZdtAXED3+sDllEoftGExImgtKU1xFYDZhAk31I50YeYNb8zyOc2zg==","signatures":[{"sig":"MEQCIDSEcxCyvf4IxDnLKoG9ffPLxriRb9hfFBxss8DXfTIQAiBK3chRtWzPenC25yRJw+Bvc4FwwsehAR8iCzDWPOE7eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrklQ/+I9i0ADA4ZBg2z9z2KDkSGkIZqDyJoSO/my0bhGjCP2uM9nMG\r\nK17hvMCQ08LGZcKHd/dhHBMzt+0cqp42KId05EGhBiH+mGetHwblFNn4UlY5\r\nXhFaHXywEAz23aIVejMxKCNNT/LNVsog9widpoTWR9XDswrRn+eWgUNUz1e0\r\nx1o9L3IYJLSJhSPaLX8zVbs0PXpzAsDvntw+JUMKohQJKPWFAUhkYaSyeoxj\r\nOSqp+26tU0gXSx6Hb0hrFPJDf4oocbW1wv857n81HeEoDdT8RGnhMStNmn43\r\nEZFT0sGh1yWNPPp4iJ0xKSHHNLPQmxsOeM635g1IXiGOGPu07fX1vnX5Kcjb\r\nkFITjlDN7j8wrXN6QRlucB0e06HQ/as1qaBxLqtex7OnQmedjc90FIsX68r6\r\nxovzAz55H2E9Enk/T9183Eh3RuUWsiFyLA9DVdO/lFmbt+AvV/Rj9ZHg4C07\r\nex6TiC2Vr8azTOQy3DdiJu9u8To9dNbCdpB+cXsjXdUx3fqTp4PB7Utj+rVh\r\n8iY9Z/Z4KPQYVDavuKVzWT/fnZGJZxxNiIweH+Uu0g9vatQBw2d9ITBApUnC\r\nG53bqNhVGiC3285SjgShLl9mUI+/byx/yM5Xzm1HE0b1WtyvM+7jSkSs9W/J\r\n7p9+rsl1F78/NBGphfyRT/Z1Eq1sHc4DWBI=\r\n=f/qh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.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/density":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/focus-ring":"15.0.0-canary.1bd317240.0","@material/touch-target":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1bd317240.0_1678818260014_0.35005959593391744","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/checkbox","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53f2b564fcb7d2bdc6d7247b16c415ebb8844b73","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d441d2a2a.0.tgz","fileCount":42,"integrity":"sha512-lN++CTeunGXJLcpspy1Je+Ke9YvcN/cGZ8RMxpzEDcHs6RLLcUXnjFIdxgrEb7WJu9EpdBAn/gtrXjMSvGpZsg==","signatures":[{"sig":"MEYCIQD9qvbWQILHrmOuxrZxhsuUEEUd3wrTQbQMLEBhMWJwuQIhALPz4xtQ1KRKRU51Fk8wAvI6dciu30T42Xr6/kCTKj8n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELx1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQxQ/+NrO/TTNlFedcZ4ewYWWnv1930zZNtcSp9JGvRGF7UmuMIzfD\r\nGawYkwHDbOh5FKQYTrFBGbXDQGkIcWbq+WptToEyBjYwJ+BNT7U3fZYi/+pG\r\nBPrEZ+7SbTfypCMInYVk/sKug+GIpVl5xYlkQ7332JT1H6G72/Qb3uNqlP2B\r\n5fSUPl5fwRB5NHx6oxxhsIcROMHfPFuy+MFVLWOVlnqgDAJq9Lx/0jokBEjP\r\nYvU/15n9Eld3mRQ8lzJeRegSuDOjYzNE5nZzq8L202Jd9Nx7XYsk/k+Yxsud\r\nA+LDYkA0Tly4TVPmjk831YSB4EUsHzTuQcJ9kfn+alMa+jHBxXpvwARbhvDl\r\njK/ZR5Msl1WgbX3cS++MRR5xowzSb28wV8Z6jChoKqxwc1l79IlCMVLo67lh\r\nYkoIOcS1tTw2+yMSjmzmJp/6Ff1kd2CcLt+cPImBrVuTPptO2Almy6KklUnl\r\nqOROCAL4caKa4uaXzYZ5A6GZeqizp5NA83EviCrR0Yi8zTxGWRHrG55UZo7K\r\nuGfrNoik9jn48CwkKH6C54exErWMbvF7FFl66jqFaDVYnN3A3HZnKw4sjoVv\r\nDBYnE4fw8lMwR977kvkVpE4XhGrWp2sGazwbvFzuSGfP7l4HUcZBNKl1Gskf\r\nl6jezW+1xeY+CVmdFzX006TKR1J4kKdHg+0=\r\n=ADp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.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/density":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/focus-ring":"15.0.0-canary.d441d2a2a.0","@material/touch-target":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d441d2a2a.0_1678818420827_0.5020568833929959","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/checkbox","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c5ebd63fd86c26626cf76d3f3718eca5ca2e02","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.fff4066c6.0.tgz","fileCount":42,"integrity":"sha512-S+4N6AC+dZ/VbT8w42ir2kPExqfS5T4xNiU8KNuddSrHwOrNl1eQ6iVoJBVNhoTp5gDcI8A4zj4/8ycafry6Rw==","signatures":[{"sig":"MEQCIAeX04Gaif0IxPg9T76i1IW+EgkZK6HpkIJpLti/b/LlAiB4K2HIVfKLNkOs2b7XN/8fJV17vTDqFo4BvZ4Gc/iXUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELydACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoUA//f8wOAUbKjfnMy6B6xY7HjFhW+ysHwuxR1X1MHXZ8as/z+UiP\r\nW0S75qTx0ykK8rvSw+NqG5H2oTSmwp2rJd2JAL23rm+u17XaOIZXO2aM1y1T\r\n0gdzE/4P/JPWXj/ecU09H/8RxP9xhovyyTXzrqzOWmWln2WYvhhkqTB4BrVq\r\nu9xeHXKXJ2j68tEgkfA6oTPZvkBj4jKGnqRrprCHbG/KlxEaZv92Amxj4EFM\r\nna5V7boA+OCQq77YIfOdHGbpyTvEE08Pm8PRcCoV6e8MftRX7w1EqAPUizYW\r\nda7wCeaWugtx0r0J9dKmr6lvzGnaDm4wmJFkRJ0crQkcvnPiRcww6UA9StQ1\r\n9rabzrr781aYRGPiCPUZVS1hKGQ85XlcKl8hEAvasETgEVKP3/LslhsvPMpJ\r\n5qPvWZJg52Ho+1Xc9J7tDdmEvH+q8sng8KG2glS8UhqV9gHzEacTmKKMMN2R\r\nfsR7v/VdUjtxV0qSOmrYU8/rkqLbnGPwGCjeRKtRh7Mvht0JJ9jIyDoGWEJy\r\nIT5HrWJ1uDQ+tPGJX3hWOnY6Ho9kTXa6jCjXyiijOvEJRrjbywi6N3LVIBhL\r\nZTBpB4Y1MuApYzLnfsRKZhDAurM4mmx/xCK27JgDEM6tSA6wZ61CClgsupMG\r\n8XQMEb77xz55SFd/f5En6bQvdahiGsePOQg=\r\n=55sH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.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/density":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/focus-ring":"15.0.0-canary.fff4066c6.0","@material/touch-target":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.fff4066c6.0_1678818461503_0.9119648699685294","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/checkbox","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.87809c710.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8a2fee9c0d8912840ab8c00f7a01ae93cd06c6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.87809c710.0.tgz","fileCount":42,"integrity":"sha512-pFjY5EoolYyoIoralX3SULGRvdSZUbItJBRx+BKb0eXPWyluMaa09sKnCwWMy8x2RnxNXL7Q617VL/XzHh5W5w==","signatures":[{"sig":"MEUCIBF8hwPdxxPnZ23HWgSx31Jg3CIaYwQ4Dt6ToZrj8KBYAiEAod7Os+izOL7xSy66YPBWY+hdsrpXGXBHCEu8ws6RjnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/URAAhuZ1LIDXBD8CwC/mnnBMTzUaw8gGndqZ0pitOaZu6wt8XGWH\r\nxcBYhvCmF1h6G4WSOjsm4nDIwoyxK1uOHiw4011+MN7XiI3mSJ895RqPHVSc\r\ntW15Ydwhm1rdBcw4jQhC3v7QH22QETZyp6XXLHIstCsPAbMs6s82mKmghqJp\r\nh46+oqjWToUvAa8zc7R9Pb/0SpVU2Mj21Jxo8rNsCQB8ZDScrGAeCS2sLh+5\r\nddsNbk93O8Be58473jgO/zVrbgzWmmABFLBTwiRQ+XVDA1tceG6wxccNsy8z\r\ny9TrCS0+NMCAKb5f+lbqfRJx1uM0gtDuWKPxgMcWQrCXQWlgQBYoBl2wXtZi\r\nJ5EJXMKs4zEKYSOfSkgUHvogNUzWrEJsJe19VA8a9Ol3TwGEIGDH5w7sTtnB\r\n7QQ/P3gmMpLYxhSJkkYM43IwK5kEHXzF32r4sJEalecCJMNMtllKUAzhA6d5\r\nYyouz8L/ZQ4tCBk5dCUrKykjpwF7CXCcMbYgem9Qb89dj9IW61Xi3geOLFPq\r\n+Ru6F0KPL1rSiRVOhOaV1yInCfer6N0QT4EwemurWLOtrt/fRBoP+20LDTFQ\r\nc9TJMbBZL4a2Urf6oHJCI6AjFtsA6BeIj3SPbHcsBmLHp5weRN/hrG/4W6h9\r\n3Jien5sHnAxfs/C6fIsJNbJBbXUC2kHi0MQ=\r\n=Giux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.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/density":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/focus-ring":"15.0.0-canary.87809c710.0","@material/touch-target":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.87809c710.0_1678819424790_0.9195241518746455","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/checkbox","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.48d30012d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7f3bdf57a29e988b5bdea27f8f96dd9a57097c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.48d30012d.0.tgz","fileCount":42,"integrity":"sha512-I0CAV+nJFzrsV65rfvqfKDhdDnwOhyHrR+11E8ETWwameeZ/pzK8olzcl6B/4taYy5PHXk7cZmVdu23THQo9MQ==","signatures":[{"sig":"MEYCIQD+TggbKzmEoMxEDbQVIa/ZBD/Vq4Bsz1pTNYaKfB/MOwIhALIK9bqapRSMef9tWjWnyp3nVQ1zwFAcbu97z06gj9p+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo59Q//XsZtPVcxGQB+tj51/F++zJCBpt4FD4yuFImF+BPVC8rUVVos\r\nX1ojD5hstLLCy3ESV8aXrvAk+w0TTeIMIcr/TQQRSmre5uzrC0utkcp/Md8m\r\niiifdmjYYstUWPNlk47VZOAh+Swq+GhlJZbl1Frf3tNO0R2PXjiX+Jfx3woo\r\nD+RHlRZx8DOxo2xFHqPBeTGmaoDO4o6tga57asQX5leITPLpZzrI7dama3sU\r\nX6cRMsyc33n2PWl0aNvNGzqyr+3ykv4OHaWnGIO5z/PINaghsOPb/spfXH6r\r\n9KSKYANtdDsgb7E1RSEDk6z4TPb8KH/avq0Rexy6t9Wz3HwMHdnxLfy29wIj\r\nDV3LklKjkMaP4gEFIFa8jtdwcjcav/0RjRHthx0XuBWaU4lrCItr3XLfP2m7\r\n3dr5UjoaRsyCU2MR5qYGdnvDEM7m0ow8BV1dhO6UOueJRo3ML5uIAr4gXh/R\r\nt0W/ItXorN31iyf56/qin/XOTCpRRpUb/m1sLbS8wWpdzXSe7XNeHC5uHdMA\r\nb+PWt1IZrlJJ3LsyXUVEyqcHy+xo+gcYMaB19LGOdXj/p4J5GGWWniEcbP63\r\nKGczws+vZ5pd+jkY7x0kmgFg55FqnsJTa0SgilcefZ4w/3BXqRS5Y+ZidcL8\r\njpjn9X/RWFB8hLVp0LOdWW+SYQMd9tgNeVs=\r\n=SiyD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.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/density":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/focus-ring":"15.0.0-canary.48d30012d.0","@material/touch-target":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.48d30012d.0_1678819685724_0.43128589904154957","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/checkbox","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28412dd62ba2672e8a3f4e25f64708a587b116be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.419b23cc6.0.tgz","fileCount":42,"integrity":"sha512-pyXZqpPCN84DOCfW42ItbirP4N7RBNFd5KR8CMPUlMp5M63G59NQSIkwiQo8xF5GssLK+p4q/XEWhc/gXX20yQ==","signatures":[{"sig":"MEQCIEChI2Ngj17BuBGOXmEq90uSMtEvGTsBC4UWQa+AAr9UAiBs3I/hwSPD0527xbebiIlGDgdL8krGUAY8fsI7rPDWAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCKQ/9GNRsk7nyhDttoTe1n3ypRn3ww75ZpAIFAY5h2Z3Xsuu05KzU\r\nwLYDnEmCIgc/Oj0F5XcJO8XaSz553RQuE3f7ZEkmwmKtAgiuD07yuICBIrym\r\n1eOYWoPTS9ZWXWbqeymNQVyIbjCykSa0jTTshcjvYKFXSd4vaVxzk5Nkkug9\r\nQODi1qnB6qrpiH29s52Q0wDF5i2vsd2m/jLSu6gCt588f32xtEzjLxQJkucA\r\ncwHpDUJynoTRAkXTXp58uOpCT+1rdKovZbhi9vWkvF/2NOaGPKhV9mhJQpaW\r\nVa717Vn7+GvgDoaYiI18Wmjx1xP58qOwhPzrUT+Jy8+ddRw/8fCsHKxW1dDo\r\nJ3H+8wmBvwFhhWBI33e8Vgp0Z+BVuIbPcfL+KITD8Pp10L5Bhvp0V78Kgzj7\r\nsm3zdQSgbgZX9Cd+NJS/JteE0RPuXaXdDgw0yKyxG7roP+ainKTZ3R6OyY2o\r\nL9UuEL3HVXg5ND4VHU4LVqL9tsVPGEMHVpjA6kXN23x74C+g17nYCWJSfodX\r\nKHg+IPx4t9VhANg2UZDtdNYcK8OD2YcVb2INJs/XV0jSTSyXvIlU5zlu7kgq\r\n65FpwWA/eV+KD5bdYKw0LQvJfHJD+obUoURsAEO6ttGgZjFq32YCQRSTa99/\r\niCcnzPnVFFSk73g0qEHXvhdcpPhs8YQ+Bj4=\r\n=70uD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.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/density":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/focus-ring":"15.0.0-canary.419b23cc6.0","@material/touch-target":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.419b23cc6.0_1678820346038_0.9990427904910173","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/checkbox","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99826879ebcd2c78b471e5a735858c4b7a7d1be5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bf86521f4.0.tgz","fileCount":42,"integrity":"sha512-hfii6d8oCwhj2Ft0J3dXjxhMMFA+IOdJ89T5xspmCFK7uci8LQ/0DwEeAbhZPVN9qRtxDncC0RbLViMDnz6kzQ==","signatures":[{"sig":"MEUCIE/IsO6AtrrNceB/2lyx3NbvaoReYepY5q04C8109bJrAiEA13+KIdESEcjLz8manvSIcDE5uPW+ZdPjBJvghBGbyFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrLA//eZTgJsAqcpG0J6pDLrBbXj++GbjH1/EqTwCxd05O3uk4MP3i\r\nhkK4v81dThnjS7e5mR4Q2O8Ml88pHBPgi1qay3P0bK6h+slnMAiW+oRoSgjk\r\nm6LdxPpLTComiL2Rpn7XAtg/UVCpFxkU0CJJ0uzl/ypPN14VvD9RM8ibh7tB\r\n3harH+JEPoqzTLrRGjV16lRzTmGkrvbajKFBEboG58dEd+XX0aRLTHYsGtST\r\nls60RtJ3jx7wkuIC3BGFWhmg8GsBIQZjO9SKNsqlB4yu24deDyQoBjCNOrRB\r\n1EI3J+hr+iPm9C9gPTKRt9yArQ9r64vcgm9x8OJAfHX9B5bxO4jqrZ8GDWjQ\r\nJyUJeGl3PBPyhLJ9+ItXAXn1E546bHzG83uRpdbEn3akCtEs287ykM1Yz4Gr\r\nqq16qcIKxe7bAT35qpE9YUPB23ubc35Zx+3ezP+hahXKujWGCU/40a2GPgag\r\nA9m7GlMEeYVybEv2hetHYBAPJfz+erTmKPS7bEPgqSvuCcdWaV9rQJ3EX78q\r\n+l9T8vXF4m+87TLIALzkIMzQypZTCsH2wHZO01Ra9hweRJBT88xlopvWk543\r\nUSr2KFuLXi9g1+8asBu8PBuuUTyCBDYMYq0M9CLqCYgv5wegai3mZY6GjAef\r\nrCQa8LatM8iqjPhMEsqGOAaMGwF2PsCXoms=\r\n=6xXG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.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/density":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/focus-ring":"15.0.0-canary.bf86521f4.0","@material/touch-target":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bf86521f4.0_1678835623913_0.274110530373717","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/checkbox","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1d2eb845639a12a507db160d30b13f1c0f9a160","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.11f3d280e.0.tgz","fileCount":42,"integrity":"sha512-NfLO5zTds/N/EXK1kQ3/BJ8MuG/4i+LhgIRPiBbgCW7kAqVCcDV+ubrDCp6iB3Cqhf327nyfJ8X07XkqC1VQEw==","signatures":[{"sig":"MEYCIQDKA5dPMugSwXo/yFrKADm4sg2Sa+Ls2wQAcvC2n5cShAIhAPuJx7OcIaHVAV96tgfkzYCEmq4LlYLC9b7xQl1pQHfu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ02ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Ug/9EqEhxXkPZAftJKwlhwZ/EOUK4xf9zRfM7K1m59G3dDa2/pkk\r\nmvcVI3XBGyG2RmFJj1Uaozh8pJoHy3uaLe/ItAlCTBsMPg6Lfnt8xQ7Z3jzW\r\nGZL+FP+JgHe4Wu08cE5hB1JOgFmbagGWolMKPfLa6KQz78+Sy3w1TXP3S2/D\r\nI4k2Ao8ffjw/+5PqJZFYYrh12VW9RUmSHO+8UaRuZ7fF4/WP0RHMTiLXdAdw\r\nwaEwWC3XeQO7jcExpBI3Vbz+DnVkCuANYvcJluQpTvxFJvdYKdkDRKwTzlUQ\r\noqhLyScpNel6vi7caJgNQO45c6q6Gf9BWWjuSpH3FpdOzgq2y/4pTmdG4SKc\r\nmIB6cvRiPCfdRxPOVmjVzy5WJW9IwkOmlhahPxeCb9XC5/uj+GuXPztSpjni\r\nxd6Cm/M7dhVp3x23D49CisBPYIQQMAYh0nRS1SIvdj+NyANjkwDHJ6nEMQzf\r\nI6Xhi+an5dmsl+6O9nfywlkEPVcbAI8oD68WP2VfjLFxt/atczzWHTG/dgZV\r\nCxqT36FN/v53tXFCtsUY1uuvWwwQU//UFnZrHkTv/UMFwZ4t8JyJZOnqMv+I\r\nPVap06cOiI0J0I2k5cQBjyvZK7yHOmj7MNgT6sUqei0cwpBWxBRe8LnvsPo+\r\nQpHCVZgQiBFSfCNfsFSPmbFsSz9e4hK+Hvs=\r\n=JTC+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.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/density":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/focus-ring":"15.0.0-canary.11f3d280e.0","@material/touch-target":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.11f3d280e.0_1678839094251_0.8848116448336201","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/checkbox","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b281a409a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c985e8ce37e117fe02633bb67553633b508835f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b281a409a.0.tgz","fileCount":42,"integrity":"sha512-rvKHMwlUHfb1Iw6KkqAFpru+W30nSKHeKQz67y826So0SxVRKdsLK2G2QpsORJOIvAE+upIA8eCYdrfn37G3Qg==","signatures":[{"sig":"MEUCIB77FR1GURFG8jrZYvMT9BXh1m1s/HTdDfK7nHZIjOXMAiEAxLYETBW31GaKlR9QG+FtSu8si6dVeFij7lqxVpZXeng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdAhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAJQ/+MjifgDW9wKippbPk+IjLiVHyv4cSre3ZhnvCp1AxN2yPOUNb\r\nreEiQqEPq+5oLeDcPbag9S7vrMwxKcvvXTQxKgDgCGOAhVgZvDmRaM7oxE27\r\nybDae4ZlqDRo0ppLyYJy4/96TmZapp4QwPYvFEDi++iD7XqTnWWIoiwe1MoO\r\n9xypbFNYSLitSuAL/gZMKwN16OcbqiuRmHwbLNX/y2rqsjv4kh0N0NCiIJzj\r\nQ+/EI/EYvizytrQpRIpGE5xfwLxbZmFeS6ksV0HpKSK1PQjLEm1BhDzQg9HJ\r\nS20NZkITz3/tD0Lrlzq5LzyHBS9IS4Ho1hZrFdBCNZnadqTRfgPRAeHKr/90\r\n98YviWTyxDvHM2MNJzbAcdT3GjGiMfNOQhQbzfBmX1egkAC0J/7dnoBxs24M\r\njvn68LDq8F2J4jZ6lbtzrSmfLaQSiDegHMPS1ajGxI9QqrBunt5QnVUAG9nI\r\n/8BeA1S8pzC7TpxQuMyDVlTKhxcd74E+4rStwDpqC3eQNHTdM8TUaHuSm1gC\r\n4zNj+4LMlDAC9GzK12n1i7/I6x+OGmIIwKX9A1E82Aa7/9k5qJ1MvXkZpG0T\r\nGHsHn5n+3qGHnDJMS7XFMJP5Q13Tp0VicyJXB/op8GQK/hOaCE8mK8vGic1g\r\nnE1c6oYNlBko5GVDc+Z+9hdIZRx5kbbdbHE=\r\n=SUfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.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/density":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/focus-ring":"15.0.0-canary.b281a409a.0","@material/touch-target":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b281a409a.0_1679413280826_0.7715830060049247","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/checkbox","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.39e473690.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f436b0cc41f84550f6b737574b21e880a75be61","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.39e473690.0.tgz","fileCount":42,"integrity":"sha512-YNdHN9kcpSF+qdMyiWDk1XccL48sfOCR0+YRne7Z0t6Bxfv3cL561ZRC4fRGNzbDw03YjGE8uG1terUyeK+05Q==","signatures":[{"sig":"MEQCIC/I2aL8ERlfuQfXjVM38XMWotOAnzTI2ZM5r/HsgccIAiBHe88Pp41JlQdDfimS3h5f3/tiUbx9hk9gbNWZeI/O+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe6yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYCQ//QhlTxX47EuBOtf3rkqcn7yjvhqqFWgSfLDzKvOLEg+X+moBu\r\n2gr/H+8yuoRTjPdkAgxfcdyYGazy/rWm6FAwsLQOBMz0TGzGatI4QQv3yjya\r\nVg7CxRnsTV81yGmOVj+EZetqK8ka3fguQY1lhB0EbOmYz/0yC/GZtMIib9kv\r\nlGf0FaKJDH/5j7B1CS+CaAdYuRdAPm8/2v/22EXh6J+p9gFGISbVBvFKe5ad\r\nVrxgypyeQxv601/ddf2X0wOhhg8Q99OVOJSZqZiyvIQ9r9B/SzS8c9rxJKoZ\r\ni9haN7K+0ksxHAa4ydhQaELpM+etAamptkker3i5/fsoa9Px93ipQQORWYtU\r\nZPTkQW9Meurpju6TuSVhd97pu4Az711EHfXIt+dj7vt6uou9p47XEXNaM6XP\r\n6FFW7OmRh3/JhgWVc2g9+COfrhnb4FK43EwI26O9RV1pBOWAuk4n6CpjIISO\r\neywJy89vZAGaRgSb0PsdSLu5uwkyOzTDVvUYsV5scqHxBhjWprAoYpFVUwSN\r\n22amY27t3XCcCHpdBaApdPLrYPrIr8L9I9t9p5hLmjWb56mK+oq1dBOmbuA0\r\nxhh/u/aJUVT3+KceLfxGiA5Hvk9WTm+gaT8Anj2kPhe9XMyBL7ek1dMs1ghE\r\nzIVrhE/enEfl664cn8HbsHJPau3lIPkw63E=\r\n=X1iC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.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/density":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/focus-ring":"15.0.0-canary.39e473690.0","@material/touch-target":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.39e473690.0_1679421105889_0.5267164727305618","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/checkbox","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebaa4aceea81a22fc87b46c5f61e3f97c4ee8d23","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cedffb44c.0.tgz","fileCount":42,"integrity":"sha512-W7jgE8dBaQZKW/KieOl3GAtIAvvETzDb27YJDQWBTYc3IIJ2huhjBvmrZY1+ktcd2YyZ5dAQo4wu/D+0Jf/Ltw==","signatures":[{"sig":"MEUCIQDuyq/3hDsNWgsALmSL4JtFI/UzSJcy2tB/h62uzPTI9QIgCp4lNYW84Hgx+gKMG/hOAhsJBqsJpBrwXqaPWlTCBS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcsg/9H3ab4uwTioNrnmKukmPzHIBj0IvtB3L+gp7Ly9mbKD1XMIrq\r\nC1Osodj3utdat5qS8ns++WYgybTajo6oK72zOuMNtyYIPCyz9lBBye+XLLTp\r\n+LXFdJBUq5L6dJtZMu9mjet1u5TdrhFAuBNQtybPCKorzVPr+yOvmK3vdp+X\r\nk6ynMfSh/nsUOL3H4VDHPJaqKGpCXRLZtqWc7aQM+Q6tO6kG+j9mBrXPq1pE\r\nQpCkwiDbmlTOCalVAhKEFhyxXM/K7akS/IviBWVzXgLQbcEfC6Sk9AO8k4CA\r\noXvKahpSu3psEwGs/5Oiov59X9o+kac0mFVl2DBpEIVZQslQ63Bc9G72BGlD\r\ndVV5E9Zaq2zje+gs0ytMcJIPtbo68e1RmK5aKCRXmWZo6ymZhyxwQylcrzIK\r\ni9396DpbMBGexrx3bIoMtrUk3hNwdf5BnmVC66tKaPCfogWPa8ko+bzA6TFA\r\nKsL72mcnBjuXjMPSSYq9cSuza4fFztQUuj+gZiN1QTzQ2fTeqlWRCkHl2+56\r\n6DPmFX+xuh86uN4euF5hmJr+oXkSwMEGKErJnGXd8zC+G2kUL1Qv62STPHJN\r\nDveSmMqhwE/c16LLpGU+0JldobnZNPAnqkHiKKQp+H3wNrIAT2eibZuKwJ4S\r\nbqlSDnjqVxJExnao9F9kuIF8tMx1ZPpu3J8=\r\n=mouA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.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/density":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/focus-ring":"15.0.0-canary.cedffb44c.0","@material/touch-target":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cedffb44c.0_1679421523492_0.5770769276467747","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/checkbox","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d93ce15a98bfb914e0240dad95efff91fc94c81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.36a4cba99.0.tgz","fileCount":42,"integrity":"sha512-D3VfK7f1mK74iw1lBlNZy2RyUiE6Zd5WpV7snLtVDrBW0tA8/sWuDRKz9wTaTP84XIp+IQri/Qibfg6a4FRwSA==","signatures":[{"sig":"MEUCIB2qRSgcVc2ExSg6Qjezx1T5WE92s0Prwvv+V8RKuikgAiEA5VSoJNPLQKt6mU3ilvUipLPuMItOJ8luA76CRkskM5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrY2w//S28myGkOijeX60n9tXW2bPdTP17OK2ZsMFDDBFzBRHFIBKWN\r\n9aAWWhO1Ln3udonmz445eNMD9XamOq98SFPjnxTUctnJWQp9wpLV8RVhvTY0\r\nwkK5hhiIzPkbFLwCRcCol3jj8ZmBvktN3cXHurWfc6C/nIw1XPMtT32bQXJz\r\nIBZd/45bMH50cPtqdWvC7oTIPksXgafS665pGC1hYTajC+/6iQh3vwT+h0RX\r\nxeR0QTc7dLR5FpfeTbNglYE7Dvv6o17uXkvom6WBkyCZBNkw7Prs+KQU5kQ3\r\n6dlUU1lFzr8LgZ3AgJBg2hyOJvjl1H/XmAEAndueo4VbywgxBW4UcdC+PK+I\r\nipTyLvJnwCHef3Le5szMv22LBCGs+Mf+o5xaXDC4Q35xYuXIlPc8VFTXKDcU\r\nnbOANeV1czgNAaT0CcHU31abIhAKHcE86Q+bUTAjEw507BnBBd6/mQ9P8k2k\r\nFshhUXkncBShoSBhn6YaXnpe2/v11fGlbUweYXFLNzHx8IlAWJvfGeNSjRhy\r\nf/+hd0ETQJB8q6Z7nfYn2Tb1bKs+RLPVXKEr/Qb34WSB8FHDGRfi2Cfeblxx\r\nNiRYzCOvdnPa7OM2Ga2srAqODWowwb7/S7FTQJ6ARV53Pe84LleqPzi8Ad45\r\nqtS/w8Sija5v4ucyIBXPWI6HyyI4CLfSlno=\r\n=L81n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.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/density":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/focus-ring":"15.0.0-canary.36a4cba99.0","@material/touch-target":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.36a4cba99.0_1680025824708_0.4425943659337852","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/checkbox","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1da749ad3b1d9a95ec086fda46e3f68ce112b979","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ed7e82ded.0.tgz","fileCount":42,"integrity":"sha512-rQn4/URiQDshbpjrXQu9NK9cVuCzyeGmmqy1c4hx5Am/z6BalhAwZzOj6HkEQUPFoN14CnFlA9cY6iHM+T6D+Q==","signatures":[{"sig":"MEQCIFNb7qwSUSeSVc0u6kd4igTYWNUzZNyf7HHqGDJwpvgsAiADWSqMnorwkOcQseWKuWvJhKHOsrePCKdGS65D0FWjBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI09xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVRA//RMlRM1b8m70mzfSwqB5F3y68YemLs46Wq+XIhNin05J+3X86\r\nME/iA+GjDeNv/ELEqXEkkaHKyiLxX4aKQDe1ZZyAfjpxch/1zvgrXaPngv16\r\nAWnGEa6xnBXfy+Xt2YYPSv5A+9U6ge42ZYsr8BXW7GtGirjn1+Yba6lfPvLd\r\nrrot8pYpu7TBmbQWoFAs8xp/RdcIQZNENiVFNFtmA8bjwpbK14z07ps6yfOI\r\nw4BUJSn+jerdK8NCwARVYcHwYooN5OVkgi4ncIr5CHLWBvqZ/IEf5gN/D7ax\r\nJkooyAIzPW9d4puKWsvMEZzR0zf8vdhLedvP1/laHaXoVipWtiWKzUlfhuMM\r\nKyIBGAiDKDa2G9UVrb5OwBnhyCHDCnIQS/Y5KIVSaSQ4p4cUNFpA8RxcRTnA\r\nSMKHmf18mFPJTPUL+nxHIgoFm3J9/4NWFnvVZNr/VwsnNJ7Te4BMPOvXkPCx\r\nZ5bI3dk5lJEMAK5TS/o/xpDMcOcKlbqEIl2uq25VWbbmMgHTOOMt6tC07VQR\r\nDVEq+R4bF39UpZaG/IUplGBNIeMpLOJ2fuxnBbcHWjEHKLbfRR0QG4NeCobG\r\nwTlzGG7fbfEan8hv4+ys1s0UUqB/jF4rdGkrqSSJ8TLcYgibfD2XNwbSfkif\r\n2OAOawlyr+W9TQIBI8EcDcropLfbL4u19Io=\r\n=22mW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.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/density":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/focus-ring":"15.0.0-canary.ed7e82ded.0","@material/touch-target":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ed7e82ded.0_1680035696756_0.23698418375603159","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/checkbox","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b825dd8e0e95b9641b6555d84633d3f7934f1a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.55093ee1e.0.tgz","fileCount":42,"integrity":"sha512-MRuxbO0gQ3ncQlAUwOPs8PCs17hOfWXrhsmQZYn9PpOlBrniWPIp1TxOBVqMEZQXUjWMro+H8b/AD+k9h5IvFA==","signatures":[{"sig":"MEUCIQDdlGBqxEy7LR1YIEhuMg2fRaqzebgBlpbrzIGg2p/s8gIgHB0IX2u9rRmMj1S/SLy3jWxwzBwW3mtvpKAf0TK97Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIgeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWGA/9HNy+iGPiPcETgEtm9Bfz3xdDDESDeypLLjaVArjd/tqTI6eP\r\n+yrEAnzzys0H5QuepSWm6KcaFuVNbcKiBTltZHeI6TmBcJQL4wGZoC7nYdsN\r\n+4fXHFg5oxKGBY/CYU1tlPVgSzmARw3ZeYow8vrM6Yj4vmiXwTlUaAj6FTsD\r\nKqh5BZcUZaUEAqqvHlipApC8y1fgL33U5PI4jk8OTg+ZpqWpJskaLoOuoBeg\r\nFiWw5jTm6UPfY7XVmGiZVeUSr1JqfYwnu/qRftUL9Opm//+hSKf6PamMSmPN\r\n5n/HP9Ea5cGxYUtXmjAz+hKnSZmJkYHePWWQnbGTScnVlDGu/aGeV40+3doQ\r\nRLYTxoqM3fVY8GLJvyP4wDGHMLwtbtw7Qs/ba4mIJUKUlst6FPTTWi0lcx2S\r\nUt7ZSnM4mALy54zYzeau5+ceWdzKP8PQOYvMQiORAVFyzm2nmMm0f+M3dVVt\r\nu/PWTvxaCEtJ0hm1eWI+ncjfPhzPZP9CjV+VeGmALgz5jToMj7773F5F1MoR\r\n0bk86qLfrJwo/bVUwuLFyzfET1pu3tFCX5hMXlOwM9ZWYa2z3z73r0J9xu5O\r\nyaY5raZfcsPxPftulKMuCNvFBrfwyg82HxrRGjCWnasixlL452DmFd8hjgKp\r\n/fxQMqVk+JpRwGQJG7OiCF5FYp5q5wvMvaw=\r\n=bcqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.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/density":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/focus-ring":"15.0.0-canary.55093ee1e.0","@material/touch-target":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.55093ee1e.0_1680115741853_0.6105662433503034","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/checkbox","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"958a34017900307edab6dc84e32dbb9807fb17c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0c53abc81.0.tgz","fileCount":42,"integrity":"sha512-frL/4BMOgh3yCvsIM1h9FCrtSTtUmdZzIfbPtOqqyVmJ7dVxrvSQ4m8GfxW0TozTXp6OBcD4mzr6bFijczB1GQ==","signatures":[{"sig":"MEYCIQDRs8heqc7geJVjA4Sw7ohoPsoouJc+x5vxIfP8vfAeNwIhAP07yzeFLm3d9MHxKzCxUJI/3D9kXikcNWGz6LItuQTe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3THACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqx3w//ZaFeQEnjhERvHjjDsR61xEliJhd8eJ7CJ4+lNyvdti0rkNGh\r\n0xiXsa9fGT+TlUAsVUeQ8nZRFfb0xJjaOopSS0qC46eYwYZ6NXuAoWTRe/N5\r\nlcF2+/4zigSXjSJ0zOSSD5EHSk1Gz5ZHloMt7v28Lde+b9x8hg8DEz+q1t8Y\r\nxtJxSRGlpo6lYgy4gzZSPJ2Vyen0g9FiXWVIJG4tf4dud8l1jE9+MUWzFL7A\r\ntedOaiXJ/Y66XvNV5Qxo6OL8odHaV7V0zyaL0jB+Hbq9s6P3ula4yY3AolyW\r\nA4hX15QtslVMFK6VtycRCvuBYp8ker7ZBf1y9RRs5CE5FtxQ9KchdEwkdkGc\r\nenv4+/wV9mPpG9N/JyP2BL0E1uT9eXR13SrJQXA6yfeLaGomASD8xz1i+Beq\r\nWtnfNYpGb23ZekqcUUgIIv2GrMprSe9C719cmIhGj953sKvEREVfkH7OliIv\r\n3a0jJSGi63ZCIz37yuLID1Y03ZRqTNuvmDLZprLYWzsm0HRwlQ8u7PKsdgtZ\r\n4rOBGqjoYYObQPoJKd6i15TLJBdzP9MtLZsW+eO21fimZlHCeaaXSv3dkSVK\r\njBqSY01PeqsqzMRd3JSeMAx7YTTJZhrr6XQwBYPEw8BvCXLqD0/hzJCO4IRk\r\nbnLFP61dQbaj4GR/CU4ZJG4ttb3a5qCjmdM=\r\n=I5OK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.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/density":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/focus-ring":"15.0.0-canary.0c53abc81.0","@material/touch-target":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0c53abc81.0_1680831686961_0.48527624143600634","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/checkbox","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.51311e69e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e73de341313827f972c51428300993b0b2e3a19","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.51311e69e.0.tgz","fileCount":42,"integrity":"sha512-dWBM7GKojXqHmGZL4FKiMTaBzdhizAz6q40AQ9RATGbAcgsYE4OKRTJO4cxXdTt2mP1YOW1g6fmpXdEbbX0J0A==","signatures":[{"sig":"MEUCIQCAHO9fZ3wIiMG2GILDALLYYFW9R6GIpxkJpkMb6nSWVAIgPYFZIZ52oj8z3E2X/rdIgaaj+kVRKK+p7CO+4sJYX94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2wBAAlbAgYwWqvuwC25DvJmfFz2SzL/+fg1HOJge4yafAg4T+jDkA\r\nLbNqwUWVXVWh1Yp7R8vTSyzyvz0QJFzmEnIrtUeJQF+nSXgCLfHFQy9pT+sl\r\n4yC++yvRmeBG24F8AOPOgvR+GJHNPl+9F6PAaIPOMc84PqXOXJaZBNf2/OQ7\r\nFPqfWCv5M9b3P9tWm1nv4rkrqv3YiU/rqx5KFFQxVWYBE2wchfsLwgDICC1y\r\nUHiSIqhkx+Pi50iyJ1PaFaLHd+PK6+yYyzKFU2Z3yriVXiFlucDUpZO1PLn2\r\n8ws5xaKyB07tOM/knb5sgJV/b4htW3UuJxtRprxk1gjhnhoLP51ZFUdx2n3U\r\nHg9fDJgHPagkia9FQ0po1xhL8p7KfyLfHnvsnotNX7SjvAC6+fk7bHcWNqor\r\nR3i7OxDuDcCVstFj6WV9w2fYG9j6sXs3ZzhtCvZdixnwjU6trNk5LNAKGx4e\r\neBf0XlIUrb+v7HN8auLVDX2xYrXz/ZWkHSdz3PZumM3okuAImxhgSuFfPHnN\r\nS+1BxpocnrHRDU0+TmKBjFYRi33L0BeQ5GYeLCBZJPsuJlXfeYHD+H5PPV8X\r\np//wqVJcBpuKtoNephRo/v4lnFaP0xPiM0kw/oHAiMsBGOCs8IRxsqCBDasH\r\n4b4F8WsKQcwGj6G5miO4b12W8ms3pPs8QGA=\r\n=+1dh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.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/density":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/focus-ring":"15.0.0-canary.51311e69e.0","@material/touch-target":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.51311e69e.0_1680890890506_0.21215652596325119","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/checkbox","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a71a25e939918fc104f199d46821fb515157bf2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.113b1a38e.0.tgz","fileCount":42,"integrity":"sha512-tbPFfwLo/PNfBMnkwi4LJjMgpZ2g4SKC+cFdwf9U3F5gk2kmJQMARDejfoDT+Yjri8svkUBvpENhcZ5ifvHTnw==","signatures":[{"sig":"MEUCID1XfMQA2txF1ssvCOoEf2hD2AwNb/zD5Eer6ZEATQQkAiEAglqWiQUzDi1kEvFTMMnbP3Fzk3jMCV7xycxkDoABKB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIV9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMSg/+PXHPP4B3o+bBi0sGhndzKeq5PZxwinWo8sRLC0ZB8IhKPRDR\r\neQT4/P2oPtOyBrF+GDJoQCRhpyaVQnyHmi5HeGtIgEnWGwvm3nWwyc+fjDqm\r\nFGJgBHfcreanj4nxh7cakry9HKeuQb9LqDAx/MVknDI23fW0XCOrjb5GuBhD\r\nOgmgwV06dFTNVftzXqxIGspVnssBP8gynjsSPQ1BfM7SA/31FL7FfzkY8YLF\r\nVI6UOVLN3BB9L/14Ul0E9YjMQYBM86XGTNNku617O9+6kKBQXdBqGLOdu3/G\r\n5kxdCza7P+l9j1d5X168LzRGC+cC4ibb02IOhUUFBVB1KkZOnZ/0nuvEFb0w\r\n52W/JxBdYV//2rZjeFvX6FnTKaUUxjg5i7pxpJzasl3743rw560uG8wI5iQH\r\ncNaD+ZshoJll9SCyBuVxpNZxR5GpH6Hh2EAbLLrwVmzc+k7CpbuXCLF91VNC\r\n20xDbW9AaemEQjMEJJybeAjT6IzE1yUxHuKf1Tu+ianVImNtF2Co2EkJAWfl\r\njcF8lrD1Dhlr7t3mvY0EWOqYOSCltD9cLeW2Zx4KqeBzTrx7dKOBqbLEG4sH\r\nmkCVCKYJ4jSRWhrL5Vx0ljtXhwP6nTraqyaNyxCnvRl/KizvE1tZduokNaYs\r\n71KB+UYNYc8HGUxu0cmCIJxi33qGMeJCQO8=\r\n=zJtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.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/density":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/focus-ring":"15.0.0-canary.113b1a38e.0","@material/touch-target":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.113b1a38e.0_1681163644869_0.34474337922020903","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/checkbox","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ea2191426.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"206b7d1f8754d29f63bd217342bdb844b1416f45","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ea2191426.0.tgz","fileCount":42,"integrity":"sha512-w72QMAmuv/MBEK7/rknC0fu3WusyVG6PFKh8AjvRyW3QJVaaXq/nGL6a/8qpd3q8JpaUm6Fe7vMn3o0k5q3Elg==","signatures":[{"sig":"MEUCIQCGPabzoeGLwXKbzj7Qfx93cBzZzPXWoJvO0aDb3dfTfgIgeHzc3JLDjN9qz8LlRSAL+xrTAWcJIol5CWQkj4E6ZyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNddiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobvA//RXGlBvifDwDkYzQFMyBCHFdfURRqOGDX9wiB43020ZP4bNmD\r\njDk4XcSEUo8rlLYv9N6kiYj8zzDAiPQuapP1EG/jon10Wu34KFyT2hRizyPH\r\norve6ACvUFG2+FU8war4wi710GIoBZasQa+5qyKL3YsW63R9Ng1NbVXibDTS\r\n2zN4wKWxm96BV9F4RAMXvCxFfcbxTaBMgy3GviMamELiazdKxEnG+7o076KU\r\nFsvfjXO/tLL6DmYD4rM05VCHie1kDPoxGLTO5mm81BMtzSyoFjKaksZdvXKA\r\nwVYIKbTDm7wPC+aHcTtMLwb945sqjqaDbja6q5rWH9cO5im5jD20u7HApHNU\r\nxgwOKtcNL0QyIwiCe9vNqbhjBX1Z0qroDiaNkcQ/L+GJ3baRMskucbvDWc1C\r\nW7n5wmIJhwjpnj5MmNDc7UfxvWYXYoildIexEAMvhusOrjchjgM0gUQ9hoNQ\r\nTT9McBHuxBrbNTY1hAKlAy0OKK3cjqDC/6Tyxzuf+Hm05tFMQcZso8k8ArZH\r\nIDz0d3Cf9YOgniP7dxcoQiRQSA6GWAZoFdSiKrVMK1tJ59zDkxcTSc6cAzt7\r\nKTVPHob+HGUd5/Dsz+RQLe1Okc4I4b2akM/3oEm+brwzFnBA2zRJAIUHcgBd\r\nFqmp5ASaDiRaSOTpZhC8WPcSXHaOItJX6SU=\r\n=i1f4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.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/density":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/focus-ring":"15.0.0-canary.ea2191426.0","@material/touch-target":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ea2191426.0_1681250145846_0.2007524466451287","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/checkbox","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b64bc0d293a7d56ffec8f64287bd0758eb8efc4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5a5c38538.0.tgz","fileCount":42,"integrity":"sha512-hkJp91YJ6Vv9Ozr97ZYWiXpEXXt20uAr+tSVw6vdhjzEtJOdcfGfDZkvmokBDSIdEdLHIaL9QxZafrk2s7cB8Q==","signatures":[{"sig":"MEQCIGCryWOlybPsUmJJw8KOv+24jh7qPGL/ScY+sCJsIH6pAiAgzuC2uZegMBniihGxebBbfiNLjyRRqSnRguqDGxZfQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5OxAAioNT3AVGSAzmYK/eqBTRKVh98KKFXkVaQiGhiqYuDLhhoRe9\r\nKqPpCvPDCm/ojUAEt+Oe3QQrjp5/VwwvkEL7R7uNjRxSpx5BJPUfoIL6X7VQ\r\n8PIyj6Elrq8o/JWpZo4cFtReFMTzeyDBUhyR5HhyZhGQIuekG8XQwRY272ns\r\ndzDNLLiQqH0jdEUbdxangShF1R3gI/YOWwjuNtgaf8MoZWYjmE1o8APAZYEj\r\n3xCKsHahC4ywA+jgahPfZYqJC5SlXMoRlG58vBfDsfC6FwoMeOd5Be+UY5Bz\r\n5D3O4D8VZp9Ul4jvovap88ohTkpOjACF85mGbxmgJkqSc5/sXxuKosL1KaJl\r\nbOQhhgKR/TRo52aeCt1+Yq2FoCfxrLNxQmUckjwm/JFgjKpwY2ZkrourIzkQ\r\nesY9pu8uoX0zcUwIxhLyGF9l4ukQR4FaKHIqRucHoqkurZ1TiIg9oBPbIodc\r\nmljuZ9Bk2rDRyp28oKoDFQ6Px5vgUojhlqzV4IiRjcznqtctpUBy0qLrxmpb\r\nvgCu0xTc4urlLZUxBD54/EgPlA9JF+1q4GmawZ3emz1SW47oPav4STv3FkG1\r\n3GUQJ5T5QfysG28qGXXeEw1DmRZo7B8pfgPMUA7cuce4U07MvX3YFe5y3UNI\r\nxwHVbfSwOv0j96U7QPtehXunvkoI8Bj1+V8=\r\n=4Aqh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.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/density":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/focus-ring":"15.0.0-canary.5a5c38538.0","@material/touch-target":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5a5c38538.0_1681252236273_0.01972349797558559","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/checkbox","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a893c78e0e601ddcbcf57f51c095655673cd5e4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":42,"integrity":"sha512-S13eIHhayBGjOXcwiivtdoRJCqGZo4sHx3YbicnUm5PPn+2a9GCo82Ra4NQmOH660tOHIqX0mSeHKwuXU0F5oQ==","signatures":[{"sig":"MEUCIQCTwtBFkL1eAO4uJzdOVCN9KIxRM6ejP6SmMKj46TfV2QIgJW+plRbCscpO8FKKntRx+vHN/IavXA26eDx5K1hhDxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeeEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbwA/+PQiAkULoxbvQUgPuC5xN/MIj6RP/WejBpSl8D//gJDkMqPju\r\nZ/zKeHeFF7FNNosEjgX87ALYZ+fMAwKYhHTceK46PTTI1xGP62RemMPc2d67\r\njoJjDGpJJGs2HbeHSrZIIHRwsYk7ojW62XKnlm/UG2N3e+QIuEi/q4paR6J8\r\nR86mq7JM3G9V9BCJIqwcm86XpSUIOFn/i0ohr5Uh2npyNfBPIEP+ZIUtvCIu\r\nSgvbeqwF/NMLVXSI8GGwnzJ10Y1eiE0tc6qPSEbHMlKMjk9PQd6sOfu4leuc\r\nX8d8mCS0Zl3iyctZOap3G036OyFwtDmXOuXYMsM7vI8QZK7F3WLBIcTWcgZ/\r\nQ6M9Op9tF0mwXlyDjokxDnMJNOEk5e8STodwxrDNKdNwTZLxSmOAxI9CgXxU\r\novMaTwYrbF7meIwS0Js7tELWA/dDNPj5EOfuqYJNBsiP3H5A/wOiHdW+KMWZ\r\nob2lBlcM2NnRDalbe/itESS3FXSEh8CBMbiQE9Na3szFLwdnFldZ0/MVRcSP\r\nO/zdO727OwSRJbfBOjDlbDUbo7X1YR9RghKvnYU+Ujg7+VUS4vQbjpDBdoqF\r\nHYxnpwuBN8hTiV+VIb9dKm1p35ZMZSRBaZFOEFCl0ENQ8CEKGLkgcqeUo/vx\r\nzLw/ZrxwXO/GQCE0N+rpoFhXV56bZhHep1Q=\r\n=tJEQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.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/density":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/focus-ring":"15.0.0-canary.e4b5ea7eb.0","@material/touch-target":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e4b5ea7eb.0_1681254276340_0.54464862112929","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/checkbox","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50cc6ea8324fde43bcd56d5f8f76f9f2a0cbf5f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a094dd9c1.0.tgz","fileCount":42,"integrity":"sha512-heXVx0vkTILvr6RUX9bqEqYmRi5eaoCArVDeOLSNf+h64fahEwQYaUjoHYhH5RxDtA2X6i//V0naoO5aDfBQLA==","signatures":[{"sig":"MEUCIEcodVYiP4J5Ved57yS8f9a5FoiR70lkQ/6QUnq0oEC2AiEAs5JSqAbvZquXtxfBTKrDBm3xA7wfcJtVH9HBdvujw4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfOg//RMevcWcT/Dn7xdhe1coIL2LKMKNxZSmbJissiV/okKZJJNrZ\r\nuxYguXVDUffve1TbpAeRDcZrJXGSFFk9Mc0i9LIrDOipVkflMlnuqlWOg27D\r\nFecCFTomZ+YJSytz8x5ACAsxHvs7lz1/6/yqQ7EozDBPFrbMWYiHVrMyxSog\r\nZvhp/W30bQp8KAmNp4e8rBn9sOhevoke0JuiIGTUXS3EB/8c5A4+qzpSRIHw\r\nKfsMmVYksUAiLuxi3WU4y68dOg8RQnmSzvMJ68TugKpVSEigMtit5SDq5FsR\r\nnhrs/mKrdByioZEp2MyINj2uLrvKgETGfRI7ASjTsbZSYzd3uuTz2pN0HebO\r\nSqxtgTkuCMpsgWRnAnd50ZC6nsHEzbC3Y2RmcgKYj/DAdq+TNXBPONSPNV2z\r\nKmniZQcVyXX9QPby4wpqm7tkM2PpoVNXEY+FF5gSQpfFS8mM5DLg+EE7TPOg\r\nenFddz824pvWfYcZ+hIsyDdGpCQz3F1D7i9nNWYRN1+TTTxK+UQ3z3icPhKp\r\n7VMeoL9fyS2P6aVOXqGc9RIogQbsjet2PZ6SDFJdCXjhRH3VGg6YlS5gByCV\r\nHf0TLL/0aryxarBHtonT2EKzueaho0PPopgrQlIutw9zUyTwdbDBcZIX7pey\r\nrpy0VignJLlQZ3fedu7dcKe3L6kMQ1hwk4I=\r\n=3d9s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.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/density":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/focus-ring":"15.0.0-canary.a094dd9c1.0","@material/touch-target":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a094dd9c1.0_1681512167465_0.3445879169528121","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/checkbox","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f771b091c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d7c3d13aac6fcac6a52ab5fc4741e942af6f33b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f771b091c.0.tgz","fileCount":42,"integrity":"sha512-OEiXqKjYoTd023z60JGcoiPIOA65+xoh5y/OHdPMhYsxD47G5nvgnx7Tid1FpD3e3VBv3aEa7NxLr6ioLrExRg==","signatures":[{"sig":"MEUCIQChdFf2eSZlhKwco7rD5+cTbbwkFcpnyhcErqH/SVLfXgIgd9Zn9lkR9bxErGfHRtwJZXXRNqRQuBxsQ+nwFO3C2TA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0zQ//Z8QZ5p5i+S+U4OHh9564uAR7sOvvMqspaz6H98a/NIetSiT2\r\nLzYlzdPIqV+iGZnFcdBua4rUjiFeuqsD12PQgM3E+tdINMyLr4XvkuT9H9Nb\r\nnNjCjbSLIilV8mu/DAcYaI/TqiL0FN4EsCSrAaJ+4n6vWoyJ4upSspN2bSpW\r\neqxRxPVUDaIW2VyeSrfaMAKprNG13oVSBnYCZ0olGpnyx06PybFgVch+Inau\r\n/x7eg62wWw9LdISgudEMtK9Lk2+mEYzjCPg+tpkTRxBJtoEbSTIGV9Psr9zd\r\nAVLTI55nfQqAScT4lbuZ9cz7KUdD7gTxz9R0oNpX8lH9/JUmB7fBIkK01o3K\r\n7bBujuTxqmsYwOIoiPJckuFIGldMqzXWGW/0iHMHwjOfuitSDJyqIwqCIccc\r\nXYbZR19aOzR3RpYw5fMhj7FtTGL8PKQcZt8rAfzPPfQWxXPeWnHLbdW4TynK\r\n8eJASvyOOZtszX8nTH1xgkRLJf5sue4HOVnpuArU9XQtTp0PpRH/YQJHldpv\r\n4A9MZHS07snKOfdbG15+KitgK+tiELTa+T9zDRRBjRK7xH93uwZCRswtLbMr\r\nnkrLvCqQ9YDnpqKrVmGY3QqEUX1PKBmgQt3u0PsNScxexeFMg5Jq32PZ0ONJ\r\nYsr2SvjSEFaiRr+Q3doQKDLP1AuF2vrhLfA=\r\n=z4YL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.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/density":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/focus-ring":"15.0.0-canary.f771b091c.0","@material/touch-target":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f771b091c.0_1681745911523_0.9715119947762421","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/checkbox","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42afe1102bb1e46a06cf81b944287261d28ce55b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.79b1b612b.0.tgz","fileCount":42,"integrity":"sha512-yaSorL9c5LbbruHz/kNx1xuiKOQ+eswJY02gUy1O1eijBYuOttGowIFOH1WFfh47cD+8H8hkkyfB3azHh5Bjow==","signatures":[{"sig":"MEQCICuOA9r0DIhKv7gVA3bk97v3A/Ymtx4hjbAKAelxAyr5AiBmgGsQ1GP9h8y6LSZHZzhZgJtf4/KLeU5GWEwFsPPHEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHvkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Yw/8Dzhs6++AppyLAEo+PivwxTtYz7+v06rs1d4ccueR34fs5eZs\r\n3NxLIFIxIybwbhSHca/5OSHcPateUTmXIkvVToIRXw8p6D9kOiYC/FjXNcjJ\r\nKTdfvxW2Ix/J+simizdq8VSlS04FZjpe6j548hf3GjeS0eRIaGFA8C9SEN8Q\r\ndvjIW9ApLyiBto+EXN5VCzcqQdF+9QR06ROCb2pRBfCDPClZP0AFw3Hdaihu\r\nIT5daSF8ID3XDrNoJjPF/kgRZ+rxOXxqll6PehLVSMuc2nKo4cnK+nxxudZX\r\nBTyPFcM1Nxo+42+L3Xs5kItoUoztHf/bjAri6aKOwMCiNv8+kXvz0erayvm4\r\nHBTew/ciqpf/5QdBLt1sP7tqZOmWAJ8w/oVPFNQaFnvd3+Dy45Azk03Cd69y\r\nNjsFDqYRRCnS1mkxernAXuyP4VZovDo59sfShxnTVmbxzy9x5SLkPcGOrFEF\r\nWZsRwWpkK9fC0lU7Ny5PDw4sXkldSIVbhFvy3flRFQMmt3PnNDLTGzlZy6ag\r\n0XmSrr6ZDbOanZHmqqJWw/fDA3dkfS+BTe8WLEIQXylJoFYB3GGHVs1nogxo\r\nQEeC3Q5BWEgv+37MOzD4/yHRbXP1Qc6EYHfML3P5I5H0gxDiYwyHYS2/HJsy\r\nVVJ+czfo4ujYcuFZOws9fnMDvYC7yc0koQA=\r\n=OE4K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.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/density":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/focus-ring":"15.0.0-canary.79b1b612b.0","@material/touch-target":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.79b1b612b.0_1681947620001_0.958438542961388","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/checkbox","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cef6c69c0ccc608960a1e8b0f32603738a00bd96","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6f50071e5.0.tgz","fileCount":42,"integrity":"sha512-1PTRCnnXrSBJ9ixaEq6JgOpmVc5Q/YMP26iGLW14Kxy24FzYQM0j1EKNoaz19BbYDbW7RwPcYzWT3dyrDvE3PQ==","signatures":[{"sig":"MEYCIQDOLEZDVoCDb8Kmn3TZ/0v/DUcw+RApU6EJg9+5x5VVJgIhAJE+MgCT7+x92SzsPES9A7KJQLnwhS40+kk5W0OspAzA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobsg//Yt7nZ+KXYwcNORkM2ypcWKhyvikBwBWIs6c/IkjLq8nmkejc\r\nQwxtkDT4/LpX3zNf/liQ/mP5LGCIsrZHv3QjLKeOOc8B4MXXNsSR/uy3YJyu\r\nBD9e8WDMzzmQXcAgIgqLIXsdzQG5+iutsJVGQRQL3JtS5WMxomX+Uqs0+XZa\r\ngR4XLieRdc3Wd51lsD9AzyMNcpY+wIFayi0VZfhE78Vb2kHPbWlOwf3OBgz6\r\n81WbWCRJ86sYeMEOGFIa7CaTR6q6K3p6EAMkkvhySbilxEgv6rV/a/mwFoK/\r\nyIfL2AVtQfifkZ0MPXg2RbIRdFRhM5bZV5gttFx//3nuNv1EtEFARrCZOi/J\r\nmNXOGiWbwpcmLVdalJTrpID/V/13wxIbHANCF9wo+B6LIquAkYygxfwd2Aue\r\nc3T9D1kPNdFAviTs3RvMfKRZ6IALQoWTk5jU4EGfqJBQZ2tw1+EiWYjhfTQ+\r\nqLynR2BJnzIeuI4cx5dmaieIUickksoCN+AG4s0L8qo5U5kzYeeIWZl4bkKs\r\n+SyCpILkKDkssgIhmk10oJYKnuO/saJqYM/tfTMwtdcFvaK1YLF2PzXmfvu0\r\niF5aDdQ+Nzt6JnBzQNgx4vPy2jjjbpPbfSUk7I7Msp6Be+JAXRSPHUPGQrWC\r\nROOoJa0j/fDLHVpIIaKRHQgslfW3MOosr54=\r\n=7Ged\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.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/density":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/focus-ring":"15.0.0-canary.6f50071e5.0","@material/touch-target":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6f50071e5.0_1682013662775_0.3293080040128098","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/checkbox","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ef754381c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d3f4fcabcd04f6d9b55b13e8cb20ccfd3e4f92","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ef754381c.0.tgz","fileCount":42,"integrity":"sha512-B9KxBWCdY5gkPhLLLdl0YTbgykYtvtS18O6asSJ8Oi3REDhS6xVmjU8kOPBhvV18fowr9a1vPwVKVrK+pk6zCg==","signatures":[{"sig":"MEUCICZWbQtstkzjQay7mUoEpV7NPQ+TGECyHXuQhNkQDhuWAiEAgI0NTE4VbBDpYjTFpPBDr+CzL7fWYy8bkOF5XiQDSYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJTg//RBqYkWfgqlXPflEx2Sd4u0tFQAu3wz3sMCGfkeEZKW5q3QHa\r\nHImR337uGtFDCzjIQb2bTKrYZI+68h+gSGPhQLrq6MwYPDJpn5wBTkTw0duu\r\nAk9/RlQiCdNpxVmHpRbJquIrorLmGipN0KstNX+/cVFBWHC4Bvi0s0b8AqaQ\r\no72JrgoIOLKi28P3scxs8oCqydravtCREGUZjVJr75830VHzce+vDh1Um8W3\r\nmd86WR30XgGqWf7lnDyjL9JjxOLUfHtjT4H7pK0R1mSfUgHZAkxYI3yMUmee\r\nU4Lq6Qfk92tUUj0LTiUugjecrp5ygKPqPNYUBCGOgo82Ms1u19FIBFNyD4VJ\r\nxXSHMuHpRmSVSUx60qhFUIRv0mgjAcmL+8AY+7EtFkkdKmuH4spItKFUir+X\r\nzrhjURKzJNtD3MUfvuUO0KKcU1K4/OJmPqoyqy2Db9MSfuStCYmfky6+Iybc\r\nQ1RPH1ywieFZ28IWPQqdv7JvSqvKpjbqe562QH9pN0YCubrjgm0NG1kvpR+U\r\nyYguTFg7tKdyRH3Aq+Uj0zF1yrhJpDdv2+PmcfeTX33C4oRA0t2Ca2OwH49v\r\nHQvLcwtEJ9wGebPscmuA42J2JYYxFnQ3UtmJI08oWhuHvcBILNOALoLB8sJU\r\nnAvbj8rmGmFwtaCSwOWHiSXECQuK2xe6KoY=\r\n=T93O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.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/density":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/focus-ring":"15.0.0-canary.ef754381c.0","@material/touch-target":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ef754381c.0_1682369474898_0.4791259453363603","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/checkbox","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b93380563fd46c281ea32c1bf4b6bd3c1d3a032","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.69ebf61ea.0.tgz","fileCount":42,"integrity":"sha512-DyXzK6olguabeYe7vRfwzWFNk7nQU9wVvuPYYTFuihV5O8uJx02HakyVfembn/djvjNApechQjzSecF3Bqf4vQ==","signatures":[{"sig":"MEYCIQCe1HMNgSiTud92mYtv4T+v8ngSb52ImO+Tz2RF5DTl8wIhALhi/hCjLwK7oZIYNHpFJjF79qF8ninEyrJjf4moBZZS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq8tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX2A/+KwH0BAU+ggRIJwTk3PlbXJ3voGej/8+OFiXMuBDk7Q5GRNmS\r\nCl/AjDWhMqyRlwKC8SL2xVbqk9qOAbBauhSfiB5UNSrBgy1OL8cI3JGADBVK\r\nMHW6xI8ROJmnbIj68FMFV7ocUiltaduueRbSTJaoO9YEbJRWiYMCb4sPB0nj\r\nh1QJ/xzLmYpEO2llIyfb5DIJUTR27jUd+IJQ/vtcWaraQStAm0sY+fW3qxpy\r\nlDcfRKgdGODqIa5y3Fe7+WfNs9GO/4JDcMT/FvWTpCglJzO6yMR2FI05N5kQ\r\nRFT51hLXmuYGg7hqgmTsMHIG5qMcvFKSPTtN1x3cCZRZKwqaM/oi9KtbdcOy\r\nyhzdxkt3oFUXj/p/rFSzDy2PomJptVtOIxOj4jYdYm60H7LcSh/rVEA0KxSz\r\nbsPjcpVhm7oA0akMUAyET2lB/XQ3uhTGCSBKfZmMs8elb6ShK2HVdkrFGA3u\r\ndcspQhTauMM4U2QOat9TIVaJHBCMx953wMyR1ofLFUucq5L0QU9XKYnMGIV5\r\n6d8c1ugxw1uZBKqiDeYvap/lL7NrWifPZS05sz2RGfGISb09UxZFAaxmVxdE\r\n21HectGPJ2HCJOYarEX1GIpUoluAvY5TbxNKSeQxzii4wR6l2myu7FnfjkZs\r\nlupxuckC1WQzW3q3CsSBWiGf5V1V+4eRdtk=\r\n=Ai+I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.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/density":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/focus-ring":"15.0.0-canary.69ebf61ea.0","@material/touch-target":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.69ebf61ea.0_1682616109599_0.9355676535473685","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/checkbox","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b90be86de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f15bf3bdbdbf86b1c60a8ed0500686c3a482035","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b90be86de.0.tgz","fileCount":42,"integrity":"sha512-QKrLsGbP981JJbfDqtNf3FhZqjsZWEmJPI5dgWMR2goi2O67ga0VfHyva8J2+QQvllW/SHXuTUri28bmAUNDZg==","signatures":[{"sig":"MEUCICq9cuGJXuaOhoEYhVZwZDL5gU8/h56aUEzElqKxW7igAiEApI4Rha5rSp6wc4k6ZlcAGRmI0Py5TGRDjm0KiguHz2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrLg//cLe1CleYvstZJHvbfOR/uFn9RF9iQE7G8Rn+yLb6AL+oEa35\r\n0MtOTuygRp0Qeu559k6FEhzZvxHs3OMG3uoAUBG0VpEpJDD4lHhCxLJ3RGHl\r\nN9AevTEnC0jwsDMpdWpZQkNgl2t7A9FFmn2e9yYCVaHZQ7uCHMiBPjyfEAVT\r\nEBbKe7PSyHbaL2phZ9kcyxPB7MFVC7ddiz+qihQq38r3kiGTNds0/DJKulXe\r\nUWX5R7IigUNDS1U5lOEvT3ykrZ5oWFn/nfo4jNIyMNTRxIboFFJ978PMM/Eg\r\nyIbvNPLm/nx3Jj79LqMmgEH7WBKeUlEoWINwFRQiY4Kx7Aenc6RBaQooCNEp\r\nwVF6b6LuL1UNBMYvWVRwAXOb6V5ayraK9G/5ZcPRTjO+4FvfwSAFjX3TPssG\r\nSjL47nPlX7fNLmsk6fChTqpCYQ+YEVrr6R+Q93ewr9tSPPMVTTD6m5Xp0jqp\r\nJeENIb9eL9cnWmSG2DpNf4Nfm3S49WZBCwZnHNg/yevUqEmEbBehnXgaU1Oc\r\nUPLaga8mIuJgOErgoHLuLgHv45UE7KhfeYGLB9hpP9RQF2MwSL7+4eawIZCw\r\nIMariPDnWUa8D2XoTqXzHGRVNMT9pPzrdL7PT87bhxdlmOPwHEssDJTLJ5BL\r\nTLOHSYz7UlY9P9xODtxwhXbTJ3xA5Whjrf8=\r\n=h7ab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.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/density":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/focus-ring":"15.0.0-canary.b90be86de.0","@material/touch-target":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b90be86de.0_1682727715851_0.7003966389264775","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/checkbox","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a748b3661e9823332153e9a9006c98705e99706","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.51f9c0c28.0.tgz","fileCount":42,"integrity":"sha512-GEqx+GQcgslxRLsLpbj/ddd4rSgCQxtikkvnKUBd8nw2bvNm/6HUXGl8IaTU2nj36SS5zNLdiDJLRI+k+G4C6g==","signatures":[{"sig":"MEQCIDvzhGWAAO4jnbGuWuAn27KAnzc4Q66JAqBYeEca+k9YAiB/tYv/NkyB4lp3vls+Ddh/kTh0m1hJAVIqS8d0Hlfn9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGVtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo57w//aEnlXoIQk7D8XEYsoDivSy8gBd4Zqg+qQ3nvJOofsQ2AMAEh\r\nls1cG/xcmVYvRDeRCmzqz7lwiSAJjaDL6ZSIlHmUoz+OysDlrO9AIpPprZFB\r\nFcDkE1yWJ95JWpUcYBqttogb7h5WxAOEv3SyGIwMim2yWLtCJnRDdxyGlO4k\r\nE4tlNuVInyA1Gy+IwBDrXi4pQNTY8uj1wfWAeeOjrXZB1jIZOMLaCisuwPSp\r\ndjgiR96wvPb2TiSGtBcdYYZ2/YCH5lIefyqy42HY2Ai2woToMp2em8bq0bhv\r\nk0W2Eyine/jffoE9yDuTvoaEg3jwyD3Y1x/hGtRtxpzYe6Nh6gg0Kw3+C6gq\r\nbdSPJ3SVwCNwralKFCWBkcpHehzUEiKT5Ul2jgjQRCp52w8vyBvSpK82nHi7\r\nFpZ4R0q+Jiq1HocTkZRTKyO1ouDimc/xJxvB0u6295MLrtqKHVODInb3LvlA\r\ntBEkD6zato5jgHPuQFbFmPObH0ekeADnktL44x/qJ06/UktXCbHaHIXsR7Ga\r\nyTVpZnZtQit4c47Rvt3GGWbKPbE+uZGRolApkod4g9lIyTUVuVgk0N493nMt\r\ndM+Bcb+HX/9ezOGqW3NzSteA4v5bJrm5zlszX184QZcXhbaea3ZsxZOFAzm+\r\nA53sRcQqYQgj6gkf7n11Ni5f7XRgK1rZ+G0=\r\n=wB0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.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/density":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/focus-ring":"15.0.0-canary.51f9c0c28.0","@material/touch-target":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.51f9c0c28.0_1682728301667_0.2700632054389307","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/checkbox","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4e840d685.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d391a3ef87e777610c517da899a07f57483ba8b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4e840d685.0.tgz","fileCount":42,"integrity":"sha512-g8KDed7HYAqO/HYTV2PhjjBGLfLwPXDw0s1JYINcrHIC07L0sEarAaYfsopm2seLw9djtMSi7R2rdR3a4G39iQ==","signatures":[{"sig":"MEYCIQCykLkAtyM2u/HgLbOoIOQvQAYvsb1DOKZW9bzoQvy6VwIhAJSZQBeMfUlkRWRnuvcHCh6eT+ZC+t27ats7tDpJ6Yj5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.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/density":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/focus-ring":"15.0.0-canary.4e840d685.0","@material/touch-target":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4e840d685.0_1683041633773_0.8902195017308787","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/checkbox","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90101ce6327eaf3bcbde7bca4a1e4e6068b7be4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.10b8563e4.0.tgz","fileCount":42,"integrity":"sha512-ndbAJMwl+mYaxyEswHCGbUkbmlP/m8onV7CSqGseKZVz0p5eIKzStWxgQWxxCDtqTty4Uwclu3YrqC30xYrm6g==","signatures":[{"sig":"MEUCIQCDE17xHaujmxa4NXWuQaJV8uZAd9fl+MVNq16PQbOmPwIgdGx0IVI7eBdp6Uodkhx5RU6Nq5hO2wxwjTe0AMoRlA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1vg/8CLxomLZya4XvGukkws2i0LJUcOMmmGIYskY2DN2VYdcyBPVz\r\n3oTH18xxF13dBxXN3hi7J8GXZBLjy84Kbzk5g7S/aPYXIcXbnxSAgUR7K836\r\n0NKgR0it/9SMHGUZCO+8x9HlqMgBGj+aB42bMcIFiofnoVtzzzZB4akfB+uo\r\nXLWH6+S2RYjYOYp2lQpKTLe2uORp0CsTPL28cJBkemv/qWhwlfhe3pLzCNBc\r\nS0ufrCOqB6toLaQrgDSer++wskvegvCWh40mTAz57/oZh55yAQEW7EIrsCT8\r\nlIILUZykRiTFwH2OTsMTk3gCStaStkKSsa1aUXhrkblhVbGpbz4UdveCU5bl\r\nZNQvaEvgSoBwDMkSJ3RRUpbiXiKdT5WnklG3HhXrqkXY4kPKsX6eLegxxnZU\r\nEpHczzM4GlChQvcCqMy31n4YPP9KeNDqUD7ALgnWO1Mlr/jgE8Rq0UHsjlDL\r\nxOF6v6Sk8SOvFjK/ywl8/stiZ0YesYiy4rO7iNn26d0tFQAdWsxWoJDM6oaj\r\n1Zag2M8ofNCn1mQdhgJ6bnLZ1swq/zhOEC8WXc6AB6hwvWmlfbyD1Mj3D6Jm\r\na5XeL3r2hNI1Yb9j3RoWaM2+shIicwEI6HafzsFqji22P9o1HQhnOF9xPSuq\r\nbnZemcaSxUy7f2udJ1QKrlZKxtFuT3ZIBeU=\r\n=OYco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.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/density":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/focus-ring":"15.0.0-canary.10b8563e4.0","@material/touch-target":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.10b8563e4.0_1683070927625_0.18672879766005557","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/checkbox","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f1883652a0c5cb030bad3a9cc4c7a759e9fc5a9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.736b7fda4.0.tgz","fileCount":42,"integrity":"sha512-Qxpf1Qf694nqbPQoC/gyj6Jrh9oUdpq9BCk8NxzeUGM+V4uWu7Xe48e3Zjh7K9+hw9qaeI+QGH0V1y6GaRvzcQ==","signatures":[{"sig":"MEQCID8iBi+1BrB2w/aJIwxA07sv2gdxjy4RVqbNDpzmsd+uAiA9ZkwCpsUcHLpB9okN5EFRjSXUQoWISOo3swlfJySFkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnk2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0ow/9FNRntBPhPiguqzf7JCLp9FLpU/8Icdcw4fR9R8mA7DAgqFsI\r\nB7tp1alZw7begNev+lhjOEd4J9BtQB9WgRIAb5arf7vUx2lnyKQvjI/Cs4bq\r\nh2kXmJxqwFNkFqca2etHE3LwkvGgbkfvBsWlmRQffeqmPxDgeLXtLS4rR0uY\r\nwExdR8VEeR8LuLdYkToW6mZ9xJJRSmIuFCpqC/TwYL+CBfzKOdlsvUwg4HeO\r\nVkGgKtk+s9XEhyLGX8d3tG1u+zJfz37wkNbjHvO1vldX0st8lY191FJ2x7sc\r\nWOQ0IAQc+gtTWVMo8krqax3/9laCc+vlXkVkoVcDxktwkFwZoNN01K04sfCG\r\nG5B17PO8/Eyzxv0Dx6YLty9dGDi+T3yPD9xwQ7E3U9WgySSYi/wwoWb8OKKS\r\ni0DgjzWAEi4ig/y7Jona4FxDv4s5JYZgpzmdLhTUwlh9qkqr6cCVsJqVoTaQ\r\n0+LTS9nRWTZKpR+nr1s3bakva+ai4Vx2fFJC93O4hKvvAIqU+WUppJYp9/sB\r\nvWqCN8dbkqPRo4pxrjsyXNrUN85+V7Ghr6kyQM1WCn9vkhXZD5NoGnGoeDCZ\r\n6fxzqwNzwsXKu1Ly1WwreMrvDOmRk4ULtZ9YkI2QoDhMGCRLEk1o/7DEB6dX\r\nvRFvcIyitwasF+cpKLpni7NC25e6QdaX/58=\r\n=x0kQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.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/density":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/focus-ring":"15.0.0-canary.736b7fda4.0","@material/touch-target":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.736b7fda4.0_1683126582279_0.7286399604883824","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/checkbox","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1293ad96e1ea2025b9b497eb578495e7370973a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0e533c5a1.0.tgz","fileCount":42,"integrity":"sha512-eGkHk/INCuAlcNVCx+G04oLiO7H7UKBUMIWxFpqTU+09egrPYr3oJXODe5HVSGMtryDAaQLYW2Uks5SBQt/VDg==","signatures":[{"sig":"MEUCIAN6zAJBKRo7wi3dkc2FVBZmyZ14X0HhWUvgRpJREv4UAiEAu3SZOXWT0GNQdwtRFNvsmy9NRVkN6xrt3CODuySSqdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.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/density":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/focus-ring":"15.0.0-canary.0e533c5a1.0","@material/touch-target":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0e533c5a1.0_1683305796721_0.050247471055071324","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/checkbox","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3e71a7d75e31c1029e35f55291c701e691c141d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5f01c15a2.0.tgz","fileCount":42,"integrity":"sha512-14hhHLeixl7+/weLks3wXTYVA6nHqmF2cLcYwQCjflJmY9PbXa2aksEnCiU4HZJbrYGAjcmsS5xrAHfgWz8OnA==","signatures":[{"sig":"MEUCIA2VZx7CJTbepvofNMQk/KGbJwDI+siAaW1yoPNo6fl4AiEAgQLqQGHtoeauS+ZVTWyz27CEPF6dXxoY5+G3CeT7hds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.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/density":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/focus-ring":"15.0.0-canary.5f01c15a2.0","@material/touch-target":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5f01c15a2.0_1683307594882_0.21233312615277922","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/checkbox","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf7a63feffaec459f131b76cd500fd22a468560b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3b5b55e31.0.tgz","fileCount":42,"integrity":"sha512-D9fod/+GYQVjryoWR4pSlXsLrUsosGOdCzlMwxmoJiwla1dUPPfEsgy4h6+ipPQ7hd8KsJ5fn7e1GArd3zzbPw==","signatures":[{"sig":"MEUCIQC2dUxcGm38IdcEuSnskIJaVIZxwMUFQLT481GahpyptgIgfC9opx79CnvxbgjYG/jIii3Z0N8K6tnCi+u0ghtzoVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.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/density":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/focus-ring":"15.0.0-canary.3b5b55e31.0","@material/touch-target":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3b5b55e31.0_1683311971200_0.5905637902991323","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/checkbox","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d0788120f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ab0bd4cd91fc142140bd97c59a2382e0d09a75f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d0788120f.0.tgz","fileCount":42,"integrity":"sha512-AI3xVL9PZSJUwF7ZavQm6IHHf7GVvU/Ku3AItGVqMNAMgiCnh+cZRYADVVWXsCyZ+dG0b2TyGP1PJ3q3Ox40Ww==","signatures":[{"sig":"MEYCIQDqoiQAa4s6skQPq0aQsXPOChqjixxKQ2AnWtpXelQyXwIhALqJzUue6bAFKferCs9VfkW9MEAXV1GIIRJwJdyNlr/z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.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/density":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/focus-ring":"15.0.0-canary.d0788120f.0","@material/touch-target":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d0788120f.0_1683620606140_0.2046660884215563","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/checkbox","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf5939854e67206a07dc68fc2066f19f390ec78","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f52358dd0.0.tgz","fileCount":42,"integrity":"sha512-8W4B5FGLB2lOPiyLDJjhbX8HvbokjgRhTJ+vVJf+0H6KtK1FTlsHxOMljPXs25F6/elV+IlKQBjPgQiyz4zXQQ==","signatures":[{"sig":"MEUCIQDZIS/rHidPjJGCMgBA2kEXCLPwlKIXVcsUCJZE5GdS+gIgbAjV1ygkg+kFclTsoPuHryk3vyOAgQqDjD+lhWzLCCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.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/density":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/focus-ring":"15.0.0-canary.f52358dd0.0","@material/touch-target":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f52358dd0.0_1683901846615_0.33467102227767853","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/checkbox","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ec8e40e8126dec8546c9990f25b382e070beb54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":42,"integrity":"sha512-eJIu7eW8y6QwCah1PsFXwofVDJJ3L2oVfT7RaqqQt9x3BGCHwERD1goUuKW60ui+873gbt+jITV9vSZ05bJy1w==","signatures":[{"sig":"MEQCIGOsCwX1iwRSka9GJR2z4NlhbBiomQsWD2Ys4mhI3D6oAiAn9Y2DjBNb568YCR8wvkqjpL2WPNXse4gW1nNn7Ir/gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3c3fbaa3.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/density":"15.0.0-canary.d3c3fbaa3.0","@material/animation":"15.0.0-canary.d3c3fbaa3.0","@material/focus-ring":"15.0.0-canary.d3c3fbaa3.0","@material/touch-target":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d3c3fbaa3.0_1683914474210_0.9399550408621977","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/checkbox","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cf3082f8fad896888883d83dd754eb7ab7e391a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.576d3d2c8.0.tgz","fileCount":42,"integrity":"sha512-eb2Mq0ME6l0o358/WSeRLzaSqj8YEDb1LLQZqivZQhcNV9NnqUtMEMx1UEEaH7RelbsSraqQAQQ8/zoKmDBZKg==","signatures":[{"sig":"MEUCIBjS9uDCueEWKePCB+/n50sj7MjfDXWDuMxa6Z5GlyOyAiEA430ecSszLgGmcc2izEGUe9FZJ/ISvgfOoJzggW5qj2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.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/density":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/focus-ring":"15.0.0-canary.576d3d2c8.0","@material/touch-target":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.576d3d2c8.0_1684202418920_0.37368127061083967","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/checkbox","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a03392f4cc58a987ce048f5c33290afe784bc57","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.19bb36a46.0.tgz","fileCount":42,"integrity":"sha512-AdteuDELkk1xNEhRnbunaAMvDUzqqOZ/BGbf8Nw2VuhnxtgBltnk99L4v/84Ne2b1fNZxjAeME4Apn+RCYsqVg==","signatures":[{"sig":"MEYCIQDkkn4lOooQ3gYZ1pguEvAG2/RuNXwMiDqSVLG52Ytq+AIhAPLnEWpwFYxDiNJ0Djt2PKcXe10hsxserj3p/6DdkpOZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.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/density":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/focus-ring":"15.0.0-canary.19bb36a46.0","@material/touch-target":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.19bb36a46.0_1684266859003_0.7586782503938221","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/checkbox","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1032c0c4a9e1448de6b5ed32acdd961c894bbd5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":42,"integrity":"sha512-7yhbeRq8+saRiH3f98H8BkaDLchRijGyeSqt73NWTDOIcS5hPpwNw4vJ9La0mlLj3jRBkoTSdGYpMo1hgvlOEA==","signatures":[{"sig":"MEQCICd+3j8Ky2KjAu06t77ueB0tRnRpj08Z+mLzmWdtHA1gAiAlm8Z4eb0/Ghhro58lIKheiVfHZtuH3y4YUn0i2MAtUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.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/density":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/focus-ring":"15.0.0-canary.aa5ac7fe5.0","@material/touch-target":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.aa5ac7fe5.0_1684776365498_0.7571077889180746","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/checkbox","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eed9769724c900e04575548f6f70941d83cc48b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.90291f2e2.0.tgz","fileCount":42,"integrity":"sha512-hCilHX0vLedMgeRSOskf+JjdfLIUvEg597LEkTJHnTtJkhwypvol8OwP3eqz3TyJ3qGimIi/sFPKdMBn1Uk4AQ==","signatures":[{"sig":"MEUCIQDHwHyTsDDHdMh+BBKUqLdbtRfZ9GUjbdyOrk30vln3/wIgfYczesu6HaopLrEQWSVbwnFgjoUyZWJFmmvAAiKv/rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.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/density":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/focus-ring":"15.0.0-canary.90291f2e2.0","@material/touch-target":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.90291f2e2.0_1684863778085_0.8325537641078005","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/checkbox","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.446734f27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e6e23155facac70304a059d05786e6529c52457","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.446734f27.0.tgz","fileCount":42,"integrity":"sha512-1QGmKUt6+XJM6+T0PISYEnfPHosAyGiF9c3gzVfU1TPO7Hisck3yYcf8pFh2lhx47W+dp8h3JHx2Y3/vhomUKw==","signatures":[{"sig":"MEUCIGJV88kelZcn0UB7MN+DuHtQ3hgwA3orgjtlWGrpJ7sLAiEAzgf70eKntZiGn0Seggi1Os0jTooJXUtM/XaUiqrHUCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.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/density":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/focus-ring":"15.0.0-canary.446734f27.0","@material/touch-target":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.446734f27.0_1685483312121_0.4048004831016381","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/checkbox","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.19de312d8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99cd09b090f5dbdcfd19e5629e5c165dcae3ff81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.19de312d8.0.tgz","fileCount":42,"integrity":"sha512-eoigyVIQGDNfyC7d2LvcMAuND9c2bt74v4VUNHl3F5pMvajcJHbSI68DNaqv13ID3slRjcRYDBrYOYRbdMwccw==","signatures":[{"sig":"MEYCIQD2zbuIC3P8tiZ9CP3Bxsz9y4voF4WsAy/HHVHoGEs79AIhAKpKNooUKe9/xKQVHObFO8Gdg0u7/UWn81uiqHJkwtJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.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/density":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/focus-ring":"15.0.0-canary.19de312d8.0","@material/touch-target":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.19de312d8.0_1686071922118_0.9862286860475016","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/checkbox","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6081d829b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f25ebc0ac926748030aa07d0dd8e4e4347a849","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6081d829b.0.tgz","fileCount":42,"integrity":"sha512-z5mDl5uyVe/KTiFe27FTWQk35WjrntabSOZEyEuQLYQtb5GN/6kWuTa9m7YwOO+B1CsKCPX5Am7E48sKesPpSw==","signatures":[{"sig":"MEUCIQDPBDXJnWY0ek7llbregZ3mZBEQ4xAoRYFbGeSdOivvGgIgMTQlqMMsUhaz4k8N94ePL842RfPivk8zUTo6Pf1xEZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.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/density":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/focus-ring":"15.0.0-canary.6081d829b.0","@material/touch-target":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6081d829b.0_1686100457862_0.6563668551837656","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/checkbox","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8224297afbc0dd5f6d00cd406757cecb0d3d012a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b26c34a68.0.tgz","fileCount":42,"integrity":"sha512-rVdhcQT4i2tA1S9lvBp/DEbaOhoelJuh9ImhI16VaHQv38OU0oS0ET4vDTrwd1ZHOyvd5oRilEet7g2E0zu0kw==","signatures":[{"sig":"MEUCIQCdDOwdWUwQrSb6MrzjLawa0oK7ime8nShyznMjAtKSxgIgQigR2sB+znqIAt9pIDnciRFkA8xnyQ3TEpSU3U5onko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.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/density":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/focus-ring":"15.0.0-canary.b26c34a68.0","@material/touch-target":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b26c34a68.0_1686169114052_0.03606097683528797","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/checkbox","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4fe911371.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee6d0e45be3cc2f48ab134f71f2c41a9bd1043dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4fe911371.0.tgz","fileCount":42,"integrity":"sha512-7DXMz8DvpqzqL7/TyAY7OaAeWoTrUaRjKK2ZfXrJBLJK+uOjvkEZ7kCwyJkm/2zVVkpJMIBuWIegcqpIsNwaGA==","signatures":[{"sig":"MEYCIQCZTYZZC4/nWi7cI/RFj+pqiWhP58YW7lNJbWaL59MH0AIhAKEqhmh4lRPKdUuh1rhmxUZI3rVk1ktpm3XqhSDujdYI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.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/density":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/focus-ring":"15.0.0-canary.4fe911371.0","@material/touch-target":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4fe911371.0_1686179180343_0.11416185615639152","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/checkbox","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2b11464b9966c3a313f30fabbaae63b9e41339f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a9ff9866f.0.tgz","fileCount":42,"integrity":"sha512-L3KzJxXucpmNc6ZkETpxLrFzBAVZ5wSVI+1Lq75jQlue1cqbt7MaGTRRj6g+jUw8VbH+zO4y7tsmLg91kyq17w==","signatures":[{"sig":"MEUCIQCs72DX2No0/jgwtvgWPWu6gqVesRIpBgtzg57uLtB/6AIgMbDGS4c0oa7WDOpj0M0UOthCfnqH4TrdolXQwq+2fmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.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/density":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/focus-ring":"15.0.0-canary.a9ff9866f.0","@material/touch-target":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a9ff9866f.0_1686656312834_0.3630469331523474","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/checkbox","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b994146f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db66eca5402b1d3ee3f99d981871be41be279ada","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b994146f6.0.tgz","fileCount":42,"integrity":"sha512-pulRiwG9S/dS6WBG+GteODBltddFiL0Sb7HAqdzF2BTKNKv25q1ZIR3ftoEa09TNeWM88AOzTJ4aBHiADfJn2w==","signatures":[{"sig":"MEQCIBdyXRJUCfPkI3qhd+gP/s9cKY1QTIY9ZYW6RqHp0QzXAiBxyShUtxHmMKf13QcJ9BsnPDHhaSgF5H7uvxrNda9gug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.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/density":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/focus-ring":"15.0.0-canary.b994146f6.0","@material/touch-target":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b994146f6.0_1686776647229_0.4181782430453065","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/checkbox","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea6ba77f487cb90613981e46960452a3969c6273","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":42,"integrity":"sha512-tBTd3Q6EiwA9o9euJhauS4p/7Wgq1Ts2gphAjeOV1EDyI9EDrNcDrkomuOLmpP/0JH+7nHU5yV1BfLatGhAgig==","signatures":[{"sig":"MEYCIQDkLrJoHKP9t2JfTxqEYIKbyblJ6HQipyi1O+Unc+CC9AIhAPK8zO86XdBI/cBjhYR/LJREKpa3pV+D6kIuDe3J5f5Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.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/density":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/focus-ring":"15.0.0-canary.1fb4b1a06.0","@material/touch-target":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1fb4b1a06.0_1687892251261_0.9671591688574404","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/checkbox","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97bfe03ac17ff6875ff0a0e631f0b0a9f1d680f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c64a2776e.0.tgz","fileCount":42,"integrity":"sha512-Ijo6zPxBWaP2Ahviw2JDvIjV5ejvwollekbIxJCK0ptpQ91gPcuV0fTVjLR29bVjlprzXx1KQ8Zjun0hH/xx0Q==","signatures":[{"sig":"MEUCIQC+0g94kKUPG/H4vugWc/63u0em0Y5Pw7c/2WKBJtb05QIgOUzlo7MPxOiHxIVHQl5Y4aVCucwpMd39JsdDcGhV4jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.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/density":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/focus-ring":"15.0.0-canary.c64a2776e.0","@material/touch-target":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c64a2776e.0_1687897019600_0.5335526130314221","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/checkbox","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f63b541063c4f778bb8cf7fefa8aa69935b2977e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":42,"integrity":"sha512-MlkJVNsc/mP6pt6H+VF3l5nGJedR3bOYqYezQNGV4zUpQjCJ8YzJUo44neiSrFEgIPGlO5F8xfWmexFHT99U5w==","signatures":[{"sig":"MEQCIENAHhV9WDyx0GDACl+lvqq1/+GuEjDS+pP9rLr+9CufAiA8mcGEEVU/2fCTxAd99SWy+rA97Anjk2flXYWANtlcZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.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/density":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/focus-ring":"15.0.0-canary.b05d9eb7c.0","@material/touch-target":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.b05d9eb7c.0_1688055841388_0.9514306991172938","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/checkbox","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f31f2d0b10570019cbf5d0d5068b6e1d040b0f06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2a9697dc5.0.tgz","fileCount":42,"integrity":"sha512-RB/IntRTQXINYNX8Omvv25F5kPFeR/eczvVpWjWbf6uRfle6qM6tj0SYufkege4fVbe9YjQzMyqsobjytr+bXw==","signatures":[{"sig":"MEYCIQCJLmU3AIzOdeC69gvsxNosLQyvUQuDk1ALyZhQrpSb8AIhAKsfPCdYscb64UFGT4SAwU1BOnvH7+JU9i09P1Nxi8Zd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.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/density":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/focus-ring":"15.0.0-canary.2a9697dc5.0","@material/touch-target":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2a9697dc5.0_1688163251963_0.1923651237503674","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/checkbox","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0939c296b44180c53d3164051a053e1d49edc941","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0c52adeab.0.tgz","fileCount":42,"integrity":"sha512-URa2UfGXcfmWS+yZjdmruxr6atpD+zOmw8riwU4v/Biys0NTJ6DjxNLOTLeOEXDyDbz4Mdpk8QZzPohyFIIYGg==","signatures":[{"sig":"MEYCIQCGo2P6fG257iLt/O/mK95iEMUqUoZgWuyRB5ikQnCTnAIhANZj03xOayBxL4ip1bcd2KD/6ssXnnldZ1mD1FNTUW8R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.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/density":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/focus-ring":"15.0.0-canary.0c52adeab.0","@material/touch-target":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0c52adeab.0_1688574368502_0.5316212143985872","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/checkbox","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.83355c322.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ac2a9022a6af4673239c6d26aec7dd09addbfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.83355c322.0.tgz","fileCount":42,"integrity":"sha512-G6WNvtoIQ0XePU9SsPdq2YsPHuJqdCvr92Gaq3tChwpkD+K1e3mkRnhp5EQXO1QbpZnXNTcI6zLHcR/CUN9fXA==","signatures":[{"sig":"MEQCIHFMOUsGXfjKLodRyfltJ4/x2bGRc13+afzzaaKh6FI+AiA9FT1Kef2NPcqgftJvWu4fAx7CmBYOXjrjp0z51wcCrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.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/density":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/focus-ring":"15.0.0-canary.83355c322.0","@material/touch-target":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.83355c322.0_1689001561561_0.30436008161338735","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/checkbox","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b13784c068b137386c43ae409517176b986c5d49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":42,"integrity":"sha512-4tpNnO1L0IppoMF3oeQn8F17t2n0WHB0D7mdJK9rhrujen/fLbekkIC82APB3fdGtLGg3qeNqDqPsJm1YnmrwA==","signatures":[{"sig":"MEUCIAhb7nDatiYWoVFVZ8hSAPnX5UIA7Vcr8VLJFTKKwNjFAiEA4chQDeuu8pBldxihcvjUmt+Ew6Ap9z0wBopbxJiPQVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.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/density":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/focus-ring":"15.0.0-canary.bc9ae6c9c.0","@material/touch-target":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.bc9ae6c9c.0_1691097680089_0.7139141445841393","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/checkbox","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d61e1e9eed5aa6df42fd16ddd36aed65d393b30","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.3c44cd956.0.tgz","fileCount":42,"integrity":"sha512-kaL0KTSBeXSoKS/NkkLUWTZ5PN1HAWYTEzpP2SBNIREO8RZ7KefotKmOW7zmCuvEWrnWlDPqYZxTSm0yJP9jTQ==","signatures":[{"sig":"MEUCID/0U4D5ntZntxxU5i00WI9R/5eDbkCV06XSJvMKHVGcAiEAnKNzUrLxCOyeykb31Tp6VPX8P4YdVNHqpWHUd9Wni1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.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/density":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/focus-ring":"15.0.0-canary.3c44cd956.0","@material/touch-target":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.3c44cd956.0_1691430457998_0.708729777375293","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/checkbox","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.02702296e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"832b1f753e64aafb6f2961750b5955126d488467","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.02702296e.0.tgz","fileCount":42,"integrity":"sha512-A8Hxuptojv76Fv1MOR3mM4WsAXoZgsthbC4/RRad53XG4cOvcsm6KrU1H6/8vmug8G/3jO/1X8uXO9GilLwR4A==","signatures":[{"sig":"MEUCIQCWrYlXyw0P2ZFaHFbH5Ri8TkzMgVH1X4rNiy7aD08feQIgCsvbh+2ZZsS/d70kxeHBnpCE24/3JT9FOG/bGvbGW2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.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/density":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/focus-ring":"15.0.0-canary.02702296e.0","@material/touch-target":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.02702296e.0_1692965116430_0.8394603787346313","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/checkbox","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.872b65832.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"735a1da031dd003d8bde9a453a018fbb6c4ec428","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.872b65832.0.tgz","fileCount":42,"integrity":"sha512-AMXUQrXTX37gqwJeeyTcW9wyx1gPtBTO0UUn06Lhy571Ludxb+c/26/qfWp0hZ4hKle3RFvm4qQ12KOm9u+I6g==","signatures":[{"sig":"MEQCIDbviwzhFBqmQsFKJh+ooft9uWaWhf/CKn+uzVpbRXsdAiBWc1uB0h0hK6ErMDKO9Y6QwkIlAWoRoihVzaL4afcMqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.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/density":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/focus-ring":"15.0.0-canary.872b65832.0","@material/touch-target":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.872b65832.0_1693397619759_0.7710462594382692","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/checkbox","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a01bac5da5ab4e7ed19e0f6e0434fe5fb00c3f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.89b2e4122.0.tgz","fileCount":42,"integrity":"sha512-UjPU8hsgBgqRWukDIu79HeCZVkTHBz7CQYEq6fUZttHrbSXknWTH8lHY5lymTNqRR2v0vNUY+L7ns7qz07BCcQ==","signatures":[{"sig":"MEQCIHzZYrE8fyS1ZtYlRT65u5T/75a0UO2EGH0Qb4KAF+HWAiAJ1oeTR3L0Ou8g7wZTI9+lz1KarfZemajScDaApMumCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109853},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.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/density":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/focus-ring":"15.0.0-canary.89b2e4122.0","@material/touch-target":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.89b2e4122.0_1693498028041_0.8164618260572178","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/checkbox","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e918171de9c0fcea9ba18d8b2aba730490d694e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7a3942e7a.0.tgz","fileCount":42,"integrity":"sha512-XgA0i7rWKITGsEwBZyUVPQG6/GsY7dF/SQms4L2GZapmmyoBBHuR+QtE2JySZG0yGUixil1++Enm3TvGosBVeg==","signatures":[{"sig":"MEUCIQDLGG0vcRPLj6NKTn21CsqYfZY6k92FhftygG9aBCI4NgIgI6WRQc9ONNc0M3Zp4iWa/FUTk74THpKag5CJpuCQDfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109877},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.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/density":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/focus-ring":"15.0.0-canary.7a3942e7a.0","@material/touch-target":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7a3942e7a.0_1693507204020_0.506957107051144","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/checkbox","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.54feb3020.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd9c0d692c7faaf6b4c359fd6d9e75a74f47f281","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.54feb3020.0.tgz","fileCount":42,"integrity":"sha512-NNW0TcJjQFyEUDyhE2ImXHKeEZ+C7MayQRd+K+0lopw9dyJoLDE6M5etlYNoLUlD7ikNcfQE2UWiqMwUEsNM5Q==","signatures":[{"sig":"MEYCIQCIjDjZlFmo7B8czA/WwWv260q5zayYq1O2jSDHW7RiBgIhAKCBPFynr/EiGyZ23tkfjRaZsuY1oGbKxI/U/ejhz4Nc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1115894},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.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/density":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/focus-ring":"15.0.0-canary.54feb3020.0","@material/touch-target":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.54feb3020.0_1694466325066_0.8752105383489779","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/checkbox","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b343304a8c1ae819e795865accb091f17d23688","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":42,"integrity":"sha512-OnbTOkqqOkcKDBSPEhCEd8sO9Y1gGDcTQcqCcbLvwF0qltsCeMZteV5Blg6YbiYjts69Fneynieygm0fUKHAZw==","signatures":[{"sig":"MEUCIH3Xua2kdfbeXIyO41GYRkOEw/Lsah+OMCLdWMHBTBH5AiEArjTRetp4wtUpma/IWM8YcjC7yLpr4YioFQOj0J6xIkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1109877},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.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/density":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/focus-ring":"15.0.0-canary.6cda3ce8d.0","@material/touch-target":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.6cda3ce8d.0_1694483123682_0.8275074222013208","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/checkbox","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.205b20b36.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0039875b4dd3ae581fa7195661a7f9a01b2afce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.205b20b36.0.tgz","fileCount":42,"integrity":"sha512-N1cpt7fm+DayLrRtmPtRb/dxisyWnw5xJ/tYFnpvA2zGHbZiBpZMAH+NAxrbOboDh0rVJk8dEiJAFb3eBAqKXw==","signatures":[{"sig":"MEUCIFqBijzsXvxnJBRA5GBgKLOsCCQJF/xsgmrMLr3VwbgVAiEAmSCr1ADTRcVO6NOjR158gymxy8zZVcvgG72tdOuRmjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1112661},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.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/density":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/focus-ring":"15.0.0-canary.205b20b36.0","@material/touch-target":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.205b20b36.0_1694625434608_0.8936852650576479","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/checkbox","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.22bf82024.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21c5aa8faf09a3bfa71628a6eeaf7ca3b9f1c615","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.22bf82024.0.tgz","fileCount":42,"integrity":"sha512-1Lg10ctTBGWot1b9fLiqzM/WYWvEAot/8OAimR6QtjTYc+OLAznXn/YcZ21Dv0AAqIbLcaikXUa15YXMG+VA0w==","signatures":[{"sig":"MEYCIQCZt5rY7hpSYy6S0GFjGDOGYy0rgf7ILKGvnbOKE5tFTgIhAM/X12eEfEwF1UR6IP9xx0qPnR60rjdeLnbL3Q7ca2cj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1112661},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.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/density":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/focus-ring":"15.0.0-canary.22bf82024.0","@material/touch-target":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.22bf82024.0_1695028334108_0.8603780980325233","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/checkbox","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a246a4439.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b38a2fcff58f31adb2dcd22e6d6a0095fdf9250","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a246a4439.0.tgz","fileCount":42,"integrity":"sha512-sQwHzm1TSxHUoPrqplWTk/BhyzdDhzcwlbucwJK9W0o9WXMDk+d9PvcCxpP/9sAnVqZk42BfE89Y0T1DHglZ9A==","signatures":[{"sig":"MEYCIQCVAzuiHXrAQq+C4XGvMpII6CDaeuhE+Sw/2QHqrdclbgIhAP7jkSDMnm1echkTDZtAkGWDqo0o/knfNvPQ4Hv7xYjK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1112941},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.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/density":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/focus-ring":"15.0.0-canary.a246a4439.0","@material/touch-target":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a246a4439.0_1695059181243_0.47615536149402016","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/checkbox","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d153db62b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f13e7426eb983de246faea696fb85272c9b51e7c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d153db62b.0.tgz","fileCount":42,"integrity":"sha512-iJLD3vETMwCLmAe8rHh/cu39h2wy4b7WvR9vlx4ic3gDaKJ6VZRAtOn34IOWsHgN2x21ByjiXxfLQDM7Ob8cvA==","signatures":[{"sig":"MEQCIHSwGt5sW/EEelRaNvYvovO3ObIRTTs+uYiKcXpvvb6uAiAuUEMWhcXWSHyNs+37WS5yMGZeHPxa4YqSLQaHH0hEpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1112941},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.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/density":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/focus-ring":"15.0.0-canary.d153db62b.0","@material/touch-target":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d153db62b.0_1695150922603_0.39777624378479315","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/checkbox","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29eed27adfc6046cdf1772da5051a4a809a0dbf6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2528c1c3b.0.tgz","fileCount":42,"integrity":"sha512-qaXwRxf7kKhNMoVZ3MFgguLPJgWCcC3ygOPd7WqkMfRVGRsGt+lb0TkpCIdFMvNr5BY3RByqmnClqCxZe0OvYA==","signatures":[{"sig":"MEUCIQDgeZF9M4jmkjPxh6m414o8mQWOL2M5XzYk1dxBBj0MXAIgE+zoPKZtT6fcVGcAbpFHsKksPrf6agXzYlG5TesONsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1112941},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.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/density":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/focus-ring":"15.0.0-canary.2528c1c3b.0","@material/touch-target":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2528c1c3b.0_1695233208413_0.38888017864600877","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/checkbox","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04de696253fee4a175b1d28b10208eadc5eafeea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.1728a6dcf.0.tgz","fileCount":42,"integrity":"sha512-YkGMv+A6QkpgsbNTDH6FclnNOMtRo1Ffuz6nbDMQ9YueEqUCDUKydm+BHGKgaLZ/ow/9efWiwe/isOmy++d/ZA==","signatures":[{"sig":"MEQCIGIQijSsOppJH1PhHbU6SS9oIIWauUNDdry6VMQhEvoXAiAipDVNBw+cDGoXIsOqhkjuWqsn9BQMc/gZy8pDJkG3zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1114342},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.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/density":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/focus-ring":"15.0.0-canary.1728a6dcf.0","@material/touch-target":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.1728a6dcf.0_1695691406270_0.850844031232117","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/checkbox","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9bacfac02a538f92bc2489e47d8e50f45956fbc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.ebb636f3d.0.tgz","fileCount":42,"integrity":"sha512-AZcsZPkbV5WBj97YimP39S3eU5GYA/7XSOEW8TgdeV3haN8rn0wfNNWphy6btSD6XgnIIze+LpeIUv3li3LFUg==","signatures":[{"sig":"MEQCICDpTLW5L5zpptKk2/NTjD9RpPMjlpNUpyKidaBXC9bzAiBfagfygFacsFeZ5C+kmE5E72WX3bMrvoELPPTyQWhr3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1114342},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.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/density":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/focus-ring":"15.0.0-canary.ebb636f3d.0","@material/touch-target":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.ebb636f3d.0_1696016679050_0.02395145302811974","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/checkbox","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfd1c440ab2ddde6461de2b557798275b0f8f445","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":42,"integrity":"sha512-VmS9fLYIPtt84gbLHnNiweF0YSQ7gkfZZ50eVDmaFqqOzmWy7ClSXMaFjwZFGiLd/9k/c8/Kw/4MFq4YnobiUw==","signatures":[{"sig":"MEUCIQD3xt8tNbMasR7WJzXchOhUm9ZeIJ5CV8Zn+Xvn78yp0wIgWWrg6Jp2pqZrdl6Ery5HRdiMYBQ+8rSUQNWtCEnDVYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1114342},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.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/density":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/focus-ring":"15.0.0-canary.c0d21ecc9.0","@material/touch-target":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c0d21ecc9.0_1696880221263_0.4532710569301761","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/checkbox","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.127a44b28.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d2c5ed6160b2abc73244ee205580e2757c07ef2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.127a44b28.0.tgz","fileCount":42,"integrity":"sha512-XeEVmHrRaPvzZ5x7ONpwA5gJHt1CbQCj19b2xCax8qMfuYh7lQGcs90300P2WbCiLkCn2E+W/VhyZvn8+qdFpQ==","signatures":[{"sig":"MEUCIFgnG5eR/gdXyO2fbN6v8BGu0ZW5qpj6+6vMeSjVfIyDAiEAryfKUPg0373yZQk1rKHF9qFFxEYPxuHA3afv7NMj7jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1116988},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.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/density":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/focus-ring":"15.0.0-canary.127a44b28.0","@material/touch-target":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.127a44b28.0_1697140841451_0.15135196559426456","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/checkbox","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.0ad128337.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0936f12041ad290e1e4112559715585e9debd52","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.0ad128337.0.tgz","fileCount":42,"integrity":"sha512-lFsqW/u1Eu9Bq/JPrGTz082lJtw/XOnHJ+xUC2nrCb/oC+WtdhEfZLhlBJcaHOCl+6RdZQGuc91nTcKE5f7I2A==","signatures":[{"sig":"MEUCICPvMB1BQf2lFOolTWP+Eg8z+XWcgdMLZwBDOwSKldfbAiEAzNBZXLCVdBGHM66ZTXuI+qqds++BbQiKZ/A5ggO5yZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1116988},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.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/density":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/focus-ring":"15.0.0-canary.0ad128337.0","@material/touch-target":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.0ad128337.0_1697741530282_0.7685568790176982","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/checkbox","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.9cec94097.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb197e072bed66e13152b412b3f192deaff1eec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.9cec94097.0.tgz","fileCount":42,"integrity":"sha512-c38qxgnWxoVsbWf/IYKPL3BP/okXbhhc/PK8As1MvXd1PTXsPGAetAhfouslPCzWl2CVofkxaVAZTJaOmyl1dA==","signatures":[{"sig":"MEQCIFeWhqvsEcLlKWQiOvhxFhpADziSd7O4jMfEhBw1nfgGAiBwzfyzW9i0lxvlBTREGApnDWmuTFUQEh1ByAaxDk+SOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.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/density":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/focus-ring":"15.0.0-canary.9cec94097.0","@material/touch-target":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.9cec94097.0_1697756974424_0.07175327708946533","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/checkbox","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ceda99732e6e72182ba8d828b7f5ff1ca5d8b97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":42,"integrity":"sha512-d4BahAePv29nlqKVDilvYfq8KzqiimszlY0bjY3Nh/qlCxbPO2jq4kCPASo2/jSWurEMJJPNkVPT11NGkS9Icw==","signatures":[{"sig":"MEYCIQD6bl3xHfgG/dhvAl+aF40Fr7rAvjO31ea9lJUlLjWgsgIhAK9x2DY0L+j2KI+82s9CTEuE5XdEuZXryE+e6/aSCVsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.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/density":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/focus-ring":"15.0.0-canary.c51a0bbcc.0","@material/touch-target":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c51a0bbcc.0_1700081920485_0.25585430370452356","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/checkbox","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd370fdb11d623943d1b570703354e8eba9c4a5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.d76666ad4.0.tgz","fileCount":42,"integrity":"sha512-5utI/t6sTafS8L1QUzJOSDw2g3r/ODVlyNjZadpGZQdZF6Sz7Y0s1vZD5gGplqT7xgr5HUfnlCfrnzI48Bej4A==","signatures":[{"sig":"MEUCIQC6SEdw8ipp5IcNYUKm4S7/8n8yywiLCAEhfsVBEmINjQIgW5k9Ilmpc7JGll4Tnp3gG6GbVpxbnoN5bTZfP8quy80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.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/density":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/focus-ring":"15.0.0-canary.d76666ad4.0","@material/touch-target":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.d76666ad4.0_1701123184087_0.6505701729963007","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/checkbox","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b651fac4dfb1c8f9358dd56716149513a2e68e1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.8656bf0e0.0.tgz","fileCount":42,"integrity":"sha512-ceZa3Y+oRA+EhmBcXqPjWwB73INRkMAQAcqNG0rILYSEw5bcApxrSM4CObvR51rVAfFFDhXAwWR775v+Ku+7BQ==","signatures":[{"sig":"MEUCIQDdkGAYGKyAq8e06hduxFtd7ee8TndTAWB++nQLu8DcygIgVtOOuTsz60Ox1vbahFCmgc16MaZGtggOPtgGe5Cl/4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.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/density":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/focus-ring":"15.0.0-canary.8656bf0e0.0","@material/touch-target":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.8656bf0e0.0_1702415915418_0.12467132327187214","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/checkbox","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8223914b244cd7a23d9279b9fce3197a9473e69","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.7f224ddd4.0.tgz","fileCount":42,"integrity":"sha512-rURcrL5O1u6hzWR+dNgiQ/n89vk6tdmdP3mZgnxJx61q4I/k1yijKqNJSLrkXH7Rto3bM5NRKMOlgvMvVd7UMQ==","signatures":[{"sig":"MEYCIQDakVqZXWh18ri/uvbvVLUTxfL5+f+eNhKTGBLUScu5FwIhAIoKz6IPh0ETIAltHciHQNWsyhdTozyESm5ASmQP5rCX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.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/density":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/focus-ring":"15.0.0-canary.7f224ddd4.0","@material/touch-target":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.7f224ddd4.0_1703743745627_0.8635655746705466","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/checkbox","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f248882b3fce94f6246e7c7925816fc4dc34d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":42,"integrity":"sha512-0IHj8698k7pL+vARoPwclFQ/uSFz1kVCksvNlTlDqomaFM6koPTWlNPJdjbzAZSX6VFU80CofsaqQRoHU4UdRA==","signatures":[{"sig":"MEYCIQCagglPhTOmiWwDhEztq+v+yIRjjgIt43+qjs8ZaQFZbwIhAPKttlrxx3a2ngx/qzt2WeEDBB/IQoO35iCvU+CK/b9a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.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/density":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/focus-ring":"15.0.0-canary.a0b8a90c0.0","@material/touch-target":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.a0b8a90c0.0_1707333566779_0.5963638264281708","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/checkbox","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"101c7c72ffafad5bffbdcda30e511dd5c18eca39","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.e50b478eb.0.tgz","fileCount":42,"integrity":"sha512-pbMO37sdlPR4jrA3AGWJq+UELcGuS5FwFQOJhwl1Tr3+XBd+nAk5Khcydx1f/WqPkvEjEEesDovswoFUlUGKlQ==","signatures":[{"sig":"MEQCIC52fpISLGuNcV+lP5Y3YVFzkNjNXQPQbux12pF8zzWAAiBn9VQ7Rcm2TizuRsg4DwSIXTs3HAXy8oFJqhs50MyIjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.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/density":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/focus-ring":"15.0.0-canary.e50b478eb.0","@material/touch-target":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.e50b478eb.0_1707415678126_0.3467010606283778","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/checkbox","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d56e74e2ebcc560d666185cdf35e277c712741d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.c43b3438b.0.tgz","fileCount":42,"integrity":"sha512-/k2gKPQQIIS4vuP6qUQYXUgu+WDMkLPvbnKhCMvO6r2rjxx+qbQdkNMkbDu6hZpPDkmuun2AiQYRyaOByo0aVg==","signatures":[{"sig":"MEUCIQCULVPwvJszzmCOdN9HHqKQlF7jnNkFk7Uw4X9P3bSLgAIgS6Dz47g90Dd8GNhtj4aSfuizJmQMUR3D+3D7Kb2l1OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.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/density":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/focus-ring":"15.0.0-canary.c43b3438b.0","@material/touch-target":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.c43b3438b.0_1708719451381_0.742151007118931","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/checkbox","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.819498d8c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f92f4aa63c962ebf9b57221e7b29ba4fee35160","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.819498d8c.0.tgz","fileCount":42,"integrity":"sha512-4vwGshajx97xmhIqxMeMhikVbIOtR78SrSQiLrW90I2VXffJLg0ezfgAi+pz7L7MBfLIbPsKsvJgrtZ0+7fBNA==","signatures":[{"sig":"MEUCIAmA+B2U3akuqgRBKQGHP6FZ3YVzjSBW+bvNYV1VzEW+AiEAvKQ1IkxOKjoNgKDMqim1slIC69W3/Hl7+/obMG7jdvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.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/density":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/focus-ring":"15.0.0-canary.819498d8c.0","@material/touch-target":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.819498d8c.0_1710515692123_0.2045456138742685","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/checkbox","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.453a6248a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c40d8e6942f71a06e5b6a1f001e094b82da1fd4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.453a6248a.0.tgz","fileCount":42,"integrity":"sha512-EbWAABIz22fFF8KvvDqRrm005jf/JmrMiacqYrDQxbGFUrtvXp/S6b9RtVfjIg/C5zVmUB/9ey7QaI95sbi4Lw==","signatures":[{"sig":"MEYCIQCGpk1YpWCNpYQapSV06h3eUWqvxrZze6D3M07FoCNirwIhALFMI1lV6Vjy43AyvFt6x/tbR6LsPcOUXI1zzUdo3nfQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.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/density":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/focus-ring":"15.0.0-canary.453a6248a.0","@material/touch-target":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.453a6248a.0_1711386811105_0.4766422547552478","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/checkbox","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6a7f02bb949f40839b4711504ac4b811b6f6752","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.68edc03c6.0.tgz","fileCount":42,"integrity":"sha512-LcxSxYamuOSAB+Xl90s4ELQFa3dz+tMQKcfv2kfKxHOcQ1UiDQv7z0qRuR7BuOEdae69Y1edXYFiueUSRWXgcQ==","signatures":[{"sig":"MEUCIQCkB6xHs9NXQfyDjU2uctkWA8HOCl50X3hXVkMNRTAGnQIgeFryjHrz/h/RitE/CnuyvfvKMVa1AJYWD9l+eimDbeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.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/density":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/focus-ring":"15.0.0-canary.68edc03c6.0","@material/touch-target":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.68edc03c6.0_1712603160655_0.30450093993720073","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/checkbox","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b00939a20e9c80ccdd292e4ac399b1a60b553e1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.5bebc0064.0.tgz","fileCount":42,"integrity":"sha512-2IRfBrjBPbhbyq6cCmJORCyvLy0rz/g4doWSJIjvd0ehiA+jYYBiMD0vh5Ddi+t42exVCOVFY9zzyiX0PFaysA==","signatures":[{"sig":"MEQCIF76zhIJVk+b5noO9H11SGY1J/EUBEq2tTgVC/VJV/jKAiAEhUNNwxbc+zLa5QTvfXLK65h/A/al8LXTiEbY9GJ9NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1118523},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.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/density":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/focus-ring":"15.0.0-canary.5bebc0064.0","@material/touch-target":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.5bebc0064.0_1712871648773_0.07403670123491612","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/checkbox","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.311f29a60.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a109f78c1b57011718ccc9361b95daf97fcbad91","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.311f29a60.0.tgz","fileCount":42,"integrity":"sha512-5K9exPaEmgC9IkJJJT4UwBGpLzgpLKU62KP4x25ZDVyAO46B8OB88OVBMShTg693JubDtSMJYmyvSPTy1tTSog==","signatures":[{"sig":"MEYCIQDcz2e1zDshuMNqiFZkAGjmvpZg6Oihq3dNiVh2mOME+wIhAJ8/ogskLz9jvth0Ohb2nZQIrSZz7gttFG5oc9h2eDp0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1120905},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.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/density":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/focus-ring":"15.0.0-canary.311f29a60.0","@material/touch-target":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.311f29a60.0_1713895194531_0.03658655160257274","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/checkbox","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.65c10a622.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ed0005faee7e2dbfd5c934e5150b78e255d73e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.65c10a622.0.tgz","fileCount":42,"integrity":"sha512-1urHbg38dcH7fe5EaiePh8XkmBQfR5uM/mPLkiuA8tFMxTe75yaBBZZmIRH3D53KKAUk1EuSK+BxnUreRdE9sA==","signatures":[{"sig":"MEYCIQCpREsSMY8Phm53eDVUwSocv+ACsK0HAm9j2tnNwlEnjAIhAKrWRnN1Gg4DcnExJ+MAYHgaMEj2S00zFAXUINTALb5Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1123466},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.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/density":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/focus-ring":"15.0.0-canary.65c10a622.0","@material/touch-target":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.65c10a622.0_1714070929620_0.7500319276615344","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/checkbox","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6487cc1ca425cc924a74df8ad9599af8c0d7a26c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":42,"integrity":"sha512-Q2+Yvf8QiSR1weLwyyaQC2MX3VDW8lqQs3JvOk1KYsytKIZZo3MJDvkjDS6WhEYwFIfuv0wYn4Ds/HXf4Rj1jA==","signatures":[{"sig":"MEQCIHpKRQHTPnGagJ5AwzYOkPLkaif8caZkT4J6L47SCRK2AiAynB/9UJhZo6AWhiRpkJLJmafqm0oU1EDX6jvs3m5GnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1123466},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.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/density":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/focus-ring":"15.0.0-canary.4b35cb7d0.0","@material/touch-target":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.4b35cb7d0.0_1714651374380_0.8505637706814142","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/checkbox","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c32c05b36286ae4687ec2f535a3b0c368818f8fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.f80ac92b0.0.tgz","fileCount":42,"integrity":"sha512-vCixs9IDMAOkwVCsh365r3js6smki718e/8OsHa2AEJpNKDKx4K4rNQ9ATDXXx9qH5px6XnjetzdVLdgUd0ejw==","signatures":[{"sig":"MEUCIQDaOYoYFqNyHlEp0NV9ZolahEjdMxIvNOf256emlrFhNAIge2nlnEgBEQKB9f2vqn6TgaQ4jgyOkPtsIMAN38cE0d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1123466},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.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/density":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/focus-ring":"15.0.0-canary.f80ac92b0.0","@material/touch-target":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.f80ac92b0.0_1714651986710_0.8267586756703029","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/checkbox","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585d71743a79788b96a71b76183fddcd971bc0b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.2f5b899bc.0.tgz","fileCount":42,"integrity":"sha512-qOsKV3XgL4esltY1D15TnylpukBx8O4/Ho48EKtcZ1wthBw/evXIQFrIn96MGjjSE0tUkHtvuEvLPp3bps0dGg==","signatures":[{"sig":"MEQCIAHLJoUci2KA/DlPOfWWEdIdjEWrwOqor1Gv7/NJwUGdAiBHnQsp55DmWQ3FLVf9vdwNe7b4fYlgE2kJfA5YnZG9Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1123466},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.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/density":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/focus-ring":"15.0.0-canary.2f5b899bc.0","@material/touch-target":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.2f5b899bc.0_1716213337643_0.39486806598671564","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/checkbox","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","checkbox"],"license":"MIT","_id":"@material/checkbox@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ba29459a4559383f93cf70bee6e963bc4a53dce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.cfec83c74.0.tgz","fileCount":42,"integrity":"sha512-QYg+U2nPXHlsEle7gcrRVul12bwxmhhqK0ov9WT8CcyYNBLVvhZdbqu5z2W8a0Wkb5EKUoMZEneTxV4YusFB5A==","signatures":[{"sig":"MEUCIE69z+Ll+1DP6AqRcaU43alQtTKDIa4t7kIw26unRM8SAiEAquvVkseuNvYEKbZ7TJsGc7QqIvO2u8mYGfEHsrTa4GI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1123466},"main":"dist/mdc.checkbox.js","module":"./index.js","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-checkbox"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web checkbox component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.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/density":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/focus-ring":"15.0.0-canary.cfec83c74.0","@material/touch-target":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/checkbox_15.0.0-canary.cfec83c74.0_1716231401151_0.9137457696427889","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/checkbox","description":"The Material Components for the web checkbox component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","checkbox"],"main":"dist/mdc.checkbox.js","module":"./index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-checkbox"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/density":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/focus-ring":"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/touch-target":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n
\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n```\n\n**Note: If you are using IE, you need to include a closing `` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `` element is sufficient.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n
\n \n
\n \n \n \n
\n
\n
\n
\n
\n\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\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/checkbox@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-dj80JKxk3eVKZp+pDHwiXUteErxiBrRPJBJHg0puYw+ggly3MIIzZCdrJqyhygwXe9ToxmDYoG76wUQho45fNw==","shasum":"0e1c948b28c789a5931bee15d4d6654970849901","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/checkbox/-/checkbox-15.0.0-canary.423edc3dc.0.tgz","fileCount":42,"unpackedSize":1123466,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmsVCfkahsuuiwMkQO6B0rh31NBqWSIWC57dKEv4mgiwIgRodkoV9BSzz/gGgyznlT+i7/pEIjptIeHdKp9+gm8VQ="}]},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/checkbox_15.0.0-canary.423edc3dc.0_1719425528811_0.8418969695599765"},"_hasShrinkwrap":false}},"name":"@material/checkbox","time":{"created":"2016-07-21T00:00:18.552Z","modified":"2024-06-26T18:12:09.425Z","2.0.0-dev.20160721":"2016-07-21T00:00:18.552Z","2.0.0-dev.20160721a":"2016-07-21T00:55:22.383Z","2.0.0-dev-20160723":"2016-07-22T23:56:14.437Z","2.0.0-dev.20160810":"2016-08-10T10:38:35.329Z","2.0.0-dev.20160822":"2016-08-21T22:20:43.292Z","2.0.0-dev.20160822-1":"2016-08-22T00:37:25.293Z","2.0.0-dev.20160903":"2016-09-03T08:16:36.237Z","0.1.0":"2016-12-15T17:51:59.037Z","0.1.1":"2017-01-09T15:57:14.542Z","0.1.2":"2017-01-23T16:49:35.603Z","0.2.0":"2017-02-06T19:04:42.129Z","0.2.1":"2017-02-21T17:27:34.085Z","0.2.2":"2017-03-06T17:02:11.953Z","0.2.3":"2017-04-03T15:27:59.978Z","0.3.0":"2017-04-17T15:43:06.734Z","0.3.1":"2017-04-18T14:51:16.669Z","0.3.2":"2017-05-01T15:43:05.994Z","0.3.3":"2017-05-15T16:26:00.744Z","0.3.4":"2017-05-17T14:28:18.313Z","0.3.5":"2017-05-30T19:04:34.671Z","0.3.6":"2017-06-12T15:53:16.643Z","0.3.7":"2017-06-26T16:10:51.064Z","0.4.0":"2017-07-10T15:58:47.844Z","0.4.1":"2017-07-24T15:49:14.876Z","0.4.2":"2017-08-07T20:48:26.481Z","0.4.3":"2017-08-21T17:27:49.471Z","0.4.4":"2017-08-24T14:46:44.078Z","0.4.5":"2017-08-25T17:20:53.985Z","0.4.6":"2017-09-05T20:16:04.644Z","0.4.7":"2017-09-18T18:35:38.781Z","0.4.8":"2017-10-02T21:11:42.733Z","0.23.0":"2017-10-16T21:02:16.144Z","0.24.0":"2017-10-30T19:11:21.154Z","0.25.0":"2017-11-13T20:02:24.254Z","0.26.0":"2017-11-27T22:26:25.497Z","0.27.0":"2017-12-11T19:35:29.742Z","0.28.0":"2018-01-08T18:55:09.436Z","0.29.0":"2018-01-22T18:30:56.981Z","0.30.0":"2018-02-05T22:02:31.603Z","0.31.0":"2018-02-20T18:22:58.105Z","0.32.0":"2018-03-05T22:08:42.031Z","0.33.0":"2018-03-19T16:39:57.551Z","0.34.0":"2018-04-02T21:51:51.822Z","0.34.1":"2018-04-03T23:39:43.967Z","0.35.0":"2018-04-23T22:40:06.770Z","0.36.0-0":"2018-05-29T15:24:22.800Z","0.36.0":"2018-06-04T15:38:44.215Z","0.36.1":"2018-06-18T15:40:09.265Z","0.37.0":"2018-07-02T22:14:40.953Z","0.37.1":"2018-07-16T21:20:56.772Z","0.38.0":"2018-07-30T17:07:44.079Z","0.38.1":"2018-08-13T20:39:30.861Z","0.39.0":"2018-08-27T17:41:07.766Z","0.39.1":"2018-08-31T21:36:54.191Z","0.39.2":"2018-09-11T16:55:29.459Z","0.39.3":"2018-09-11T17:19:26.458Z","0.40.0":"2018-09-24T20:02:12.586Z","0.40.1":"2018-10-08T21:07:08.563Z","0.41.0":"2018-10-29T20:22:26.452Z","0.42.0":"2018-12-04T22:55:11.062Z","0.43.0":"2019-01-07T19:49:34.765Z","0.44.0":"2019-02-04T18:24:30.415Z","0.44.1":"2019-02-19T23:03:14.143Z","1.0.0-0":"2019-02-27T23:59:32.530Z","1.0.0-1":"2019-03-04T23:33:25.772Z","1.0.0":"2019-03-06T21:08:13.834Z","1.0.1":"2019-03-11T22:07:19.873Z","1.1.0":"2019-03-26T19:25:55.649Z","2.0.0":"2019-04-29T17:40:04.954Z","2.1.0":"2019-05-06T15:33:41.645Z","2.1.1":"2019-05-10T17:25:12.614Z","2.3.0":"2019-05-28T21:23:47.066Z","3.0.0-alpha.0":"2019-06-12T04:06:54.438Z","3.0.0-alpha.1":"2019-06-12T19:02:14.579Z","3.0.0":"2019-06-25T22:27:58.229Z","3.1.0-alpha.0":"2019-07-16T13:29:14.611Z","3.1.0":"2019-07-22T22:02:39.313Z","4.0.0-alpha.0":"2019-08-07T21:09:31.597Z","4.0.0-canary.0":"2019-09-05T04:37:57.310Z","4.0.0-canary.1":"2019-09-09T20:20:51.335Z","3.2.0":"2019-09-12T21:53:37.056Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:39.191Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:27.684Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:14.577Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:57.376Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:20.028Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:42.810Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:42.480Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:44.567Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:51.116Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:27.841Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:57.329Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:20.704Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:15.761Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:04.492Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:06.082Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:47.318Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:26.125Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:36.853Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:58.713Z","4.0.0":"2019-11-02T18:11:51.042Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:54.401Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:58.162Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:55.693Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:26.263Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:28.085Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:37.623Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:58.576Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:55.282Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:03.100Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:09.460Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:05.090Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:48.656Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:40.467Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:01.481Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:50.896Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:14.471Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:20.292Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:00.391Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:42.108Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:22.020Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:06.177Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:39.350Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:17.481Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:59.130Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:22.121Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:09.918Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:55.480Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:34.582Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:32.985Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:33.642Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:15.838Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:09.373Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:22.537Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:33.253Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:48.843Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:10.870Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:27.102Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:27.654Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:36.808Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:22.404Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:08.706Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:10.318Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:33.896Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:22.442Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:22.951Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:00.433Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:03.147Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:01.045Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:16.615Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:53.492Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:55.673Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:30.102Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:22.550Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:34.736Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:44.050Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:40.687Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:16.709Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:34.114Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:48.802Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:00.789Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:29.015Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:30.001Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:44.819Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:30.378Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:18.656Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:54.137Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:20.047Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:31.822Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:06.567Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:24.780Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:09.715Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:04.846Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:45.981Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:31.655Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:02.125Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:34.232Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:51.130Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:28.217Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:39.958Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:23.877Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:33.119Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:11.380Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:04.957Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:28.510Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:31.916Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:26.522Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:35.493Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:07.516Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:09.821Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:04.221Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:43.899Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:48.847Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:35.952Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:09.092Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:09.237Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:55.338Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:14.208Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:35.317Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:15.019Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:35.852Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:42.216Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:07.535Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:10.519Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:26.018Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:55.587Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:31.782Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:27.175Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:59.507Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:13.089Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:03.974Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:02.726Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:48.253Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:05.981Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:33.928Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:35.868Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:12.479Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:44.702Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:48.049Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:56.116Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:12.816Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:39.560Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:51.930Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:28.802Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:24.567Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:50.380Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:20.848Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:57.143Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:31.821Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:10.434Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:25.115Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:36.762Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:34.088Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:10.169Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:46.006Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:54.172Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:54.207Z","5.0.0-canary.45985457b.0":"2020-01-29T23:34:25.211Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:33.307Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:24.930Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:25.708Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:11.059Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:25.794Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:50.035Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:31.789Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:58.119Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:49.072Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:03:37.344Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:21.861Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:02.524Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:24.398Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:36.491Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:34.752Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:52.708Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:10.086Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:41.473Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:35.420Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:20.812Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:13.542Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:53.776Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:55.170Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:22.617Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:45.294Z","5.0.0":"2020-02-14T00:09:02.094Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:21.049Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:41.457Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:32.359Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:07.595Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:53.936Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:42.443Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:04.573Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:43.959Z","5.1.0":"2020-02-25T21:38:01.937Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:38.244Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:56.596Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:27.476Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:03.977Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:59.806Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:42.496Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:07.291Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:00.770Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:16.555Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:37.671Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:58.556Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:21.535Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:49.646Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:20.932Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:24.852Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:15.496Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:28.594Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:02.334Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:09.582Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:58.715Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:13.840Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:56.504Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:45.530Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:52.407Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:30.288Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:11.361Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:15.552Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:26.041Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:03.998Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:25.164Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:57.664Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:28.959Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:34.943Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:21.540Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:57.721Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:26.075Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:51.829Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:55.998Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:42.520Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:22.171Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:43.069Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:30.572Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:57.507Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:22.313Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:48.776Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:31.639Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:01.985Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:45.701Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:00.672Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:02.211Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:28.013Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:27.253Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:22.726Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:48.320Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:45.178Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:13.702Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:29.940Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:03.507Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:59.325Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:09.567Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:00.552Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:35.192Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:02.459Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:25.542Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:58.681Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:20.800Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:57.974Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:32.190Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:03.316Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:15.962Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:04.789Z","6.0.0":"2020-04-23T17:26:37.805Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:45.471Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:14.477Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:08.510Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:55.698Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:00.633Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:17.141Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:00.699Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:32.415Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:07.439Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:39.782Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:55.404Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:46.500Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:37.092Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:52.357Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:38.986Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:53.640Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:39.235Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:06.881Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:27.519Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:01.101Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:10.959Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:26.346Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:33.585Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:55.936Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:10.698Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:45.585Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:30.354Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:27.785Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:46.411Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:24.327Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:38.964Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:11.997Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:08.184Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:34.022Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:17.125Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:07.823Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:10.772Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:20.443Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:49.538Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:30.279Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:39.803Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:07.924Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:03.604Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:48.468Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:22.098Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:11.321Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:33.288Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:35.624Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:51.963Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:50.326Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:14.481Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:05.403Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:52.859Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:15.160Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:18.235Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:43.198Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:44.234Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:07.606Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:48.317Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:08.881Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:04.407Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:03.487Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:05.192Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:02.347Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:39.513Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:03.371Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:58.816Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:24.690Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:21.632Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:33.466Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:37.904Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:03.286Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:44.124Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:56.771Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:20.468Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:42.379Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:50.742Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:01.556Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:14.924Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:54.895Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:20.545Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:22.285Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:21.541Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:10.877Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:00.106Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:37.460Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:28.206Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:14.431Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:58.596Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:47.954Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:05.431Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:39.274Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:31.279Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:19.729Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:42.258Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:10.577Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:42.759Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:02.712Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:17.457Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:03.267Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:31.118Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:30.027Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:20.978Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:58.511Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:52.336Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:04.166Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:13.518Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:26.519Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:34.624Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:04.055Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:21.789Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:42.244Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:22.154Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:03.827Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:43.282Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:14.108Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:15.574Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:17.050Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:45.644Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:04.884Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:34.889Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:54.054Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:21.864Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:33.272Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:50.719Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:43.396Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:25.818Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:40.261Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:56.156Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:57.906Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:24.428Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:16.464Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:02.201Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:39.054Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:20.780Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:36.747Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:12.715Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:18.735Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:24.717Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:17.094Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:01.142Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:37.552Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:57.492Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:04.286Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:31.338Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:53.275Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:24:53.381Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:52.915Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:20.614Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:57.446Z","7.0.0":"2020-06-23T19:10:38.017Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:33.591Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:40:59.663Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:52.610Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:35.224Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:29.360Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:10.225Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:36.666Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:43.122Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:26.090Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:41.836Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:39.873Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:11.627Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:29.757Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:14.321Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:28.697Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:41.574Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:27.242Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:18.401Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:53.121Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:01.414Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:07.333Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:51.220Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:12.355Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:03.512Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:47.806Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:01.135Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:21.794Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:10.244Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:10.152Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:44.238Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:33.864Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:14.967Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:37.488Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:10.442Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:13.544Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:04.372Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:24.417Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:58.247Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:57.480Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:13.473Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:14.845Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:13.957Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:56.970Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:31.622Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:07.072Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:04.108Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:09.026Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:43.269Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:25.206Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:49.337Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:34.540Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:49.895Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:18.738Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:37.344Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:31.333Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:37.673Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:52.793Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:34.697Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:42.773Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:48.966Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:09.501Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:24.366Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:23.147Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:59.057Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:02.233Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:09.280Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:23.376Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:27.433Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:05.182Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:02.528Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:17.504Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:03.764Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:14.347Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:12.406Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:09.827Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:52.277Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:20.877Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:11.243Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:37.670Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:56.063Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:42.620Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:45.911Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:21.980Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:16.271Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:18.145Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:16.233Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:35.148Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:09.437Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:28.775Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:06.997Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:49.330Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:46.863Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:22.056Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:22.496Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:30.755Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:24.086Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:58.564Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:51.335Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:32.513Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:53:51.485Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:21.271Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:15.790Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:09.409Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:08.839Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:47.520Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:50.501Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:36.414Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:23.796Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:36.545Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:52.819Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:39.426Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:24.380Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:19.138Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:20.568Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:31.491Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:33.082Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:40.850Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:44.027Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:06.606Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:04.316Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:11.543Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:08.212Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:34.937Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:36.357Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:19.854Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:53.302Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:43.894Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:16.776Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:55.248Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:08.394Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:31.250Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:25.455Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:20.109Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:12.446Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:47.249Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:42.992Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:50.422Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:48.293Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:54.683Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:51.787Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:30.852Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:03.078Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:47.626Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:18.575Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:06.136Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:41.457Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:19.873Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:32.698Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:45.215Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:40.885Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:16.060Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:44.734Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:46.936Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:20.541Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:17.304Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:56.542Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:54:53.653Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:24.808Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:10.404Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:45.185Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:58.437Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:22.837Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:42.436Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:26.756Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:07.141Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:10.833Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:36.757Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:29:45.398Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:29:31.454Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:16.124Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:49.999Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:40.561Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:37.211Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:42:56.082Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:30.138Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:52.817Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:04.793Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:05.800Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:09.586Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:13.685Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:25.873Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:14.116Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:28.997Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:05.742Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:03.966Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:41.246Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:53:53.763Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:20.231Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:47.621Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:45.598Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:30.271Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:16.478Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:03.035Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:35.471Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:12.145Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:32.360Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:02.186Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:00.993Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:43.427Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:12.206Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:41.215Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:29.785Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:16.362Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:52.024Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:02.107Z","8.0.0":"2020-11-02T22:59:25.370Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:29.325Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:27:49.659Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:06.765Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:01.591Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:02.843Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:54.590Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:19.324Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:30.846Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:00.020Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:35.688Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:37.287Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:49:59.512Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:45.768Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:13.863Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:06.574Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:30.006Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:01.767Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:44.876Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:50.436Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:59.366Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:18.765Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:13.300Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:19.547Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:05.459Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:33.968Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:23.707Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:44.586Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:37.917Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:30:55.648Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:49.474Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:21.548Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:21.299Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:28.807Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:35.765Z","9.0.0-canary.977585650.0":"2020-12-02T14:41:55.481Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:36.784Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:33.454Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:24.629Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:21.745Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:35.583Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:29.348Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:09.452Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:25.923Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:42.022Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:52.736Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:28:59.666Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:54.624Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:26.629Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:27.251Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:13.230Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:16.122Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:10.449Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:29.592Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:15.913Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:10:54.065Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:43.008Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:12.991Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:44:35.521Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:01.983Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:18.899Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:11.941Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:47.694Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:27.983Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:25.582Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:51.106Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:04:56.464Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:35.027Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:23.888Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:47:55.501Z","9.0.0":"2020-12-29T19:45:56.647Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:04.196Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:43.121Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:23.820Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:12.346Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:38.682Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:09.418Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:25.052Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:08.312Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:55.476Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:33.043Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:05.496Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:17.023Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:07.600Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:44.147Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:23.306Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:34.996Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:09.428Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:16.419Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:12.290Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:54:57.439Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:52.660Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:15.841Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:00.061Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:25.856Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:40.321Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:00.896Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:49.895Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:41.081Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:20.846Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:34.703Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:10.014Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:51:59.569Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:20.414Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:24.502Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:35.877Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:09:50.436Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:46.428Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:04.009Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:32:39.151Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:41.712Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:51.657Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:26:58.881Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:47.535Z","10.0.0-canary.994873795.0":"2021-01-27T14:50:56.103Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:01:59.944Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:05.610Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:29.197Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:14.606Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:23.670Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:13.072Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:02.140Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:42:53.854Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:19.990Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:45.472Z","10.0.0-canary.05f249666.0":"2021-02-04T17:49:58.827Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:42:52.746Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:28.717Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:25.139Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:34.544Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:05.392Z","10.0.0":"2021-02-05T16:18:35.317Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:49.238Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:26.116Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:38.259Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:24.025Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:33:53.208Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:16:57.442Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:24.466Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:05.121Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:23.940Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:56.729Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:33.914Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:40.549Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:40.267Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:07.376Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:45.451Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:38.115Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:15:54.128Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:35.141Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:24:51.586Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:00.766Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:27.367Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:34:58.124Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:00.595Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:21.951Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:22:58.092Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:15.893Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:19.139Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:38.575Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:12:58.383Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:17.136Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:24.817Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:22.534Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:19.588Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:47.544Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:23.821Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:31.476Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:34.289Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:33:56.749Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:43.868Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:22.389Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:17.090Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:29.637Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:14.233Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:52.166Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:02.212Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:41.727Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:02.280Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:36.744Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:28.209Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:23:56.921Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:41:57.677Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:46.336Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:44.674Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:09.587Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:04.402Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:35.740Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:49.830Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:15.029Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:00.841Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:56:53.315Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:37.538Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:41.638Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:20.906Z","11.0.0-canary.81911b707.0":"2021-03-11T18:22:57.338Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:28.414Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:04.449Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:22.031Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:45.500Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:14.571Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:43:52.005Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:35.604Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:43.666Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:28.495Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:40.659Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:20.884Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:11:55.860Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:05.701Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:40:56.150Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:19.070Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:03.429Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:39.270Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:57.382Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:54.319Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:31.577Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:23.716Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:50:40.726Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:17.909Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:11:55.959Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:22.361Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:31.724Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:39.094Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:15.988Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:16.789Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:23.076Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:41.819Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:10.069Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:07.619Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:15:51.078Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:08.558Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:55:33.099Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:56:57.800Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:18.863Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:25.838Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:18.770Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:20.475Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:52.827Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:47.927Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:26.257Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:46:54.584Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:35.299Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:51.420Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:16.885Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:04.752Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:24.392Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:32.155Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:29.877Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:45.955Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:18.828Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:04.530Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:48.077Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:12.288Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:14.342Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:15.623Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:07.024Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:44.055Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:51.517Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:04.763Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:51.939Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:04.971Z","11.0.0":"2021-04-15T22:57:59.607Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:36.982Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:33.602Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:02.954Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:34.477Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:13.776Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:02.389Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:34.221Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:11.156Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:20.837Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:08.460Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:12:54.320Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:52.546Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:10.636Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:22.531Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:35.290Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:24.164Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:02.987Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:26.370Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:47.875Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:22.535Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:41.780Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:38.024Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:18.040Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:30.427Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:00.345Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:46.148Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:38.040Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:18.933Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:47.067Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:28.672Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:03.686Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:12.727Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:19.206Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:34.877Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:53.793Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:36.745Z","12.0.0-canary.de997644b.0":"2021-05-04T17:27:58.645Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:46.378Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:15.561Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:05.034Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:29.967Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:11.953Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:37.625Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:19.854Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:51.893Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:02.720Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:25.224Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:32.537Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:04.688Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:26:56.321Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:56.395Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:42.910Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:13.429Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:46.280Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:16.487Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:03.600Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:20.591Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:43.884Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:40.041Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:18.615Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:05.313Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:35.200Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:41.396Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:37.115Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:22.275Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:13.505Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:04.822Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:23.262Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:36.814Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:07.096Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:29.611Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:45.228Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:58.198Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:29.211Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:28.033Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:40.455Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:57.816Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:06.733Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:39.088Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:57.590Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:22.829Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:35.360Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:14.855Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:13.032Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:39.479Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:24.994Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:14.087Z","12.0.0-canary.464a00286.0":"2021-06-03T14:45:42.528Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:04.185Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:08.726Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:57.340Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:38.118Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:06.898Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:00.981Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:36.871Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:49.815Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:06:54.615Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:47.054Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:37.176Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:37.342Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:20.895Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:38:57.154Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:53.488Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:45.558Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:03.840Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:21.637Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:50:30.661Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:53.120Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:00.568Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:12.551Z","12.0.0-canary.940550232.0":"2021-06-17T19:39:59.572Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:16.603Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:29.639Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:14.520Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:36:41.912Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:11:52.337Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:23.682Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:13.173Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:41.596Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:17.872Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:41.031Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:19.879Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:19.398Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:02.596Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:49.879Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:03.765Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:25.841Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:08.246Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:16.600Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:04.335Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:10.103Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:05.414Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:03.006Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:46.467Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:17.931Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:11.949Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:47:54.056Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:07:58.192Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:44.992Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:09.121Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:06.595Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:46.247Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:56.237Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:59.348Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:06.592Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:50.946Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:36.004Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:41.519Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:19.118Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:22.727Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:47.919Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:40.917Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:15.269Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:18.076Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:13.885Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:04.272Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:37.896Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:45.703Z","12.0.0":"2021-07-27T19:49:42.240Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:16.014Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:02.401Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:48.270Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:03.060Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:19.473Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:57.779Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:15.810Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:13.358Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:51.091Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:38.526Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:12.183Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:08.643Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:17:58.711Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:46.903Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:45.313Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:24.513Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:10.589Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:18.487Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:30.763Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:40.980Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:31.358Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:40.196Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:18.619Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:16.877Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:22.521Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:00.118Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:42.859Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:14.442Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:09.108Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:29.910Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:06.375Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:30.817Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:31.893Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:11.451Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:40.344Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:24.279Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:09.230Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:43.049Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:29.287Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:10.402Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:47.872Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:34.465Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:05.211Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:16.356Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:43.422Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:27.736Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:57.572Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:49.442Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:08:54.947Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:15.976Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:23.896Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:22.340Z","13.0.0-canary.611db508e.0":"2021-09-02T03:14:55.081Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:46.438Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:49.795Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:07.450Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:30:45.117Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:21.444Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:32:51.884Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:36.174Z","13.0.0-canary.72464476c.0":"2021-09-07T15:34:57.505Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:15.472Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:43:55.245Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:13.062Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:00.356Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:04.925Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:06.176Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:33.319Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:25.730Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:21.526Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:01.809Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:02.027Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:00.488Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:59:45.891Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:03.431Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:13.652Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:43.068Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:22.860Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:58.204Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:05.058Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:17.758Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:18.452Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:52.898Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:18.776Z","13.0.0":"2021-09-24T19:46:16.096Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:00.515Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:24.587Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:38.131Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:26.607Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:18.180Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:41.785Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:56.453Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:19.952Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:31.168Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:04.115Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:14.971Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:09.747Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:44.108Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:15.496Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:57.670Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:26.837Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:19.258Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:32.247Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:14.232Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:10.863Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:58:53.980Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:24:56.466Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:51.279Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:11.885Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:15.522Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:42.025Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:34.902Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:10.082Z","14.0.0-canary.554c71829.0":"2021-11-16T16:19:58.109Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:24:46.537Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:59:50.133Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:34.263Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:39:54.543Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:47.895Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:08.569Z","14.0.0-canary.93134d453.0":"2021-11-23T15:39:53.282Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:32:53.644Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:37:59.974Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:16.664Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:39.691Z","14.0.0-canary.17a072535.0":"2021-12-02T18:05:52.945Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:03.036Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:15.872Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:00.789Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:29:53.276Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:55:44.989Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:27.867Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:37.417Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:20.100Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:06.190Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:30.277Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:14:52.694Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:01:55.926Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:54:56.717Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:41.232Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:20.562Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:00.220Z","14.0.0-canary.390220e42.0":"2022-01-17T16:46:50.639Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:24.220Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:13.858Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:01.663Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:01.177Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:36.054Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:49.541Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:43.159Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:02.615Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:31.441Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:27.384Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:57:51.492Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:25.441Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:21.959Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:59:59.466Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:10.376Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:08.583Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:37.674Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:16:52.393Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:39.243Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:13.965Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:40.085Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:40.573Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:55.262Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:12.389Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:51.664Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:06.346Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:05.742Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:33.230Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:04.916Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:20.829Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:45.424Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:44.472Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:30.379Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:34.051Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:15.497Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:02.554Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:25.453Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:05.835Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:25.289Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:45.609Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:26.337Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:43.872Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:42.541Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:23:53.560Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:12.922Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:12.132Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:48.411Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:23.774Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:45:53.185Z","14.0.0":"2022-04-28T16:56:27.629Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:33.214Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:10.375Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:01.188Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:31.776Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:52.198Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:23.670Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:51.193Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:18:58.899Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:46.385Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:22.996Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:00.679Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:31.845Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:13.743Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:17.873Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:21.731Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:19.025Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:36.505Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:37.069Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:03.834Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:15.881Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:53.490Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:02.737Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:33.442Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:53.651Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:28.851Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:55.623Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:35.141Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:31.529Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:09.195Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:55.890Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:08.326Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:48.773Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:34.208Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:34.422Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:26.677Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:28.199Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:46.763Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:38.155Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:50.458Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:39.540Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:34.971Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:33.894Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:40.434Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:13.214Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:19.701Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:11.374Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:18.733Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:36.478Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:36.877Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:43.036Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:04.959Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:05.161Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:00.718Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:11.413Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:13.302Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:10.316Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:23.337Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:06.255Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:23.386Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:45.062Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:08.681Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:04.093Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:27.838Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:43.836Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:13.377Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:07.195Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:21.922Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:22.743Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:26.124Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:39.160Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:17.322Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:10.736Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:20:53.152Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:27.952Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:08:46.412Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:54.012Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:09.205Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:30.986Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:44.725Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:57.261Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:12.650Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:34.064Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:43.087Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:24.338Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:03.115Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:17.219Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:06.625Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:32.057Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:08.807Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:25.120Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:29.691Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:40.123Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:02.613Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:10.241Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:14.614Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:56.920Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:38.057Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:09.708Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:10.431Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:25.448Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:22.650Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:42.221Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:54.669Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:29.088Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:53.050Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:35.065Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:12.963Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:51.597Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:16.959Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:38.568Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:48.200Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:25.089Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:44.989Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:38.869Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:41.913Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:01.454Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:41.746Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:28.976Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:27.704Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:10.079Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:01.330Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:06.105Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:28.553Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:26.318Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:21.114Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:30:52.121Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:33.829Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:46.766Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:46.173Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:43.563Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:11.003Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:02.156Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:10.206Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:29.789Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:22.919Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:21.796Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:17.743Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:22.147Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:53.639Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:42.662Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:04.936Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:52.153Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:15.866Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:52.259Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:33.768Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:09.802Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:23.686Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:07.939Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:49.384Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:07.828Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:33.658Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:52.275Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:20.358Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:40.908Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:27.286Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:27.250Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:09.346Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:35.859Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:52.039Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:53.582Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:46.788Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:20.409Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:46.579Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:33.513Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:07.713Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:14.069Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:26.511Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:21.599Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:23.859Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:00.653Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:28.661Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:38.450Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:08.476Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:26.296Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:33.662Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:06.890Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:02.720Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:47.284Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:22.051Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:00:57.853Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:16.059Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:45.634Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:46.218Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:03.910Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:06.251Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:06.493Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:42.946Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:56.197Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:07.248Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:06.911Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:49.898Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:37.806Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:39.331Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:33.439Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:48.759Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:32.620Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:02.132Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:24.684Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:16.797Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:26:58.001Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:00.988Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:53.528Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:18.969Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:21.444Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:41.172Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:44.392Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:15.715Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:46:31.648Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:36.091Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:30.503Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:13.761Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:17.741Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:20.406Z","15.0.0-canary.34767110.0":"2022-12-14T17:19:42.215Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:25:58.972Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:01.348Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:32.793Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:15.741Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:34.277Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:39.710Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:33.263Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:19.000Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:05.709Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:39.941Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:24.478Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:20.903Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:08.865Z","15.0.0-canary.af490a848.0":"2023-01-03T15:57:58.024Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:15.198Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:36.658Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:46.302Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:12.142Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:32.452Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:12.061Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:18.912Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:48.562Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:21:58.242Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:33.224Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:29.939Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:23.839Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:30.378Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:00.765Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:00.835Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:17:58.546Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:46.071Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:41.542Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:12.357Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:08.697Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:44.179Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:00.821Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:43.758Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:36.959Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:12.663Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:11.535Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:15.309Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:00.019Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:29.371Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:34.936Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:59.129Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:38.291Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:50.128Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:34.152Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:43.004Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:19.967Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:54.653Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:13.494Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:55.356Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:47.393Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:27.748Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:15.231Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:10.067Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:33.947Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:19:48.235Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:45.591Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:06:35.070Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:10.702Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:58.012Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:51.835Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:11.975Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:18.826Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:44.863Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:02.916Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:01.473Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:35.848Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:22.659Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:38.599Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:04.870Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:14.890Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:15.134Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:44.792Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:22.854Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:20.874Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:35.871Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:11.043Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:32.867Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:54.040Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:07.916Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:34.958Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:49.069Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:21.770Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:46.696Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:59.523Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:46.429Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:40.573Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:09.446Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:29.842Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:20.252Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:01.125Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:41.686Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:45.110Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:05.935Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:06.301Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:44.177Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:34.506Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:21.065Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:46.092Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:43.697Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:24.991Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:57.228Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:02.133Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:27.216Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:10.790Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:05.139Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:46.060Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:36.558Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:36.621Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:47.700Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:31.767Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:20.269Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:03.019Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:15.106Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:21:49.899Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:56.121Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:41.873Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:33:54.004Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:07.891Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:42.492Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:36.969Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:35.159Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:31.452Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:26.341Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:46.962Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:14.408Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:19.135Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:19.237Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:05.735Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:58.330Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:32.382Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:42.358Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:18.148Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:34.533Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:20.673Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:33.069Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:07.446Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:31.587Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:16:59.876Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:01.688Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:12.215Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:08.784Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:01.799Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:21:20.394Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:38.192Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:16.690Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:40.120Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:08.325Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:04.352Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:25.346Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:23.922Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:15.029Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:14.366Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:21.547Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:22.880Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:48.745Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:26.628Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:39.284Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:01.498Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:41.727Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:10.528Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:34.714Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:40.739Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:04.433Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:35.692Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:05.813Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:26.979Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:58.654Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:31.649Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:52.371Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:31.363Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:00.866Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:40:49.035Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:59:54.760Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:49.845Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:54.588Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:06.917Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:55:37.882Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:41.353Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:09.007Z"},"readmeFilename":"","homepage":"https://github.com/material-components/material-components-web#readme"}